Доля мобильной коммерции растет, приближаясь к 22% от общей стоимости электронной коммерции. Все больше и больше потребителей ищут не только продукты на мобильных устройствах (ROPO - исследование онлайн-покупок в автономном режиме), но и через них совершают процесс покупки.
Таким образом, мы должны создавать впечатления от покупок на маленьких экранах, чтобы они не уступали дизайну магазина на компьютере. Клиенты должны иметь одинаковые функциональные возможности и возможности независимо от используемого ими устройства. Это большая проблема, особенно в контексте совершения покупки, когда клиент уже выбрал продукт и хочет его купить. Плохой UX на мобильном устройстве может стоить не только потерянной транзакции магазина, но и клиента, который не вернется.
В этой статье собраны некоторые полезные практики, которые необходимо учитывать при разработке процесса покупки. Так что давайте не будем распылятся и начнем!
1. Не заставляйте своих клиентов создавать учетную запись.
Согласно исследованию, проведенному Институтом Баймарда, это вторая по величине причина, по которой люди отказываются от своих покупок (первая связана с высокими дополнительными затратами, например, на доставку). Прежде всего потому, что пользователи не запоминают свои логины и пароли, а заполнение регистрационных форм на мобильном устройстве - это путь сквозь муки. Сам процесс занимает гораздо больше времени, чем на компьютере, и дает клиенту много времени для обдумывания покупки. Мы этого не хотим. Решение состоит в том, чтобы купить без необходимости создания учетной записи и входа в систему. Вот почему стоит предоставить опцию «гостевая покупка» и убедиться, что она хорошо видна! Институт Баймарда показал, что у 88% опрошенных процессов покупки, доступных на мобильных устройствах, эта опция настолько скрыта, что клиенты ее не замечают. Если ее нет на первый взгляд, это как если бы ее там не было вообще.
2. Убедитесь, что ваши формы удобны для пользователя. Если вы понимаете о чем я 😉
Если мы говорим о формах. Лучше всего думать о них как о препятствии между покупателем и покупкой продукта. Конечно, вы не можете пропустить их, но вы можете сделать многое, чтобы сделать их более удобными в использовании. Это огромная тема, которая заслуживает отдельной статьи (или двух). Но давайте сосредоточимся на абсолютных основах.
- Прежде всего, клиент должен будет предоставить адрес, и здесь мы можем помочь ему с подсказками и автозаполнением полей. Вы можете заполнить поля адреса на основе почтового индекса, введенного пользователем в начале формы. Однако это не идеальный метод - в небольших городах код может возвращать более одного названия улицы. Кроме того, вы также можете спросить пользователя о его местоположении GPS или использовать геолокацию Google, запустив форму адреса из поисковой системы. Затем пользователь заполнит свой адрес, выбрав один из подсказок, отображаемых на основе первых нескольких букв улицы. Но тут тоже есть деготь, далеко не все пользователи готовы давать доступ к своей локации.
- Избегайте выпадающих списков. Всегда старайтесь отображать все альтернативы сразу. Если у вас есть из чего выбрать, рассмотрите возможность добавления опции поиска в список. Это также хорошая идея, чтобы отобразить наиболее популярные варианты в верхней части списка. Например, если вы хотите выбрать город, вполне вероятно, что вы живете в одном из пяти крупнейших городов страны. В большинстве случаев. Сначала отобразите их, но и добавьте возможность поиска других.
- Всегда отображайте клавиатуру, которая контекстуально соответствует типу информации, которую должен ввести пользователь. Если вы запрашиваете номер телефона, покажите цифровую клавиатуру.
3. Дизайн под рукой, а не под курсором.
Слишком мелкие кликабельные области являются особенно заметной проблемой на плохо реализованных адаптивных сайтах. После масштабирования с рабочего стола на мобильный, области все еще оптимизируются для пользователя с мышью в руке, а не с планшетом или смартфоном, управление которым происходит при касании экранов. Согласно исследованию MIT Touch Lab, средний палец взрослого человека имеет ширину 2,5 см, а указательный палец - от 1,6 до 2 см. Это переводит к 72 px и 45 к 57 px, соответственно. Простейшим ответом на это является использование типографских шаблонов и иконок из системы Material Design от Google. И не забудьте добавить отступы к своим текстовым ссылкам.
4. Рассмотрите вариант «быстрой покупки».
Покупка должна занять как можно меньше времени и кликов, независимо от того, использует ли клиент компьютер или телефон. Тем не менее, в мобильном опыте каждое упрощение имеет преимущество. Идеальным вариантом для постоянного покупателя является так называемая кнопка «быстрой покупки», использование которой позволяет добавить товар в корзину и сразу же перейти к последнему этапу процесса покупки. Все настройки доставки и оплаты либо берутся из настроек аккаунта клиента, либо запоминаются при предыдущей покупке. Если вы дадите эту опцию покупателям, то вы обеспечите в магазине множество импульсивных покупок... Я имею в виду довольных покупателей! Конечно 😅.
5. Убедитесь, что ваш платежный процесс безупречен.
Подумайте об использовании платежных посредников, которые заслуживают доверия и узнаваемы среди целевой группы магазина. И предоставьте как можно больше вариантов оплаты, чтобы пользователи могли выбрать наиболее удобный для себя вариант . И если вы хотите принять данные кредитной карты непосредственно на веб-сайте магазина, убедитесь, что система безопасна и формы удобны для пользователя.
- Всегда сообщайте о возможных типах карт.
- Не скрывайте номер карты и позволяйте пользователям вводить их так, как они предпочитают: с пробелами, с или без черточек. Вы можете отформатировать его на своей стороне, чтобы клиент думал только о заполнении полей.
- Отображение типа карты в зависимости от номера. Это гарантирует пользователю, что он предоставил правильные данные.
- Не добавляйте ненужные выпадающие списки для даты истечения срока действия карты. Пользователи находятся в режиме записи здесь. Пусть они вводят дату вручную, с косой чертой или без нее. Сэкономите пол часа разработки себе и если сделать автоматический переход с одного поля на другой - клики покупателя)
- Когда вы запрашиваете код безопасности, отображайте визуальную подсказку о том, что это такое и где клиент должен искать его на своей карточке. Создайте маленькие карточки с кодом. На данный момент в форме, у вас уже есть информация о том, какой тип карты предоставляет пользователь. Таким образом, подсказка может быть адаптирована к этому.
6. Не показывать поле ввода кода скидки до окончания процесса покупки.
Это, пожалуй, самый популярный анти-монитор в истории электронной коммерции. Средний пользователь, который встречает поле кода скидки начинает подрывать его покупку. Он начинает задумываться, может ли он купить товар дешевле. Он покидает корзину и отправляется на поиски кодов, разбросанных по недрам Интернета. Конечно, сами коды скидок неплохие - они используются для повышения лояльности клиентов, привлечения новых, поощрения постоянных клиентов. Рассмотрите другие варианты.
7. Разработайте процесс так, чтобы прогресс был видимым и понятным.
Это звучит как нечто очевидное, но это не всегда хорошо продумано. Пользователи всегда должны знать, где они находятся и что их ждет. Им нужна информация о количестве шагов для выполнения задачи. И чем меньше их, тем больше шансов на закрытие сделки.
8. Избегайте беспорядка в приложении и самом процессе.
Святой Грааль каждого процесса покупки - это простота и скорость. В предыдущих параграфах я перечислил некоторые идеи о том, как упростить процесс и сделать его удобным для пользователя. Но здесь стоит добавить несколько советов. Избегайте всех отвлекающих факторов, которые включают не только коды скидок, но и ненужные всплывающие окна, рекламу или навигацию, оставленные на главной странице магазина, со всеми категориями и информационными страницами. Сложный процесс с ненужными формами, ненужной регистрацией или навязчивыми методами продаж - вот некоторые из причин, по которым клиенты отказываются от корзин для покупок.
9. Включите опцию, чтобы совершить покупку на другом устройстве.
Во введении я писал о растущем количестве потребителей, совершающих покупки на мобильном устройстве. Эти ценности постоянно растут, но все еще существует огромное количество клиентов, для которых смартфон не является основным инструментом для совершения покупок. Кроме того, многие люди все еще начинают процесс покупки на мобильном устройстве, проверяют цены вне дома или ищут товары в контекстной ситуации. Когда они находят то, что ищут, они заканчивают покупку, не выходя из дома за компьютером. На это нужно ответить. Дайте этим клиентам возможность сохранить корзину или отправить ее на адрес электронной почты; запомнить корзину, когда пользователь вошел в систему; добавить опцию, чтобы сохранить продукт на потом.
Резюмируя
Все вышеперечисленные передовые практики являются общими руководящими принципами, и существуют ситуации, в которых отдельные решения не будут применяться, например, из-за целевой группы возникнет конфликт между некоторыми решениями или просто их влияние на конверсию будет равно нулю. Роль UX-дизайнеров и специалистов заключается в адаптации дизайна к потребностям пользователей, а также часто к техническим возможностям, бюджету или временным ограничениям. К счастью, улучшение опыта во время процесса покупки возможно даже самыми незначительными средствами.
Самое важное, что вам нужно запомнить из этой статьи, - это всегда помнить про пользователя. Разработайте простой, легкий, прозрачный и привлекательный процесс покупки для клиентов. Чем проще покупка, тем больше вероятность, что она будет завершена.Что и является нашей главной целью.
