Учимся принимать прототип вместе

Итак, разработчик прислал на согласование готовый фрагмент прототипа “оформление заказа в стандартной корзине”. Выглядит он так:

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

Взгляд пользователя следует по странице сверху вниз, слева направо. Движение начинается с левого верхнего угла с заполнения блока “Персональная информация”. Пользователь считывает данные по принципу зигзага “Z”.





Затем взгляд переносится вправо, где еще раз проверяется содержимое корзины. Сверху в этой же зоне дублируется этап, на котором сейчас находится заказ. Далее по диагонали вниз в левый нижний угол на кнопку "Назад в корзину" для изменения заказа. В итоге взгляд останавливается внизу по центру страницы на кнопке "Оплатить заказ". 

По статистике web-исследовательской организации Baymard Institute средний показатель брошенных корзин составляет 70,19 %. Это обобщенное значение, рассчитанное на основе 49 различных исследований, содержащих статистику о брошенных корзинах покупок в электронной коммерции. 

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

Для этого последовательно проверяем путь пользователя по прототипу: 


Персональная информация

• Обращаем внимание на обязательные поля со * “Ваше имя” и “Телефон”. Посетитель сразу отметит, ЧТО необходимо заполнить для оформления заказа в первую очередь. Почему для авторизации достаточно одного поля “Имя” без фамилии и отчества? Потому что меньше официальности и больше доверия.
• Смотрим на легкость авторизации, которая упрощает путь. Если перед пользователем появится форма, содержащая 10 и более полей, то он, скорее всего, закроет сайт и оформит заказ в другом месте.
• Отмечаем, что поле “Эл. почта” может быть необязательным для заполнения. Многие пользователи не любят делиться своими персональными данными и получать ненужные рассылки. 
• Уточняем количества персон для того, чтобы знать сколько сопутствующей продукции необходимо положить в заказ (салфетки, вилки, зубочистки, жвачки и прочее).

Способ получения

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

Промокод

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

Способ оплаты

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

Ваш заказ (Содержимое корзины)

• Содержимое корзины дублируется справа для проверки заказа.
• Кнопка “Назад в корзину” позволяет в любой момент изменить заказ (добавить блюдо или удалить).
• Лучше прописывать кнопки согласно действиям “оплатить заказ”, “активировать”, “вернуться назад в корзину”. Так вы практически не вводите в заблуждение пользователей, а делаете путь на вашем сайте простым и понятным. 

В прототип можно также добавить поле “Комментарий к заказу”, чтобы гости могли писать о чем-то важном или индивидуальном (встретим у подъезда / оставить у двери / где искать вход / код домофона / где лучше припарковаться и другое). Чем тщательнее продуман путь пользователя на сайте, тем больше довольных и счастливых клиентов у компании. 

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