редакции
Как мы улучшили пользовательский опыт на сайте санкт-петербургского СМИ
MR7.ru — петербургский информационно-новостной портал, публикующий новости и статьи о жизни северной столицы с 2006 года. Сайт входит в ТОП-20 региональных интернет-СМИ.
Задача
Редакция MR7.ru обратилась к нам в Атвинту за редизайном сайта. На момент обращения у СМИ был налажен выпуск контента, сформирован костяк аудитории и узнаваемое имя среди петербуржцев. Однако внешне и технически портал морально устарел — реализованное много лет назад решение требовало обновления.
Нам предстояло спроектировать новый интерфейс для MR7.ru, который бы учитывал специфику редакционных процессов и был удобным для читателей.
План работ:
- проанализировать проблемы старого сайта;
- обновить структуру портала;
- разработать прототипы;
- создать современную дизайн-концепцию.
Реализация
Ранее мы уже работали со СМИ.
Один из наших проектов — редизайн новостного портала А42.ru c 1,6 млн читателей в месяц. Перед нами стояла задача обновить внешний вид сайта и при этом сохранить преемственность с предыдущим решением, чтобы в новом дизайне аудитория легко считывала тот самый А42.ru. Мы переработали навигацию и структуру новостной ленты, добавили элементы, удерживающие читателя на сайте, а также внедрили новые шрифты и акценты, которые делают чтение и взаимодействие с сайтом легкими и комфортными. Чтобы пользователи быстро узнавали А42.ru в обновленном интерфейсе, мы сохранили несколько паттернов со старой версии, например, блок навигации в черном цвете, акценты фирменного голубого цвета и похожая раскладка контента в начале главной страницы. Еще один проект из нашего портфолио — Правоохранительный портал Кузбасса. Основной контент СМИ составляют оперативные новости от ведомств Кемеровской области: МВД, МЧС, Пожарной охраны, ДПС. Задачей было обновить портал и сделать удобный новостной сайт, через который жители области будут узнавать о деятельности правоохранительных органов. В рамках проекта реализованы следующие решения: Благодаря опыту работы со СМИ мы быстро погрузились в задачу и приступили к разработке прототипов и концепции для MR7.ru. На новом сайте нужно было реализовать удобную ленту, рубрики с разным видом контента, страницы новостей, статей и спецпроектов, рекламные баннеры, а также ряд технических страниц. Для MR7.ru мы разработали прототипы всех страниц сайта и дизайн-концепцию на примере главной страницы. В первом блоке главной страницы мы разместили новости. Слева находятся «Главные новости» — горячие события, на которых сосредоточено внимание общественности. Правее расположили ленту с двумя вкладками: все новости в хронологическом порядке и важные новости, которые рекомендует посмотреть редакция. Контент-стратегия MR7.ru отличается разбивкой по районам — журналисты площадки пишут не только о крупных городских событиях, но и местных районных новостях. Для мегаполиса с населением в 5,5 млн человек это удачный прием, который привлекает дополнительный поток читателей за счет возможности узнать о событиях именно в своей части города. Для перехода к новостям районов мы сделали отдельный блок с интерактивной картой. Выбрать район пользователь может по нажатию на чипс или карту. По нашей задумке, при выборе контура или названия района нужная область выдвигается объемным оранжевым островком. Вместе с этим на плашке справа мы выводим новости выбранного района. Далее размещены блоки «Про город» и «Про жизнь» — это рубрики, которые ведет редакция, внутри них могут быть опубликованы и новости, и статьи. Важная часть работы любого СМИ — монетизация. Одним из ключевых способов заработка является размещение рекламных объявлений в интерфейсе. Для реализации этой возможности справа мы разместили вертикальные баннеры с размером 300×800. Так как мы не могли задавать свои размеры баннеров, решили обернуть эту трудность в преимущество. Если взять ширину баннера и построить модульную сетку, отталкиваясь от нее, то получится удобное расположение и контроль масштабируемости на разных размерах экрана. Также в нескольких частях страницы размещен еще один рекламный формат — горизонтальные узкие баннеры. По запросу заказчика сделали несколько шаблонов для регулируемого блока. СМИ обратилось к нам в разгар пандемии, и у редакции появилась идея сделать подборку материалов для сюжетов, где будет собрано несколько материалов по острой тематике. Например, новость, аналитический обзор и фоторепортаж о заболеваемости COVID-19. Страницы ключевых разделов сайта идентичны друг другу. В первом блоке мы выводим главные материалы в тематике раздела, а также плашку с горячими новостями недели. Ниже размещается хронологическая лента от самых свежих к старым публикациям. Во всех разделах доступен переход к новостям районов через изображение карты города. На страницах, так же как и на главной, размещены вертикальные и горизонтальные баннеры с рекламой. У каждого материала в ленте есть хэштеги с тематикой, что полезно для поисковой выдачи и удобно для читателя, который скроллит ленту в поиске интересных ему новостей. Отличается по структуре новостной раздел сайта. Здесь в первом блоке вместо плашки «Важное за неделю» мы поместили календарь публикаций, чтобы при необходимости журналисты и читатели могли быстро найти нужную публикацию по дате, а не пролистывать всю ленту. Для новостей, статей и других контентных форматов разработан прототип типовой страницы, на которой отражены все инструменты верстки: текст, изображения, галерея, карточки, видео, таблицы, инфографика и проч. Финансовую и информационную поддержку проекту оказывают читатели, поэтому нам нужно было реализовать страницу краудфандинга. На странице мы отразили призыв оказать поддержку MR7.ru и разместили аккордион с тремя формами для: Для удобства пользователей в поиске добавили возможность выбрать период публикации для более точной выборки релевантных материалов. Так как на площадке есть множество форматов, рубрик и тем, мы подготовили подробную страницу подписки, где пользователи могут выбрать нужные материалы среди богатого контента MR7.ru Наша команда спроектировала удобный и современный интерфейс на замену устаревшим страницам сайта MR7.ru. Чем выше глубина просмотра — тем успешнее интернет-СМИ, и мы учли этот нюанс при разработке сайта. В интерфейсе есть множество элементов, вовлекающих пользователя в чтение и переход из одного материала в другой: Также проработана визуальная составляющая — мы создали стильную дизайн-концепцию, которая за счет минимализма будет актуальна в течение многих лет. На новостных порталах важно правильно расставить акценты, чтобы читателю было комфортно находиться на сайте и читать большое количество текста. Также нужно грамотно управлять его вниманием, чтобы помочь сориентироваться в обширном потоке контента. Высокую конкуренцию СМИ составляют соцсети и мессенджеры, а это значит, что классическим новостным порталам нужно идти в ногу со временем, чтобы сохранить и приумножить свою аудиторию. Современный и удобный сайт — главный инструмент в борьбе за читателей, и мы рады помочь усилить позиции издания на рынке с помощью цифровых технологий.
Главная страница
«И баннеры, и остальные модули в нашей сетке имеют одинаковый размер на всех разрешениях экранов. Так, при уменьшении разрешения мы просто отсекаем часть колонок, сохраняя габариты основных блоков. Благодаря этому мы не отрисовывали множество элементов для разных типов экранов и упростили задачу frontend-разработчикам».
Разделы
Страница материала
Краудфандинг
Поиск по сайту
Подписка
Итоги
«Предложенные прототипы учитывают специфику контента, выпускаемого редакцией заказчика. Фишкой сайта является разделение новостей по районам, для которого мы придумали интересное решение — интерактивную карту города, которая откликается на нажатие ненавязчивой анимацией и отображает соответствующий контент пользователю».
«Мы использовали оранжевый и синий цвета для выделения заголовков и некоторых элементов интерфейса. Также большую роль играют масштабы — ключевые новости и статьи мы выделили большим размером, чтобы читатель не пропустил их. При этом компоновка ленты за счет оптимального количества материалов не выглядит нагроможденной и позволяет изучать новости в комфортном режиме».
