Прохождение Битроник 2.0 чек-листа от UsabilityLab. Часть 1: корзина и авторизация

Мы являемся большими поклонниками Дмитрия Сатина и UsabilityLab по этому, сразу после выхода на Хабре статьи Козырная карта Интернет­-магазина: исследование юзабилити процесса покупки онлайн мы решили, что хотим добиться от нашего типового решения Битроник 2.0 полного удовлетворения опубликованному в статье чек-листу. Задача для настоящих въедливых перфекционистов придирающихся к каждой мелочи!
Начали с первых двух глав и вот, что у нас из этого получилось, отчитываемся:
[spoiler]
КОРЗИНА
1 Этап добавления товара в корзину не должен содержать лишних шагов и действий
У нас нет никаких лишних шагов, действий, промежуточных страниц — все сразу.
2 Информация о том, что товар добавлен в корзину, должна быть очевидна для пользователя
2.1 Информация о том, что товар добавлен в корзину, должна быть очевидна для пользователя.
У нас сейчас доступно целых 2 варианта на выбор!
а. визуальный анимированный эффект, когда малая корзина трясется ловя товар
б. либо, всплытие окна с сопутствующими товарами, в котором можно продолжить покупки или перейти к оформлению заказа
http://screencast.com/t/jRB9ixQZ7nl также, мы планируем добавить еще третий вариант — анимированный эффект "улетания" товара в малую корзину.
Какой из доступных вариантов информирования покупателя о добавлении товара в корзину кажется администратору сайта или по результату А/Б тестирования более информативным — тот можно и включить.
2.2 Кнопка должна мгновенно реагировать на нажатие. После первого нажатия на кнопку, она должна становиться неактивной до момента появления обратной связи о добавлении товара в корзину.
Так у нас и сделано — после нажатия на кнопку "В корзину" она вдавливается и надпись на ней меняется на "В корзине":
http://screencast.com/t/mnkjsl3RY8W
2.3 Повторное нажатие на кнопку «В корзину» не должно добавлять товар в корзину. Повторное нажатие на кнопку должно осуществлять переход на страницу корзины.
Так и сделано во всех блоках где у товара есть кнопку "В корзину", например в ajax-поиске:
http://screencast.com/t/sdRcZljR
3 На странице корзины должна быть представлена подробная информация о товарах
Выводится артикул если есть, а у SKU-товаров можно выбрать другие параметры:
http://screencast.com/t/pG83bCnA
3.1 На странице должно быть представлено изображение товара. Изображение товара должно быть кликабельным. При нажатии на изображение должна открываться либо подробная информация о товаре, либо увеличенная фотография товара.
У нас при клике по изображению — переход в детальную карточку товара.
3.2 Наименование товара должно быть кликабельным. При нажатии должна открываться страница с подробным описанием товара.
У нас при клике по наименованию — переход в детальную карточку товара.
3.3 В корзине, как и на странице товара, должна быть представлена информация о наличии товара.
При клике по статусу товара у нас отображается его наличие на складах. Отсутствующие на момент оформления заказа товары (например они были положены в корзину вчера, а заказ пользователь начал оформлять только сегодня и товар был уже продан) — затеняются:
http://screencast.com/t/0bVnwutoe1l
3.4 Если товар есть только в нескольких магазинах, информация об этом также должна присутствовать на странице корзины.
Хоть в ста складах — все присутствует при клике по статусу:
http://screencast.com/t/2R49VXgnXd6Y
4 Кнопка продолжения оформления заказа должна быть визуально выделена на странице
У нас это прямо — ЦАРЬ-КНОПКА:
http://screencast.com/t/LKQZMTslTlvE
5 На странице корзины должна быть информация об условиях возврата
6 На странице корзины должна быть информация об условиях и стоимости доставки
Добавили такую включаемую область с текстом доступным для редактирования админом:
http://screencast.com/t/eAMXovXA8KM
6.1 Если рассчитать стоимость доставки на странице корзины невозможно, рядом с суммой заказа должна быть указана примерная стоимость доставки или стоять пометка о том, что сумма указана без стоимости доставки.
Сделали и добавили ссылку на страницу с описанием условий доставки:
http://screencast.com/t/27CKmcaIW
6.2 Если начиная с определенной суммы заказа доступна бесплатная доставка, информация об этом должна присутствовать на странице корзины.
Информацию об этом и чем угодно еще — администратор может легко добавить в указаный выше текстовый блок.
7 Возможность воспользоваться скидкой или промокодом должна находиться на странице корзины
Есть такая возможность — можно вводить неограниченное количество имеющихся купонов при этом сумму заказ будет пересчитываться AJAX с учетом скидки:
http://screencast.com/t/tkqpfkyQ
8 Поле ввода подарочной карты, промокода или скидки не должно быть открыто по умолчанию
Так и сделали:
http://screencast.com/t/A6iD1L1nkuyr
9 Информация о том, как получить промокод, должна быть
Так и сделали:
http://screencast.com/t/tNSPe3w8kMfZ
10 Наименование поля для ввода промокода или карты лояльности должно передавать суть поля
Так прямо и называем — "Код купона". Кстати, система сообщит найден купон или нет, если не найден — подсветит красным:
http://screencast.com/t/qIBPh8BLq129
11 Товары должны сохраняться в корзине до завершения оформления заказа
Тут даже ничего дописывать не пришлось — стандартный алгоритм работы 1С-Битрикс: идентификатор сессии в куках, таблица БД с товарами пользователя итд
12 Возможность удаления товара из корзины должна по умолчанию присутствовать на странице корзины
Есть http://screencast.com/t/8ymKa95xb6
12.1 Возможность удаления товара из корзины должна находиться рядом с кнопкой изменения количества товаров в корзине.
Вот не совсем она у нас рядом так как у нас есть еще кнопка "Отложить" и нам кажется вполне логичным сгруппировать их в один смысловой блок:
http://screencast.com/t/LZMt9OaF0
12.2 Возможность удаления товара из корзины должна быть представлена отдельной функцией, а не модифицированием количества товаров в корзине.
Так и сделано.
АВТОРИЗАЦИЯ
13 На сайте должна быть реализована возможность заказа без регистрации
По дефолту у нас включена "прозрачная регистрация", которую пользователь не видит — при оформлении заказа мы просто просим ввести его email, на который после оформления заказа пришлем ссылку для смены пароля (пересылать почтой сам пароль 1С-Битрикс считает небезопасным, это много раз обсуждалось на форумах). Обязательность прочих полей оформления заказа таких как ФИО и телефон — может легко включить или выключить администратор магазина:
http://screencast.com/t/i6JayST7is
13.1 На сайте должна быть реализована возможность заказа без подтверждения контактной информации.
Так и сделано — вперёд, вперёд, окей, окей — никаких контактов подтверждать не нужно!
13.2 Возможность заказа без регистрации должна быть заметна на странице.
В стандартном компоненте 1С-Битрикс сейчас можно включить ИЛИ прозрачную регистрацию ИЛИ обязательную, обоих вариантов сразу — не предусмотрено. Нужны ли на странице оба сразу???
14 Регистрация пользователя может осуществляться автоматически на основании введенных контактных данных
Да, так это и работает.
14.1 При покупке электронных товаров регистрация может быть «фоновой» при первой покупке.
Все о том же..
14.2 Если регистрация происходит автоматически, необходимо сообщать об этом пользователю на странице подтверждения заказа и в письме на электронную почту.
Выводим такое сообщение сразу после завершения оформления заказа:
http://screencast.com/t/xG4qtlE39

Кроме того пользователь видит что у него появился личный кабинет с дефолтной аватаркой:
http://screencast.com/t/h5GBDqTmb
15 Функционал заказа «без регистрации» не должен быть ограничен
Никаких ограничений нет.
15.1 Если какой-то из видов оплаты не доступен без регистрации, необходимо сообщать об этом заранее.
Все доступны так как регистрация "прозрачная"
16 Все способы авторизации на сайте должны быть заметны и доступны на одной странице
Можно авторизоваться под своим аккаунтом магазина или аккаунтом любой соцсети (на демо-сайте включена только часть):
http://screencast.com/t/OkDQcbFhh
Заметно?
16.1 На странице должны быть описаны преимущества различных типов авторизации.
Добавили текст поясняющий все выгоды и бонусы получаемые при регистрации:
http://screencast.com/t/eS9LiJByPdj
17 Регистрация должна быть встроена в процесс оформления заказа
17.1 Регистрация должна привести к автоматической авторизации, после чего необходимо продолжить оформление заказа.
Как уже описали выше, при оформлении заказа — у нас "прозрачная" регистрация. Она приведет к автоматической авторизации.
Если пользователь регистрируется через всплывающую форму — авторизация тоже произойдет автоматически.
17.2 Если для регистрации необходимо подтвердить контактные данные, этот этап должен быть встроен в процесс регистрации.Подтверждать
контактные данные не требуется.
17.3 После завершения регистрации содержимое корзины должно сохраняться.
Еще раз проверили — сохраняется, так стандартно работает 1С-Битрикс
18 Предоставляйте возможность зарегистрироваться на сайте после оформления заказа, с использованием той информации, которую ввел пользователь
Так как у нас регистрация "прозрачная", то введенная пользователем информация вся сохранится в его профиле.
Единственное, хотим позже вывести такое окно с предложением зарегистрироваться после покупки "в к клик"...
19 Логин для входа на сайт должен быть адресом электронной почты или номером телефона
Мы серьезно поработали с компонентами, шаблонами, валидаторами и сообщениями об ошибках в 1С-Битрикс для того чтобы избавиться от лишней сущности "логин". В Битроник 2.0 во всех формах есть только email, "логина" нигде нет:
http://screencast.com/t/W1sflBZ0gZ
19.1 Поле для авторизации должно называться не «логин», а «адрес электронной почты» или «телефон».
«Адрес электронной почты» нам показалось слишком длинным — мы называли "E-mail". Возможно, что для пожилого поколения стоит назвать длиннее, но понятнее, как считаете?
20 При попытке регистрации с уже зарегистрированным адресом электронной почты, необходимо предложить авторизоваться на сайте или воспользоваться функцией напоминания пароля
Сделали такую штуку:
http://screencast.com/t/OKok2icZ9
20.1 На странице ввода логина и пароля для входа на сайт должна быть предоставлена возможность восстановления забытого пароля.
Есть ссылка на такую форму:
http://screencast.com/t/peut2vC4TJ
20.2 Для экономии времени пользователя, логин при переходе к авторизации должен быть по умолчанию заполнен.
Так и будет происходить если пользователь не уберет включенную по умолчанию опцию "Запомнить меня на этом компьютере":
http://screencast.com/t/nB3I4AYL
21 Рядом с полем ввода контактных данных должна присутствовать уточняющая информация
Сделали такой блок пишем там что и зачем:
http://screencast.com/t/pOi0e9ZFZ
21.1 Опция подписки на новости и акции должна быть по умолчанию снята. Не рекомендуется использовать принудительную подписку на рассылку.
Добавили возможность подписаться на рассылку интернет-магазина при регистрации. По умолчанию эта галочка не отмечена:
http://screencast.com/t/qWdrmzI3zbhk
Как вы считаете, нужным делом мы занялись?
Стоит ли доработать Битроник 2.0 для того чтобы удовлетворить чек-листу по оставшимся разделам:
ВЫБОР СПОСОБА ОПЛАТЫ
ВЫБОР СПОСОБА ДОСТАВКИ
ПОДТВЕРЖДЕНИЕ ЗАКАЗА
ВВОД РЕКВИЗИТОВ КАРТЫ И ОПЛАТА
ШЛЮЗ БАНКА-ЭКВАЙЕРА
СТРАНИЦА «СПАСИБО ЗА ПОКУПКУ»
ОБЩИЕ РЕКОМЕНДАЦИИ
???
1
Пользователь 279374
13.07.2015 20:50:31
Надеемся, что данные улучшения мы увидим и в решении Apparel — магазин модной одежды и аксессуаров
Планируете реализовывать?
3
Пользователь 3308
14.07.2015 13:33:23
Раз вам нравится — планируем :)