Повышение юзабилити
для КонформСтайл

Клиент и задача

Конформ Стайл — одна из ведущих компаний по производству ежедневников, визитниц, записных книжек, планингов и другой календарной продукции, также занимается её кастомизацией. Корпоративный сайт ориентирован на оптовые продажи всех изделий.

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

ТОП-3 в сезон по высококонкурентным запросам: «ежедневники», «планинги».
50% основного списка в ТОП-5, 55% по низкочастотным в ТОП-10.
Продвижение по 140 запросам в основном списке и 150+ низкочастотных запросов.
Ежегодный рост трафика в сезон (ноябрь).

Следующим этапом развития проекта стала задача к началу сезона 2015 привлечь интерес к ресурсу, повысить основные поведенческие факторы пользователей на сайте, придумать интересные «фишки», которых нет у конкурентов. Полностью обновить сайт.

Юзабилити аудит.
Что предстояло изменить?

Структура главной страницы

Есть блок со ссылками на приоритетные разделы каталога. Текущий дизайн и заголовки с подписями не призывают пользователя перейти по ним. Оформление ссылок напоминает список товаров каталога данного сайта, а подписи не соответствуют действительности. Ссылки ведут не на те страницы. «Датированные и недатированные ежедневники» перекидывает на общую страницу каталога Главная/Ежедневники/. «Кожаные ежедневники» — на страницу каталога Главная/Ежедневники/Кожаные ежедневники. Никаких планингов и визитниц на этой странице нет, а в подписи указано обратное. Ссылка «Календари» ведет на страницу каталога Главная/Настенные квартальные каталоги/. Нет смысла в текущем заголовке.
У каждого товара в каталоге рядом с ценой написано слово «цена». Это дублирование излишне. Размер шрифта очень крупный, красный цвет мало привлекателен для клика.
Блок «Новости» обновляется редко, а размещен на первом экране. Вероятнее всего, это неважная информация, которую нужно сместить вниз, уступив место более приоритетным блокам.

Что изменили?

Убрали подписи, оставив только заголовки «Ежедневники», «Кожаные ежедневники», «Настенные календари».
Унифицировали ссылки на три раздела, которым соответствуют графические баннеры.
В блоке «Хиты продаж»: удалили слово «цена», изменили дизайн элементов.
Блок «Новости» переместили ниже на странице, изменив его дизайн.
Создали на главной странице блок «Наши клиенты» с логотипами самых известных клиентов. Это поможет сформировать доверие и привлечь новых клиентов. На логотипы можно наложить ссылки в раздел портфолио, а можно оставить некликабельным.

Рекламный баннер в шапке

В шапке сайта находился большой ротационный баннер. Такие решения используются на информационных порталах (со спамной рекламой), но не на корпоративных или продающих сайтах компании. Он утяжеляет шапку, сдвигая важный контент страниц вниз. Состояние графического баннера негативно влияет на образ компании. Графика низкого качества удручает: размытый, непродуманный текст рекламного баннера, отсутствие детальных изображений товаров.

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

Что изменили?

Баннер ушел в зону основного контента главной страницы. При желании можно дублировать рекламу на страницах каталога.

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

Элементы в шапке

Наличие статусной строки рядом с логотипом «Официальный дилер типографии «Арти Графике Джонсон», Италия» и «Лидер в производстве ежедневников и календарей» — отлично. Но приоритет, отведенный этим текстовым подписям, сильно преувеличен.
Красный шрифт «Авторизация» не читаем, режет глаза. Нестандартное размещение ссылок.
Актуален ли формат приема заказов через ICQ? Сейчас этот канал общения потерял свою популярность.
Быстрые ссылки в виде пиктограмм дублируют часть контента:

Домик — ссылка на главную. На логотип итак наложена ссылка. Это стандартное решение для навигации. Дополнительная ссылка не нужна.

Лупа — поиск. Целая поисковая строка в шаблоне уже была реализована.

Конверт — отправить письмо. Кликабельный адрес электронной почты есть в футере, а на странице «контакты» форма обратной связи.

Карта сайта — нужно добавить текстовую ссылку «карта сайта» в футер, а иконку убрать.

Что изменили?

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

Основное меню

В основном меню есть пункт «Сувенирная продукция» — клик переводит на другой сайт. Это неправильно. Основное меню — это навигация по текущему сайту. Нельзя без предупреждения о переходе переводить пользователя на другой сайт. Либо пункт должен называться, передавая смысл о другом сайте.
На сайте есть раздел «Новости», но ссылки на него нет ни в шапке, ни в футере.

Что изменили?

Ссылку «Сувенирная продукция» заменил рекламный баннер, с возможностью перехода на новый сайт.
Вынесли в шаблон шапки ссылку на раздел «Новости». Была идея переместить ссылку на раздел в футер, но это отдаляет раздел от посетителя.

Меню каталога

В левой колонке на всех страницах сайта выводится меню каталога в одном и том же виде. Развернуты все подкатегории, что не концентрирует внимание.

Что изменили?

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

Оптимизация страниц каталога

Страницы каталога имеют разный шаблон. На основных страницах разделов фильтр есть, на других — нет. Это затрудняет работу с сайтом.
В фильтре все параметры свернуты в выпадающие списки, что не всегда удобно.
Фильтр по более мелким категориям товаров «Фирменные ежедневники» и фильтр с остальными параметрами — это один логический блок. Не следует разделять его текстом на две части. И этот фильтр должен находиться непосредственно перед списком товаров.
Существует проблема с версткой элементов каталога: неравномерно распределяются заголовки, дублируется слово «цена», «параметры». Необходимо отработать данные элементы с дизайнером.
Состояние детальной страницы необходимо переработать. К примеру, нет целевой кнопки «сделать заказ», цена не выделена.
Зачем неавторизованному пользователю выводить кнопки «скачать изображение»? Нужно настроить правило: авторизован — показывать, не авторизован — совсем не выводить.
На детальной странице отсутствует информация про условия заказа, контактная информация для заказа, блок дополнительных продаж: «вы смотрели», «вам может понравиться».

Что изменили?

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

Шаблон футера

В футере есть дубликаты ссылок «Визитницы», «Планинги», в чем нет смысла.

Что изменили?

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

Страница «Контакты»

На странице есть форма обратной связи. На нее ведут ссылки со многих других страниц сайта. Но форма доступна только после регистрации. Почему? Зачем закрывать доступ к обычной форме обратной связи? Это создает сложности для посетителя. Получается, чтобы задать простой вопрос, ему нужно пройти процесс регистрации. Более того, на вкладке «Санкт-Петербург» нет интерактивной карты.

Что изменили?

Форма обратной связи доступна всем пользователям.
Добавили интерактивную карту для Санкт-Петербурга.

Работа фильтра в разделе «Портфолио»

Фильтр размещен очень низко. Это непривычно для пользователя.
Верстка элементов в блоке некорректна. Очень крупные шрифты и маленькие расстояния между блоками.
В разделе нет единой логики. Существует два значимых параметра для каждого элемента: клиент и тип продукции. По типу продукции товары размещены в подразделы. При этом в разделе есть фильтр по «клиенту». Это нелогично. На странице, где выводится фильтр, должен размещаться список элементов, а не разделов. Так как фильтр не может фильтровать разделы по клиентам, только конкретные элементы.

Что изменили?

Фильтр занял свое привычное место — перед списком.
Элементы сверстаны корректно.
Оба параметра «клиент» и «тип продукции» вынесены в фильтр. Все элементы портфолио выдаются полным списком, с возможностью фильтрации:
- необходимо сохранить url страниц по типу продукции;
- необходимо сохранить url всех детальных страниц портфолио;
- страницы по клиентам можно оформить через ЧПУ, можно через гетпараметры.

Дилеры

В списке дилеров нет никакой структурированности. Под списком — строка с информацией «Для просмотра остатков необходимо зарегистрироваться». Она отображается, даже когда пользователь авторизован. Что это значит? Актуален ли функционал? Что он предполагает?

Что изменили?

Теперь дилеры разделены по городам присутствия. В разделе реализована карта, для наглядности и удобства навигации.

Итоги юзабилити-аудита

В результате детального юзабилити-аудита мы полностью обновили сайт компании Конформ Стайл. Новый адаптивный дизайн, понятная структура и повышение ключевых показателей эффективности! *

Количество пользователей