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

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

В этой статье используются выводы, сделанные в результате исследования, проведенного в рамках подготовки четвертого издания Ecommerce User Experience report series. Мы выделим и обсудим ключевые аспекты работы над организацией оптимального процесса мобильного шопинга.

Чаще всего процесс покупки начинается с перехода в корзину и корректирования списка товаров, которые в ней находятся и, соответственно, будут приобретены в ходе текущей сессии.

Что нужно учитывать на этом этапе:

Во время шопинга на сайте HP одна из участниц исследования была настолько раздражена тем, что не могла удалить из корзины ненужный картридж, что в итоге сделала покупку на Amazon. Чтобы удалить товар, необходимо было изменить его количество на 0.

Такой подход не оптимален по двум причинам:

1. От пользователя требуется два действия вместо одного (сначала внести изменения, затем нажать кнопку);
2. Многие пользователи забывают нажать на кнопку либо просто не замечают её в силу неочевидности дизайна.

Например, пользователи Apple имеют в своих устройствах функцию передачи (handoff). Она позволяет:

1. совершать действия на сайте в браузере Safari, например, с iPhone;
2. позднее, используя уже iPad или Mac, открыть ту же самую страницу уже на этом устройстве.

Приложение также может передать информацию о сессии пользователя на другое устройство. Например, если кто-то совершает покупку через приложение на iPhone, процесс может быть продолжен на iPad при условии, что разработчики приложения используют функцию передачи.
К сожалению, многие приложения не используют передачу — среди них даже Amazon. Отказ от передачи ухудшает пользовательский опыт.

Чтобы поддерживать бесшовный переход между устройствами для пользователей вне экосистемы Apple (или просто незнакомыми с функцией передачи), убедитесь в том, что их сессия может быть возобновлена после входа в аккаунт.
Но и этого еще недостаточно: вы обязаны уведомить пользователя об этой функции, когда он создает аккаунт в первый раз. Чтобы напомнить пользователям о действиях во время предыдущих сессий, рекомендуется добавить товарам теги или ярлыки, указывающие на действия с товаром и устройство, с которого было выполнено действие.

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

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

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

Автозаполнение из данных браузера должно работать в таких полях формы, как «имя», «адрес», «e-mail», «телефон», «пароль», «данные кредитной карты». Участники тестирования на юзабилити мобильного сайта Tiffany одобрили возможность автозаполнения своих данных из данных браузера. Форма безупречно отработала с функцией AutoFill Contact браузера Safari, что порадовало пользователей на этапе ввода контактной информации. Однако в данном случае требуется соблюдать высокое качество автозаполнения, т.к. раздражение от некорректных данных проецируется на ваш сайт.

Поля «регион» и «срок действия кредитной карты» сделайте заполняемыми. Не используйте список. Мобильным пользователям, особенно тем, у кого iOS, сложно использовать длинные списки. Списки в iOS отображаются, занимая половину экрана, и отображают одновременно всего несколько опций (см. картинку ниже). Если список длинный, пользователям приходится долго его прокручивать. Исследование показало, что у большинства пользователей возникают затруднения с выбором корректной опции из таких списков, они часто совершают ошибки и вводят данные не с первого раза. Решение сократить количество заполняемых полей для мобильных пользователей выглядит логичным, но слишком длинные списки с большим количеством вариантов — тоже неправильное решение. Пользователю проще ввести 4 цифры, обозначающие срок действия его карты, чем выбирать из списка.

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

1. карта у них не всегда под рукой;
2. на этом этапе велика вероятность, что пользователь совершит ошибку при вводе данных.

Исследование показало, что многие пользователи с удовольствием пользуются функциями Apple Pay или PayPal. Это не только избавляет их от необходимости вводить свои данные, но и считается пользователями более безопасным способом оплаты.

Во время оплаты покупки на сайте Tiffany’s отсутствие возможности оплатить с помощью Apple Pay или PayPal вызвало раздражение у одного из пользователей. Этот пользователь затем воспользовался опцией сканирования карты.