Исследования, контекст и ограничения
Основные показатели
Ключевые метрики сайта во время старта работ по редизайну в 2022 году:
| Десктопы | Смартфоны и планшеты | |
|---|---|---|
| Устройства | 24,39 % | 72,50 % |
| Глубина просмотра | 3,85 | 1,87 (Δ −51,43 %) |
| Время на сайте | 5:15 | 1:48 (Δ −65,71 %) |
| В неделю | В месяц | |
|---|---|---|
| Уникальных посетителей | > 136 тысяч | > 490 тысяч |
| Просмотров страниц | > 620 тысяч | > 2 млн |
| Ядро аудитории (посещения каждую неделю в течение месяца) | ≈ 15 % | |
* Цифры в таблице — по данным сервиса «Яндекс Метрика» за период с 1 марта 2022 года по 26 февраля 2023 года (среднее арифметическое) без учёта посещений роботов
Исследования: от данных к инсайтам
При углубленном изучении пользовательского поведения были исследованы технические аспекты использования сайта (устройства, разрешения экрана, включение системной тёмной темы, браузеры, наличие блокировщиков рекламы), уточнён портрет основных сегментов аудитории, в том числе ядра, проанализированы тепловые карты и карты скроллинга, точки входа и данные по отказам, определены слепые зоны в интерфейсе.
Некоторые проблемы, выявленные в ходе технического и UX-аудита
- Критическая несогласованность в пользовательских путях и навигации между десктопной и мобильной версиями.
- Интерфейсные тупики в ключевых шаблонах мобильной версии приводили к почти двукратному росту показателей отказов.
- Дизайн содержал нарушения требований доступности по спецификации WCAG 2.1, такие как недостаточный цветовой контраст и передача информации только цветом без дублирования.
- Сетка и принципы масштабирования прежнего шаблона технически ограничивали использование на сайте современной рекламы на основе html5-баннеров.
Основные выводы количественного анализа
- Ключевые пользовательские когорты:
- госслужащие и офисные работники, преимущественно пользователи десктопов, женщины 45+ лет;
- социальные и политические активисты, участники публичных дискуссий в соцсетях, 30+ лет;
- люди, интересующиеся деловыми и экономическими новостями, предприниматели — преимущественно пользователи десктопов, мужчины 40+
- автовладельцы, преимущественно пользователи смартфонов, мужчины 25+ лет.
- Более 3/4 пользователей были старше 35 лет.
- Женская аудитория более чем на 16 % превышала мужскую (частично эта пропорция коррелировалось с демографической картиной в регионе, а также со структурой занятости, в частности, в сфере госслужбы). При этом женская аудитория уступала мужской по глубине просмотра на 11 %, и на 33,7 % (порядка 25 секунд) — по времени на сайте.
- Основная доля пользователей (> 30 %) приходила на сайт через поисковый траффик — и часто даже не видела главную страницу. При этом на 2-м месте по источникам заходов (> 20 %) — прямые переходы через закладки браузера или набор url сайта;
- Низкий показатель (менее 20 %) доскролла нижней части главной страницы, где располагались важные для рекламы и увеличения глубины просмотров ссылки.
- Высокий процент отказов с некоторых точек входа и на некоторых страницах.
- Тепловые карты кликов и прокрутки выявили «слепые зоны» в интерфейсе.
Инсайты качественных исследований
Для выявления сущностных проблем в дизайне и ценностных детерминантов пользовательского восприятия за период разработки было проведено более 20 глубинных интервью, а также несколько серий юзабилити-тестирования.
Ключевые инсайты
-
Проблема с типографикой и проблемы со зрением
Более половины респондентов отмечали неудобство чтения текста, особенно в мобильной версии, ссылаясь на слишком мелкий шрифт и отключённое системное масштабирование. Последующий анализ подтвердил критическую важность этого фактора, учитывая возраст ядра аудитории (45+) и превышающую среднероссийские показатели распространённость проблем со зрением в регионе, особенно среди женщин. -
Скрытый запрос на тёмную тему вопреки метрикам
Статистика использования сайта в первой половине 2023 года не фиксировала значительной доли пользователей с включенной системной тёмной темой (менее 15 %). Это коррелировало с ответами основной массы респондентов, подобранных по половозрастному и социальному портрету аудитории. Однако наблюдения и опросы в смежных группах (активные пользователи десктопов, преимущественно мужчины младше 35 лет) выявили серьезный неудовлетворенный запрос: более 50 % хотели бы иметь возможность включить тёмную тему в настройках. Тенденция к росту подобных запросов отмечалась и в крупных международных исследованиях: переключение на тёмную тему и увеличение системного шрифта являются самыми популярными функциями доступности, которые используют около 40 % пользователей на iOS и Android. -
Нельзя полагаться на жесты для навигации
Интервью и наблюдения за пользователями наглядно показали, что более половины из них не умели или не использовали системные жесты в смартфонах для навигации (например, для возврата назад). Даже те, кто был с ними знаком, сталкивались с непредсказуемым поведением при открытии ссылки на сайта из мессенджера в режиме WebView. В качестве решений для устранения этой проблемы были предложены: фиксация навигационного меню («шапки»), реализация схемы бесконечной ленты материалов (впоследствии не была внедрена по техническим причинам), а также переработка шаблонов страниц, чтобы пользователь всегда имел несколько альтернативных путей продолжить изучение контента без обязательного возврата или скролла.
Дизайн-система
Типографика
На старом сайте использовалась всего одна гарнитура — Roboto: интерфейсный шрифт ОС Android.
Это ограничивало возможность стилистического акцентирования, выстраивания четкой иерархии и визуального разделения основного контента (текста статей) и служебных элементов (рубрики, дата и время публикации, названия подразделов и т. д.) на сайте с большим объемом разноплановых текстовых блоков.
Для решения этой проблемы была подобрана гармоничная пара шрифтовых семейств с открытой лицензией — с засечками и без. К выбору предъявлялись следующие ключевые требования:
- Хорошая сочетаемость друг с другом и качественная проработка кириллицы.
- Высокая четкость и распознаваемость в мелких кеглях на цифровых экранах с недорогими матрицами и некачественными настройками сглаживания шрифтов.
- Наличие большого набора начертаний и дополнительных символов, необходимых медиаресурсу для оформления специальных материалов.
A/B/C-тестирование субъективной оценки комфорта чтения на фокус-группе (n=30) продемонстрировало в среднем на 10 % лучшие показатели у пары Inter + Stix Two Text против пар Roboto + Roboto Slab и Noto Sans + Noto Serif.
Inter — интерфейсное семейство без засечек
В качестве интерфейсного шрифтового семейства была выбрана гарнитура Inter дизайнера Расмуса Андрессона — один из лучших на момент старта работ бесплатных неогротесков с исключительной читаемостью в малых кеглях на экранах.
Ключевые преимущества:
- Высокая чёткость отображения даже в мелких интерфейсных элементах.
- Широкий спектр лигатур и возможностей кастомизации, позволивший настроить отображение цифр, форм точек и запятых в соответствии с рубленым характером логотипа бренда.
STIX Two Text — текстовое семейство с засечками
Для основного текста статей была выбрана специальная гарнитура Stix Two Text, созданная в рамках STIX Project для научных, технических и медицинских публикаций в цифровой среде.
Ключевые преимущества:
- Оптимизирована для удобного восприятия длинных текстов на цифровых носителях.
- Обеспечивает стабильную читаемость в небольших кеглях на экранах любого качества.
Адаптивная система размеров
Для обеспечения гибкости и отзывчивости была создана система токенов текстовых размеров на основе CSS-функции clamp(), позволяющей гибко адаптировать кегль шрифта в зависимости от размера экрана, сохраняя комфортность чтения на всех устройствах.
Цветовая палитра
Бренд традиционно использовал в качестве фирменной палитры оттенки бордо, однако жёсткого канона не существовало — с каждым редизайном конкретный тон незначительно менялся в рамках этой гаммы. Учитывая, что около 25 % участников глубинных интервью отмечали неприятные ассоциации с текущим цветом (как будто грязный
, немного мрачно
), было принято решение его освежить. Финальный оттенок отличается увеличенной на 6 % насыщенностью и на 15 % — яркостью.
Старый фирменный цвет
Новый фирменный цвет
Также был подобран «цифровой» фон с палитрой, основанной на обновлённом и прошлом фирменных цветах. Этот фон стал базой для оформления многих заставок, полиграфической продукции, стал ещё одним из стилеобразующих элементов.
Параллельно была разработана система базовых цветовых токенов в двух вариантах — для светлой и тёмной темы. Это позволило сформировать полные палитры для текста, иконок, интерактивных элементов (аффордансов), фона, плашек, границ и разделителей. На их основе затем были созданы семантические токены для всех компонентов интерфейса.
Разработка цветовых токенов велась с соблюдением рекомендаций по доступности стандарта WCAG 2.1, за исключением нескольких осознанных и обоснованных отступлений.
Логотипы
Предыдущая версия логотипа, существовавшая с 2013 года, была доработана как по цвету, так и по форме. В первую очередь был заменён шрифт буквенной части. Во-вторых, была удалена расшифровывающая подпись: исследования показали, что большинство пользователей устойчиво воспринимает и идентифицирует бренд именно по аббревиатуре. Кроме того, были скорректированы отступы между квадратами — сделало композицию более плотной и цельной.
Благодаря усилению эффекта цельности, обновлённую эмблему стало возможно использовать в шапке сайта и на промо-материалах с дополнительным стилеобразующим приёмом — без отступа от левой границы контейнера (то есть по принципу бирки).
На базе обновленного логотипа были разработаны или доработаны логотипы продуктов бренда, например, логотип радиостанции ПЛН-ФМ и логотип направления документальных фильмов и стримминговых передач ПЛН-ТВ.
Дизайн-решения
Расширение контентной области
Старая версия в десктопном варианте была рассчитана на ширину экрана всего в 1200 px, после чего она начинала плавно масштабироваться и одновременно увеличивать боковые отступы. Это накладывало существенные ограничения на встраивание интерактивных блоков, в том числе html5-баннеров через iframe. Кроме того, требовалось удовлетворить пользовательский запрос на увеличение размерности текста и изображений
Это было реализовано за счет полного использования поля экрана: новый шаблон добавил 680 px в ширину.
При этом, несмотря на расширение контентной области, в шаблоне статьей и новостей сохранился значительный объём «воздуха» и комфортная для чтения длина основных строк, не превышающая 65 знаков.
Упрощение и акцентирование вводной части статей
В прошлой версии вводная часть шаблона публикаций была перегружена лишними элементами, в ней не было акцентов.
Преимущественно неиспользуемые блоки шеринга материалов в соцсетях и получения html-кода для встраивания (рудимент времён ЖЖ) скрыли, а формат вывода даты публикации сделали более ясным.
Шапка и навигация
Прошлая версия шапки сайта насчитывала 30 интерактивных навигационных элементов, в том числе 21 ссылку на специальные разделы и тематические рубрики, разделённые на две строки.
В новой версии меню было упрощено и рассортировано по трём выпадающим спискам. Это не только облегчило пользователям первичное сканирование шапки, но и позволило реализовать сразу 3 фичи:
- предусмотреть возможность вывода опционального блока для своего рода дудла: баннеров, анимирующихся при фокусе и наведении путём трансформации переднего и заднего плана, которые должны были публиковаться к инфоповодам (к сожалению, перед запуском сайта редакция волнюнтаристски пересмотрела спроектированную задачу компонента и превратила его в 2 константных баннера ежедневной и еженедельной рубрики);
- разместить ссылки-логотипы на другие продукты холдинга (радио, видеопродакшн, партнёрское СМИ потребительской направленности);
- вывести табы переключения на страницы, альтернативные главной: на вторую по популярности точку входа — «Ленту новостей» (более 10 % входов не из поиска), и на проектировавшуюся в обновлённой карте сайта страницу «Выбор редакции» (она должна была выступать альтернативой витриной: исследования показали существенную потребность одновременно аудитории, редакции и рекламного отдела в изменении структуры и подачи материалов, однако редакция опасалась неприятия ядром аудитории существенных перемен и снижения лояльности, поэтому в качестве компромисса была предложена концепция «альтернативной главной» с более гибкой структурой и б́ольшим редакторским взносом в «добавленную стоимость» медиапродукта; к сожалению, её проработка и реализация были остановлены редакцией по внутренним причинам).
Система анимируемых иконок с управлением через токены
К моменту разработки js-библиотеки morph-анимации svg-иконок наподобии GSAP ещё не были в бесплатном публичном доступе, в связи с чем я выбрал нативную технологию SMIL-анимации svg-путей в иконках с отличной поддержкой в браузерах. Для реализации анимации потребовалось лишь обеспечить одинаковое количество точек в обоих состояниях иконки.
В связи с этим все иконки на проекте построены на основе путей, а не фигур (шейпов). Они встраиваются инлайн для оптимизации рендеринга и сохранения полного контроля над элементами их DOM. Их внешний вид (толщина линий, цвет и т. п.) управляется через CSS с помощью специальных токенов.
Результат
Редизайн главной
Влияние на метрики
Даже после моего ухода из холдинга я оказывал консультативную помощь своей бывшей компании на этапе внедрения редизайна.
Сайт в обновлённом дизайне был запущен накануне новогодних каникул — 25 декабря 2025 года. Наблюдения за метриками по итогам первого полноценного месяца после окончания каникул (данные приводятся на 16 февраля 2026 года) уже продемонстрировали значимый эффект для вовлечённости пользователей:
- удалось сбить продолжавшуюся более 2 лет тенденцию к снижению показателей глубины и времени просмотра; они начали расти и успели прибавить в среднем 20 %;
- наметилась устойчивая тенденция снижения посещений с глубиной 1 за счёт увеличения доли посещений с просмотром как минимум нескольких страниц: с 15 % до 20 % выросла доля посещений с глубиной 2-3, с 6,4 % до 8,3 % — с глубиной от 4 до 7 страниц, с 4,2 % до 5,6 % — с глубиной от 8 до 20 страниц;
- более чем на 50 % выросла доля посещений страницы «Лента новостей»;
- на 15 % снизилась доля отказов;
- на 7 % выросла доля пользователей, просматривающих страницы дольше 15 секунд.