Тендеры и лиды
Информация
Высокая конверсия и хорошая посещаемость сайта онлайн-медиа — новостного портала, блога или раздела с экспертными статьями — сильно зависит от его мобильной версии: исследования подтверждают, что именно со смартфона люди чаще всего читают новости и статьи. Поэтому вкладываться в интерфейс и навигацию «мобилки» действительно выгодно, как на этапе разработки, так и при редизайне. В этой статье мы собрали чек-лист от дизайнеров интерфейса: базовый минимум для мобильной версии сайта цифрового медиа. Список поможет не упустить важные пункты в техзадании разработчику или понять, как улучшить метрики уже работающего сайта.
Главная — точка входа для большинства читателей. На мобильном экране у нее секунды, чтобы зацепить внимание и направить к нужному контенту. Вот на что стоит обратить внимание при проектировании.
Когда на первом экране четко выделен один ключевой материал, страница считывается быстрее. Рекомендуем визуально отделить главную публикацию от остальных, а ниже дать компактную ленту свежих материалов, упорядоченных по дате. Так читатель мгновенно понимает, что сейчас самое актуальное, и может пролистать дальше, если тема не зацепила.
На главной странице мобильной версии цифрового медиа обычно соседствуют публикации на разные темы. Чтобы лента не сливалась в одну массу, разграничьте материалы цветовыми метками, тегами или рубриками — читателю будет проще выхватить нужную тему взглядом.
Читателю важно быстро пробежать страницу глазами и зацепиться за интересный заголовок. При этом для визуального и текстового контента работают разные схемы размещения.
Два основных варианта — плитка (сетка) и вертикальный список. Плитка лучше подходит для фото- и видеоконтента: внимание распределяется по блокам равномернее, и пользователь охватывает больше материалов одним взглядом. Список удобнее для текстовых новостей, где важна хронология: верхняя позиция = самая свежая публикация.
CTA-элементы, такие как кнопки подписки, баннеры рассылки, приглашения в соцсети, ссылки на мобильное приложение, лучше располагать ниже первого экрана. Дайте читателю сначала осмотреться: понять, куда он попал, оценить контент и решить, стоит ли оставаться. CTA, появляющийся раньше, воспринимается как навязчивая реклама.
На мобильном экране навигация конкурирует с контентом за место. Задача — дать читателю быстрый доступ к разделам, не отнимая пространство у статей.
Фиксированная шапка на мобильном устройстве присутствует в поле зрения постоянно. Если она съедает больше пятой части экрана, полезного контента в видимой области остается слишком мало, а ощущение «тесноты» растет. Держите хедер компактным: логотип, строка поиска и одна-две ключевые ссылки — этого достаточно.
Бургер-меню — стандартное решение для мобильной навигации, но прятать туда все ссылки не стоит. Самые востребованные разделы лучше вынести в видимую часть шапки или в горизонтальную полоску вкладок под ней — по аналогии с мобильными приложениями. В бургер отправляйте то, что нужно реже: «О проекте», «Контакты», «Редакция».
Многие читатели вообще не открывают бургер — они сразу скроллят ленту. Для них полезны быстрые ссылки-якоря: «Политика», «Технологии», «Спорт» — прямо под шапкой, доступные без лишнего тапа.
Когда разделов много, плоский список ссылок становится нечитаемым. Объедините их в смысловые группы: «Новости → Политика / Экономика / Общество», «Мнения → Колонки / Интервью». Это снижает когнитивную нагрузку — читатель сканирует три-четыре группы вместо двадцати отдельных пунктов.
Чем больше материалов на сайте, тем чаще читатели используют поиск вместо навигации по рубрикам. Вот что поможет им находить нужное быстрее.
Если поиск спрятан внутри бургер-меню или замаскирован иконкой без подписи, часть аудитории его просто не найдет. Каждое дополнительное действие на пути к поисковой строке — это «стоимость взаимодействия», и на мобильном устройстве она ощущается острее, чем на десктопе.
Исследования Dawn Shaikh, Keisi Lenz и Nielsen Norman Group показывают, что пользователи сначала ищут поле ввода в верхнем правом углу экрана. Если его там нет, взгляд смещается по F-паттерну — слева направо вдоль верхней кромки страницы. Размещайте поиск именно в этих зонах.
Хороший поиск не заставляет пользователя угадывать формулировку. Добавьте автоподстановку ранее введенных запросов и подсказки с популярными темами — это сокращает число символов, которые нужно набрать на мобильной клавиатуре.
Показывайте счетчик результатов: он помогает понять, стоит ли уточнить запрос. И предусмотрите автоисправление опечаток, чтобы система предлагала ссылку на скорректированный вариант либо сразу делала выдачу по исправленному запросу.
Нулевой результат — тупик, из которого читатель обычно уходит с сайта. Даже если точного совпадения нет, предложите альтернативу: ссылки на основные рубрики, подборку свежих публикаций или похожие запросы. Так вы сохраните пользователя в рамках сайта.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13836 тендеров
проведено за восемь лет работы нашего сайта.
Рубрикатор помогает аудитории «нырнуть» в интересную тему. Чтобы он работал, а не просто существовал, нужно продумать два момента.
Поместите наверх самую свежую, обсуждаемую или практически ценную публикацию — с крупным заголовком и привлекательной иллюстрацией. Такой «якорный» материал решает две задачи: удерживает внимание и мотивирует прокрутить страницу дальше, чтобы посмотреть, что еще есть в рубрике.
Варианты навигации между категориями: горизонтальный свайп, выпадающий список или их комбинация. Хорошо работает паттерн, при котором верхний уровень переключается свайпом, а подкатегории раскрываются списком. Такой подход увеличивает глубину просмотра и кликабельность внутренних ссылок.
Контентная часть страницы — то, ради чего читатель пришел. Времени он проводит здесь больше, чем в зоне навигации, поэтому верстка статьи должна работать на удобство чтения и «сканирования» взглядом.
Шеринг в мессенджеры и соцсети — бесплатный канал дистрибуции для издания. А для читателя — удобный способ сохранения. Разместите компактную кнопку «Поделиться» в начале или в конце статьи, а еще лучше — сделайте ее плавающей, чтобы она оставалась в поле зрения при прокрутке. Главное условие: кнопка должна быть заметна, но не перекрывать текст.
Внутренние ссылки по теме — в теле статьи или в блоке «Читайте также» внизу — продлевают сессию и помогают читателю погрузиться в тему глубже. А функция закладок позволяет сохранить материал на потом: пользователь, который торопится, не потеряет статью и вернется к ней, когда будет время. Предусмотрите также быстрое копирование прямой ссылки на публикацию, для вставки в заметки, письмо или чат.
Метка «5 мин» рядом с заголовком снижает порог входа: читатель понимает, что материал не потребует получаса, и охотнее открывает его. Но оценка должна быть честной — если статья на самом деле читается 15 минут, занижать цифру ради кликов не стоит.
Для длинных форматов — расследований, лонгридов, обзоров — можно показывать сначала сокращенную версию со ссылкой на полный текст. Читатель сам решит, готов ли он к объемному материалу.
Регистрация на сайте — способ конвертировать случайного читателя вашего медиа в подписчика. Чем короче путь до авторизации, тем выше конверсия.
Авторизация через Яндекс ID, аккаунт Google или другой универсальный профиль экономит читателю время: не нужно заполнять форму, придумывать пароль и подтверждать почту. Один тап — и пользователь внутри.
При этом вход через соцсети сегодня — скорее антитренд. Причины: ужесточение законодательства о персональных данных, вопросы безопасности и коммерческие ограничения платформ. В российских проектах доступность конкретного OAuth-провайдера, его политику обработки данных и соответствие требованиям 152-ФЗ нужно проверять отдельно.
Когда ошибка подсвечивается сразу при вводе, а не после нажатия «Отправить», пользователь не теряет контекст и не раздражается. Он видит, что email введен без точки или телефон — без цифры, и тут же исправляет. Это особенно критично на мобильном устройстве, где возврат к полю выше — лишние тапы и скролл.
Каждый пункт из этого чек-листа стоит проверить на собственных данных. Ниже — последовательность, которая превращает рекомендацию в обоснованное решение.
Обнаружить барьер в сценарии. Используйте тепловые карты и записи сессий, чтобы найти конкретный шаг, на котором аудитория «отваливается». Примеры: читатели закрывают форму подписки на третьем поле, не прокручивают страницу ниже первого экрана, игнорируют блок с похожими материалами.
Привязать барьер к метрике. Глубина скролла, CTR внутренних ссылок, Конверсия каждого шага формы — динамика каждой из этих метрик говорит о конкретных проблемах и эффективности их решения.
Выбрать метод проверки. Если непонятна причина поведения — нужен качественный метод: интервью, юзабилити-тест с записью экрана. Если причина ясна, а масштаб нет — количественный: воронка в аналитике или A/B-тест.
Оценить масштаб потерь. Посчитайте, сколько пользователей проходит через проблемный шаг и какая доля на нем теряется. Если через этот этап проходит 2% аудитории, починка не даст ощутимого эффекта — ресурсы лучше направить на более «проходной» участок воронки.
Приоритезировать по соотношению эффекта и стоимости. При сопоставимом влиянии на метрику дешевое изменение идет в работу раньше дорогого.
Решения, основанные на данных, — главный принцип UX-аналитики. Важно проверять гипотезы и опираться на метрики, чтобы на выходе получить план изменений с понятным влиянием на показатели, важные для бизнеса.
