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

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

В интернете можно встретить множество рекомендаций по проектированию. Однако далеко не все из них могут быть применимы к сайтам конкретного профиля. Недавно мы рассмотрели первую часть руководства Google по мобильному UX для информационных ресурсов, подкрепив тезисы зарубежных специалистов примерами ярких практик, подобранных нами.

Во второй части материала проанализируем особенности проектирования:


Ирина Гурьева
UX-специалист
  • Страницы категории
  • Новости / статьи
  • Форм регистрации, авторизации и подписки
В нашей подборке — примеры разных контентных сайтов. Данные UX-правила одинаково применимы и к блогам компаний, и к онлайн-изданиям, и к брендовым медиапорталам. Читайте, обдумывайте и улучшайте UX своего сайта!

Рекомендации по улучшению пользовательского опыта

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

Эффективность всех рекомендаций проверена A/B-тестами.

Категория (рубрика)

Рассмотрим каждую рекомендацию отдельно и подкрепим примерами.
Размещайте название категории вверху страницы
Сразу сориентируйте пользователя — он должен понимать, на какой странице сайта находится. Добавьте краткое описание категории — это поможет читателю определиться, соответствует ли контент на странице его ожиданиям.

Важное дополнение: предложите пользователям подписаться на категорию. Это позволит вам удерживать их внимание контентом, который им потенциально интересен, и увеличивать число постоянных читателей.
Выделяйте главную новость категории на странице
Поставьте на первый экран самую актуальную, обсуждаемую или очень полезную новость: сформулируйте убедительный заголовок и сопроводите текст привлекательными изображениями. Так вы сразу сможете заинтересовать читателя и невольно вызвать у него желание ознакомиться с другими материалами на странице.
Продумайте удобство перемещения пользователей между категориями и подкатегориями
Может быть несколько вариантов навигации: выпадающий список, свайп или совмещение обоих способов и установка пользовательского паттерна. Например, можно сделать перемещение между категориями свайпом, а между подкатегориями — списком.

Внедрение данной рекомендации позволит увеличить количество просмотренных страниц и повысить коэффициент кликабельности.
Персонализируйте контент
Переизбыток контента привел к тому, что пользователям все меньше времени хочется тратить на поиск нужной информации. Издания принимают это во внимание и внедряют функционал, который позволяет предлагать пользователю потенциально интересные ему материалы, персонализировать контент. Правда, таких ресурсов пока немного.

Не упускайте возможность существенно расширить аудиторию и полюбиться ей — на основе сегментации пользователей и анализа их опыта настройте персонализацию контента. В этом помогут специальные сервисы и машинное обучение, а также более простой метод — возможность выбора материалов из списка по конкретной теме. Экспериментируйте — например, «Интерфакс» или Reuters предлагают читателю выбрать интересные ему темы и затем транслируют на странице только контент из выбранных рубрик.

Новость / статья

Согласно исследованию Nielsen Norman Group, посвященному анализу поведения посетителей сайта, пользователи больше времени проводят на контентной части страницы, а не в области навигации. Поэтому к подаче всех элементов контента нужно подходить особенно ответственно и размещать текст так, чтобы его можно было легко «сканировать» взглядом.
google trends
Поведение пользователей на внутренних страницах
Рассмотрим рекомендации по проектированию страницы новости или статьи на сайте онлайн-медиа.
Добавьте функционал «Поделиться в социальных сетях»
Предложение поделиться в социальных сетях уместно при любом материале. Если пользователю понравится контент на странице, он с удовольствием захочет рассказать о нем друзьям и стать вашим подписчиком.

Разместите кнопку «Поделиться» в начале статьи, в конце или пусть она сопровождает читателя при скролле. Кнопка должна быть на виду и при этом выглядеть компактно. Например, на vc.ru призыв реализован в виде плавающей кнопки, при клике на которую появляются доступные для шеринга социальные сети, а на сайте Inside Intercom — внизу экрана, что позволяет пользователю поделиться статьей в любой момент, не завершая чтение.
Добавьте ссылки на материалы по теме
Ссылки на материалы по теме, расставленные в тексте статьи или размещенные в конце, — приятное дополнение для читателя. Так вы продемонстрируете информационную наполненность вашего ресурса и поможете читателю углубиться в тему. Если ваш контент окажется полезным и эксклюзивным, вас запомнят и к вам вернутся.

Ссылки можно представить в виде списка, плитки или слайдера.
Сделайте ссылки заметными
Удивительно, но на многих сайтах до сих пор забывают отображать кликабельность некоторых фрагментов текста. Зачастую читатель даже не догадывается, что в тексте есть ссылки, что он имеет возможность узнать о чем-то больше.

Помогите пользователю — используйте классические подчеркивание и выделение текста. При этом определитесь, как вы будете отображать ссылки, и не забывайте о правилах единообразия — используйте этот подход во всех материалах на сайте.
Внедрите технологию AMP для ускорения загрузки
Accelerated Mobile Pages (AMP) — технология ускоренных мобильных страниц с открытым исходным кодом. Позволяет при низкой скорости сети быстро загрузить контент. АМР-страницы сохраняются в кэше Google и при медленном соединении загружаются на устройство пользователя прямо оттуда. Элементы АМР-страницы подгружаются последовательно, по мере прокрутки страницы, что также повышает скорость загрузки.

Технология AMP позволяет издателям:
  • Удерживать аудиторию (после внедрения AMP на сайте Terra пользователи проводят в 3 раза больше времени).
  • Увеличивать охват аудитории (Gizmodo зафиксировали рост трафика на 80%).
  • Вовлекать аудиторию (глубина просмотров на Time увеличилась на 13%).
Попробуйте совместить технологии AMP и PWA
Progressive Web Applications — веб-приложение, созданное с использованием определенных технологий для достижения заданных целевых показателей:
  • Надежности (вне зависимости от статуса и качества сетевого соединения приложение сразу же загружается и отображается).
  • Высокой скорости (благодаря оперативному обмену данными по сети, UI становится плавным и отзывчивым).
  • Привлекательности (обеспечиваются хорошие впечатления от работы с приложением).
Преимущества PWA для издателей:
  • Возможность добавления на домашний экран.
  • Работа оффлайн (надежно работает независимо от состояния сети).
  • Активность push-уведомлений (расширяет взаимодействие и улучшает конверсию).
Если совместить технологии AMP и PWA, контент будет загружаться мгновенно — всегда будет доступен и удобен пользователю. Посмотрите несколько примеров PWA.
Укажите примерное время чтения материала
New Yorker, eMarketer и MarkertingLand провели несколько профильных исследований, которые показали, что среднестатический взрослый проводит 5 часов 16 минут в цифровых медиа. Поэтому ваша задача — сделать так, чтобы пользователь незаметно для себя провел большую часть этого времени именно на вашем ресурсе.

Считается, что в среднем человек готов тратить на прочтение одной статьи не более 5 минут. Поэтому, если на вашем сайте будет интересный заголовок и информация о том, что на ознакомление со статьей нужно всего 2−5 минут, то посетитель с большей вероятностью прочтет материал.

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

Чтобы что-то добавить в закладки на сайте, пользователю необходимо зарегистрироваться. Это дополнительный бонус — вы сможете получить данные своих читателей и увеличить количество подписчиков.

Для тех, кто не хочет регистрироваться на сайте, вы должны предусмотреть быстрое копирование ссылки на статью, например, для вставки ее в заметки или возможность отправки ссылки на e-mail.
Стимулируйте пользователя продолжить чтение. Потоковое чтение с изменением URL
Внедрите функцию потокового чтения: после каждой статьи будет подгружаться следующая в полном формате, а не в качестве превью. Вместе со скроллом нового материала на странице автоматически изменится URL. Дополнительным индикатором того, что текущая статья подходит к концу, может быть узкая полоса вверху экрана, отражающая прогресс чтения.

Новая статья может появляться сразу, но предпочтительнее, если после текущей сначала будут отображаться рекомендуемые материалы, а только потом начнется показ другой статьи. Однако данное решение уместно не на всех медиа-ресурсах. Функционал требует дополнительного тестирования.

Потоковое чтение позволит увеличить количество просмотренных страниц и время нахождения пользователя на сайте.
Структурируйте тексты, используя стили оформления
Согласно статистике, 79% людей не читают тексты, а «сканируют» их взглядом. Чтобы упростить восприятие материала и удержать внимание пользователя, необходимо структурировать текст, соблюдая нормы типографики: заголовки, подзаголовки, частое абзацирование, врезки и т. п.

Умеренно используйте выделения цветом, фото- и видеоконтент.

Регистрация, авторизация и подписка

Это финальный блок рекомендаций по улучшению мобильного UX онлайн-медиа.
Реализуйте возможность регистрации и авторизации с помощью социальных сетей
Регистрация и авторизация через аккаунты в социальных сетях — наиболее удобный способ для пользователя (читателю не придется заполнять формы, придумывать логин и пароль, тратить время). Кроме того, эта технологическая возможность обеспечивает:
  • Оптимизацию конверсии UX без набора текста.
  • Мгновенную персонализацию при загрузке.
  • Безопасность аккаунта без пароля.
  • Поддерживается во всех основных браузерах.
Оптимизируйте форму для заполнения, уменьшив количество полей
Чем меньше полей пользователь должен заполнить, тем выше вероятность завершения процесса регистрации на сайте. Запрашивайте только самую необходимую информацию.
Реализуйте возможность валидации форм в реальном времени
Это дополнительная гарантия того, что пользователь заполнит форму, поскольку валидация данных происходит сразу, а не как обычно, когда нужно кликнуть на кнопку «Подтвердить». Пользователь будет последовательно заполнять все поля и видеть, корректны ли введенные им данные или нет. При допуске ошибки сможет оперативно внести коррективы.
Обратите внимание пользователей на «Премиум-подписку»
Премиум-подписка — возможность для читателя получать эксклюзивный контент от издания на платной основе или после авторизации. Если у вас широкая аудитория постоянных читателей, сделайте объявление о премиум-подписке заметным, вынесите его на передний план.
Паттерны поведения пользователей меняются с течением времени. Однако, если вы хотите иметь высокую посещаемость и хорошую глубину просмотров материалов, вовремя внедряйте лучшие UX-практики. При этом имейте в виду: не все образцовые тактики могут быть применимы к вашему сайту. Тестируйте функции и постоянно проводите эксперименты — такой подход поможет вам найти оптимальное решение, которое удовлетворит запросы посетителей и поможет стать заметнее в медиаполе.

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

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

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

Другие статьи в блоге
Статьи ~ 25 минут на чтение

Обзор конкурсов для разработчиков сайтов: как участвовать и сколько это стоит

15
23 августа 2019
Статьи ~ 15 минут на чтение

Цифровой детокс: что это такое и как его устроить. Советы сотрудников Uplab

867
16 августа 2019
Статьи ~ 35 минут на чтение

Обработка и защита персональных данных: инструкция для владельцев сайтов

88
08 августа 2019
Статьи ~ 10 минут на чтение

Как написать статью, которую будут читать? Пошаговая инструкция

377
26 июля 2019
Статьи ~ 25 минут на чтение

OKR. Как достигать амбициозных целей

692
28 июня 2019
Статьи ~ 25 минут на чтение

Мобильный UX: как разработать удобный сайт финансовой компании

260
25 июня 2019
Статьи ~ 30 минут на чтение

Микроразметка для «Яндекс» и Google: как настроить и проверить

722
07 июня 2019
Статьи ~ 20 минут на чтение

Как в Uplab создают прототипы сайтов: принцип работы и обзор инструментов

12152
05 июня 2019
Статьи ~ 10 минут на чтение

Как автоматизировать создание документов в «Битрикс24»

611
31 мая 2019
Статьи ~ 10 минут на чтение

Как в Uplab разрабатывают сайты. Этап дизайна

364
23 мая 2019
+7 499 653 78 83