Студия Турум-бурум

Аудит юзабилити интернет-магазина: Чеклист из 170+ пунктов для проверки интерфейса

Аудит юзабилити интернет-магазина: Чеклист из 170+ пунктов для проверки интерфейса
1443

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

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

Ключевые элементы интернет-магазина

  • Оформление главной страницы должно транслировать тематику сайта, то есть пользователь должен понимать чему посвящен сайт (интернет-магазин электроники, ювелирных изделий, детских товаров, и т.д.), а также отображать УТП
  • У вас есть 1-3 секунды, чтобы заинтересовать и вовлечь пользователя на сайт.
  • Дизайн интернет-магазина должен быть уникальным и запоминающимся.
  • Самая важная информация расположена на первом экране.
  • Пользователь может попробовать все основные функции без регистрации.

Главная страница интернет-магазина Zlato.ua подчеркивает контент и доносит идею бренда о доступности и престижности ювелирных изделий
Главная страница интернет-магазина Zlato.ua подчеркивает контент и доносит идею бренда о доступности и престижности ювелирных изделий

  • Есть подсказки и помощь для новых пользователей.
  • Нет лишней информации и отвлекающих элементов, либо же их можно в любой момент закрыть (онлайн чат, поп-ап окна, и т.д.)
  • Нет необходимости вводить одни и те же данные дважды.
  • Контент сайта хорошо структурирован и не создает визуальный шум.
  • Чёткие, понятные заголовки, лаконичны в оформлении.
  • Весь контент сайта разделен на основной и дополнительный.
  • Каталог товаров хорошо структурирован и интуитивно понятен, чтобы пользователь мог легко найти интересующий его товар.
  • Справа внизу длинных страниц есть кнопка быстрого возвращения наверх и прилипающее меню, чтобы пользователю не надо было долго скролить.

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

  • Пользователь интернет-магазина знает, в каком разделе он находится.
  • Структура категорий каталога хорошо продумана.

Пример структурированного каталога товаров в интернет-магазине детских товаров Antoshka
Пример структурированного каталога товаров в интернет-магазине детских товаров Antoshka

  • Ключевые точки навигации по сайту (каталог, корзина, и прочее) доступны пользователю в любой момент, на любой странице интернет-магазина.
  • Максимально простое и понятное оформление критически важных точек пути пользователя (регистрация, покупка, подписка, и т.д.).
  • Пользователь имеет доступ к важной информации с любой страницы интернет-магазина.
  • Сайт не содержит «тупиковых» страниц.
  • То есть пользователь с любой страницы может перейти по ссылке на другую страницу. Например, статьи в блоге перелинкованы между собой, в описаниях услуг и товаров есть CTA для заказа, на 404 странице есть ссылки на основные разделы сайта или поиск, и т.д.
  • Кнопка back браузера не блокируется сайтом.

Главное меню

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

Структура страниц сайта

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

В шапке интернет-магазина Pampik находится наглядная навигация с иконками, которые поддерживают тему магазина, линк-бар, логотип с названием «Мы заботимся о маме и малыше». С первых секунд понятно, что это сайт для мам и детей.
В шапке интернет-магазина детских товаров Pampik находится интуитивная навигация с понятными иконками, которые выполнены в едином стиле с темой магазина, логотип с названием «Мы заботимся о маме и малыше», линк-бар. Пользователю с первых секунд понятно, что это сайт для мам и детей.
  • Каждый блок на странице можно охватить взглядом.
  • Если элемент кликабельный, то это должно быть визуально понятно и очевидно, также при наведении на него курсором мыши он должен видоизменяться.
  • Дизайн иконок и графических элементов должны отображать их значение и назначение и должны быть интуитивно понятны.

Поиск по сайту и выдача

  • Строка поиска, ее размер и оформление должно соответствовать бизнес-целям.
  • Строка поиска находится на видном месте и доступна на любом экране.
  • Только одна строка поиска на всю страницу.
  • Есть автодополнение и уместные подсказки.
  • Подсказки в строке поиска выводятся по приоритетам и параметрам выбора (категория-подкатегория-товары/контентный задел).
  • Поиск отрабатывает ошибки и ложные запросы, ищет синонимы.
  • Если запрос вводится с другой раскладки, то строка поиска автоматически заменяет поисковый запрос.

Пример работы поиска по сайту Intertop до редизайна
Пример работы поиска по сайту Intertop до редизайна

Пример работы поиска после проведения юзабилити-аудита экспертами и редизайна сайтаТак, например, после оптимизации поиска интернет-магазина Intertop нам удалось увеличить коэффициент транзакций на 74,64%.
Пример работы поиска после проведения юзабилити-аудита экспертами и редизайна сайта.
Так, например, после оптимизации поиска интернет-магазина Intertop нам удалось увеличить коэффициент транзакций на 74,64%.

Поисковая выдача

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

Пример выдачи по поисковому запросу в интернет-магазине Intertop
Пример выдачи по поисковому запросу в интернет-магазине Intertop

Текст и его оформление на сайте

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

Абзацы

  • Кегль для основного текста, предназначенного для чтения, — в идеале 16 px.
  • Выравнивание текста  сделано по левому краю.
  • Длина строки должна быть не более 80 символов. Если строка слишком короткая или длинная, то это негативно влияет на восприятие текста.

Заголовки

  • Заголовки дают понять пользователю «о чем дальше», а лучше «что там сказано».
  • Заголовки оформляются по типу ближе к «своему» абзацу.
  • Кегль для заголовков больше кегля подзаголовка в 1,5 раза, кегля подзаголовка в свою очередь в 1,5 раза больше кегля для текста.

Шрифт текста, кегль и цвет

  • Верхний регистр использован по минимуму. Использование верхнего регистра должно быть оправданным, так как он затрудняет чтение и восприятие текста.
  • Шрифты должны быть одни и те же для всех страниц сайта интернет-магазина. Они должны быть читабельны и контрастны.
  • Цвет основного текста и ссылок должен отличаться друг от друга и быть контрастным.
  • Использование разных цветов текста должно быть оправданным.
  • Все длинные числа разбиты пробелом для упрощения восприятия (1 524 733, например).

Оформление ссылок и кнопок

  • По тексту ссылки пользователю должно быть понятно, куда она приведет.
  • Цвет и стиль ссылок должен визуально отличаться от остального текста (подчеркнутые или выделенные цветом).
  • Если пользователь перешел по ссылке, она меняет свой цвет.
  • Все ссылки, которые не перезагружают страницу, — выделены пунктиром.
  • Длина текста ссылки достаточно длинная, чтобы пользователю было удобно и легко по ним кликнуть.
  • Ссылки для скачивания файлов должны визуально отличаться от тех, которые ведут на другие страницы сайта.

Кнопки и ссылки типа «Что сделать»?

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

Анти-пример:

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

А в интернет-магазине косметики Mon Amiе также реализовано несколько кнопок призыва к действию, но их дизайн выполнен так, что визуальный акцент направлен только один основной call to action — купить.

 Визуально выделен лишь один основной call to action
Визуально выделена лишь кнопка Купить
  • Призыв к действию или текст на кнопке — это глагол в инфинитивной форме. Например, найти, купить, подписаться, и т.д.
  • Кнопка реагирует на курсор, например, меняет цвет для побуждения пользователя сделать клик.
  • В случае, если действие недоступно, то кнопки и ссылки не исчезают с экрана, а деактивируются и блокируются.

Формы для заполнения

Оформление форм в целом

  • Формы должны быть максимально просты и лаконичны. В случае, если это оформление заказа, регистрация, или какая-либо целевая форма то в ней содержатся только обязательные поля.
  • Если это поле необязательное, то оно должно быть аргументировано и обосновано.
  • Если это большая форма с большим количеством полей, то она должна быть структурирована, поля сгруппированы по смыслу и есть подзаголовки у каждой группы.
  • Курсор автоматически перемещается в первое поле при открытии формы.
  • Активное поле визуально выделено.
  • Подсказка остается на месте при перемещении фокуса на поле.
  • Есть пошаговая инструкция и строка прогресса, если форма состоит из нескольких шагов. Пользователь должен быть информирован на каком шаге он сейчас находится и сколько шагов еще осталось.
  • Все заполненные поля сохраняются до завершения процесса, чтобы пользователю не пришлось повторно вводить данные в случае, если он случайно ушел со страницы формы.
  • Пользователь может последовательно переводить курсор с поля на поле с помощью клавиши tab.

Элементы формы — поля и их значения

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

Валидация, ошибки и подсказки

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

Каталог и его функции

Фильтры на выдаче

  • Пользователь может отменить выбранное значение для списков и радиобаттонов.
  • Обновление зависимых полей должно происходить синхронно.
  • Очевидно, в каком направлении, по какому именно полю и признаку применена сортировка в данном случае.
  • Интуитивно понятно как можно изменить направление или поле сортировки.
  • Кнопка применения фильтра всегда на виду у пользователя.
  • Есть хлебные крошки, по которым пользователь может вернуться на отфильтрованную выдачу после открытия карточки товара.
  • Все параметры в фильтре отображаются в виде перечня, при этом у пользователя может сбросить любой параметр.
  • Если в фильтре есть сложные параметры, то должна быть подсказка с объяснением этого параметра, чтобы пользователь понимал как и для чего применять его.

Пример фильтров для каталога в интернет-магазине косметики Mon Amie
Пример фильтров для каталога в интернет-магазине косметики Mon Amie

Отправка отфильтрованного списка

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

Поэтому важно выполнение следующих требований:
  • При применении параметров фильтрации URL динамически изменяется.
  • Отфильтрованный список товаров должен открываться без редиректов, миганий фильтра, дополнительных переходов, даже при открытии ссылки в режиме инкогнито.
  • Изменение каждого поля из фильтра сохраняется.
  • Все поля в фильтре корректно влияют на фильтруемый список как отдельно по каждому полю так и по комбинации полей.
  • После сброса фильтра список товаров перестраивается и при этом сбрасываются как параметры фильтрации, так и URL.

Добавление товара в корзину из каталога

  • Пользователь может добавить любой товар в корзину.

В интернет-магазине Zlato.ua пользователь сразу со страницы выдачи может добавить товар в корзину или отправить в «Список желаний».
В интернет-магазине Zlato.ua пользователь сразу со страницы выдачи  может  добавить товар в корзину или отправить в «Список желаний».

  • Есть визуальное подтверждение добавления позиции из каталога в корзину.

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

Мини-корзина:

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

Карточка товара

  • В заголовке указано название товара.
  • Вся информация о товаре актуальна и выводится корректно.
  • Есть ссылка для возврата в каталог или хлебные крошки.

Пример хлебных крошек в каталоге товаров Intertop
Пример хлебных крошек в каталоге товаров Intertop

Добавление товара корзину:

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

Вывод дополнительных блоков:

  • Если предусмотрен вывод upsell и cross-sale блоков таких как «С этим товаром также покупают», «Рекомендуем», «Вы просматривали», в них выводятся правильные товары.

Например, в цветочном интернет-магазине Dicentra.ua на главной странице кросселлинг реализован в виде продажи акционных бандлов: букета и подарка к нему.

Например, в цветочном интернет-магазине Dicentra.ua на главной странице кросселлинг реализован в виде продажи акционных бандлов: букета и подарка к нему.

А в карточке товара различные варианты cross-sale и upsell инструментов от конфет и тортов, до похожих и просмотренных товаров.

13.png

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

Пример карточки товара на сайте Mon Amie
Пример карточки товара на сайте Mon Amie

Корзина

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

Пример корзины в интернет-магазине детской тематики Pampik
Пример корзины в интернет-магазине детской тематики Pampik

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

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

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

Пример чекаута в 966.ua
Пример чекаута в 966.ua

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

Страница оформления заказа в Pampik
Страница оформления заказа в Pampik

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

Благодарность за заказ

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

Личный кабинет

  • При регистрации все данные о пользователе сохраняются и используются при последующих оформлениях заказа (ФИО, способы доставки, способы оплаты, и т.д.)
  • Статусы заказов отслеживаются в реальном времени.
  • Есть возможность оплаты заказа с личного кабинета.
  • Пользователь может повторить заказ.
  • В личном кабинете пользователь может изменить пароль, отписаться от рассылки, создать список «Желаний», выйти из кабинета, и т.д.

Пример оформления личного кабинета в интернет-магазине Pampik
Пример оформления личного кабинета в интернет-магазине Pampik

Аудит юзабилити интернет-магазина — первый шаг, который стоит предпринять при проблемах пользователей взаимодействия с сайтом, или при низком показателе конверсии. В статье эффективные способы проверки юзабилити сайта мы делимся web-инструментами для выявления недостатков интерфейса.

Адаптивная версия интернет-магазина 

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

Главная страница интернет-магазина 

  • Для мобильной версии сайта стоит отключить все лишние блоки для оптимизации скорости загрузки страницы.
  • Все маркетинговые баннеры должны быть оптимизированы под мобильные устройства и весь текст должен быть читабельный текст. Для этого стоит готовить пару баннеров разного размера для 1366-1920 и 320. 
  • Для проектов где доминируют пользователи мобильных устройств, то стоит в дизайне двигаться от mobile-first (320-768-1024-10280-1366-1920). 

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

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

Пример навигации и главной страницы интернет-магазина 966.ua
Пример навигации и главной страницы интернет-магазина 966.ua

Строка поиска

  • Строка поиска имеет достаточный размер и приоритет в зависимости от бизнес целей. 
  • Поиск должен быть доступен на любом экране, если это гипермаркет или интернет-магазин, для которого это приоритетный инструмент. 
  • В поле поиска работают расширенные подсказки, при этом подсказки выводятся по приоритетам (категория-подкатегория-товары/ контентный задел). 
  • Поиск отрабатывает ошибки, транслитерацию, ищет синонимы, и прочее. 

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

Клавиатура

  • Учтена высота панели клавиатуры для всех состояний ввода и заполнения полей. 
  • Клавиатура не должна перекрывать поле, в которое производится ввод. 

Каталог товаров

  • Пользователь может получить всю необходимую информацию о продукте в карточке товара.
  • Ховер отсутсвует.
  • Фильтр — сквозной элемент и выделен среди других элементов, или есть кнопка подняться наверх.
  • Пользователь может выбрать несколько фильтрова за один раз без перезагрузки страницы.

Карточка товара

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

Корзина

  • Кнопка для оформления заказа должна быть доступна с первого экрана.
В мобильной версии сайта 966.ua корзина всегда доступна в нижнем фиксированном меню
В мобильной версии сайта 966.ua корзина всегда доступна в нижнем фиксированном меню

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

 

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

 


Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.