Аудит юзабилити интернет-магазина профессионального инструмента

Аудит юзабилити №390

Дата аудита: август 2015 года

Объем отчета: 29 страниц 

 

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

 

Главная страница сайта

Нет автоматического определения региона сайта при заходе посетителя на сайт.

Регион сайта

Для выбора региона доставки надо переходить на дополнительную страницу http://ombrashop.ru/change-location/.

Рекомендуем предусмотреть автоматическое определение и подтверждение региона на базе Geo IP при первом посещении сайта пользователем.

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

Что обозначают звездочки в полях формы

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

Какие поля являются обязательными?

Рекомендуем явно указать, что поля, отмеченные звездочкой, обязательны для заполнения.

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

Юзабилити формы заказа обратного звонка

Юзабилити формы заказа

Рекомендуем максимально упростить форму заказа обратного звонка. Это увеличит количество обращений с сайта.

Существенную часть экрана главной страницы занимает баннер. Но он является статичным, ориентирован на корпоративных клиентов и кликнуть можно только по кнопке «Предложение для корпоративных клиентов». Это отрицательно сказывается на эффективности данного блока и юзабилити сайта. Это полностью подтверждается и картой кликов https://yadi.sk/i/RbosZrtLiUPfR . Пользователи практически не пользуются данным элементом.

Анализ данных карты кликов

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

Данный элемент оформлен как ссылка, но не ведет на соответствующую страницу.

Юзабилити элемента интерфейса

Юзабилити элемента интерфейса

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

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

Ошибка в работе прокрутки логотипов

Анализ данных карты кликов

Рекомендуем обеспечить корректную работу скрипта прокрутки.

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

  1. Адрес и координаты офиса компании.
  2. В чем преимущества именно этого инструмента.
  3. Насколько обширен ассортимент.
  4. Какая гарантия предоставляется.
  5. Какие скидки можно получить.
  6. Каким стандартам отвечает инструмент, какие сертификаты подтверждают качество.
  7. Отзывы и наиболее крупные клиенты.

При этом данная информация в полной мере представлена на внутренней странице http://ombrashop.ru/content/dealers-and-wholesalers/. Ее посещаемость составляет всего 0,39% от общего числа посетителей. На главную страницу заходит 12,2%.

Анализ посещаемости сайта

Т.е. эту ключевую информацию видит ничтожно малое число посетителей сайта.

Рекомендуем предоставить наиболее важную для потенциального покупателя информацию на главной странице сайта.

Страница каталога

http://ombrashop.ru/catalog/

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

Нет фотографий товаров

Рекомендуем создать и опубликовать на сайте иконки или фото для всех подкатегорий каталога.

Текст выходит за границы блока, дизайн разваливается.

Текст выходит за границы блока

Рекомендуем либо сократить текст с названием категории, либо обеспечить корректное поведение данного блока при переполнении.

Страница просмотра выбранной категории каталога

Юзабилити данной страницы будем рассматривать на основании данных по наиболее популярной странице каталога http://ombrashop.ru/catalog/universalnie_ombra/.

Анализ посещаемости страницы каталога

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

Юзабилити блока сортировки товаров

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

Анализ данных карты кликов

Анализ данных карты ссылок

Сортировка товаров в данный момент, к сожалению, не работает. Это продемонстрировано на видео по ссылке https://yadi.sk/i/qhNiKuI3iUTHm.

Рекомендуем по умолчанию выводить товары, отсортированные по возрастанию цены (в начале самые дешевые, дорогие – в конце).

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

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

Юзабилити модуля подбора по параметрам

Рекомендуем расширить набор параметров для модуля подбора согласно наиболее важным для клиента критериям. Например, сфере применения, набору и типу инструментов и т.д.

По умолчанию в каталоге товар выводится плиткой. При этом вместо важной кнопки покупки в один клик, выводится ссылка на покупку в кредит, которая не представляет особой ценности для пользователя. Это подтверждается и картой кликов https://yadi.sk/i/9L4aEBSViUTvm .

Юзабилити модуля покупки в кредит

При этом если вывести товары списком, то кнопка покупки в один клик присутствует в карточке товара.

Покупка в один клик

Рекомендуем заменить ссылку «Купить в кредит» на кнопку «Купить в один клик» при выводе товаров плиткой.

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

Просмотр наборов инструментов

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

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

Анализ карты кликов по баннеру

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

http://ombrashop.ru/catalog/nabory_instrumenta/911120_spetsialnyy_nabor_instrumenta_tortsevye_golovki_1_4_3_8_1_2_dr_4_32_mm_i_sae_5_32_1_1/

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

http://ombrashop.ru/catalog/torcevih_golovok_ombra/911150_spetsialnyy_nabor_instrumenta_tortsevye_golovki_1_4_3_8_1_2_dr_4_32_mm_i_sae_5_32_1_1/

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

Для некоторых товаров текстовое описание полностью отсутствует. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта. Например, http://ombrashop.ru/catalog/klyuchi_kombinirovannye_i_nabory_iz_nikh/030008_klyuch_kombinirovannyy_8_mm/

Нет текстового описания товаров

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

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

Юзабилити модуля консультации специалиста

Кроме этого, дизайн и функционал данного модуля имеет ряд недостатков.

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

Что обозначают звездочки в полях

Отсутствует проверка правильности введенных данных (это касается и всех остальных форм на сайте).

Например, удалось успешно отправить запрос при таких неверных данных формы:

Ошибки в юзабилити формы

Ошибки в юзабилити формы

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

Также рекомендуем предусмотреть возможность мгновенного общения с менеджером при помощи online чата.

При добавлении товара в корзину неверно обрабатывается символ кавычек:

Ошибка в обработке символов

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

Нет выбора количества товаров

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

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

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

Что обозначают звездочки в заголовках полей

Рекомендуем явно указать, что поля отмеченные звездочкой, являются обязательными для заполнения.

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

Юзабилити вывода сообщений в форме

Также это продемонстрировано на видео https://yadi.sk/i/KmnlbWkciV9no

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

При изменении количества товара в корзине не происходит автоматический мгновенный пересчет суммы. Для пересчета необходимо нажимать кнопку «Пересчитать». Это отрицательно сказывается на юзабилити сайта.

Нет автоматического пересчета

Рекомендуем обеспечить мгновенный пересчет суммы по товару и итоговой суммы при изменении количества товаров в корзине.

При загрузке корзины рекомендуем сделать первые пункты в блоках выбора способа доставки и оплаты активными:

Юзабилити блока доставки и оплаты

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

Рекомендуем выводить предварительную стоимость доставки в зависимости от региона доставки, выбранной транспортной компании и состава заказа.

После отправки тестового заказа на почту не пришло никакого письма с информацией о заказе.

Рекомендуем присылать клиенту письмо с подтверждением цены, состава и статуса заказа.

Страница «Информация»

http://ombrashop.ru/stati/

В данный момент эта страница пустая и не содержит никакой полезной информации.

Пустая страница сайта

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

Страница «Оплата и доставка»

http://ombrashop.ru/content/howto/

На данной странице есть информация о возможности оплаты с помощью электронных способов оплаты. При этом на странице оформления заказа данных способов оплаты нет.

Нет вариантов оплаты

Не работает оплата на сайте

Аналогично и с оплатой банковским или почтовым переводом.

Не работает банковский перевод

Рекомендуем актуализировать и синхронизировать информацию на данной странице и в корзине.

Страница «Корпоративным клиентам»

http://ombrashop.ru/content/dealers-and-wholesalers/

Непонятно, это ссылка или текст.

Ссылки оформлены как обычный текст

Рекомендуем явно выделять ссылки с помощью подчеркивания.

Данные ссылки не ведут на страницы с соответствующим товаром (это касается всех товаров на странице).

Ошибки в работе ссылок

Рекомендуем сделать данные элементы ссылками на соответствующие страницы каталога.

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

Например, фото клиента:

Фотографии клиентов

Оригинал этого фото из фотостока:

Оригинал фото

Такое решение отрицательно сказывается на доверии пользователей.

Рекомендуем разместить реальные отзывы и фото от клиентов компании с ссылками на сайты или страницы в соцсетях.

Страница «Контакты» и каналы обратной связи с клиентом

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

Недостаточное количество каналов обратной связи

На странице контактов нет в явном виде адреса email и формы для отправки сообщения.

Также отсутствует возможность мгновенного общения с консультантом или менеджером с помощью online чата, skype, viber или звонка прямо с сайта.

Рекомендуем расширить количество каналов коммуникации с клиентом. В качестве комплексного решения для повышения конверсии можно рассмотреть готовые решения с полным набором необходимого функционала. Например, сервис http://www.krible.com/ или аналогичный.

Работа навигации по сайту

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

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

Рассмотрим, насколько выполнены эти требования на сайте.

При переходе в любой из разделов сайта раздел «Головки торцевые» остается подсвеченным как активный. Это вводит пользователя в заблуждение.

Например, при переходе на страницу http://ombrashop.ru/catalog/klyuchi_kombinirovannye_i_nabory_iz_nikh/030006_klyuch_kombinirovannyy_6_mm/ главное меню выглядит так:

Ошибки в подсветке текущего раздела сайта

Рекомендуем обеспечить корректную работу подсветки текущего раздела сайта.

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

Ошибки в работе выпадающего меню

Рекомендуем изменять ширину выпадающего меню в соответствии с шириной контента.

При изменении ширины окна браузера вывод меню работает некорректно – выпадающее подменю обрезается по правому краю окна.

Ошибка в работе выпадающего меню

Рекомендуем обеспечить корректную работу выпадающего меню при любой ширине окна браузера.

Текущий подраздел сайта никак не выделен в главном меню.

Ошибки в юзабилити выпадающего меню

Рекомендуем явно выделять текущий подраздел сайта в главном меню.

Согласно данным карты кликов, популярность переходов по разделам каталога выглядит следующим образом:

Анализ данных карты кликов

Т.е. наиболее популярные разделы размещены в середине и нижней части меню.

Это подтверждается и данными карты ссылок. Например, данные для наиболее популярного раздела «Наборы инструментов»:

Анализ данных карты ссылок

Рекомендуем разместить ссылки на наиболее востребованные категории каталога в верхней части главного меню.

Особо стоит отметить проблему с работой главного меню при просмотре страницы выбранного товара. Пользователю невозможно перейти в любой подраздел выпадающего меню, т.к. оно закрывается при движении курсора. Эта проблема продемонстрирована на видео https://yadi.sk/i/0PgxpQkUiVGGr .

Рекомендуем обеспечить корректную работу главного меню на всех страницах сайта при любом разрешении экрана.

Верстка сайта

Верстка сайта должна обеспечивать корректную работу всех элементов сайта при любом разрешении экрана, во всех основных браузерах и на всех устройствах (в том числе и мобильных).

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

Это подтверждается и ростом показателя отказов по данным Яндекс.Метрики для экранов с небольшим разрешением.

Анализ разрешений экрана пользователей

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

По ссылке https://yadi.sk/i/YSvgNteZiVLi6 можно увидеть скриншоты главной страницы при просмотре на экране мобильных устройств и планшетов. По ссылке https://yadi.sk/i/zPtjqFwKiVLr4 – скриншоты страницы товара.

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

Для ссылок на сайте не прописан атрибут title=””. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.

Нет атрибута title у ссылок

Внутри HTML кода встречаются определения стилей оформления элементов. Это не соответствует современным требованиям к семантике кода.

CSS стили внутри HTML кода

Общие итоги и выводы

По итогам аудита рекомендуем:

  1. Обеспечить корректную работу и отображение сайта при малых разрешениях экрана и на мобильных устройствах.
  2. Устранить проблемы с работой главного меню.
  3. Расширить количество, качество и оперативность связи клиента и менеджеров
  4. Указать полную контактную информацию.
  5. Расширить список доступных способов оплаты и доставки.

С радостью отвечу на Ваши вопросы по результатам аудита по email, skype или телефону.

Get new case studies by email:

More Case Studies

See all