Владимир Завертайлов

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

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

Страница каталога

□ Фильтр

□ Товары корректно фильтруются.

□ Фильтр соответствует общим требованиям чек-листа.

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

□ Возможно добавление каждого товара в корзину.

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

Пример: www.handyhat.ru

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

□ Количество единиц товара

□ При добавлении товаров в корзину учитывается выбранное количество, если оно указывается на странице каталога.

□ Поле количества на странице каталога проверено на ограничения по числу символов.

□ Опционально. Поле количества учитывает остаток на складе.

□ Счетчик товаров

□ При добавлении товаров из каталога в блоке корзины обновляется их количество.

Пример: www.zimzum.ru

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

□ Изменение мини-корзины

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

□ Ярлыки

□ Если у товаров есть заданные в админке параметры «Новинка», «Лидер продаж», «Распродажа» и так далее, они выводятся в карточке и на странице каталога.

Страница товара

□ Заголовок страницы

□ Корректно сгенерирован заголовок страницы.

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

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

□ Информация о товаре

□ Корректно выводится информация о товаре.

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

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

□ Возможно добавление товара в корзину.

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

□ Возврат к списку товаров

□ Присутствует ссылка для возврата к списку товаров или хлебные крошки.

□ Счетчик товаров

□ При добавлении товаров в блоке корзины обновляется количество товаров.

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

□ Если предусмотрен вывод блоков «С этим товаром также покупают», «Рекомендуем», «Товары, которые вы смотрели», в них выводятся корректные товары.

□ Количество единиц товара

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

□ Ярлыки

□ Если есть ярлыки «Новинка», «Лидер продаж», «Распродажа», они выводятся на странице товара.

Корзина

□ На странице корзины выполняются все чек-листы по формам

Чек-лист по формам есть в предыдущей статье и отдельном документе.

□ Корректно применяются все существующие скидки

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

□ Корректный расчет общей суммы заказа

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

□ Ввод в поле «Количество»

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

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

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

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

Пример: www.ozon.ru

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

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

Пример: www.handyhat.ru

□ Пересчет сумм при изменении количества

□ При вводе чисел в поле «Количество» происходит немедленный корректный пересчет суммы заказа и стоимости товара с учетом внесенных данных.

Пример: www.handyhat.ru

□ Возврат в каталог

□ Есть ссылка для возврата пользователя в каталог товаров.

□ Переход к оформлению заказа

□ По клику на кнопку оформления заказа происходит переход на страницу заказа или следующий шаг оформления.

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

□ На странице корзины нет мини-корзины.

Пример: www.90is.ru

□ Мини-корзина есть, но она ведет себя синхронно с основной.

□ Удаление товаров

□ На странице корзины есть работающие ссылки для удаления товаров.

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

□ При удалении всех товаров в корзине выводится сообщение «Пока корзина пуста» или аналогичное, а шапка таблицы списка и элементы вывода суммы скрываются.

Пример: www.interno-luce.ru

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

□ Все формы функционируют корректно

Сверьтесь с чек-листом.

□ Информация о заказе

□ Корректно выводится информация о заказываемых товарах и их количестве.

□ Сумма заказа

□ Корректно выводится общая сумма заказа.

□ Выбор адреса доставки

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

□ При выборе сохраненного адреса поля адреса заполняются корректно.

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

□ Вывод заказа в истории заказов

□ При сохранении в системе заказ выводится у пользователя в личном кабинете на странице «История заказов» с корректным статусом и данными.

Почему именно так. А где его еще искать?

□ Вывод информации для администратора

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

□ Отправка email

□ При успешном оформлении на указанный пользователем email направляется письмо с информацией о заказе.

□ При оплате заказа на e-mail администратора направляется письмо с информацией о новом оплаченном заказе.

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

□ Автозаполнение форм

□ Для авторизованных пользователей поля форм автоматически заполняются известными данными из профиля.

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

□ Зависимость оплаты и доставки

□ При оформлении заказа корректно выводятся варианты оплаты относительно способа доставки и наоборот. Применяется, если такие взаимосвязи есть.

□ Неавторизованный пользователь

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

Пример: www.asos.com

□ Новый адрес доставки

□ При выборе нового адреса поля адреса очищаются.

□ Оплата

□ На боевом сервере включена реальная платежная система.

□ При переходе к оплате передается выбранный способ оплаты.

□ Передача данных в административную панель

□ Все данные корректно передаются в админ-панель (включая сумму, скидки, примечания, структуру заказа).

□ Пересчет суммы

□ Корректный пересчет суммы заказа с учетом способа доставки.

Пример: www.zimzum.ru

□ Корректный пересчет суммы заказа с учетом способа оплаты.

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

□ Прерывание оформления заказа

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

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

□ Смена статуса заказа при оплате

□ При оплате заказа в административной панели меняется его статус.

□ Содержание письма о заказе для пользователя

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

□ Сообщение после оплаты или неоплаты

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

□ В случае ошибки оплаты указывается, как предпринять повторную попытку.

□ Сохранение данных заказа

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

□ Ссылка для возврата к корзине

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

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

□ Страница «Спасибо»

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

□ Удаление товаров из корзины после оформления заказа

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

□ Установка статуса при сохранении

□ При сохранении заказа в системе заказу присваивается корректный статус («Ожидает оплаты» для неоплаченных заказов, «Оплачен» для оплаченных).

Прочее

□ Квитанции для оплаты

□ Если есть функционал формирования квитанций для оплаты, то есть ссылка на их генерацию и печать.

□ Квитанции для оплаты генерируются правильно.

□ Изменение статусов

□ Администратор сайта может изменить статус заказа, оплаты, доставки.

□ Адрес администратора для отправки письма о новом заказе возможно поменять через настройки.

То же самое — в Google-документе. Дополняйте и комментируйте.


 

Что еще почитать по этой теме

Сравнение товаров: круто и не очень
13 Июля 2016
Экспресс-курс: обучаем отличать хорошие таблицы для сравнения товаров от не очень. Много картиночек под катом.
Как заткнуть фонтан желаний
30 Июня 2016
Учимся говорить «нет» так, чтобы клиент услышал и понял, в чём неправ
Мобильная версия сайта и адаптивная вёрстка — оно вам надо?
28 Июня 2016
Вопрос требует изучения. Поэтому в статье — в чём разница между мобильной версией сайта и адаптивной вёрсткой, когда они нужны и что делать, если их нет.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.