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