Аудит юзабилити интернет-магазина PDR/DOL инструмента для ремонта авто

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

Дата аудита: март 2018 года

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

 

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

Вводная информация

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

Перед просмотром дополнительных материалов их желательно скачивать на компьютер.

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

Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

Навигация по сайту

Качественная навигация по сайту является основой для построения эффективного юзабилити сайта.

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

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

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

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

Ссылки оформлены как обычный текст https://yadi.sk/d/5YjT1rB63T8FE8
Ссылки оформлены как обычный текст https://yadi.sk/i/mvMq7u1p3T8FKq
Ссылки оформлены как обычный текст https://yadi.sk/i/sNMfdw5e3T8FXJ
Ссылки оформлены как обычный текст https://yadi.sk/i/THTfF9ZY3T8FZD
Ссылки оформлены как обычный текст
Ссылки оформлены как обычный текст
Ссылки оформлены как обычный текст
Ссылки оформлены как обычный текст
Ссылки оформлены как обычный текст https://yadi.sk/i/-t2Mdf643T8GCe
Ссылки оформлены как обычный текст https://yadi.sk/i/oXs-xXg13T8GHQ

При переходе по подстраницам каталога в верхнем меню не выделяется соответствующая ссылка «Каталог».

Видео: https://yadi.sk/i/Uc3xalKj3TCwh2.

Не выделяется текущий раздел сайта в меню

Аналогичная проблема наблюдается и в подразделе «Контакты».

Видео: https://yadi.sk/i/N_dP1S0a3TEnah

Не выделяется текущий раздел сайта в меню

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

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

Видео: https://yadi.sk/i/e4xMjl0f3TEnvj.

Не выделяется текущий раздел сайта в меню

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

В подразделе «Ремонт» не работают ссылки в навигационном меню.

Видео: https://yadi.sk/i/an0E6lyt3TEo7F.

Не работают ссылки в навигационном меню

Аналогичная проблема наблюдается и в подразделе «Обучение».

Видео: https://yadi.sk/i/JWBntJww3TEoEq.

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

В нижнем меню не выделяется текущий раздел сайта.

Видео: https://yadi.sk/i/bArshdjo3TEp3C.

Не выделяется текущий раздел сайта в меню

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

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

Адрес страницы: http://bsb.tools/.

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

Скриншот: https://yadi.sk/d/r407bNHM3TEpba.

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

Видео: https://yadi.sk/i/vH07ODBd3TEptd.

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

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

В блоке «Лидеры продаж» выводятся только 4 карточки товара. Это отрицательно сказывается на маркетинговой эффективности данного элемента.

Ошибки в юзабилити страницы

Рекомендуем добавить скрипт прокрутки и выводить 10-12 карточек товаров.

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

Одинаковая дата у всех отзывов

Одинаковая дата у всех отзывов

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

Используется слишком большой вертикальный отступ.

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

Все публикации имеют одну и ту же дату.

Одинаковая дата всех публикаций

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

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

Скриншот: https://yadi.sk/d/5c5A8mAW3TErMV

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

Блог

Адрес страницы: http://bsb.tools/bsbblog/.

В разделе есть всего 4 публикации.

Скриншот: https://yadi.sk/d/hWQA0xIX3TErbn.

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

Видео: https://yadi.sk/d/I4_vnadg3TEsVu.

Ошибки в обтекании текста

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

Ссылки на детальный просмотр публикации оформлены как обычный текст.

Видео: https://yadi.sk/i/Gl8VIDgR3TEshy

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

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

Каталог инструментов

Адрес страницы: http://bsb.tools/katalog/.

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

Видео: https://yadi.sk/i/BpOBJpgV3TEt7x.

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

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

Непонятно, как отсортировать ленту по возрастанию или убыванию соответствующего параметра (например, убыванию цены). Соответствующие маркеры или индикаторы в модуле сортировки не выводятся.

Видео: https://yadi.sk/i/hWOJT6dy3TEtNd.

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

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

При выборе сортировки по убыванию цены на странице выводятся все товары в каталоге, а не выбранное ранее количество.

Видео: https://yadi.sk/i/ornRNeUh3TEtuB.

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

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

Видео: https://yadi.sk/i/RBSlfLFB3TEuE8.

Скриншот: https://yadi.sk/d/CTt33AyY3TEuGN.

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

В карточке товара используются слишком большие вертикальные отступы. Из-за этого увеличивается общая высота страницы, что отрицательно сказывается на юзабилити.

Ошибки в модульной сетке сайта

Рекомендуем уменьшить высоту отступов до 10-15 пикселей. Это позволит оптимизировать общую высоту страницы.

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

Видео: https://yadi.sk/i/rH03czdj3TEvcK.

Не выводится блок с фильтрами

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

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

Видео: https://yadi.sk/i/9wfuf9bS3TEvzE

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

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

Не совсем понятно, для чего дублируется функционал модуля подбора товаров по параметрам.

Видео: https://yadi.sk/i/dTQeeyQb3TEwEp.

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

Допущены ошибки в оформлении выпадающих списков фильтров.

Количество товаров выводится ниже названия параметра.

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

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

Выпадающий список выбора диаметра по высоте не помещается в экран.

Видео: https://yadi.sk/i/sTxJlxLb3TEwjs

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

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

Страница просмотра товара

Далее рассмотрим юзабилити процесса детального просмотра товара на примере страницы http://bsb.tools/a-1-nabor-krjuchkov-a1-11.

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

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

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

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

Видео: https://yadi.sk/i/zTJ1QCBx3TExu4.

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

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

Отрицательным моментом является постоянное изменение местоположения галереи при смене фотографии.

Видео: https://yadi.sk/i/49iqfCfu3TEyK7.

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

При просмотре увеличенного фото нет какой-либо текстовой информации о товаре. На русскоязычном сайте используется английский текст.

Видео: https://yadi.sk/i/80tGbRee3TEyUv.

Английский текст

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

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

Видео: https://yadi.sk/i/w_jGuJ1S3TEynz.

Описание товара в нижней части страницы

Рекомендуем выводить основные характеристики товара в верхней части страницы.

Используется слишком большой вертикальный отступ между текстовыми элементами страницы.

Ошибки в модульной сетке

На странице размещено фактически 4 кнопки «Купить». Это крайне отрицательно сказывается на юзабилити.

4 кнопки покупки

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

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

Видео: https://yadi.sk/i/oH5-Ktqo3TFMih.

Ошибки в компоновке карточки товара

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

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

Видео: https://yadi.sk/i/Ni9mh7hG3TFNpF

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

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

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

Видео: https://yadi.sk/i/EbFJyMck3TFPeE.

Ошибки при добавлении товара в корзину

В форме покупки в один клик нет проверки правильности ввода данных. Удалось успешно отправить заказ с неверными данными в полях.

Видео: https://yadi.sk/i/glRZx7Ot3TFPrs

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

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

Неверно выводится дата возможной доставки (доставка 8-го марта при оформлении заказа 9-го марта).

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

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

Аудит текстов сайта

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

Видео: https://yadi.sk/i/BK4NnUD43TFQLr.

Не указаны обязательные поля

Не указаны обязательные поля

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

Нет проверки правильности заполнения полей формы. Удалось успешно отправить отзыв с некорректными значениями полей.

Видео: https://yadi.sk/i/g6kf5e863TFQjH.

Нет проверки правильного заполнения формы

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

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

Далее рассмотрим работу корзины и процесс оформления заказа.

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

Видео: https://yadi.sk/i/g5TJq93_3TFR7x.

Ссылки или текст

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

Нет возможности сортировки списка товаров в корзине по названию, цене, количеству товаров в корзине.

Видео: https://yadi.sk/i/PkZa_Ur43TFRFJ.

Нет сортировки товаров в корзине

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

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

Видео: https://yadi.sk/i/QYFuVHWw3TFRYV.

Не видна сумма покупки

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

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

Видео: https://yadi.sk/i/sWiMrenu3TFRpG.

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

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

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

Адрес страницы: http://bsb.tools/onepage/.

Данный элемент не реагирует на наведение курсора.

Видео: https://yadi.sk/i/yiytcFo23TFUvR.

Ошибка в юзабилити страницы

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

Дублирование суммы заказа

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

Ссылки оформлены как обычный текст и не реагируют на наведение курсора.

Видео: https://yadi.sk/i/KnRFJRvP3TFVHa.

Ссылки не реагируют на наведение курсора

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

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

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

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

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

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

Видео: https://yadi.sk/i/gevREeMy3TFVbB.

Ошибки в юзабилити

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

Видео: https://yadi.sk/i/HgxKeSzj3TFVs9.

Избыточный список стран

Рекомендуем убрать из списка лишние страны. Это упростит работу со списком и позитивно скажется на юзабилити.

Компоновка формы выполнена не оптимально. В результате остаются пустые неиспользуемые зоны.

Ошибки в компоновке формы

Раздел «Ремонт»

Адрес страницы: http://bsb.tools/uslugi/.

Числовое значение скидки для постоянных клиентов перенесено на следующую строчку.

Аудит текстов сайта

Рекомендуем выводить размер скидки в той же строке.

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

Ошибки в компоновке страницы

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

В форме записи на ремонт иконка закрытия не реагирует на наведение курсора.

Видео: https://yadi.sk/i/S3wuFyLN3TWzfE

Иконка не реагирует на курсор

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

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

Видео: https://yadi.sk/i/MiBUb64O3TX2PM

Ошибки в форме заявки

Аналогичная проблема наблюдается и в форме заказа обратного звонка на странице. При этом в поле «Имя» соответствующее информационное сообщение выводится.

Видео: https://yadi.sk/i/FZly920a3TX3Ah

Ошибки в форме заявки

Эти же замечания верны и для формы оценки стоимости ремонта.

Видео: https://yadi.sk/i/RtoNeCXS3TX3U7

Ошибки в форме заявки

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

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

Скриншот: https://yadi.sk/i/VKf2BysF3TX7Ss

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

Не согласована высота блоков и дизайн выглядит неаккуратно.

Разная высота блоков

Рекомендуем сделать высоту блоков одинаковой.

В блоке «Примеры работ» нет возможности просмотра увеличенного фото. Также отсутствует какое-либо текстовое описание особенностей, стоимости и сроков конкретного ремонта.

Видео: https://yadi.sk/i/RHDYcPRw3TX8CQ

Нет просмотра увеличенного фото

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

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

Ошибки в расположении элементов страницы

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

Непонятно, чем отличается простой ремонт от сложного.

Ошибки в текстах сайта

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

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

Аудит текстов сайта

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

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

Сокращения в текстах

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

Раздел «Обучение»

Адрес страницы: http://bsb.tools/obuchenie/.

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

Ошибки в компоновке страницы

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

В форме записи на обучение иконка закрытия не реагирует на наведение курсора.

Видео: https://yadi.sk/i/YRm3fFZ53TXAb5

Иконка не реагирует на курсор

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

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

Видео: https://yadi.sk/i/nT7iUCBU3TXAtx

Ошибки в форме заявки

Аналогичная проблема наблюдается и в форме заказа обратного звонка на странице.

Видео: https://yadi.sk/i/UBgmqJ_l3TXBGb

В форме «Задать вопрос» для некоторых полей подсказки выводятся.

Видео: https://yadi.sk/i/Dhe-zgj63TXBam

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

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

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

Скриншот: https://yadi.sk/d/vl8hKwWr3TXDMz

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

Не согласована высота блоков и дизайн выглядит неаккуратно.

Разная высота блоков

Рекомендуем выровнять высоту блоков.

После тире текст пишется со строчной буквы, а не заглавной.

Ошибки в текстах сайта

Иконки сертификатов и наград не реагируют на наведение курсора.

Видео: https://yadi.sk/i/3eXfnyEx3TXEDw

Элементы интерфейса не реагируют на наведение курсора

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

Видео: https://yadi.sk/i/3eXfnyEx3TXEDw

Рекомендуем выводить текст с названием сертификатов и наград.

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

Дизайн блока с видео-отзывами

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

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

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

  • В главных навигационных меню размещены неработающие ссылки.
  • Некорректно работает сортировка и элементы фильтров.
  • Есть ошибки в работе страницы детального просмотра товара.

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

Готов ответить на все вопросы по результатам аудита в скайпе, email или по телефону.

Полезные ссылки и ресурсы

REGRU-logo-color-3 Крупнейший регистратор доменных имен REG.RU

Регистрация и продление доменных имен в любых зонах.

https://cp.beget.com/promo_data/static/static100x100_6.png Ведущий хостинг-провайдер BEGET.RU

Хостинг, аренда серверов, регистрация доменов.

Сервис тестирования юзабилити реальными пользователями

Отбор и анкетирование целевой аудитории сайта.

Сервис мониторинга, анализа и оценки эффективности поискового продвижения.

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

Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.

Покупка готовых текстов и заказ уникальных статей на нужную тему.

SeoPult Сервис автоматизации продвижения сайта и рекламы в интернете.

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

300x60_1 26 000 готовых премиум-шаблонов для сайтов

Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта.

Крупнейшая фриланс-биржа

Сервис удаленной работы.

Получать новые кейсы на email:

Примеры аудита юзабилити автомобильных сайтов

Смотреть все