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

Главные задачи оптимизации мобильного шопинга — минимизировать количество этапов и заполняемых полей, а также по максимуму использовать возможности смартфонов: геолокацию и доступ к камере.
Автор: Anna Kaley

Оригинал (англ.): https://www.nngroup.com/articles/mobile-checkout-ux/

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

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

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

Что нужно учитывать на этом этапе:
Быстрый доступ к корзине в мобильной версии
Избегайте долгой загрузки и устраните все препятствия, которые могут возникнуть перед пользователем, пытающимся перейти в корзину
Этот дизайн магазина JCrew.com — хороший пример быстрого доступа к корзине. Когда товар добавляется в корзину, соответствующий индикатор демонстрирует это пользователю. Нажатие на иконку корзины сразу открывает её — без всплывающих окон и других промежуточных этапов.
А вот на сайте PSSW нажатие на корзину открывает мобильную мини-корзину. Здесь пользователь может выбрать — «Посмотреть корзину» или «Завершить покупку». Этот дополнительный клик — лишний; лучше отправлять пользователя на страницу корзины по первому клику.
Простой процесс внесения изменений
Упростите процесс внесения любых изменений в товары в корзине. Часто люди меняют мнение или добавляют товары в корзину по ошибке. Убедитесь, что изменить содержание корзины легко.
Заметная и очевидная кнопка «Удалить»
Разместите заметную и очевидную кнопку «Удалить» рядом с каждым товаром в корзине. Не заставляйте пользователей менять количество товаров на ноль, чтобы удалить их из корзины.
Во время шопинга на сайте HP одна из участниц исследования была настолько раздражена тем, что не могла удалить из корзины ненужный картридж, что в итоге сделала покупку на Amazon. Чтобы удалить товар, необходимо было изменить его количество на 0.
HP не разместили очевидную кнопку «Удалить» рядом с каждым товаром в корзине и требовали от пользователей изменения поля «количество» на ноль, чтобы удалить товар из корзины. Такой дизайн контринтуитивен и вызывает раздражение.
Моментальное сохранение изменений
Не используйте кнопку «Обновить», чтобы сохранить изменения в корзине. Такая практика нередко встречается в интернет-магазинах. Пользователь, который хочет изменить количество товара в корзине, должен сначала сделать это, а потом нажать кнопку, чтобы изменения вступили в силу.
Такой подход не оптимален по двум причинам:

  1. От пользователя требуется два действия вместо одного (сначала внести изменения, затем нажать кнопку);
  2. Многие пользователи забывают нажать на кнопку либо просто не замечают её в силу неочевидности дизайна.
Сайт ThingsRemembered.com: пользователь должен нажать на переключатель количества и затем нажать кнопку Update. Такой дизайн неоптимален.
Непрерывный процесс покупки на разных устройствах
Ожидания пользователей в части легкого доступа, гибкости и стабильности работы интернет-магазинов продолжают расти. Многие в процессе шопинга имеют обыкновение переключаться между разными устройствами – важно давать надежный доступ к корзине с десктопа, мобильного, через приложение или браузер.
Например, пользователи Apple имеют в своих устройствах функцию передачи (handoff). Она позволяет:

  1. совершать действия на сайте в браузере Safari, например, с iPhone;
  2. позднее, используя уже iPad или Mac, открыть ту же самую страницу уже на этом устройстве.
Как работает «передача» на устройствах Apple: эта функция позволяет использовать сайты «бесшовно» и продолжать одну и ту же сессию на разных устройствах. На примере пользователь выбирает товары на MacBook Pro, а завершает покупку на iPhone.
Приложение также может передать информацию о сессии пользователя на другое устройство. Например, если кто-то совершает покупку через приложение на iPhone, процесс может быть продолжен на iPad при условии, что разработчики приложения используют функцию передачи.
К сожалению, многие приложения не используют передачу — среди них даже Amazon. Отказ от передачи ухудшает пользовательский опыт.

Чтобы поддерживать бесшовный переход между устройствами для пользователей вне экосистемы Apple (или просто незнакомыми с функцией передачи), убедитесь в том, что их сессия может быть возобновлена после входа в аккаунт.
Но и этого еще недостаточно: вы обязаны уведомить пользователя об этой функции, когда он создает аккаунт в первый раз. Чтобы напомнить пользователям о действиях во время предыдущих сессий, рекомендуется добавить товарам теги или ярлыки, указывающие на действия с товаром и устройство, с которого было выполнено действие.
Сайт CreateandBarrel.com размещает уведомление о фнукции передачи на пустой странице корзины.
Покупка без регистрации
Сделайте возможной покупку без регистрации. Даже пользователи с аккаунтами могут забыть пароль, и при шопинге с телефона им часто проще завершить покупку в режиме гостя, чем восстанавливать пароль. Сделайте возможность покупки без регистрации самой заметной из опций, разместив ее выше других.
Хороший пример размещения опции покупки без регистрации — сайт Pottery Barn. Пользователю не нужно делать никаких усилий, чтобы найти ее — она приоритетнее и заметнее, чем покупка с авторизацией и ускоряет процесс для мобильных пользователей.
2
Содержание заказа
и варианты доставки
Покупатели не любят получать ошибочную или неполную информацию, когда дело касается цен. Если в процессе завершения покупки цена неожиданно начинает расти, пользователь испытывает раздражение. Часто в таких случаях пользователи просто бросают корзину и ищут товары уже в других магазинах — там, где нет дополнительных платежей. Особенно это касается платежей за доставку.

Есть две важные детали, которые позволят донести до пользователей всю информацию о заказе без искажений.
Вся информация — на первом экране
Сделайте страницу с содержанием заказа легкодоступной на мобильных устройствах. Детали, которые размещаются на этой странице (включая общую сумму к оплате, налоги, дополнительные платежи, скидки и цену доставки) — важная часть любого процесса покупки, поэтому важно обращать особое внимание на размещение общей информации о заказе на мобильных устройствах. Например, из-за нехватки места информация о дополнительных платежах может уйти за границы первого экрана — тогда пользователь рискует ее не заметить. Чтобы на этапе оплаты не случилось неприятных сюрпризов, размещайте информацию о заказе в верхней части страницы, не заставляйте пользователей прокручивать страницу.
Сайт Adidas.com: информация о заказе оказалась слишком низко на странице, просмотреть её было затруднительно. Пользователи должны были прокрутить страницу до самого футера (!). Информация также была свернута в выпадающий список, что затруднило просмотр цен. Лучше разместить все данные выше на странице и четко отобразить каждую сумму, заложенную в итоговую цену покупки.
На сайте Jet.com информация о заказе заметна и размещена на первом экране. Пользователям не нужно прокручивать страницу, чтобы увидеть всю информацию.
Стоимость и варианты доставки определяются по геолокации
Стоимость доставки, как правило, определяется адресом доставки заказа, а адрес чаще всего вносится в конце процесса оформления заказа. Поэтому магазин должен по максимуму использовать данные, которые предоставляет геолокация — еще до того, как пользователь ввел адрес доставки. Геолокация также может быть использована, чтобы определить ближайшие пункты самовывоза. Всегда запрашивайте у пользователя разрешение на использование данных геолокации и сделайте удобным и легкодоступным способ изменения местоположения.
Мобильная версия магазина Target использует геолокацию, чтобы предлагать пункты самовывоза и оценивать размер налога на покупку.
3
Поля форм и интерактивное заполнение
Заполнение форм с мобильного устройства неизбежно связано с тратой времени и большой вероятностью ошибок. Чтобы значительно облегчить заполнение форм в процессе покупки, рекомендуется сократить количество полей до минимума, а также автозаполнить их на основе той информации о конкретном пользователе, которая имеется в вашей системе.
Корректная клавиатура для каждого поля
Для каждого заполняемого поля обеспечьте отображение корректной клавиатуры. Например, для полей «номер телефона» и «номер кредитной карты» логично выводить числовую клавиатуру. Для поля «e-mail» рекомендуется использовать специальную клавиатуру, где укрупнены клавиши с символами «@» и «.» Клавиатура также должна иметь клавиши со стрелками для более быстрого переключения между полями.
Сайт Nike.com демонстрирует корректное использование клавиатуры для полей «e-mail» (слева) и «телефон» (справа).
Автозаполнение полей
Обеспечьте автозаполнение полей на основе данных, заполненных пользователем ранее. Например, тип кредитной карты, адрес, город или регион можно вычислить на основе других данных, которые уже ввел пользователь: номер кредитной карты и индекс соответственно. Вместо того, чтобы заставлять пользователя заполнять все самостоятельно, сделайте часть работы за него. Проведенные исследования показали, что автозаполнение города и региона на основе введенного индекса (при этом позволяя пользователю при необходимости отредактировать автозаполненные поля) дает хороший результат.
Сайт Crutchfield облегчил пользователям процесс ввода адреса. Сначала сайт требует ввести индекс (слева), а затем использует полученную информацию, чтобы автозаполнить редактируемые поля «город» и «регион» (справа). В случае ошибки пользователь может исправить данные самостоятельно.
Автозаполнение из данных браузера должно работать в таких полях формы, как «имя», «адрес», «e-mail», «телефон», «пароль», «данные кредитной карты». Участники тестирования на юзабилити мобильного сайта Tiffany одобрили возможность автозаполнения своих данных из данных браузера. Форма безупречно отработала с функцией AutoFill Contact браузера Safari, что порадовало пользователей на этапе ввода контактной информации. Однако в данном случае требуется соблюдать высокое качество автозаполнения, т.к. раздражение от некорректных данных проецируется на ваш сайт.

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

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

Исследование показало, что многие пользователи с удовольствием пользуются функциями Apple Pay или PayPal. Это не только избавляет их от необходимости вводить свои данные, но и считается пользователями более безопасным способом оплаты.
Упрощенный способ оплаты
Всегда предлагайте мобильным пользователям упрощенный способ оплаты. Например, уже упомянутые Apple Pay и PayPal. Но не стоит перегружать пользователя слишком большим выбором: выберите несколько вариантов и четко пропишите различия между ними. Самый часто используемый способ оплаты должен быть самым заметным на странице или первым в списке вариантов. Также важно заранее предупредить пользователей, что ввода и финализации данных они временно будут перенаправлены на сайт платежного сервиса. Рекомендуется использовать стандартные фразы («оплатить через PayPal»), а также логотипы и узнаваемые цвета платежных систем. Чтобы минимизировать количество вводимой пользователем информации, вы можете предлагать этим опции в самом начале процесса покупки, однако их в любом случае стоит предложить еще раз непосредственно перед оплатой.
Vineyard Vines предлагают несколько вариантов упрощенной оплаты для мобильных пользователей на странице корзины (слева) и повторно предлагают оплатить через PayPal на странице оплаты — для тех пользователей, которые, возможно, не обратили внимание на эту опцию (справа).
Считывание данных карты по фото
Обеспечьте считывание данных карты по фото. Во время исследования несколько пользователей воспользовались опцией «AutoFill Credit Card» в браузере Safari, вместо того, чтобы вводить данные карты руками. Эта опция позволяет пользователю сделать фото карты. Детали затем сканируются и информация вносится в соответствующие поля.
Во время оплаты покупки на сайте Tiffany’s отсутствие возможности оплатить с помощью Apple Pay или PayPal вызвало раздражение у одного из пользователей. Этот пользователь затем воспользовался опцией сканирования карты.
Tiffanys.com: функция «AutoFill Credit Card» позволяет пользователям отсканировать данные своей карты по фотографии.
Внимание к деталям – вот что отличает хороший опыт мобильного шопинга от стандартного.

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

То, о чем говорилось в этой статье, легко не заметить или счесть незначительным, но именно эти мелкие детали создают положительный опыт у пользователей сайта.