Принципы построения идеального CheckOut'а в мобильных приложениях e-Commerce

1. MBLT } DEV’2016
CheckOut в приложениях e-Commerce
Антон Вдовиченко, Founder & CEO, VoltMobi

2. MBLT } DEV’2016
Антон Вдовиченко
— Основатель и CEO студии мобильной разработки VoltMobi.
— Со-основатель ServiceGuru.
— Преподаю UX в Британке.
— Гик.

3. MBLT } DEV’2016
Доминирование Y
— До четырёх часов в день в смартфонах.
— Всё должно работать на мобильных устройствах.
— Нетерпимость к проблемам.
— Доверие к отзывам и персональным рекомендациям (88%).

4. MBLT } DEV’2016
Дополнительная стоимость (доставка, налоги, скрытые
платежи)
Mobile
Desktop
0 10 20 30 40
33
23
Почему это важно (брошенные корзины)

5. MBLT } DEV’2016
Необходимость создания учётной записи
Mobile
Desktop
0 10 20 30 40
23
24
Почему это важно (брошенные корзины)

6. MBLT } DEV’2016
Безопасность платежных форм
Mobile
Desktop
0 10 20 30 40
18
24
Почему это важно (брошенные корзины)

7. MBLT } DEV’2016
Долгий Checkout
Mobile
Desktop
0 10 20 30 40
18
23
Почему это важно (брошенные корзины)

8. MBLT } DEV’2016
Почему это важно (брошенные корзины)
Недостаточное количество вариантов оплаты
Mobile
Desktop
0 10 20 30 40
7
7

9. MBLT } DEV’2016
Покупаете ли вы товары при помощи компьютера,
предварительно выбирая их в мобильном приложении?
Да, всегда
Иногда
Нет
0 10 20 30 40
39
40
21
Почему это важно (сложность процесса)

10. MBLT } DEV’2016
Идеальный Сheckout
— Пользователь положил товары в корзину.
— В корзине нажал «Оформить заказ».
— Магия.
— «Спасибо за заказ, привезём через час!»

11. MBLT } DEV’2016
Идеальный Сheckout
— Персонализация опыта.
— Минимум ручного ввода.
— Только необходимая информация.
— Возможность изменить опции в любое время.
— Детерминированность состояния.

12. MBLT } DEV’2016
Корзина и добавление товаров в корзину
— Визуальный отклик при добавлении в корзину.
— Очевидный выбор количества товаров и его изменение.
— Порог приближения к условию акции.
— Цены с учётом скидок.
— Все цены — финальные, скрытой стоимости нет.

13. MBLT } DEV’2016

14. MBLT } DEV’2016
Регистрация и учётная запись
— Должна быть возможность купить без регистрации.
— Без регистрации — самый очевидный выбор для пользователя.
— Вход через социальные сети — второй по значимости выбор.
— Учётную запись можно создать «потом».
— Опция «показать пароль».

15. MBLT } DEV’2016
Идентификатор пользователя
MBLT } DEV’2016

16. MBLT } DEV’2016
Информация об адресе
— Может быть введён произвольный адрес.
— «Мягкая» валидация полей.
— Реверсивный геокодинг (!).
— Автоподстановка адреса (справочник).
— Сохранение информации.

17. MBLT } DEV’2016MBLT } DEV’2016

18. MBLT } DEV’2016
Заказ в подарок
— Персональное сообщение.
— Опции для упаковки/оформления.
— Внимание к номеру телефона.
Подарки

19. MBLT } DEV’2016
Доставка/самовывоз
— Чёткие и понятные опции и их стоимость.
— Ориентировочные дата/время доставки.
— Экспресс-доставка за дополнительные деньги.
— Отслеживание статуса заказа.

20. MBLT } DEV’2016MBLT } DEV’2016

21. MBLT } DEV’2016
Платёж и методы оплаты
— Несколько вариантов оплаты.
— Оплата картой в приложении/при получении.
— Apple Pay, Android Pay.
— Наличные.
— Платежные агрегаторы.

22. MBLT } DEV’2016
Банковские карты
— Расположение полей как на настоящей карте.
— Автоподстановка карт из сохранённых на устройстве.
— Фотография (card.io).
— Сохранение карт для последующих платежей.
— Только необходимые поля.

23. MBLT } DEV’2016

24. MBLT } DEV’2016MBLT } DEV’2016

25. MBLT } DEV’2016
Ревью заказа
— Детальная информация обо всех опциях заказа.
— Применённые акции, подарки и купоны.
— Возможность легкого изменения данных.
— Кнопка финального подтверждения.

26. MBLT } DEV’2016MBLT } DEV’2016

27. MBLT } DEV’2016
Подтверждение заказа и следующие шаги
— Явное подтверждение о том, что заказ принят.
— Изменение заказа после подтверждения.
— Отмена заказа с полным возвратом средств.
— Оценка опыта взаимодействия, прошлого заказа.
— Трекинг заказа.

28. MBLT } DEV’2016

29. MBLT } DEV’2016
Важные моменты
— Пользовательский контекст.
— Отработанные «угловые» ситуации.
— Правильная организация форм.
— Анимация вместо слов.

30. MBLT } DEV’2016MBLT } DEV’2016

31. MBLT } DEV’2016

32. MBLT } DEV’2016
There is one more thing…
MBLT } DEV’2016

33. MBLT } DEV’2016
iWatch/Android Wear
— Отсутствие ввода, только выбор.
— Повторение предыдущего заказа.
— Отслеживание доставки.
— Нотификации.

34. MBLT } DEV’2016MBLT } DEV’2016

35. MBLT } DEV’2016
CheckOut в приложениях e-Commerce
@miolamio, an@voltmobi.com