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

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

Во второй части материала проанализируем особенности проектирования различных разделов сайта онлайн-медиа, от формы подписки до новостной или контентной страницы. Читайте, обдумывайте и улучшайте UX своего сайта!

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

Рассмотрим каждую рекомендацию отдельно и подкрепим примерами.

Размещайте название категории вверху страницы

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

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

Выделяйте главную новость категории на странице

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

Продумайте удобство перемещения пользователей между категориями и подкатегориями

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

Внедрение данной рекомендации позволит увеличить количество просмотренных страниц и повысить коэффициент кликабельности.

Персонализируйте контент

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

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

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

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

Рассмотрим рекомендации по проектированию страницы новости или статьи на сайте онлайн-медиа.

Добавьте функционал «Поделиться в социальных сетях»

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

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

Добавьте ссылки на материалы по теме

Ссылки на материалы по теме, расставленные в тексте статьи или размещенные в конце, — приятное дополнение для читателя. Так вы продемонстрируете информационную наполненность вашего ресурса и поможете читателю углубиться в тему. Если ваш контент окажется полезным и эксклюзивным, вас запомнят и к вам вернутся.

Ссылки можно представить в виде списка, плитки или слайдера.

Сделайте ссылки заметными

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

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

Технология AMP — уже не волшебная таблетка

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

Несколько лет назад технологии приписывали революционное влияние на трафик: так, журналисты из Gizmodo, популярного блога о дизайне, отметили ускорение загрузки в три раза и рост числа показов страницы на 50%. Но сейчас Google прямо указывает, что AMP больше не требуется для попадания страниц в топ выдачи мобильных устройств: туда могут попасть обычные страницы при соблюдении требований Google News и хорошего опыта пользователей. Поэтому на первый план выходит то, что улучшает пользовательский опыт: адаптивная верстка, оптимизация изображений и шрифтов, скорость загрузки страницы на мобильном устройстве.

Укажите примерное время чтения материала

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

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

Стимулируйте пользователя продолжить чтение

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

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

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

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

Структурируйте тексты, используя стили оформления

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

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

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

В этом разделе статьи мы хотим напомнить о соблюдении законодательства. Онлайн-формы, подписки, cookie, аналитика и рекомендательные системы проектируются с учетом требований к согласию и обработке личной информации. Всё это регламентирует Федеральный закон № 152-ФЗ «О персональных данных».

Добавьте авторизацию через единые аккаунты

Регистрация и авторизация через единый аккаунт (универсальный цифровой профиль), такой как Яндекс ID или учетную запись Google — удобный способ для пользователя: читателю не придется заполнять формы, придумывать логин и пароль, тратить время. Кроме того, эта технологическая возможность обеспечивает:

• Безопасность аккаунта без пароля.
• Мгновенную персонализацию при загрузке.
• Оптимизацию конверсии UX без набора текста.

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

В России доступность конкретных провайдеров авторизации, их политика обработки данных и соответствие требованиям к персональным данным должны проверяться отдельно для каждого проекта.

Оптимизируйте форму для заполнения

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

Добавьте валидацию форм в реальном времени

Это дополнительная гарантия того, что пользователь заполнит форму, поскольку валидация данных происходит сразу, а не как обычно, когда нужно кликнуть на кнопку «Подтвердить». Пользователь будет последовательно заполнять все поля и видеть, корректны ли введенные им данные или нет. При допуске ошибки сможет оперативно внести коррективы.

Обратите внимание пользователей на «Премиум-подписку»

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

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

Как проверить, соответствует ли ваш сайт рекомендациям

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

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

2. Определить целевую метрику для этого барьера. Глубина прокрутки и read-through rate — для дочитывания, CTR по внутренним ссылкам и «похожим материалам» — для переходов, конверсия шага формы — для подписки.

3. Проверить проблему методом, который ей соответствует. Качественный метод — интервью или юзабилити-тестирование с записью экрана — отвечает на вопрос «почему» и нужен, когда неясна причина поведения. Количественный — аналитика по воронке или A/B-тест — отвечает на вопрос «насколько часто» и «какой эффект», и нужен, когда причина понятна, а неясен масштаб.

4. Оценить влияние «сбоя» на подписку, дочитывание или переходы. Сколько пользователей проходят через этот шаг сценария и какая доля теряется — от этого зависит, стоит ли вообще чинить барьер.

5. Приоритизировать рекомендацию по влиянию и стоимости внедрения. При сопоставимом влиянии на метрику дешевое решение идет в работу раньше дорогого.

На практике это выглядит так. Кнопка «поделиться» из статьи — гипотеза про CTR, и ее проверяют A/B-тестом расположения и формата кнопки, а не редизайном по интуиции. Метка времени чтения — сначала качественная проверка: помогает ли она принять решение читать дальше или воспринимается как лишний элемент, — и только потом количественная оценка влияния на глубину дочитывания.

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