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

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

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

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

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

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

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

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

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

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

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

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

	https://youtu.be/d3qz4DwoYvc
	https://youtu.be/rlhKNKRPLOo
	https://youtu.be/kVwfSxownvg
	https://youtu.be/KxWCdUhnpd8
	https://youtu.be/cU34AqMyFiY
	https://youtu.be/imVQIYPxhVM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	Крупнейший регистратор доменных имен REG.RU Регистрация и продление доменных имен в любых зонах.
	Ведущий хостинг-провайдер BEGET.RU Хостинг, аренда серверов, регистрация доменов.
	Сервис тестирования юзабилити реальными пользователями Отбор и анкетирование целевой аудитории сайта.
	Сервис мониторинга, анализа и оценки эффективности поискового продвижения. Съем и отслеживание позиций сайта, работа с семантическим ядром.
	Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности. Покупка готовых текстов и заказ уникальных статей на нужную тему.
	Сервис автоматизации продвижения сайта и рекламы в интернете. Подбор и покупка ссылок, оптимизация контекстной рекламы.
	26 000 готовых премиум-шаблонов для сайтов Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта.
	Крупнейшая фриланс-биржа Сервис удаленной работы.