Аудит юзабилити интернет-магазина картриджей для принтеров

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

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

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

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

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

Логотип и слоган

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

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

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

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

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

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

 

Соответствующая всплывающая подсказка появляется только при наведении курсора на логотип.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для примера показан один из возможных вариантов с более плотной компоновкой тех же элементов:

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

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

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

Очередность ссылок в главном меню должна быть выстроена в соответствии с их популярностью (приоритетностью) у пользователей. Согласно данным карты кликов для главной страницы, наиболее популярны разделы «МФУ», «Принтеры», «Чернила» и «Фотобумага». Скриншот показан по ссылке https://yadi.sk/i/nfbRM7D63Nvzt5.

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

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

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

В боковом меню никак не обозначено наличие дополнительных выпадающих меню.

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

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

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

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

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

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

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

Вспомогательная навигация по типу «хлебные крошки»

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

Это правильное решение, которое позитивно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.

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

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

Далее рассмотрим дизайн, юзабилити и работу элементов главной страницы сайта.

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

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

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

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

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

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

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

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

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

Не согласовано положение текста кнопки относительно границ кнопки.

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

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

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

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

Дизайн и юзабилити страниц каталога будем рассматривать на примере одной из популярных страниц https://www.originalam.net/all-in-one-ciss/epson/

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

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

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

Ссылки для раскрытия полей фильтра не реагируют на наведение курсора.

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

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

Данные элементы оформлены практически одинаково, хотя один из них является ссылкой, а второй – текстом.

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

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

 

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

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

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

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

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

Отдельно стоит отметить, что в общей ленте товаров для некоторых категорий (например, МФУ или принтеров) нет возможности оформить быстрый заказ или добавить товар в корзину. Это можно сделать только после дополнительного перехода на страницу детального просмотра. Такое решение отрицательно сказывается на конверсии.

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

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

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

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

Страница детального просмотра товара

Анализ страницы детального просмотра будем выполнять на примере одной из самых популярных страниц сайта https://www.originalam.net/all-in-one-ciss/epson/xp-342-originalam.html

Не совсем понятно, для чего указана другая цена на МФУ и показано две цены по 1 рублю для чернил и СНПЧ.

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

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

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

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

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

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

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

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

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

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

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

На странице предоставлена детальная информация о способах оплаты и доставки. Но из-за большого объема текста увеличивается общая высота страницы. Нет возможности быстро перейти к описанию наиболее удобного варианта. Это отрицательно сказывается на юзабилити. Полный скриншот приведен по ссылке https://yadi.sk/i/ckIqav7g3NwKvM.

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

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

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

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

Эти же замечания по юзабилити блока доставки и оплаты верны и для страницы https://www.originalam.net/payments_and_deliveries_ru.html, на которой размещен полностью аналогичный контент. Ее скриншот приведен по ссылке https://yadi.sk/d/JGRDlAEe3NwLiZ.

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

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

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

На сайте предусмотрен механизм быстрого заказа.

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

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

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

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

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

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

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

После добавления товаров в корзину и нажатия «Вернуться к покупкам» пользователь возвращается на главную страницу сайта, а не последнюю страницу, которую он просматривал.

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

В дизайне и юзабилити страницы оформления покупки https://www.originalam.net/checkout/ допущены некоторые ошибки.

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

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

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

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

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

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

Поле для ввода промокода скрыто и открывается только при дополнительном клике по ссылке.

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

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

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

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

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

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

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

Дизайн письма регистрации и подтверждения заказа выполнен качественно и без ошибок. Скриншоты приведены по ссылке https://yadi.sk/i/U9hYBGb53Nwn2J и https://yadi.sk/i/fF0p-1wA3Nwn8K соответственно.

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

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

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

Также в доработках нуждаются формы сайта.

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

Учитывая хороший уровень проработки сайта и отсутствия ошибок, которые могут быть выявлены с помощью экспертной оценки, рекомендуем провести тестирование работы на фокус-группе реальных пользователей. Это можно легко осуществить с помощью специализированных сервисов, например https://askusers.ru/ или аналогичных.

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