Мобильный UX: как разработать удобный сайт онлайн-медиа. Часть 1
Article title
04 марта 2019

Мобильный UX: как разработать удобный сайт онлайн-медиа. Часть 1
~15 минут на чтение

В начале года Google опубликовал результаты своих продолжительных исследований, направленных на анализ лучших UX-практик сайтов. Специалисты компании рассмотрели ресурсы разных тематических групп. Мы в Uplab к обстоятельным исследованиям относимся с особым уважением, поэтому не просто изучили тезисы зарубежных коллег, но и узнали, как они воплощаются на практике — подобрали примеры образцовых реализаций.

Алексей Андреев
аналитик-проектировщик
Сегодня в блоге — адаптированный перевод экспертных рекомендаций по мобильному UX для онлайн-медиа, новостных сайтов и информационных порталов. Получился объемный материал, поэтому мы решили разделить статью на 2 части. В первой — проанализируем рекомендации по проектированию:
  • Главной страницы
  • Навигации и меню
  • Функции поиска по сайту
В нашей подборке — примеры разных контентных сайтов. Это объяснимо — данные UX-правила от Google одинаково применимы и к блогам компаний, и к онлайн-изданиям, и к брендовым медиапорталам. Читайте, обдумывайте и улучшайте UX своего сайта!

Рекомендации по проектированию

Для каждой страницы / раздела сайта Google составил сводную таблицу, в которой отразил степень важности рекомендаций, степень сложности их реализации, а также ключевые метрики, на которые влияет та или иная рекомендация.

Главная страница

Перед вами — рекомендации по улучшению UX главной страницы сайта на мобильной версии. Важно отметить, что эффективность каждой из них проверена A / B-тестами.
Рассмотрим каждую рекомендацию по порядку. Для наглядности все тезисы снабдили примерами.
Выделите одну главную или актуальную новость, избавьтесь от слайдеров
Рекомендация основана на выводах исследований Conversion XL, ClickZ, Widerfunnel и  NN Group. Google призывает обратить внимание на следующие данные:
Слайдеры для сайтов с большим количеством контента
Разместите подборку актуальных новостей под главной новостью
После главной новости логично показывать небольшую сводку других актуальных новостей, отсортированных по дате публикации. Пользователь сможет быстро сориентироваться на странице и найти то, что ему потенциально может быть интересно.
Выбор материала и формат представления имеют наибольшее значение
Согласно исследованиям MeasuringU, формат представления новостей и то, какие материалы выбирают для представления на главной странице (т.е. сам контент), — основные факторы, которые влияют на опыт пользователей при изучении онлайн-новостей. Приводим статистику:
google trends
Сделайте список новостей легким для сканирования взглядом
Есть 2 популярных способа размещения контента на странице: сеткой (плиткой) и списком.
google trends
Размещение материалов сеткой больше подходит для визуального контента. Такой вариант позволяет управлять вниманием пользователей: распределяет его по блокам более равномерно.

Согласно исследованиям Fact-finder и Nielsen Norman Group, списки лучше использовать для новостей. В этом случае материалы ранжируются по важности: чем выше материал, тем он актуальнее.
Сгруппируйте новости по разделам / категориям
На главную страницу обычно выводят материалы из разных разделов, поэтому здесь особенно важно соблюдать смысловую упорядоченность.
Разместите дополнительные CTA-элементы ниже первого экрана
CTA — элементы призыва читателя к действию (например, подписаться на бесплатную рассылку, оформить платную подписку, вступить в группы в соцсетях, скачать мобильное приложение и т. п.). Google рекомендует размещать их ниже первого экрана, чтобы пользователь мог сначала сообразить, где он находится, что может здесь получить и нужно ли ему это.
Аккуратно оформленный баннер
с предложением подписаться
на сообщество в «ВКонтакте».
Предложение подписаться на push-уведомления
появляется через какое-то время
после перехода на страницу.
Сделайте объявления ненавязчивыми
Навязчивые объявления, которые всячески донимают пользователя, и хороший UX — понятия несовместимые. К сожалению, большинство просмотренных нами сайтов не обходятся без таких «агрессивных» сообщений. Причем они «приветствуют» пользователя практически сразу при открытии страницы — могут занимать пол-экрана, а иногда и полностью перекрывают контент.
Хорошие примеры
Рекламный баннер размещен на втором экране.

Объявления представлены ниже первого экрана
и оформлены аккуратно.
Плохие примеры
Если вы не хотите, чтобы пользователи сразу уходили с вашего сайта, избегайте таких решений:
Все накладывается друг на друга: модальное окно с запросом на отправку уведомлений, слоем ниже — баннер про телеграм-канал, снизу — уведомление о сборе куки, сверху — предложение
скачать приложение.
Неожиданно появляющиеся баннеры, которые полностью перекрывают контент (это частая ошибка многих новостных сайтов).


Огромные вертикальные баннеры
в верхней части экрана,
которые сдвигают контент вниз.


Меню и навигация

Рассмотрим рекомендации по улучшению меню и навигации на сайте онлайн-медиа.
Cделайте шапку высотой не более ⅕ экрана
На мобильных устройствах обычно при прокрутке шапка фиксируется в верхней части экрана, поэтому очень важно, чтобы она занимала как можно меньше вертикального пространства.
Показывайте ссылки на основные разделы в шапке
В дизайне мобильных приложений сегодня принято отказываться от привычного бургер-меню и проектировать навигацию с помощью вкладок и нижней панели. При дизайне мобильных сайтов можно частично позаимствовать это решение и сразу показать ссылки на ключевые разделы.
Сделайте легкодоступными ссылки для входа / регистрации
На новостных сайтах функция входа обычно реализуется для подписчиков. Чтобы удержать их, необходимо создать комфортные условия на сайте — сделать интерфейс максимально удобным.

На некоторых сайтах настроена функция персонализации выдачи контента. Без авторизации пользователь не сможет получить персонализированную ленту.

Переход на страницу авторизации желательно сделать в одно действие:
Добавьте дополнительное меню, свернутое по умолчанию
Добавить бургер-меню в мобильную версию — очевидное UX-решение. Однако есть здесь одна особенность — ссылки на основные разделы лучше вынести в шапку (как это было сказано выше), а в бургер-меню разместить остальные, менее важные ссылки.
Сгруппируйте ссылки в дополнительном меню по разделам / категориям
Разделов на сайте может быть много, поэтому важно группировать ссылки на них по смыслу. Это позволит избежать ситуации, когда пользователю приходится каждый раз сканировать большой список равнозначных ссылок.
Добавьте на главную страницу ссылки на ключевые разделы для быстрого перехода
Пользователи не всегда обращаются к меню — сразу начинают прокручивать главную страницу. Нужно предусмотреть, чтобы на сайте была возможность попасть в ключевые разделы прямо с главной.

Поиск

Это третий блок рекомендаций в рамках первой части статьи по мобильному UX для онлайн-медиа. Итак, о чем важно знать при проектировании строки поиска:
Сделайте поиск легкодоступным и заметным
Поиск — важная функция на мобильной версии сайта. Его необходимо разместить на видном месте. Запомните простое правило: чем больше контента на сайте, тем более заметным должен быть поиск.

Когда поиск скрыт внутри меню или за иконкой, он становится менее заметным и увеличивает «стоимость» взаимодействия (пользователям приходится совершать лишние действия, чтобы добраться до него). Если поле поиска размещено в непривычном месте, пользователям так же приходится прилагать дополнительные усилия, чтобы найти его.

Согласно исследованиям Dawn Shaikh and Keisi Lenz и Nielsen Norman Group (F-Shaped pattern), пользователи в первую очередь ищут поле поиска в верхнем правом углу страницы. Однако если они его там не находят, то начинают сканировать верхнюю часть страницы слева направо (F-паттерн).
Добавьте автозаполнение
Специалисты Google рекомендуют показывать значения, ранее введенные пользователем:
Предлагайте варианты для поиска
Поиск нужно спроектировать так, чтобы пользователь мог быстро найти желаемое на сайте, совершал как можно меньше действий на пути к получению результата. С этим могут помочь списки популярных поисковых запросов или предложение вариантов поиска при вводе:
Предлагаются популярные поисковые
запросы на текущую дату.
При начале ввода показываются
поисковые подсказки.
Показывайте количество найденных результатов
Количество найденных результатов поможет пользователю понять, нужно ли ему уточнять поисковый запрос или нет. Если результатов будет очень много, то посетителю будет проще добавить уточняющие слова, чем искать вариант нужный в списке.
Проверяйте правописание, давайте рекомендации по исправлению ошибок
Система может распознать, что пользователь ошибся при вводе, и показать ссылку на исправленный вариант, либо автоматически выдать результаты по исправленному запросу.
Всегда показывайте какой-нибудь результат поиска
Запомните: пользователю нужно предлагать совершить какое-нибудь полезное (для него и для вас) действие, даже если по его запросу ничего не найдено. Например, перейти в разделы сайта или посмотреть публикации:
Онлайн-медиа — одни из самых посещаемых интернет-ресурсов, поэтому к их проектированию нужно подходить особенно предусмотрительно: заранее позаботиться о том, чтобы все функции сайта были доступны в один клик и удовлетворяли пользователей.

Во второй части статьи, посвященной мобильному UX контентных сайтов, мы рассмотрим рекомендации по проектированию разделов, внутренних страниц новости / статьи, а также страниц регистрации, авторизации и подписки. Следите за обновлениями!

Поделитесь материалом с друзьями и коллегами

421
Оцените статью
()

Комментарии к статье

Другие статьи в блоге
Статьи

Как интегрировать «Битрикс24» и «1С»

47
17 мая 2019
Статьи

Образцовые лендинги. Наш топ-50

46256
16 мая 2019
Статьи ~ 20 минут на чтение

Как мы автоматизировали согласование заявок сотрудников для российского банка

130
30 апреля 2019
Статьи

Как в Uplab разрабатывают сайты. Этап аналитики и проектирования

185
29 апреля 2019
Статьи

«Битрикс24.Дубай» — обзор обновления

243
11 апреля 2019
Статьи

Формируем лояльность к бренду с помощью контент-маркетинга

315
08 апреля 2019
Популярное за месяц

«Битрикс24»: облако или коробка?

313
28 марта 2019
Статьи

Мобильный UX: как разработать удобный сайт онлайн-медиа. Часть 2

224
27 марта 2019
Статьи

5 причин начать пользоваться роботами «Битрикс24»

456
22 марта 2019
Статьи

Как оценить эффективность дизайн-системы? Пример расчета ROI

151
21 марта 2019
+7 499 653 78 83