назад к блогу

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

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



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

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





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





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




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

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

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


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

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

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

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

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

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

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



Вас может заинтересовать
16 февраля 2024
Хочется открыть службу доставки готовой еды, но есть сомнения?
разработка сайтов
16 февраля 2024
Хочется открыть службу доставки готовой еды, но есть сомнения?
e-commerce
16 февраля 2024
Как заказать дизайн-проект, чтобы получить рабочий продукт на выходе?
дизайн
16 февраля 2024
Как заказать дизайн-проект, чтобы получить рабочий продукт на выходе?
разработка сайтов
16 февраля 2024
8 секунд на размышление
разработка сайтов
16 февраля 2024
С чем интегрируется Гуляш?
e-commerce
15 февраля 2024
Как понять, что сайт устарел?
разработка сайтов
15 февраля 2024
4 приема для создания интересного контента
разработка сайтов
17 февраля 2024
Как правильно выбрать CMS? Чем они отличаются?
разработка сайтов
7 марта 2024
Кейс Level Up
дизайн
7 марта 2024
Кейс Level Up
разработка сайтов
1 марта 2024
Разработка корпоративного сайта AthleticsFit, сервиса автоматизации процессов доставки
разработка сайтов
1 марта 2024
Разработка корпоративного сайта AthleticsFit, сервиса автоматизации процессов доставки
e-commerce
26 февраля 2024
Умное управление доставкой с помощью модуля “Маршрутизация”
e-commerce
29 февраля 2024
От заявки до доставки
e-commerce
16 февраля 2024
Надёжная ИТ-система, где всё в одном месте
e-commerce
16 февраля 2024
Про нашу техподдержку
разработка сайтов
14 марта 2024
Автоматизация кухни с помощью планшета повара
e-commerce
18 марта 2024
Собственное исследование рынка разработки
дизайн
18 марта 2024
Собственное исследование рынка разработки
разработка сайтов
18 марта 2024
Собственное исследование рынка разработки
e-commerce
21 марта 2024
Всё, что нужно знать заказчику
разработка сайтов
25 марта 2024
Мобильное приложение для компании «Сибуголь»
дизайн
25 марта 2024
Мобильное приложение для компании «Сибуголь»
разработка сайтов
4 марта 2024
Модуль "Мобильное приложение курьера"
e-commerce
1 апреля 2024
Переход на систему “Гуляш”. Какое оборудование необходимо для подключения?
e-commerce
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
дизайн
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
разработка сайтов
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
e-commerce
15 апреля 2024
Прототип сайта и графический редактор Figma. Инструкция пользователя.
дизайн
15 апреля 2024
Прототип сайта и графический редактор Figma. Инструкция пользователя.
разработка сайтов
12 апреля 2024
Один год вместе с Goulash.tech
e-commerce
20 апреля 2024
Человек или робот: кто быстрее?
e-commerce
26 марта 2024
Дашборд — лучшее решение для собственника службы доставки
e-commerce
2 мая 2024
Главное про нашу техподдержку
разработка сайтов
7 мая 2024
Jpeg, jpeg progressive или webp? Что выбрать?
дизайн
7 мая 2024
Jpeg, jpeg progressive или webp? Что выбрать?
разработка сайтов
7 мая 2024
Jpeg, jpeg progressive или webp? Что выбрать?
e-commerce
13 мая 2024
Команда техподдержки: как устроена обработка заявок?
разработка сайтов
27 апреля 2024
“Мне не нужен дизайн. Нужен просто сайт нормальный”
дизайн
27 апреля 2024
“Мне не нужен дизайн. Нужен просто сайт нормальный”
разработка сайтов
16 мая 2024
Разработка интернет-магазина для фабрики ёлочных игрушек «Бирюсинка»
дизайн
16 мая 2024
Разработка интернет-магазина для фабрики ёлочных игрушек «Бирюсинка»
разработка сайтов
20 мая 2024
Goulash.tech и персонал
e-commerce
22 мая 2024
Почему важно поддерживать сайт компании в рабочем состоянии?
дизайн
22 мая 2024
Почему важно поддерживать сайт компании в рабочем состоянии?
разработка сайтов
24 мая 2024
Нужен новый баннер? Но, вы не можете позволить работу с дизайнером?
дизайн
3 июня 2024
Какие ошибки мешают зарабатывать с сайта?
разработка сайтов
3 июня 2024
Какие ошибки мешают зарабатывать с сайта?
e-commerce
5 июня 2024
Почему «Гуляш» лучше?
e-commerce
7 июня 2024
Как автоматизация влияет на увеличение скорости доставки?
e-commerce
7 июня 2024
Зачем веб-студия «Кибер-Невод» ходит по выставкам?
разработка сайтов
7 июня 2024
Зачем веб-студия «Кибер-Невод» ходит по выставкам?
e-commerce
11 июня 2024
Как модификаторы в «Гуляш» влияют на лояльность клиентов?
e-commerce
Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Ваша заявка успешно отправлена!

Мы получили Вашу заявку и свяжемся с Вами в ближайшее время.