«Московский комсомолец-Спорт» — онлайн-газета в стиле спорт-поп, которую выпускает издательский дом «Московский комсомолец». У ее сайта разнообразная целевая аудитория: от фанатов спорта до пользователей, которые редко читают подобные новости.
МК Спорт
2024Клиент
Каким МК Спорт был до редизайна
Изначально «МК-Спорт» был рубрикой МК на отдельном домене, но наследовал его навигационный интерфейс и газетный дизайн. Из-за этого пользователям было трудно воспринимать его отдельно от МК. Также дизайн не позволял вставить традиционные спортивные виджеты: таблицы и статистику.
Что хотел получить клиент:
- Самостоятельный сайт, который визуально отличается от МК
- Яркий, контрастный дизайн, характерный для спорт-изданий
- Виджеты, которые органично встроены в дизайн
- Адаптивный интерфейс, в первую очередь, для мобильных устройств.
Цели и задачи
Разработать дизайн-концепцию, которая:
- подчеркнет индивидуальность «МК-Спорт» и впишется в экосистему проектов МК
- позволит увеличить показатели просмотра с 5 до 7 страниц, длительности сеанса с 2,5 до 3,5 минут, посещаемости — до 1 миллиона в сутки
Работа над проектом
Аудитория и устройства
Веб-аналитика сайта «МК-Спорт» показала следующее: — чаще всего газету читают люди в возрасте 45+ лет — самая вовлеченная аудитория — люди 35-44 лет: они просматривают больше страниц за посещение и имеют самые низкие отказы — обычно пользователь проводит на сайте меньше минуты, показатель отказов высокий — чаще всего на сайт заходят с мобильных устройств, пользователи мобильной версии более вовлеченные, чем декстопа
Конкруенты МК-Спорт
Мы проанализировали сайты конкурентов по следующим параметрам: look and feel, виды навигации, UI-элементы и контентные блоки, сетка построения, дизайн мобильной версии. Затем выбрали best practice для дизайна «МК-Спорт»: разнообразные контентные блоки, простая сетка, поэкранное разделение контента, крупный визуал или видео на первом экране. Важно было создать комфортную интерфейсную сетку, которая будет понятна пользователям всех возрастов, и эффективную навигационную цепочку.
Проектирование интерфейса
В интерфейсе приоритет отдан визуалу. По сравнению со стандартными газетными сайтами, здесь минимум текста и есть четкая структура. На главной странице только ключевая информация о новости: заголовок, иллюстрация и короткий саблайн. Материалы сделаны в формате карточек, на одном экране их не больше 6. Так нам удалось избежать перегруженности интерфейса.
Мобильная версия
В проектировании мобильной версии учтена моторика рук пользователей, чтобы обеспечить ее эргономичность. Она достигается за счет крупного меню с правой стороны экрана и короткого слайдера на главном экране, повторяющего естественные движения свайпа.
Навигационная цепочка
Для «МК-Спорт» создана отдельная навигационная цепочка — с МК ее объединяет только общая «плашка» в верхней части экрана. В меню вынесены популярные виды спорта, также есть навигация по форматам и типам контента, потому что пользователи показывают высокую заинтересованность в фото- и видеоматериалах.
Слайдер в стиле Stories
В среднем нам нужно ≈ 7 секунд для решения остаться на сайте или нет. Чтобы успеть заинтересовать пользователя за это время, на первый экран мы поместили слайдер в формате stories. Он переключает интересные материалы и задерживает внимание.
Рекомендации
Для увеличения глубины просмотра страницы издания дополнены «информационным обвесом» — блоками с популярными новостями, статьями по теме. В теле новости появились ссылки на похожие материалы, которые могут привлечь читателя.
Стилистика сайта
Сдержанный монохромный дизайн в черно-белой гамме подчеркивает, что «МК-Спорт» — деловое, надежное и серьезное издание. Иллюстрации яркие и большие, они сразу привлекают внимание пользователя, он может сделать вывод о содержании новости по картинке. Это делает интерфейс интуитивно понятным и предсказуемым.
Типографика
Крупная, темная типографика отлично читается на white space — соблюден AAA-стандарт контрастности текста. На сайт добавлены кнопки для увеличения шрифта и автопрочтения текста.








