UX электронной коммерции для мобильных устройств

Термин «мобильная коммерция» был введен 20 лет назад Кевином Даффи, когда он предположил, что мобильное устройство может функционировать как розничная точка в кармане покупателя. Учитывая технологические ограничения того времени, кто бы мог подумать, что однажды мы сможем легко исследовать, просматривать и покупать товары на небольшом карманном устройстве?

Я не могу переоценить то, как мобильные устройства меняют то, как мы взаимодействуем с нашими потребителями; мы должны принять эти изменения. – Джоэл Андерсон, генеральный директор Walmart.

Поразительный рост электронной коммерции также способствовал росту мобильной электронной коммерции, которая сейчас оценивается почти в 700 миллиардов долларов. Мобильная электронная коммерция в настоящее время является самой большой частью гигантского онлайн-рынка. Более 80% американцев за последний месяц совершили покупку в Интернете — три года назад их было всего 11,6%.

В отчете Business Insider Intelligence говорится, что мобильная коммерция вырастет до 45% к 2020 году. Исследование ComScore согласилось с этим и в 2016 году сообщило об увеличении расходов через мобильные устройства на 44% по сравнению с 2015 годом.

Несмотря на высокие показатели продаж, более 60% пользователей по-прежнему обеспокоены тем, что их финансовая информация может быть взломана при использовании мобильного телефона. Тем не менее, удовлетворенность клиентов по-прежнему довольно высока: такие гиганты мобильной розничной торговли, как Amazon и Apple, получили рейтинг удовлетворенности более 80%.

Лучшие практики мобильной электронной коммерции UX для достижения успеха

Поддержка масштабирования изображения с помощью жестов щипка и двойного касания

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

Удивительно, но из 50 самых прибыльных мобильных приложений электронной коммерции более 40% не поддерживают жесты масштабирования. Даже сайты, которые предлагали версии изображений крупным планом, имели одинаковые показатели отказов, что говорит о том, что поддержка жестов масштабирования изображения продукта в мобильном приложении электронной коммерции является фундаментальной.

Учитывая небольшой размер экрана мобильных устройств, это проблема конкретной платформы. Поддержка хотя бы одной из этих функций поместит приложение в число 50% лучших приложений электронной коммерции, т. е. в список самых прибыльных.

Несколько факторов, которые следует учитывать:

• Изображения с низким разрешением эквивалентны изображениям без увеличения. Пользователи заинтересованы в том, чтобы четко видеть детали продукта, и для этого им нужны изображения с высоким разрешением. Возможность увеличения изображения низкого качества практически бесполезна, так как не позволяет пользователю увидеть детали.
• Институт Беймарда обнаружил, что 50% приложений не указывают пользователям, что они могут сжимать или дважды нажимать на изображения продуктов. Важно указать наличие возможности масштабирования изображения. Хотя эти жесты широко известны мобильным пользователям, необходимо показать, что они доступны. Для этого рекомендуется использовать значки или визуальные представления.

Обеспечьте функцию «Сохранить» для корзины покупок

Как упоминалось ранее, маленький размер экрана мобильных устройств является основным препятствием, когда речь идет о мобильной электронной коммерции. Институт Баймарда заметил, что более 61% мобильных пользователей часто используют для совершения покупки свои настольные компьютеры, а не телефон.

Функция «сохранения корзины» снижает количество отказов от корзины и позволяет покупателям сохранять товары для последующей покупки. Постоянные корзины покупок позволяют покупателям продолжать совершать покупки без необходимости искать нужный товар по возвращении — функция, которой воспользуются 55% покупателей.

Вот как удержать этих клиентов:

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

Используйте описательные, хорошо помеченные формы

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

Вот лучшие практики для удобства использования мобильных форм:

• Поместите метки формы над формой, чтобы улучшить читаемость, простоту использования и ясность. Объяснение того, зачем нужна определенная информация, уменьшит беспокойство пользователя при заполнении форм на мобильном телефоне.
• Сопоставьте ввод текста с соответствующей клавиатурой. Отображать панель набора номера при вводе телефонных номеров и цифр кредитных карт и текстовую панель при вводе адресов и текста. Это уменьшит количество ошибок пользователей и ускорит заполнение формы.
• Ограничьте количество полей ввода, чтобы уменьшить трудоемкость ввода. Меньшее количество полей ввода создаст менее загруженную форму и улучшит процесс проверки UX.
• Автоматически продвигать каждое поле вверх по экрану после завершения. Это не будет препятствовать просмотру незаполненных полей.
• Используйте степперы вместо раскрывающихся меню, чтобы уменьшить усилия покупателя. Степперы используются для увеличения или уменьшения значения на постоянную величину и представляют собой решение, с которым быстрее работать и которое более привлекательно для глаз.

Обеспечьте интеллектуальное автоматическое предложение, автоматическое обнаружение, поиск адреса и ошибки

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

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

Поиск и проверка адреса ускоряют процесс оплаты — различные API (такие как Google Places и USPS) позволяют легко реализовать эту функцию.

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

Используйте микровзаимодействия для улучшения UX мобильных покупок

Микровзаимодействия — это детали интерфейса продукта, предназначенные для выполнения одной задачи при одновременном улучшении естественного потока продукта. Отметка «Нравится» и оценка продукта, выбор цвета и размера, а также смахивание вниз для обновления данных — все это примеры микровзаимодействий.

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

Микровзаимодействия можно использовать для:

• Проведите пользователя через приложение более интуитивно понятным способом;
• Передать лучшее чувство доверия, уменьшить беспокойство покупателей и повысить общий психологический комфорт благодаря более плавному и естественному взаимодействию;
• Предотвращайте будущие ошибки и предоставляйте пользователям немедленную обратную связь на основе выполненных ими действий; и/или
• Улучшите взаимодействие пользователя с приложением, отвечая на уведомления.

Обеспечьте простое взаимодействие, ориентированное на большой палец

Понимание наиболее распространенных способов, которыми покупатели держат свои мобильные устройства, повышает удобство и удобство использования мобильной электронной коммерции. В 2013 году Стивен Хубер спросил: «Как на самом деле пользователи держат мобильные устройства?» и наблюдали за тем, как люди взаимодействуют со своими смартфонами и держат их в руках, и заметили три основных поведенческих паттерна, которыми следует руководствоваться при проектировании мобильного UX.

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

Дизайн вокруг «зоны большого пальца»:

• Решает потенциальные проблемы с навигацией и исследованием
• Улучшает взаимодействие, лучше адаптируя жесты и досягаемость пальцев
• Лучше конвертирует и повышает удобство использования, размещая важные элементы в «легкодоступных» зонах.

Рекомендации по дизайну мобильной электронной коммерции, ориентированному на конверсию

Создайте ощущение безопасности в мобильных приложениях электронной коммерции

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

Вот некоторые методы дизайна UX, которые сообщают пользователям о безопасности и снижают их беспокойство:

• Сделайте надписи на кнопках наводящими на размышления и ясными относительно того, куда идут покупатели. Такие слова, как «продолжить», «безопасно» и «зашифровано», будут усиливать психологический комфорт пользователей.
• Используйте символы блокировки, чтобы гарантировать покупателям безопасность их транзакций.
• Используйте значки доверия от поставщиков услуг безопасности, таких как McAfee Secure и Norton. Это помогает пользователям положительно воспринимать веб-сайт (исследование Института Беймарда).
• Применяйте принципы психологии цвета в дизайне, чтобы еще лучше воспринимать доверие покупателей. Некоторые из этих принципов включают ориентированные на аудиторию и гендерно-ориентированные цвета.

Расставьте приоритеты в поиске (и держите его в верхней части страницы)

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

Важные аспекты мобильного поиска:

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

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

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

Обеспечьте бесперебойную, простую и быструю оплату

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

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

Вот несколько предложений по улучшению процесса оформления заказа в электронной коммерции:

• Чтобы повысить вовлеченность пользователей, пометьте каждый шаг процесса оформления заказа, пронумеровав и отобразив текущий активный шаг.
• Используйте визуальные представления, такие как индикаторы выполнения, для отображения продвижения вперед в процессе оформления заказа.
• Предоставьте возможность зарегистрироваться и войти в систему во время оформления заказа, но сделайте это на свой выбор.
• Чтобы снизить уровень беспокойства и отказов, предложите пользователям войти в систему или зарегистрироваться после оформления заказа, если они оформлялись как гость.
• Применяйте методы прогрессивного раскрытия информации, чтобы повысить внимание пользователей и ускорить загрузку контента на 30 %.

В заключение: каковы некоторые ключевые характеристики успешного дизайна мобильной электронной коммерции?

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

Пространство мобильной электронной коммерции будет только расширяться

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

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

Скачать шпаргалку по улучшению UX мобильной электронной коммерции

• • •

Дальнейшее чтение в блоге Toptal Design:

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