UX электронной коммерции — основные стратегии и принципы дизайна

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

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

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

Путь пользователя включает в себя:

• Открытие веб-сайта
• Поиск и просмотр продукта
• Страница продукта
• Корзина
• Проверить
• Подтверждение

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

Открытие веб-сайта

Четкое позиционирование бренда

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

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

Показать релевантные призывы к действию

Когда пользователь попадает на домашнюю страницу, приветствуйте его своевременным контентом и конкретными призывами к действию (CTA). Большое изображение баннера, соответствующее текущему сезону или определенному событию, вместе с соответствующим призывом к действию помогает пользователю перейти к следующему шагу в процессе покупки. При создании призывов к действию избегайте общих фраз, таких как «начать», которые не сообщают пользователю, что будет дальше.

Компания Polaroid создала эффективный CTA во время праздничного сезона, помогая пользователям, которые покупали подарки. Вместо того, чтобы использовать общую фразу, Polaroid использовал «Shop Gifts», давая понять, что пользователь попадет в раздел на сайте с предложениями подарков.

Адаптируйте целевые страницы для SEO

Связывая поисковые запросы пользователя из поисковых систем, таких как Google, с конкретными целевыми страницами, розничные продавцы электронной коммерции могут захватывать пользователей, которые стремятся найти определенный продукт.

Когда пользователь что-то ищет, велика вероятность того, что он хочет это купить. Создание настраиваемой целевой страницы для распространенных поисковых запросов по продуктам увеличивает шансы розничного продавца на продажу (и, возможно, на нового покупателя). Компания по производству канцелярских товаров Papier успешно справляется с этой задачей благодаря странице, специально созданной для свадебных приглашений, которая появляется в результатах поиска Google.

Поиск продукта и просмотр

Обеспечьте поиск на месте

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

По данным Invesp, 60% онлайн-покупок не являются импульсивными. Люди часто знают, что ищут, и вводить свой запрос в строку поиска на веб-сайте электронной коммерции — например, название продукта или номер модели — гораздо быстрее, чем просеивать пункты меню.

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

Вдохновляйте посетителей в режиме обнаружения

В то время как многие покупатели имеют в виду конкретный товар для покупки, не все посетители так уверены. По словам Нильсена Нормана, существует пять типов покупателей электронной коммерции, один из которых — «браузер». Браузеры не обязательно ищут что-то конкретное. Скорее, они неторопливо оглядываются вокруг, чтобы посмотреть, не найдут ли они что-нибудь интересное.

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

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

Используйте фильтры и многогранный поиск

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

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

Как только пользователь применит фильтры, в пользовательском интерфейсе должно быть сразу видно, какие фильтры были применены. Пользователь также должен иметь возможность легко удалять примененные фильтры.

ASOS показывает подробный набор фильтров для каждой категории и четко показывает, какие фильтры были применены.

Страница продукта

На видном месте отображайте основные действия

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

Магазин товаров для дома Lowe's сообщает пользователю, как добавить товар в корзину, с помощью большой зеленой кнопки в качестве одной из самых заметных вещей на странице.

Предоставьте подробную информацию о продукте

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

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

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

Завоевать доверие клиентов

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

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

Добавить социальное доказательство

Социальное доказательство — это концепция, которая означает, что люди находятся под влиянием поведения других. Эта концепция является частью принципов убеждения доктора Роберта Чалдини (ведущего исследователя в области науки о влиянии), и было доказано, что она работает.

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

Корзина

Показать четкую сводку заказа

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

Modist показывает как четкую сводку заказа, так и квитанцию. Пользователь может легко управлять выбранными товарами (перемещать в список желаний, удалять, изменять количество) и видеть как сводку, так и подробную разбивку по доставке и налогам.

Проверить

Разрешить пользователям оформить заказ в качестве гостей

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

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

Обеспечьте визуальную обратную связь в процессе оформления заказа

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

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

Используйте распространенные способы оплаты

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

В Нидерландах iDEAL часто используется для транзакций электронной коммерции, и 60% голландских потребителей использовали его при недавних покупках. Магазин одежды Scotch & Soda позволяет покупателям расплачиваться через iDEAL и PayPal.

Подтверждение заказа

Показать подробное подтверждение заказа после покупки

После того, как клиент совершит покупку, предоставьте ему подтверждение, включающее успешную обработку платежа и сведения о доставке, такие как адрес, способ доставки и ожидаемая дата доставки.

Эта концепция электронного письма с подтверждением для Amazon показывает номер заказа, дает обзор приобретенных товаров, дату доставки и некоторые рекомендации для будущих покупок.

Отправлять обновления заказа и доставки по электронной почте

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

Если что-то изменится с заказом, например, задержка доставки, отправьте обновление. Как только товар будет отправлен, отправьте электронное письмо с номером отслеживания.

Резюме

Принципы, изложенные в этой статье, представляют собой базовые точки взаимодействия с пользователем, которым должен следовать каждый дизайнер электронной коммерции, но это только начало. Для получения дополнительных сведений о мобильной электронной коммерции UX посетите веб-сайт eCommerce for Mobile Experience или узнайте больше о дизайне целевых страниц. Как создать эффективные целевые страницы.

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

• • •

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

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