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

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

В этой части проанализируем рекомендации по проектированию:

• Функции поиска по сайту
• Навигации и меню
• Главной страницы

Читайте, смотрите, обдумывайте и улучшайте UX своего сайта!

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

Для каждой страницы / раздела сайта Google составил сводную таблицу, в которой отразил степень важности рекомендаций, степень сложности их реализации, а также ключевые метрики, на которые влияет та или иная рекомендация. Сейчас Google и Apple рекомендуют делать все интерактивные элементы (кнопки, ссылки, иконки) не менее 48×48 пикселей — это увеличенный стандарт по сравнению с прежними 44×44 пикселями, что снижает риск случайных нажатий на мобильных экранах.

Также недавно Google полностью перешёл на mobile-first indexing для 100% сайтов — мобильная версия страницы официально стала единственной, по которой сайт индексируется и ранжируется. Это значит, что производительность напрямую влияет не только на UX, но и на видимость сайта в поиске.

Тёмная тема и доступности (accessibility) теперь базовое ожидание пользователей, а не опциональная функция: поддержка тёмного режима, достаточный цветовой контраст, масштабирование текста и голосовое управление должны закладываться в дизайн мобильной версии сайта изначально.

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

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

Рассмотрим каждую рекомендацию по порядку. Для наглядности все тезисы снабдили примерами.

1. Выделите главное и избавьтесь от слайдеров

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

На практике такой подход к главной странице мы применяли, когда разрабатывали четыре сайта региональных СМИ для «Металлоинвеста» — команда создала единую дизайн-систему и адаптивные шаблоны, которые одинаково хорошо работают на разных порталах и легко масштабируются на новые города.

2. Добавьте подборку новостей

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

3. Подбирайте удобные форматы контента

Формат представления материалов — один из ключевых факторов пользовательского опыта онлайн-СМИ. В исследовании MeasuringU ясность и удобство оформления статей объясняет около 12% итоговой оценки UX (SUPR-Q) — это второй по значимости фактор после отношения к бренду. Формат оказался примерно вдвое важнее удобства категорий и сопоставим по влиянию с качеством подборки новостей на главной. Поэтому понятная структура, читаемость и удобная подача контента напрямую влияют на общее восприятие сайта пользователями.

4. Сделайте список новостей легким для «сканирования»

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

Размещение материалов сеткой больше подходит для визуального контента. Такой вариант позволяет управлять вниманием пользователей: распределяет его по блокам более равномерно.

Согласно исследованиям Fact-finder и Nielsen Norman Group, списки лучше использовать для новостей. В этом случае материалы ранжируются по важности: чем выше материал, тем он актуальнее.

5. Сгруппируйте новости по разделам и категориям

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

6. Продумайте размещение элементов, призывающих к действию

Элементы призыва читателя к действию, они же CTA (аббревиатура от английского термина «Call-to-action» — это кнопки, банеры и формы, призывающие подписаться на бесплатную рассылку, оформить подписку, вступить в группы в соцсетях, скачать мобильное приложение. Google рекомендует размещать их ниже первого экрана, чтобы пользователь мог сначала сообразить, где он находится, что может здесь получить и нужно ли ему это.

7. Сделайте объявления ненавязчивыми

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

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

Рассмотрим рекомендации по улучшению меню и навигации на сайте онлайн-медиа.

8. Сделайте шапку площадью не более 20% экрана

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

9. Показывайте ссылки на основные разделы в шапке

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

10. Сделайте легкодоступными ссылки для входа и регистрации

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

Персонализация — прямое ожидание пользователей. По данным на 2026 год, 78% пользователей в России взаимодействуют с персонализированным контентом, а 85% пользователей с мобильных устройств сталкиваются с персонализированными интерфейсами. Это делает простой и быстрый доступ к авторизации критичным требованием. Уже можно уверенно говорить о том, что стандартом становится AI-персонализация. По оценке Gartner, это ожидают увидеть более 70% пользователей. Для медиа это означает AI-подбор материалов в ленте и персональные рекомендации — то, что раньше было опцией, теперь формирует базовые ожидания аудитории.

11. Добавьте дополнительное меню

Добавить меню, свернутое по умолчанию («бургер»), в мобильную версию — очевидное UX-решение. Однако есть здесь одна особенность — ссылки на основные разделы лучше вынести в шапку (как это было сказано выше), а в бургер-меню разместить остальные, менее важные ссылки. Отметим, что бургер-меню как основное решение для мобильной навигации постепенно уступает место нижней панели навигации (bottom navigation / tab bar) для ключевых разделов — именно её сейчас рекомендуют Google (Material Design) и Apple (HIG). Бургер-меню при этом не исчезает полностью, его удобно оставлять для второстепенных разделов.

12. Сгруппируйте ссылки в дополнительном меню по разделам и категориям

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

13. Добавьте ссылки для быстрого перехода

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

Поиск

Тезисно — о чем важно знать при проектировании строки поиска.

14. Сделайте поиск легкодоступным и заметным

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

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

Согласно исследованиям Dawn Shaikh and Keisi Lenz и Nielsen Norman Group (F-Shaped pattern), пользователи в первую очередь ищут поле поиска в верхнем правом углу страницы. Однако если они его там не находят, то начинают сканировать верхнюю часть страницы слева направо (F-паттерн). Сейчас акцент смещается в сторону mobile-first indexing и показателей Core Web Vitals: Google оценивает скорость загрузки (LCP < 2,5 c), отзывчивость интерфейса (INP < 200 мс) и стабильность вёрстки (CLS < 0,1). Поиск по-прежнему должен быть заметен сразу, а не спрятан в меню, — это согласуется с логикой F-паттерна, но теперь напрямую влияет и на позиции сайта в результатах поиска.

15. Добавьте автозаполнение и варианты для поиска

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

16. Показывайте количество найденных результатов

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

17. Добавьте автоисправление

Система может распознать, что пользователь ошибся при вводе, и показать ссылку на исправленный вариант, либо автоматически выдать результаты по исправленному запросу. Это избавит пользователя от необходимости самому искать опечатки или ошибки в своём запросе.

18. Всегда показывайте какой-нибудь результат

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

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