Оформления заказа с мобильного устройства


11.06.2019 Время чтения - 12 минут 33

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

В дизайне интернет-магазинов (e commerce) путь оформления заказа — одна из наиболее тщательно изученных частей пользовательского опыта. И это справедливо: это напрямую влияет на восприятие бренда, склонность к повторным посещениям и способность организации получать доход в Интернете. Поскольку все больше и больше пользователей совершают покупки на смартфонах , крайне важно разработать процесс оформления покупок на мобильных устройствах, который не только соответствует передовым практикам для пользователей интернет-магазинов, но и оптимизирован для возможностей и ограничений мобильных устройств.

Мобильная корзина покупок и варианты оформления заказа

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

  • Обеспечить быстрый доступ к мобильной корзине покупок. 

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

Этот дизайн JCrew.com представляет собой хороший пример легкого доступа к корзине. Когда товар был добавлен в корзину, значок в верхней части значка корзины сразу давал пользователям обратную связь . Нажатие на значок корзины привело пользователей на страницу корзины без лишних кликов, всплывающих окон или дополнительных шагов на их пути.
Этот дизайн JCrew.com представляет собой хороший пример легкого доступа к корзине. Когда товар был добавлен в корзину, значок в верхней части значка корзины сразу давал пользователям обратную связь . Нажатие на значок корзины привело пользователей на страницу корзины без лишних кликов, всплывающих окон или дополнительных шагов на их пути.
На PSSW нажатие на иконку корзины показало мобильную мини-корзину. Затем пользователи должны были нажать « Просмотреть корзину» или « Оформить заказ», чтобы получить доступ к полной корзине и деталям заказа. Этот дополнительный кран не нужен; когда пользователи нажимают на значок корзины покупок, переносите их прямо в корзину.
На PSSW нажатие на иконку корзины показало мобильную мини-корзину. Затем пользователи должны были нажать « Просмотреть корзину» или « Оформить заказ», чтобы получить доступ к полной корзине и деталям заказа. Этот дополнительный кран не нужен; когда пользователи нажимают на значок корзины покупок, переносите их прямо в корзину.
  • Сделайте так, чтобы пользователи могли легко обновлять содержимое своей корзины. Люди часто передумают о покупке продукта или случайно добавляют товар в корзину дважды. Дайте пользователям легко изменять содержимое своей корзины.
  • Дайте пользователям четкую кнопку « Удалить» рядом с каждым элементом в их корзине. Не заставляйте их менять количество на ноль, чтобы удалить продукт из корзины.

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

HP не предусмотрели  четкую кнопку « Удалить» рядом с каждым элементом в корзине и требовали, чтобы пользователи изменили количество на ноль, чтобы удалить элементы из корзины. Этот дизайн был не интуитивным и вызвал разочарование.
HP не предусмотрели четкую кнопку « Удалить» рядом с каждым элементом в корзине и требовали, чтобы пользователи изменили количество на ноль, чтобы удалить элементы из корзины. Этот дизайн был не интуитивным и вызвал разочарование.
  • Не используйте кнопку Обновить для внесения изменений в корзину. Некоторые сайты заставляют пользователей нажимать кнопку « Обновить» , чтобы любые изменения в их корзине вступили в силу. Таким образом, тот, кто хочет изменить количество товара в корзине, должен будет указать новое количество и затем нажать « Обновить», чтобы зафиксировать изменение.

Этот дизайн является не оптимальным по двум причинам: пользователи должны выполнить два действия (изменить количество, затем нажать кнопку Обновить ), чтобы изменить элемент;  люди часто не нажимают кнопку « Обновить» — либо потому, что они забывают, либо потому, что не понимают, что должны это делать.

ThingsRemembered.com: пользователи должны выбрать количество, а затем кнопку Обновить, чтобы изменить количество товара. Этот дизайн не оптимален.
ThingsRemembered.com: пользователи должны выбрать количество, а затем кнопку Обновить, чтобы изменить количество товара. Этот дизайн не оптимален.
  • Поддержка непрерывности покупок на нескольких устройствах. Поскольку бренды продолжают развиваться по разным каналам, ожидания пользователей в отношении легкого доступа, гибкости и согласованности при совершении покупок продолжают расти. А поскольку пользователи, как правило, совершают скачки между каналами во время покупок, важно предоставить им надежный доступ к своим корзинам, на десктопе, в мобильных браузерах и в мобильных приложениях.

Пользователи устройств Apple могут воспользоваться функцией под названием handoff , которая позволяет им использовать веб-сайт в Safari на своем iPhone и затем, когда они переходят на свой компьютер iPad или Mac, открывать ту же страницу в Safari. на этом устройстве (или наоборот).

Handoff позволяет пользователям Apple перемещаться между устройствами iPhone, iPad и Mac. Эта функция поддерживает беспроблемную покупку, позволяя продолжить один и тот же сеанс на разных устройствах. В этом случае пользователь начал делать покупки на компьютере MacBook Pro, но перешел на iPhone, чтобы оформить заказ.
Handoff позволяет пользователям Apple перемещаться между устройствами iPhone, iPad и Mac. Эта функция поддерживает беспроблемную покупку, позволяя продолжить один и тот же сеанс на разных устройствах. В этом случае пользователь начал делать покупки на компьютере MacBook Pro, но перешел на iPhone, чтобы оформить заказ.

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

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

CrateandBarrel.com отобразил сообщение на странице «пустая корзина», чтобы пользователи знали, что они могут получить доступ к своей корзине со всех устройств, войдя в систему.
CrateandBarrel.com отобразил сообщение на странице «пустая корзина», чтобы пользователи знали, что они могут получить доступ к своей корзине со всех устройств, войдя в систему.
  • Сделать заказ незарегистрированных пользователей (гостей) заметным и доступным без лишних поисков. Даже люди, имеющие учетную запись, забывают пароли; во многих случаях им будет проще зарегистрироваться в качестве гостей, чем восстановить свой пароль на своем мобильном устройстве. Сделайте гостевой заказ наиболее заметным из ваших вариантов оформления заказа, поместив его над вкладкой и над параметрами для входа или создания учетной записи.

    Оформление заказа и варианты получения

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

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

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

Поля формы и входные взаимодействия

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

  • Для каждого поля предложите правильную клавиатуру. Используйте цифровую клавиатуру для числовых данных, таких как номера кредитных карт или номера телефонов. Для полей адреса электронной почты используйте клавиатуру, оптимизированную для ввода адресов электронной почты, которая имеет характерные для электронной почты символы, такие как «@» и «.». Клавиатуры также должны содержать стрелки вверх и вниз для быстрого перехода к следующему (или предыдущему) полю формы.
Nike.com показал правильные клавиатуры для полей электронной почты (слева) и номера телефона (справа).
Nike.com показал правильные клавиатуры для полей электронной почты (слева) и номера телефона (справа).
  • Рассчитать поля автоматически на основе предыдущих входных данных пользователей. Поля, такие как тип кредитной карты, адрес, город или штат, могут быть автоматически рассчитаны на основе других данных, введенных пользователем (номер кредитной карты и, соответственно, почтовый индекс). Вместо того, чтобы просить пользователей вводить эту информацию, сделайте эту работу за них. Исследование показало, что запрос почтового индекса пользователя, а затем заполнение города и штата, в то же время позволяя пользователю исправить случайную ошибку, работает хорошо.
Crutchfield позволил пользователям легко вводить свой адрес. Сайт попросил пользователей сначала ввести свой почтовый индекс (слева) и использовал эту информацию для заполнения города и штата в редактируемых полях формы (справа). Пользователи могут изменить эти поля в случае, если их название города отличается от того, что появилось в базе данных.
Crutchfield позволил пользователям легко вводить свой адрес. Сайт попросил пользователей сначала ввести свой почтовый индекс (слева) и использовал эту информацию для заполнения города и штата в редактируемых полях формы (справа). Пользователи могут изменить эти поля в случае, если их название города отличается от того, что появилось в базе данных.
  • Автозаполнение браузера и сохраненные данные должны работать с полями формы, такими как имя, адрес, адрес электронной почты, номер телефона, пароль и кредитная карта. Участники юзабилити-тестирования оценили, что они могут использовать автозаполнение браузера при проверке на мобильном сайте Тиффани. Форма работала безупречно с функцией автозаполнения контактов Safari , которая порадовала пользователя, который не хотел вводить свою контактную информацию. Она сказала: «Спасибо, Apple. Apple автоматически заполнила мою информацию ». Это замечание подводит итог чувств большинства пользователей по поводу автозаполнения: сайт обвиняется в неудовлетворительном опте автозаполнения, тогда как должный опыт работы приписывается производителю телефона. Убедитесь, что ваш сайт закодирован для правильной работы с функцией автозаполнения браузера.
  • Используйте открытое поле формы, а не выпадающий список, когда просите пользователей ввести информацию с карты и дату истечения срока действия кредитки. Длинные выпадающие списки особенно сложны для «мобильных пользователей», особенно тех, кто работает на iOS. Элемент управления iOS (которые используется для реализации выпадающих меню) занимает половину экрана и отображает только несколько элементов одновременно. Если список длинный, пользователям приходится многократно прокручиваться, прежде чем переходить к значениям в конце списка. В наших исследованиях пользователи часто пытались выбрать правильный пункт из этих списков, делая много ошибок, которые требовали повторных попыток. Хотя обычно имеет смысл уменьшить количество операций, которые пользователи должны выполнять на мобильном телефоне, выпадающий список для длинного списка является неправильным решением. Пользователи быстрее вводят две буквы, обозначающие их состояние, и 4 цифры срока действия кредитной карты.
    Пользователи на Staples.com должны были прокрутить длинный выпадающий список, чтобы выбрать две буквы, которые представляют их состояние. Пользователи гораздо быстрее вводят буквы, чем прокручивают вниз, чтобы выбрать позицию из выпадающего списка.
    Пользователи на Staples.com должны были прокрутить длинный выпадающий список, чтобы выбрать две буквы, которые представляют их состояние. Пользователи гораздо быстрее вводят буквы, чем прокручивают вниз, чтобы выбрать позицию из выпадающего списка.

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

Удобная оплата на мобильном телефоне

Ввод данных кредитной карты является трудоемким, раздражающим и, особенно на мобильном телефоне, подвержен ошибкам; Более того, пользователи на ходу могут не всегда иметь под рукой свою кредитную карту. Многие участники нашего исследования воспользовались такими удобными способами оплаты, как PayPal или Apple Pay. Эти сервисы не только избавили пользователей от необходимости вводить данные своей кредитной карты, но и были восприняты как более безопасные и надежные, чем предоставление номера своей кредитной карты непосредственно сайту.

  • Предлагайте разнообразные виды платежей, но не перегружайте пользователей слишком большим количеством вариантов. Могут быть полезны узнаваемые сторонние варианты оформления платежей, такие как Paypal или Apple Pay, но слишком большое количество вариантов может привести к перегрузке выбора, Для каждого предложенного варианта оплаты сделайте четкое различие между каждым из них. Наиболее распространенный процесс оформления заказа должен быть наиболее заметным на странице или указан первым среди других вариантов. Также важно дать понять пользователям, что «их временно заберут с сайта», чтобы ввести свои реквизиты платежного сервиса. Используйте слова, такие как Checkout с Paypal, вместе со стандартными фирменными кнопками для этих сервисов. Чтобы свести к минимуму информацию, вводимую пользователем, предложите эти варианты в самом начале процесса оформления заказа; однако, убедитесь, что вы повторяете их также на странице оплаты для тех пользователей, которые могли пропустить их в начале.
Vineyard Vines предлагает множество удобных для мобильных платежей способов оплаты в корзине (слева) и снова отображает PayPal на странице оплаты для тех, кто мог пропустить его в корзине (справа).
Vineyard Vines предлагает множество удобных для мобильных платежей способов оплаты в корзине (слева) и снова отображает PayPal на странице оплаты для тех, кто мог пропустить его в корзине (справа).
  • Разрешить пользователям делать фотографии своих кредитных карт для заполнения информации. Несколько человек в нашем исследовании использовали функцию кредитной карты AutoFill, которая предлагается в Safari, вместо того, чтобы вводить информацию о своей кредитной карте. Эта опция позволяет пользователям сфотографировать кредитную карту; детали сканируются, а затем информация добавляется в поле кредитной карты веб-сайта.

Проверяя на мобильном сайте Тиффани, один пользователь пожаловался, когда он заметил, что сайт не предлагает PayPal или Apple Pay вариант.  Затем он заметил, что сайт поддерживает встроенную опцию AutoFill Credit Card и, хотя ему все еще нужно было получить подтверждение после того, как он смог отсканировать свою кредитную карту, чтобы ввести данные, его разочарование уменьшилось.

Tiffanys.com: функция автозаполнения кредитных карт в Safari (слева) позволяет пользователям делать фотографии своей кредитной карты для заполнения своей платежной информации (справа).
Tiffanys.com: функция автозаполнения кредитных карт в Safari (слева) позволяет пользователям делать фотографии своей кредитной карты для заполнения своей платежной информации (справа).

Заключение

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

 

Перевод статьи NNGroup.

Читайте так же: Баннерная слепота: почему пользователи игнорируют рекламу