UI/UX аудит сайта Husqvarna motorcycles / Кейсы / IBRAIN. Экспертное агентство

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

Стилистика сайта определена бренд-буком, который имеет много общих стилистических элементов с BMW Motorrad ( в 2007 году BMW выкупил Husqvarna Motorcycles у MV Agusta Motor S.p.A.).

Мы учитывали что это локальна версия глобального ресурса, не допускающая глобальных отклонений.

Проводя аудит мы исходили из трех основных принципов:

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

Ссылка на другой ресурс компании

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

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

Варианты решения

Чтобы не отклоняться от стилистики можно использовать область, которая занята на глобальном сайте поиском и выбором региональных ресурсов. В любом случае стоит вынести кнопку в отдельный самостоятельный блок. Оформление может быть выполнено блоком, схожим с “pioneering since 1903”, контурной кнопкой или баннером кнопкой. Желательно чтобы блоки на обоих сайтах перекликались визуально.

Ошибки в навигации по каталогу моделей

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

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

Варианты решения

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

Причины, по которым категории имеют различное представление понятны, и оно допустимо в тех случаях, когда аудитория продуктов практически не пересекается. Но для пользователя, желающего изучить ассортимент, такое решение приведет в растерянность. Если необходимы посадочные страницы, то их лучше реализовывать “параллельными” традиционным страницам каталога.

Категории

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

Варианты решения

Заменить название кнопки на более привычное “Подробнее”, и сделать ссылку со всего блока с информацией о модели.

Карточка товара

В карточке товара допущено много некритичных ошибок, но вместе они ведут к повышению отказов в данном разделе. А именно:

Странцы товара реализуются по одному из сценариев - традиционном, при котором основная информация размещается в первых двух экранах, и лендинговая. В данном случае использован не очень удачный гибрид. На странице отсутствует воронка, по которой необходимо двигаться пользователю. Классическая воронка выглядит следующим образом: предложение, основная доп. информация, обработка возражений, второй блок менее важной информации или отзывы, связанные товары (чтобы пользователь не уходил с ресурса). При этом практически на каждом уровне пользователю нужна возможность перейти к целевому действию.
Как уже и писали выше очень не хватает указания на раздел, в котором находится данная модель и переходов к другим моделям этой серии.
Цена выводится в одну строку из 7 знаков, что затрудняет считывание.
В карточке представлены сразу четыре кнопки: “Предзаказ”, “Купить в рассрочку”, “Найти дилера”, блок “Особенности и преимущества”. Оформлены в трех стилях - желтом, желтом с контуром и прозрачной с синим контуром. При этом первые это ссылки на другие страницы, а последние переключатели контента. Первые три это кнопки действия, по сути ведущую к одному целевому действию - заказу, но оформлены они так же как кнопка “смотреть” на предыдущем уровне. Кнопка “Предзаказ”, существенно не выделяется. на странице. При этом на главной странице используются 3 абсолютно других вида кнопок, функционирующих как ссылки.
Кнопки соц. сетей - это расшаривание, имеющее оформление в виде ссылок на группу в соц сети. При расшаривании не подхватывается информация о странице из-за отсутствия тегов OpanGraph, что сводит практически на нет этот функционал.
Левый блок первого экрана из-за скопления такого количества элементов оказывается сильно перегруженным.
Белый текст на фото затрудняет считывание.
При первоначальном переключении закладок в блоках “Особенности и преимущества” блоки наезжают друг на друга.
Тех. характеристики подаются на желтом фоне. Желтый во всех остальных разделах используется как акцентирующий, здесь же акцент не нужен, и только затрудняет считывание.

Варианты решения

Придать страницам товара единую структуру, расположив информацию согласно приоритетности.

Сократить количество кнопок: рассрочку подать как справочную информацию, поиск дилера как ссылку - ими как раз можно заполнить правый пустующий угол, а основным целевым действиям сделать “Заказать”. “Предзаказ” больше говорит о том что еще не запущено в производство.

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

Оформление заказа

Страница предзаказа является посадочной в рекламных кампаниях моделей, при этом пользователю не предоставляется информация о модели - модель пользователю приходится указывать самостоятельно. Такой же сценарий предлагается и пользователям при переходе со страницы карточки товара.
Срок поставки не сообщается, но при этом предлагается договор с 50% предоплатой. Не обозначена валюта стоимости.
Единое поле под ФИО свидетельствует об отсутствие автоматизированной системы обработки заказов.
Подсказки в полях ввода не контрастны до нечитаемости.
Поле ввода номера телефона имеет подсказку но не форматировано, что допускает ошибки ввода.
Информация о необходимых сканах страниц паспорта находится в верхнем блоке среди текста.
Кнопки действия выглядят равнозначными.
Информация о программе рассрочки расположена на отдельной странице, а ее суть и преимущества разнесены по разным экранам.
На странице рассрочки уточняется регион, но не запрашиваются документы, при этом необходимые для предзаказа.
Совершая ошибку при заполнении формы - подсвечивается поле, в котором допущена ошибка, но не указывается в чем она зхаключается - или пример заполнения. Подсветка дублируетсяа ниже (почти вне поля зрения) надписью "Заполните правильно все поля".

Варианты решения

Мы рекомендуем объединить формы в одну. В целом мы довели пользователя до последнего шага воронки, и главное не спугнуть его непрозрачными условиями и запросом большого количества информации. Модель необходимо подставлять автоматически, тогда стоимость и срок поставки будут сразу видны на странице. Срок поставки необходимо выводить, не зная его пользователю не хватает информации для принятия решения. Порядок рассмотрения заявки на рассрочку и процесс подписания договора лучше описать отдельно, сопроводив наглядной схемой. А также дать пользователю возможность контролировать на какой стадии находится его заявка (включая выполнение заказа). Эту информацию можно вынести в личный кабинет.

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

Паспортные данные лучше запросить в виде отдельных полей ввода, а прикладывание сканов сделать опциональным. Это упростит обработку заявок в дальнейшем. Пользователь неохотно будет делать скан по ряду причин - это и опасение за данные, и лишние действия ( скан лучше заменить на “скан или снимок”).

Эти несложные изменения поднимут конверсию на порядок. Буквально. В 10 раз!

Мобильная версия сайта. Адаптивность

В мобильной версии также обнаружились не критичные но достаточно досадные ошибки:

В некоторых разделах отсутствуют минимальные поля и элемент навигацию оказались прижатыми к самому краю.
Первый экран главной страницы на самом распространенном разрешении 320px оказался абсолютно пустым. На нем мотоцикл практически не виден.
Размеры шрифты не адаптированы для мобильных устройств - в некоторых случаях шрифт слишком крупный, а в некоторых наоборот слишком мал. Что существенно затрудняет считывание информации. В целом к кириллической версии шрифта достаточно много вопросов и на десктопной версии, но на мобильных устройствах все его недостатки проявляются более явно. Это и слишком маленькое межбуквенное расстояние (кернинг), и слишком тонкое начертание штрихов, непропорциональность некоторых букв, плохое сочетание в одном блоке кириллицы и латиницы. Все это следствие применения в вебе шрифта, разработанного в первую очередь для полиграфии.
Элементы навигации меньше допустимой области в 32*32 пикс., что затрудняет навигацию, особенно учитывая основную аудиторию - мужчин, для которых элементы лучше делать не меньше 40*40 пикс.
Доступ к меню при скролле вниз скрывается, таким образом для перехода в другой раздел каталога пользователю необходимо проскроллить всю страницу обратно.
Табличные данные не адаптированы, в результате часть данные обрезается видимым блоком.

Кейсы