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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылки в футере не реагируют на наведение курсора. Это отрицательно сказывается на юзабилити.

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

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

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

https://youtu.be/amI6sfPVeqE
https://youtu.be/Lqx3YPInNdA
https://youtu.be/3TgiF_ZIqPg
https://youtu.be/c90uXsoxEvY
https://youtu.be/vU2jcAjhd6A
https://youtu.be/yojKUQ88MVY
https://youtu.be/dSlJQZ-rSAI
https://youtu.be/QZs4_jbRkCc
https://youtu.be/jAdEj5qRqtU
https://youtu.be/nPFI4Lfngew

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

Меню каталога товаров

Далее рассмотрим юзабилити и работу меню каталога товаров, которое является наиболее критичным с точки зрения юзабилити и конверсии.

Меню имеет большое количество разделов, и, как следствие – большую высоту.

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

На главной странице оно обрезано наполовину.

На странице просмотра категории каталога меню находится еще ниже под блоком фильтра товаров. Для примера показан вывод меню на странице https://bestforhome.ru/dveri

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

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

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

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

Та же ошибка является типичной и в подкатегориях каталога.

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

Текст объединен с картинкой категории и сверстан одним изображением. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта. Например, ниже показаны такие элементы на странице https://bestforhome.ru/dveri/vybor-po-tipu

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

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

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

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

 

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

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

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

Это подтверждается и данными карты скроллинга.

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

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

Вспомогательная навигация

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

Но, к сожалению, в данный момент допущены некоторые ошибки в ее дизайне и юзабилити.

Для примера, рассмотрим вывод вспомогательной навигации на странице https://bestforhome.ru/dveri/profil-doors/10x-grey-melinga.

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

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

Для некоторых товаров не выводится полный путь относительно главной страницы сайта. Например, для дверей https://bestforhome.ru/dveri/profil-doors/1x-temnyy-oreh.

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

Поиск по сайту

Адрес страницы: https://bestforhome.ru/search.

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

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

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

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

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

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

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

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

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

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

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

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

Оформление поля поиска и кнопки не соответствует общей стилистике сайта. Кнопка не реагирует на наведение курсора.

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

Результаты поиска представлены в виде простого списка из 10 ссылок. Такое решение является неэффективным, т.к. отсутствуют такие важные для пользователя элементы, как:

  • изображение товара;
  • краткое описание;
  • цена;
  • сортировка результатов поиска;
  • настройка количества результатов на одной странице.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также в блоке нет ссылки для перехода в раздел с информацией о других распродажах, скидках или акциях https://bestforhome.ru/rasprodazha-skidki-akcii.

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

В блоке «Новые поступления» выводится всего 9 товаров. При этом он имеет избыточную высоту и для просмотра всех товаров необходимо использовать прокрутку.

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

В нем отсутствует ссылка на раздел с выводом всех новинок каталога.

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

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

Непонятно, почему эта информация о компании имеет заголовок «Главная».

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

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

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

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

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

Просмотр категории каталога

В данный момент, дизайн и функционал страниц категорий каталога не приведен к единому виду. Для примера, по ссылкам показаны скриншоты трех разных разделов каталога товаров.

https://bestforhome.ru/laminat https://yadi.sk/i/ztOZwDdM3WaGUz
https://bestforhome.ru/teplica https://yadi.sk/d/92tLPAyo3WaGYL
https://bestforhome.ru/stenovye-paneli https://yadi.sk/i/vWXXibQh3WaGaq

В некоторых разделах каталога (например, https://bestforhome.ru/dveri)в верхней части страницы нет ссылок для перехода в подкатегории каталога. На других страницах (например, https://bestforhome.ru/stenovye-paneli) такой блок есть.

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

Карта скроллинга: https://yadi.sk/i/JvyOdvdV3WaGqY

Карта кликов: https://yadi.sk/i/Q_R3Zl0I3WaH3W

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

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

На некоторых страницах (например, https://bestforhome.ru/teplica) информация о параметрах и цене товара представлена в табличном виде. Но в них нет возможности сортировки или фильтрации. Это отрицательно сказывается на юзабилити, учитывая большое количество строк и столбцов в таблицах.

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

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

Просмотр выбранного товара

Юзабилити данных страниц будем рассматривать на примере типовой страницы https://bestforhome.ru/dveri/eldorf/myunhen-01-dub-temnyy/600×1900-mm.

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

https://youtu.be/RFe99UDMEp8
https://youtu.be/pnkCEe42aS0
https://youtu.be/hEbQldh-Vto
https://youtu.be/t4yQXEVCywc
https://youtu.be/4_HfN0SW1Us
https://youtu.be/RWYfwOFTv18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн сообщения об успешной отправке не проработан и не соответствует общей стилистике сайта.

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

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

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

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

При переходе на вкладку «Аксессуары» происходит дублирование вывода товаров. Такое решение не имеет логического смысла.

Скриншот: https://yadi.sk/i/8-AOmIFO3WaLLR

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

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

Адрес страницы: https://bestforhome.ru/internet-magazin/cart

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

https://youtu.be/N5tWd5C4yXE
https://youtu.be/d_xe9mEuKZw
https://youtu.be/2W3PkRDrGuE

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

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

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

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

Непонятно, для чего дублируется одинаковая сумма покупки в строках «Итого» и «Стоимость».

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

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

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

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

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

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

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

Также нет сообщений об ошибках при неправильном заполнении полей формы.

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

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

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

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

Доставка и оплата

Адрес страницы: https://bestforhome.ru/dostavka.

Список доступных способов оплаты не совпадает со списком в нижней части сайта. Например, нет возможности оплаты при помощи Яндекс. Денег.

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

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

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

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

Контакты

Адрес страницы: https://bestforhome.ru/address.

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

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

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

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

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

Полный скриншот страницы приведен по ссылке https://yadi.sk/i/1MFE0t133WaQt9.

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

Используется email адрес на бесплатном сервисе «Mail.Ru» без привязки к доменному имени сайта.

Рекомендуем подключить сервис почты для домена и использовать email, привязанный к имени сайта. Например, вида info@bestforhome.ru.

Отзывы

Адрес страницы: https://bestforhome.ru/otzyvy

Дизайн формы добавления отзыва не проработан.

Не согласована ширина элементов формы.

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

Кнопка отправки не реагирует на наведение курсора. Ее дизайн не соответствует общему стилю оформления сайта.

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

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

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

  1. основным источником посетителей является поисковый трафик. Доля Яндекса составляет 80%, Google – всего 18%. При этом по статистике сайтов аналогичной тематики соотношение в среднем составляет 60/40;
  2. не проработан дизайн и функционал страницы 404-й ошибки;
  3. файл sitemap размещен по нестандартному адресу. В нем опубликованы не все страницы сайта;
  4. есть существенные недоработки в навигации по сайту и работе меню;
  5. модуль поиска имеет ограниченный функционал. Его дизайн не проработан;
  6. используется разный дизайн и функционал страниц просмотра категорий каталога;
  7. используются не уникальные артикулы для товаров;
  8. не выводится общая стоимость товара при изменении его количества на странице детального просмотра;
  9. нет автоматического пересчета суммы заказа при изменении состава покупки в корзине;
  10. допущен ряд типовых ошибок в работе форм сайта;
  11. есть недоработки во внутренней поисковой оптимизации сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Смотреть все