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

Аудит юзабилити №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 для бесплатных звонков.

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

Адрес электронной почты сделан не ссылкой, а обычным текстом.

Оформление адреса email

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

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

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

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

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

Рекомендуем добавить форму отправки сообщения на страницу «Контакты».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Get new case studies by email:

More Case Studies

See all