Чек-лист юзабилити интернет-магазина

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

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

При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

Чек-лист

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

1) Заголовок релевантен запросу пользователя и дает представление о товарах, представленных в разделе каталога.

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

2) В описании товаров или фильтрах представлена информация, помогающая выбрать товар.

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

3) Есть возможность сортировки товаров по важным для пользователя характеристикам.

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

4) Если в каталоге предусмотрено добавление товара в корзину, то после добавления выводится визуальное подтверждение.

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

5) При добавлении товара в корзину, в мини корзине обновляется количество и происходит перерасчет суммы.

Почему это важно: пользователи должны видеть количество и стоимость товаров без посещения корзины — это позволит им сосредоточиться на дальнейших покупках.

6) Фильтр не содержит избыточных параметров, не используемых при выборе товара.

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

7) При переходе на карточку товара из каталога и обратно — ссылка «назад» в браузере возвращает пользователя на страницу с выбранными параметрами фильтра.

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

8) Фильтр динамически изменяет URL при применении параметров фильтрации.

Почему это важно: пользователи должны иметь возможность поделиться отфильтрованным каталогом.

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

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

10) Кнопка сброса фильтра сбрасывает URL до исходного состояния, выставляет параметры фильтрации по умолчанию и перестраивает список товаров.

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

11) Для фильтров отложенного действия кнопка запуска фильтрации находится в пределах первого экрана.

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

12) Для подгрузки товаров в каталоге используется кнопка «Показать больше», а не пангинация или бесконечная подгрузка.

Почему это важно: бесконечный скролл не позволяет посетителю добраться до футера, где есть полезные ссылки, которые позволят ему связаться с магазином, узнать больше о доставке и оплате и т. п. В сравнении с пагинацией, кнопка «Показать больше товаров» создаёт меньшую когнитивную нагрузку — посетитель отвечает на простой вопрос «да (покажите больше товаров)» или «нет (не надо показывать)». Это обеспечивает больший объём внимания отдельным товарам, а не управлению интерфейсом.

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

13) Заголовок страницы содержит название товара.

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

14) Имеется возможность выбора или ручной установки количества товаров, добавляемых в корзину

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

15) На карточке присутствует информация об условиях оплаты и доставки

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

16) На карточке присутствует информация о наличии товара.

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

17) Кнопка добавления товара в корзину визуально выделяется на фоне остального содержимого страницы.

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

18) После добавления товара в корзину выводится визуальное подтверждение.

19) Если на сайте используется рейтинг товара, то на карточке отображаются отзывы, по которым рейтинг был составлен.

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

Корзина и чекаут

20) В корзине и на всех страницах оформления заказа виден список товаров и их стоимость.

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

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

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

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

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

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

24) Поле для ввода скидки находится на странице корзины.

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

25) На странице корзины дублируется информация об условиях доставки и оплаты.

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

26) Кнопка продолжения оформления заказа визуально выделяется на фоне остального содержания страницы.

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

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

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

28) Для оформления заказа не нужно проходить обязательную регистрацию.

Почему это важно: новые покупатели не видят необходимости в регистрации, поскольку не знают, будут использовать магазин в дальнейшем или нет. Если обязательная регистрация обусловлена техническими особенностями CMS — её необходимо проводить в фоновом режиме с последующей отправкой на e-mail пользователя регистрационных данных.

29) Процесс оформления заказа линейный.

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

30) После выбора способа доставки итоговая сумма корректно обновляется без перезагрузки страницы.

Почему это важно: пользователям важно знать точную сумму заказа и его доставки.

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

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

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

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

33) В многошаговых формах указано количество шагов и текущее месторасположение пользователя.

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

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

Почему это важно: только в этом случае пользователь сможет разобраться, как исправить свою ошибку.

35) При прерывании оформления заказа товары из корзины не удаляются.

Почему это важно: если товары в корзине сохранятся, то пользователь может завершить оформление заказа позже.

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

Почему это важно: часть пользователей проверяет всю информацию перед совершением оформления заказа.

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

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

38) Оформление заказа завершается страницей «Спасибо за покупку», на которой имеется полная информация о заказе и дальнейших действиях магазина и пользователя. Информация с этой страницы дублируется на e-mail пользователя.

Почему это важно: пользователям должны быть доступна полная информация о совершенном заказе (номер, дата, состав, сумма).

Об авторе

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