UI/UX аудит сайта Husqvarna motorcycles

husqvarna-motorcycles.ru

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

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

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

Ниже мы приводим открытые данные по распределению трафика на сайте:

Cinema Display

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

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

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

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

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

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

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

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

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

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

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

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

Категории

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

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

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

Husqvarna
Husqvarna. Ошибки юзабилити.

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

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

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

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

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

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

Husqvarna. Ошибки юзабилити.

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

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

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

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

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

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

Husqvarna

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

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

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

Как подходить к исправлению ошибок юзабилити?

Принимать решение о том, стоит или не стоит вносить те или иные изменения, лучше исходя из эффективности. Т.е. если стоимость внесения изменения окупится в течение года, то лучше его внести. Оценить стоимость внесения корректировки можно обратившись к техническому специалисту, а оценить прогноз эффективности такого изменения может эксперт исходя из своего опыта или на основе исследований, например A/B-тестирования.

Кейсы, статьи, смежные услуги

Проведение исследований

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

UI/UX (юзабилити) аудит

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

Комплексный аудит

Мы предлагаем доскональный всесторонний анализ текущего состояния вашего проекта (сайта или мобильного приложения). А также конкретный комплекс действий для вывода его на принципиально иной качественный уровень.

Прототипирование

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

Разработка дизайна

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

Комплексный аудит интернет-магазина

Глубокий анализ проекта, ориентированного на B2C и B2B сегменты рынка комплектующих для производства мебели.