Аудит юзабилити интернет-магазина профессиональной косметики
Аудит юзабилити №500
Дата аудита: март 2018 года
Объем отчета: 43 страницы
Кейс по аудиту юзабилити разделов интернет-магазина, анализ статистики, работы каталога косметики, страницы просмотра товаров. Аудит работы корзины и оформления покупки.
Вводная информация
В данном отчете приведены детальные описания основных проблем, скриншоты сайта и дополнительные видео с демонстрацией выявленных недостатков.
Перед просмотром дополнительных материалов их желательно скачивать на компьютер.
Также по всем выявленным проблемам даны рекомендации по их устранению.
Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.
Навигация по сайту
Качественная навигация по сайту является основой для построения эффективного юзабилити сайта.
Она должна обеспечивать быстрый и простой переход на любую страницу или раздел сайта максимум за 3 клика.
Кроме этого, навигационные меню должны информировать пользователя о его текущем местоположении на сайте.
Рассмотрим, насколько качественно проработаны меню и навигационные элементы в данный момент на сайте.
Ссылки в навигационном меню брендов оформлены как обычный текст.
Рекомендуем явно выделять ссылки при помощи подчеркивания или соответствующего оформления.
Используется фиксированная ширина выпадающих меню. Из-за этого справа остаются пустые зоны не содержащие полезной информации, и дизайн выглядит неаккуратно.
Рекомендуем сделать ширину выпадающих меню адаптивной под ширину контента.
При переходе на страницу просмотра бренда соответствующая ссылка не подсвечивается в меню. Невозможно понять, в каком разделе находится пользователь в данный момент.
Рекомендуем явно выделять текущий раздел сайта в меню брендов.
В меню брендов есть ссылка на уцененные товары.
При переходе по ней открывается пустая страница https://profmatreshka.ru/shop/utsenennye-tovary/ не содержащая соответствующей информации.
Рекомендуем либо доработать страницу и наполнить ее контентом, либо убрать соответствующую ссылку из меню.
Далее рассмотрим юзабилити главного меню каталога.
Ссылки с выпадающими подменю и без них оформлены одинаково.
Рекомендуем явно указать наличие выпадающих подменю с помощью соответствующих графических маркеров. Например, треугольника, направленного вершиной вниз.
Минимальная ширина выпадающих меню не адаптируется под ширину контента. В результате остаются пустые зоны, и дизайн выглядит неаккуратно.
Рекомендуем пересмотреть компоновку выпадающих меню и сделать их ширину адаптивной под ширину контента в них.
Не выделяется текущий раздел сайта в меню при переходе по ссылкам, указанным на скриншоте ниже.
Рекомендуем явно выделять текущий раздел сайта в выпадающем меню.
Не совсем понятно, для чего делать выпадающее меню всего с одной ссылкой.
Также непонятно, для чего в меню дублируется ссылка «Подарки».
Рекомендуем убрать выпадающее меню с ссылкой «Подарки».
Отдельно стоит отметить, что некоторые выпадающие меню имеют слишком большую высоту и полностью не помещаются на экран. Чтобы увидеть ссылки в них необходимо использовать вертикальную прокрутку. Это негативно сказывается на юзабилити.
Рекомендуем уменьшить вертикальные отступы между ссылками. Это позволит уменьшить общую высоту выпадающих меню.
В нижнем меню брендов также не выделяется ссылка на текущий раздел сайта.
Рекомендуем явно выделять текущий раздел в нижнем меню брендов.
Далее рассмотрим работу нижнего меню сайта, расположенного в футере.
При переходе по ссылкам не выделяется текущий раздел сайта.
Рекомендуем явно выделять текущий раздел сайта в нижнем меню.
Ссылка не реагирует на наведение курсора.
Рекомендуем сделать данную ссылку интерактивной и убирать подчеркивание при наведении курсора
Вспомогательная навигация
На сайте есть блок вспомогательной навигации по типу «хлебные крошки». Это правильное решение, которое дает положительный эффект как с точки зрения юзабилити, так и с точки зрения поисковой оптимизации.
Но, к сожалению, в данный момент допущены некоторые ошибки в его дизайне и юзабилити.
Согласно общепринятым стандартам, все элементы навигационной цепочки кроме последнего должны быть ссылками на соответствующие разделы. Последний элемент должен быть текстом с названием текущего раздела.
Сейчас все элементы цепочки являются ссылками. Название текущего раздела в навигации не выводится.
Во вспомогательной навигации выводится не полный путь. Отсутствует ссылка на подкатегорию каталога.
Для примера, рассмотрим вывод навигационной цепочки на странице https://profmatreshka.ru/shop/sredstva_dlya_uhoda_za_volosami/loreal-professionnel-smartbond—nabor-zaschita-vo/.
Этот комплект находится в подразделе «Окрашивание» раздела «Для волос». Соответствующие ссылки подсвечены и в главном меню.
Но при переходе на страницу детального просмотра товара название раздела «Окрашивание» не выводится в цепочке. Кроме этого, не подсвечивается соответствующая ссылка и в главном меню каталога.
Рекомендуем устранить выявленные ошибки и обеспечить правильную работу навигационной цепочки на всех страницах и во всех разделах сайта.
Главная страница
Адрес страницы: https://profmatreshka.ru/.
Центральную часть первого экрана главной страницы занимает блок с прокруткой рекламных предложений. Это правильное решение с точки зрения юзабилити и конверсии.
Данные элементы не реагируют на наведение курсора.
В результате, количество кликов по ним уменьшается.
Рекомендуем сделать эти элементы интерактивными.
Иконки добавления в избранное также не реагируют на наведение курсора.
Для блока указан заголовок «Лучшие предложения». Но при этом активной является ссылка «Популярные товары» с соответствующей лентой товаров. Ссылка «Лучшие предложения» неактивна и стоит последней в списке.
Отдельно стоит отметить, что в лучших предложениях выводится всего два товара.
Рекомендуем разместить в заголовке призыв к действию. Например, «Обратите внимание».
Непонятно, что за логотипы размещены в блоке. Соответствующий заголовок в данный момент отсутствует.
Рекомендуем добавить заголовок. Например, «Наши бренды».
Ссылки для управления прокруткой не реагируют на наведение курсора.
Рекомендуем сделать данные элементы интерактивными.
В блоке с анонсами нет заголовка. Непонятно, это лента новостей, блог или статьи.
Рекомендуем добавить соответствующий заголовок.
Ссылки не реагируют на наведение курсора.
Рекомендуем сделать ссылки интерактивными и менять их цвет или подчеркивание при наведении курсора.
Нет отступа между текстовыми блоками.
Рекомендуем сделать вертикальные отступы в соответствии с модульной сеткой сайта.
Форма входа и регистрации
Ссылки не реагируют на наведение курсора.
Рекомендуем сделать ссылки интерактивными и убирать подчеркивание при наведении курсора.
При выводе сообщения об ошибке появляется полоса вертикальной прокрутки.
Рекомендуем обеспечить корректную работу макета без появления полосы прокрутки.
В форме регистрации нового пользователя https://profmatreshka.ru/registration/ нет проверки минимального количества символов в логине и пароле. Удалось успешно зарегистрироваться с «1» во всех полях.
Рекомендуем добавить скрипт для проверки правильности ввода данных непосредственно в процессе заполнения формы.
Главная страница каталога
Адрес страницы: https://profmatreshka.ru/shop/.
Явно не указано, как отсортированы товары по умолчанию (цена, дата добавления, название, бренд, тип). Элементы выпадающего списка не реагируют на наведение курсора. Это отрицательно сказывается на юзабилити.
Рекомендуем явно указать, как отсортирован каталог по умолчанию.
Кроме этого, нет возможности сортировки по возрастанию или убыванию нужного параметра. Например, возрастанию или убыванию цены.
Рекомендуем добавить возможность сортировки, как по возрастанию, так и по убыванию параметров.
На странице выводятся товары из разных категорий каталога. Непонятна логика формирования ленты товаров.
В результате страница имеет избыточную высоту. Большинство пользователей не прокручивают ее полностью вниз. Это подтверждается и данными карты скроллинга.
Скриншот: https://yadi.sk/d/WMzK48_83Sz3Gb.
Согласно данным карты кликов, пользователи либо просматривают полный список категорий каталога в боковой колонке фильтра, либо полный список брендов.
Рекомендуем пересмотреть компоновку главной страницы каталога и разместить на ней либо полный список категорий каталога, либо полный список брендов. Это позволит пользователю быстро найти интересующую продукцию.
Просмотр страницы категории каталога
Юзабилити процесса просмотра выбранной категории каталога будем рассматривать на примере страницы https://profmatreshka.ru/shop/sredstva_dlya_obema/.
В левой части страницы размещены фильтры для быстрого подбора нужных товаров по параметрам. Это правильное решение, значительно упрощающее работу с каталогом.
Но, к сожалению, в данный момент допущены некоторые недоработки, отрицательно сказывающиеся на юзабилити.
Не указана валюта в модуле подбора по цене.
Рекомендуем явно обозначить валюту (рубли), в которой выводится цена.
Граничные значения цены не соответствуют минимальной и максимальной цене товаров в категории каталога. Например, для данной категории минимальная цена составляет 278 рублей, а не 0.
В результате, при использовании ползунка выбора цены возможен вывод пустой страницы без товаров.
Кроме этого, неверно работает вывод максимальной цены при выборе в фильтре одной из подкатегорий каталога. Например, при выборе категории «Фены» максимальная цена товара составляет 19790 рублей, а в фильтре выводится 27260 рублей.
Рекомендуем обеспечить правильную работу модуля подбора по цене во всех категориях каталога.
В данном блоке невозможно выбрать все товары со скидками.
В других категориях некоторые товары имеют маркер «Скидка» и в фильтре есть возможность выбора таких товаров.
Рекомендуем возможность фильтрации товаров со скидками во всех категориях каталога.
Отдельно стоит отметить, что в данный момент нет возможности настройки количества товаров, выводимых на одной странице. В результате, страница имеет избыточную высоту как при выводе товаров плиткой, так и при выводе списком.
Скриншот 1: https://yadi.sk/i/BBJTfnlb3SzD2x
Скриншот 2: https://yadi.sk/i/5f3W6BS33SzD3t
Рекомендуем добавить модуль выбора количества товаров на странице.
Страница детального просмотра товара
Далее рассмотрим юзабилити страницы детального просмотра товара на примере https://profmatreshka.ru/shop/sredstva_dlya_uhoda_za_volosami/1578501/.
Для товаров в каталоге представлено всего одна фотография. Этого может быть недостаточным для большого количества пользователей.
Рекомендуем рассмотреть возможность публикации нескольких фотографий для каждого товара.
В модуле просмотра увеличенного фото есть ссылки для перехода к предыдущему или последующему фото. Но это не имеет логического смысла, т.к. прокручивается только одна фотография.
Для товара фактически указано три разных цены. Какие-либо поясняющие надписи отсутствуют. Это вводит пользователя в заблуждение.
Рекомендуем визуально разделить обычную цену и цену со скидкой. Также рекомендуем добавить соответствующий текст.
Не выровнено положение нижних границ текста:
Положение надписи «Артикул» не согласовано с положением других текстовых элементов.
Рекомендуем выровнять текстовые элементы по нижней границе.
Крайне отрицательным моментом является то, что кнопка добавления товара в корзину, добавления в избранное и модуль выбора его количества находятся в нижней части страницы и не видны без использования вертикальной прокрутки. Это отрицательно сказывается на юзабилити.
Скриншот: https://yadi.sk/i/euXrX6If3SzEub.
Рекомендуем перенести элементы добавления товара в корзину в верхнюю часть страницы.
Ссылки оформлены как обычный текст и не реагируют на наведение курсора.
Рекомендуем явно выделить текущие ссылки при помощи подчеркивания.
В данном случае использование сокращения неоправданно.
Рекомендуем использовать полную надпись «Количество».
Ссылки для увеличения или уменьшения количества товаров в корзине не реагируют на наведение курсора.
Ссылка не реагирует на наведение курсора.
Рекомендуем сделать ссылки интерактивными.
На странице нет ссылок для быстрого перехода к предыдущему или следующему товару в каталоге. Это отрицательно сказывается на юзабилити, т.к. необходимо постоянно возвращаться на страницу категории каталога.
Рекомендуем добавить ссылки для перехода к предыдущему или следующему товару в каталоге.
Также нет ссылок на аналогичные товары из категории.
При этом для некоторых товаров (например, https://profmatreshka.ru/shop/sredstva_po_uxodu_za_kozhej_lica/tony-moly-egg-pore-silky-smooth-balm—praymer-dly/) есть блок «Сопутствующие товары».
Скриншот: https://yadi.sk/i/66VJS2-l3SzJN8.
Ссылки для управления прокруткой не реагируют на наведение курсора.
Рекомендуем сделать элементы управления прокруткой интерактивными.
Прокрутка сопутствующих товаров в данном блоке не работает.
На других страницах прокрутка работает, но в блоке выводятся не сопутствующие, а похожие товары.
Для примера на видео показана страница https://profmatreshka.ru/shop/parfyumeriya/novye/fen-dlya-volos–babyliss-pro-caruso-bab6510ie6510i/.
Рекомендуем обеспечить правильную работу модуля на всех страницах сайта.
Корзина и оформление покупки
Адрес страницы: https://profmatreshka.ru/shop/cart/.
Первый экран корзины занимает баннер с информацией о скидках и кнопкой «Перейти к покупкам». Список товаров в корзине находится в нижней части страницы и не виден без использования вертикальной прокрутки.
Рекомендуем убрать баннер. Переход к покупкам не актуален для пользователей, которые уже добавили товары в корзину, и перешли к оформлению покупки.
Ссылки с названием товара оформлены как обычный текст и не реагируют на наведение курсора.
Рекомендуем явно обозначить ссылки при помощи подчеркивания.
Нет возможности списка товаров по наименованию, количестве и сумме.
Рекомендуем добавить возможность сортировки списка в корзине. Это позитивно скажется на юзабилити, особенно при большом количестве товаров в корзине.
Информация о скидке размещена в самом низу списка товаров, выполнена мелким шрифтом и плохо заметна для пользователей.
Рекомендуем использовать крупный шрифт и выделение цветом. Информация о скидке должна быть видна всем пользователям.
При достижении суммы в 10000 рублей меняется структура таблицы с товарами. Появляются два дополнительных столбца «Цена со скидкой» и «Скидка». При этом ячейки в этих столбцах не содержат никакой полезной информации. Такое решение не имеет логического смысла.
Рекомендуем обеспечить корректный вывод информации в этих столбцах.
После надписи «Итого за товары» выводится не сумма покупки, а количество заказанных товаров.
Рекомендуем добавить рядом с цифрами соответствующие надписи «Товаров в корзине», «Сумма без скидки», «Итого к оплате».
Не указана валюта для суммы покупки. Нет каких-либо поясняющих надписей и неясно, что за числа указаны в данном блоке.
Рекомендуем явно указать, что итоговая цена указана в рублях.
После таблицы с составом заказа в явном виде отсутствуют ссылки или кнопки для перехода к следующему этапу оформления. Вместо этого выводится блок с игрой. Это отрицательно сказывается на юзабилити и конверсии.
Рекомендуем убрать блок с игрой и выводить блок с последующими этапами оформления заказа.
Далее необходимо выбрать способ доставки товара.
Непонятно, почему в столбце «Стоимость» не размещена соответствующая информация.
Рекомендуем обеспечить правильный вывод стоимости доставки.
Таблица с выбором способа доставки имеет избыточную высоту. Все доступные способы доставки не видны на одном экране. Это отрицательно сказывается на юзабилити.
Скриншот: https://yadi.sk/i/tlqeisGS3T2nr5.
В форме заполнения данных покупателя доступно два варианта для физических и юридических лиц. При этом набор полей абсолютно одинаков и выбор не имеет логического смысла.
Рекомендуем либо актуализировать набор полей в форме для юридических лиц, либо убрать модуль выбора типа плательщика.
Элементы формы имеют избыточную высоту. Из-за этого сильно увеличивается общая высота формы.
Рекомендуем уменьшить высоту текстовых полей.
Отправка тестового заказа в целом прошла успешно.
После оформления заказа на почту приходит письмо, но его дизайн не проработан.
Таблица с товарами имеет избыточную высоту.
Скриншот: https://yadi.sk/i/Po5vbSBo3T34va.
Рекомендуем пересмотреть компоновку списка товаров и уменьшить его высоту.
Непонятно, к какому столбцу относятся цифры в таблице.
Сумма заказа указана без учета скидки и отличается на 10% в большую сторону от указанной на сайте при оформлении покупки.
Рекомендуем обеспечить правильный вывод цены со скидкой и без нее.
Отдельно стоит отметить, что общее оформление письма не соответствует стилю дизайна сайта.
Рекомендуем использовать в письме такой же дизайн элементов, как и на сайте.
Контакты
Далее рассмотрим доступность различных каналов связи и оформление контактной информации.
Номера телефонов в верхней части сайта являются ссылками, но оформлены как обычный текст.
Рекомендуем добавить подчеркивание для ссылок.
На странице «Контакты» не указан номер 88002223572 для бесплатных звонков.
Адрес электронной почты сделан не ссылкой, а обычным текстом.
Рекомендуем сделать адрес почты ссылкой.
Ссылки не реагируют на наведение курсора.
Рекомендуем сделать эти элементы интерактивными и убирать подчеркивание при наведении курсора.
На странице «Контакты» в данный момент полностью отсутствует форма для отправки сообщений, привычная для большинства пользователей.
Рекомендуем добавить форму отправки сообщения на страницу «Контакты».
Также нет возможности онлайн-чата с менеджером прямо на сайте, возможности заказа обратного звонка или звонка с сайта. Это является отрицательным моментом, снижающим количество заявок и обращений клиентов.
Рекомендуем рассмотреть возможность запуска онлайн-чата на сайте. Это позитивно скажется на юзабилити и конверсии.
Общие итоги и выводы
В данный момент сайт содержит ряд существенных недоработок, которые крайне негативно сказываются на юзабилити и конверсии.
- Некорректно работает наиболее важный фильтр подбора по цене товара.
- Не приведено к единому виду оформление и фильтрация товаров со скидками.
- Нет возможности быстрого перехода к предыдущему или следующему товару в каталоге.
- Допущены ошибки в работе навигационных меню и отдельных элементов.
- Дизайн корзины не проработан и содержит лишние элементы интерфейса, которые отвлекают пользователя от оформления заказа.
- Нет достаточного набора средств коммуникации непосредственно на сайте без использования сторонних сервисов.
Рекомендуем выполнить доработки и устранить выявленные ошибки. Это позволит улучшить юзабилити, повысить конверсию и маркетинговую эффективность сайта.
Полезные ссылки и ресурсы
Крупнейший регистратор доменных имен REG.RU
Регистрация и продление доменных имен в любых зонах. |
|
Ведущий хостинг-провайдер BEGET.RU
Хостинг, аренда серверов, регистрация доменов. |
|
Сервис тестирования юзабилити реальными пользователями
Отбор и анкетирование целевой аудитории сайта. |
|
Сервис мониторинга, анализа и оценки эффективности поискового продвижения.
Съем и отслеживание позиций сайта, работа с семантическим ядром. |
|
Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.
Покупка готовых текстов и заказ уникальных статей на нужную тему. |
|
Сервис автоматизации продвижения сайта и рекламы в интернете.
Подбор и покупка ссылок, оптимизация контекстной рекламы. |
|
26 000 готовых премиум-шаблонов для сайтов
Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта. |
|
Крупнейшая фриланс-биржа
Сервис удаленной работы. |