Разбираем дизайн бизнес-СМИ: лучшие решения для удержания пользователя и удобства сайта
Дизайнер Анастасия Шек разбирает в Pressfeed.Журнале, какие UX-решения делают ведущие деловые издания России — РБК, «Коммерсантъ», Forbes, «Ведомости», «Эксперт» и «Деловой Петербург» — такими вовлекающими и удобными.
Пользовательский опыт (UX) играет ключевую роль в успехе любого веб-ресурса. Чем удобнее сайт, тем выше вовлеченность пользователей, дольше их время пребывания и больше вероятность, что они вернутся снова. Для новостных сайтов, медиа и блогов UX особенно критичен, поскольку такие платформы работают с большим объемом контента и зависят от лояльности читателей.
В условиях высокой конкуренции среди бизнес-медиа каждый элемент интерфейса должен быть тщательно продуман: от удобной навигации до скорости загрузки страниц. Хороший UX позволяет пользователям легко находить нужные материалы, комфортно читать статьи и быстро ориентироваться на сайте. Если ресурс перегружен информацией, плохо структурирован или работает медленно — посетитель просто уходит к конкурентам.
Скачать PDF-инструкцию «Где и как публиковать широкоохватные статьи бесплатно»Дальше рассмотрим лучшие практики, которые помогают популярным бизнес-СМИ удерживать пользователей, повышать вовлеченность и улучшать удобство взаимодействия.
1. Меню и навигация
Эффективная навигация и меню — ключевые элементы пользовательского опыта на новостных и деловых сайтах. Они обеспечивают легкий доступ к информации и влияют на удовлетворенность пользователей.
Хороший пример — структурированное меню на сайте «Ведомостей». Да, меню тяжелое, но на таких крупных ресурсах это нормально.
Пункты разделены на три уровня: на самом верхнем уровне даны технические ссылки (на контакты, кабинет, поиск и тд), второй уровень — это рубрикатор, а третий — дополнительная навигация по темам. К тому же меню довольно компактное, а за счет работы с контрастом и жирностью текста один уровень визуально отделен от второго.
Неплохое меню на сайте «Эксперта». Я бы рекомендовала добавить цвета в сами пункты меню, они выглядят блекло. Все внимание на себя перетягивает логотип. Зато в блоке нет ничего лишнего.
При проектировании меню важно учитывать, что предпочтения пользователей могут различаться, и оптимальная структура зависит от специфики контента и аудитории каждого издания. Без тестирования не обойтись.
2. Адаптивность и мобильная верстка
Адаптивность и качественная мобильная верстка — важнейшие аспекты современных бизнес-медиа, ведь доля мобильного трафика постоянно растет. Рассмотрим, как эти элементы реализованы на сайтах ведущих деловых изданий России.
Все выбранные сайты хорошо адаптированы. Но наиболее удобный вариант адаптива у «Ведомостей»: размеры шрифтов подобраны так, что сохраняется читабельность даже мелких текстов; есть достаточно пространства вокруг текстов и других элементов, отличная работа с контрастами и управлением вниманием. Верстка в целом аккуратная, а дизайн приятный.
Меню и разделы перестраиваются для удобства мобильных пользователей и не занимают много места. Текст и графика масштабируются для лучшей читабельности. Функциональность, включая поиск и доступ к разделам, сохраняется.
На второе место я поставила «Деловой Петербург». Они частично применяют бенто-стиль (в карточках с изображениями, как на примере) — такая подача проста для восприятия.
Дизайн подстраивается под размеры экрана. Навигация также удобная. Тексты и изображения оптимизированы.
3. Типографика и визуальная иерархия
Типографика и визуальная иерархия формируют восприятие контента на сайтах деловых СМИ. Они делают информацию структурированной, облегчают чтение и помогают пользователям быстро находить нужные материалы.
На сайтах всех рассмотренных изданий сохраняется шрифтовая иерархия. Наиболее приемлемый и достаточно крупный размер наборного шрифта у «Коммерсанта».
Здесь классический шрифт с засечками, подчеркивающий серьезность и авторитетность издания. Заголовки выделены полужирным начертанием и крупным размером, подзаголовки — курсивом или полужирным шрифтом меньшего размера. У основного текста стандартное начертание, что создает четкую визуальную структуру. Размер основных текстов достаточно крупный, чтобы легко считываться.
Преобладают черно-белые тона с минимальным использованием цветовых акцентов, что соответствует деловому стилю издания.
Стоит выделить сайт «Делового Петербурга». Они используют современный трендовый шрифт, который сразу же отстраивает издание от конкурентов. Шрифт без засечек, брусковый, обеспечивающий современный и чистый вид текста. Несмотря на его оригинальность, он читабельный и выглядит уместно.
Заголовки на сайте выделены крупным размером и полужирным начертанием, подзаголовки — меньшим размером и полужирным шрифтом, основной текст — стандартным размером и начертанием.
Преобладают черно-белые тона с использованием фирменного красного цвета для акцентов, что придает сайту свежий и динамичный облик.
Все рассмотренные издания уделяют внимание типографике и визуальной иерархии, адаптируют их под свою аудиторию и фирменный стиль.
РБК и «Деловой Петербург» выбирают современные шрифты без засечек, что обеспечивает легкость восприятия. «Коммерсантъ» и «Ведомости» придерживаются классических шрифтов с засечками, чтобы подчеркнуть свою авторитетность. Forbes и «Эксперт» используют комбинацию шрифтов с засечками и без, создавая баланс между традициями и современностью.
Цветовая гамма во всех случаях поддерживает общий дизайн и способствует улучшению читабельности и навигации на сайте.
4. Интерактивные элементы и мультимедийный контент
На сайтах издательств важно показывать качественные захватывающие фото и видео, чтобы удержать внимание пользователей. Еще один отличный формат — прямая трансляция.
«Ведомости» и «Эксперт» активно внедряют мультимедийные элементы, включая инфографику и видеоконтент, чтобы сделать текстовые материалы более наглядными. Такой подход упрощает восприятие аналитических данных и помогает читателям лучше усваивать информацию. Оба издания успешно комбинируют классические и современные форматы подачи контента и создают удобный пользовательский опыт.
«Деловой Петербург» делает ставку на интерактивные решения, повышающие вовлеченность аудитории. На сайте можно найти мультимедийные спецпроекты, видеорепортажи и интерактивные графики, которые делают информацию более доступной и удерживают внимание пользователей.
Forbes активно использует мультимедийный формат наряду с текстовыми материалами. Издание предлагает читателям видеоролики, подкасты и интерактивные рейтинги, что расширяет способы взаимодействия с контентом. Особый акцент сделан на визуализацию данных, что значительно упрощает восприятие сложных аналитических материалов.
5. Скорость загрузки страниц
Скорость загрузки страниц — критический фактор, он влияет на пользовательский опыт и удержание аудитории на сайте. Быстрая загрузка страниц обеспечивает комфортное взаимодействие, тогда как задержки могут привести к оттоку посетителей.
Для сайтов медиа этот показатель особенно важен, учитывая, какое количество контента на них размещено.
РБК и Forbes демонстрируют высокую производительность благодаря оптимизированному коду и эффективному использованию ресурсов. «Коммерсантъ» и «Ведомости» также обеспечивают быструю загрузку, что улучшает пользовательский опыт.
Для ускорения загрузки страниц рекомендую оптимизировать изображения, минимизировать количество HTTP-запросов и использовать современные технологии кэширования. Эти меры помогут обеспечить быструю и стабильную работу сайта, что повысит удовлетворенность пользователей и их вовлеченность.
В заключение
Учиться у лучших — зарекомендовавшая себя практика. Используйте приемы ведущих бизнес-СМИ на своем сайте, чтобы приятно удивить посетителей:
- сделайте визуально выделяющееся и разделенное на несколько уровней меню;
- адаптируйте сайт под мобильные устройства: позаботьтесь о сохранении читабельности и измените размер изображений;
- выстраивайте шрифтовую иерархию и выбирайте шрифт, транслирующий вашу уникальность;
- разбавляйте тексты мультимедиа;
- обеспечьте быструю загрузку страниц.
Грамотный дизайн и продуманный опыт улучшат поведенческие факторы на сайте, что очень важно для успеха в SEO и лояльности пользователей. Берите на заметку удачные решения от ведущих деловых СМИ, чтобы не пришлось начинать с чистого листа.
