А42 — Интернет-СМИ Кузбасса

Главное о кейсе

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

Бизнес-задача и ее решение

// Задача //

Основная цель редизайна — улучшить поведенческие характеристики посетителей сайта: увеличить глубину просмотра страниц и время на сайте.

Проблема была в том, что посетители гуглили определенную новость о событиях в регионе, читали ее и уходили с сайта. Нужно было переработать дизайн, чтобы направить внимание посетителей на другие статьи и повысить вовлеченность.

// Аналитика //

Работу начали с аналитики и SEO-проектирования. На основании первого этапа сформулировали требования к редизайну:

— Переработать структуру сайта: добавить рубрикатор по типам материалов и тематикам, предусмотреть дополнительную фильтрацию материалов по тэгам.

— Переработать адаптив к мобильным устройствам.

— Сделать дизайн более визуально легким, чтобы акцентные элементы помогали управлять вниманием, а не отвлекали.

— Продумать UI-акценты, которые будут подкреплять интерес пользователей к материалам и задержат читателя на сайте.
— Предусмотреть эффективное расположение коммерческих баннеров, ведь это один из основных источников прибыли для СМИ.

// Проектирование //

Модульная сетка спроектирована таким образом, чтобы размер и пропорции блоков минимально меняли пропорции и размер в разных разрешениях, даже на мобильных.

Для этого высчитали минимальную единица ширины блока так, чтобы она хорошо вставала в мобильную версию, а после адаптировали компоновку блоков на остальных разрешения. Ширина колонок во всех брейк-поинтах остается неизменной, страницу газеты легко верстать.

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

// UX-решения //

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

На главной странице сначала расположили главные новости, которые наверняка вызовут интерес посетителя сайта. Самые популярные новости и статьи дополнительно маркированы иконкой с огнем, чтобы привлечь внимание.

Сбоку от Главных новостей разместили блок с вкладками «Популярное» и «Обсуждаемое»: это топовые статьи по количеству просмотров или комментариев. Такое решение привлекает дополнительное внимание тех, кто следит за трендами.

Отдельной плашкой контрастного цвета вынесли новости Кузбасса.

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

// UI-решения //

Одно из пожеланий заказчика — осовременить сайт визуально и привести внешний вид публикаций к единообразию.

Основная сложность заключалась в том, что статьях за разные годы были разные форматы фотоконтента. И важно было сохранить нормальное отображение изображений в этих материалах.

Мы подобрали такое соотношение сторон для фотоконтента, чтобы все фотографии получились единообразными, а при обрезке под новый размер не было бы потерь. Для тестирования, что формат и соотношение сторон подобраны верно мы создали реестр всех материалов с сайта и фотографий к ним. Весь контент из таблицы через плагин подгружали в макеты в Figma и тестировали дизайнерские решения на реальном контенте.

Также переделали сетку коммерческих баннеров, так, чтобы они привлекали внимание пользователей, но при этом не раздражали. Предусмотрели, варианты поведения этих элементов на адаптиве. В UI-ките прописали правила расположения баннеров и гайдлайны о том, как подготовить баннер.

// Визуальные решения //

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

Прочая информация о кейсе

Редизайн сайта регионального новостного онлайн-издания «А42»: более современный вид и повышение глубины просмотров.

Текущая доступность работы

https://gazeta.a42.ru/

Скриншоты