Дизайн сайта «Московский Комсомолец-Спорт»

«Московский комсомолец» — издательский дом, выпускающий одноименную газету и развивающий еще четыре информационных проекта. В список проектов, реализацией которых активно занимается МК, также входит портал «МК-Спорт».

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

Изначально «МК-Спорт» существовал в качестве рубрики МК на отдельном домене. Он наследовал навигационный интерфейс и газетный дизайн основного сайта. Вследствие чего, пользователи испытывали существенные сложности, быстро терялись на страницах веб-сайта, восприятие ключевой информации давалось им с трудом.

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

Цели и задачи

Перед проектной командой агентства ДАЛЕЕ стояла цель разработать дизайн-концепцию, которая:

— обеспечит для издания «МК-Спорт» отстройку от головного сайта
— органично впишется в существующую «экосистему» проектов МК, одновременно сохраняя наследственность бренда и демонстрируя индивидуальность спортивной газеты
— позволит увеличить показатели просмотра с 5 до 7 страниц, длительности сеанса с 2,5 до 3,5 минут, посещаемости — до 1 миллиона в сутки.

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

Первым этапом проекта стал сбор данных веб-аналитики по сайту «МК-Спорт», на основе которых было сделано несколько важных выводов относительно аудитории ресурса:

• аудитория сайта в основном старшего поколения и концентрируется в возрасте от 45 лет и старше
• аудитория в возрасте 35−44 года характеризуется высоким потенциалом, она самая вовлеченная среди всех, просматривает наибольшее количество страниц за посещение и показывает наименьший среди прочих показатель отказов
• в среднем пользователь проводит на сайте меньше минуты, показатель отказов — выше среднего
• среди устройств входа на сайт преобладают мобильные устройства, также категория пользователей mobile версии характеризуется наибольшей вовлеченностью по сравнению с пользователями десктопа и планшета

Аудитория и устройства

На первом этапе работы над проектом командой ДАЛЕЕ была проведена подробная аналитика спортивных новостных сайтов как российского, так и зарубежного сегментов. Цель проводимого исследования заключалась в выделении лучших практик и обозначении трендов, которые спортивные издания активно используют в интерфейсе. Аналитика осуществлялась по ряду параметров: look’n’feel пользовательского интерфейса, виды и содержание навигации, алгоритмы формирования главной страницы, специфика UI-элементов и контентных блоков, сетка построения, принципы и тенденции в формировании дизайна мобильной версии.

По результатам конкурентного анализа было выбрано несколько ключевых best practice, которые впоследствии были реализованы в дизайне «МК-Спорт»: оригинальность визуального стиля, разнообразие и визуальное отображение контентных блоков, простота построения сетки и порционное разделение контента по экранам, использование большой фотографии или видео в первом блоке на главной странице.

Конкуренты «МК-Спорт»

Работа над проектом

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

Благодаря крупным, темным типографским решениям, текстовый контент отлично читается на white space — соблюден AAA-стандарт контрастности текста. В плане шрифта предпочтение было отдано простому Arial, размер которого составляет не ниже 16px. При желании пользователь также может увеличить его размер и даже включить автопрочтение текста.

часов — Дизайн

часов — Проектирование

часов — Аналитика