Прокладывая путь к покупке — лучшие практики UX для электронной коммерции

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

Потенциал ошеломляет. Год за годом доходы от электронной коммерции растут. Офлайн-продажи по-прежнему составляют большую часть розничной выручки, но восходящая дуга электронной коммерции неоспорима. Прогнозируется, что в этом году розничные продавцы электронной коммерции в США достигнут объема продаж в размере 840 миллиардов долларов, и этого уровня они не ожидали достичь до 2022 года.

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

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

Опыт электронной коммерции на четырех страницах

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

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

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

Лаконичные домашние страницы

1. Сделайте ценность продукта мгновенно очевидной

Домашняя страница — это первое впечатление. Покупатели должны иметь возможность быстро определить стоимость товара. Не используйте главную страницу, чтобы болтать о технических особенностях. Помогите покупателям представить, как продукты решат их проблемы и улучшат их жизнь (схема Jobs to Be Done является полезной отправной точкой).

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

2. Включите поиск из любого места

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

3. Дайте продуктам названия, понятные покупателям

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

4. Выделите предложения и акции

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

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

Хорошо организованные страницы категорий

1. Представление продуктов в сетках

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

Бонус: представления списка работают, но они лучше всего подходят для продуктов, требующих более подробных объяснений.

2. Обеспечьте легкую навигацию

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

3. Продемонстрируйте бестселлеры

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

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

Полированные страницы продукта

1. Соблазняйте социальным доказательством

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

• Фотографии продуктов, сделанные клиентами
• Одобрения знаменитостей и влиятельных лиц
• Цитаты экспертов
• Значки одобрения с независимых сайтов отзывов

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

2. Используйте копии и изображения, чтобы показать хорошую жизнь

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

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

3. Зарабатывайте больше с помощью дополнительных продаж и сопутствующих товаров

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

Также можно предложить связанные элементы, которые дополняют страницу продукта. Покупать обувь? Почему бы не приобрести шнурки и супинаторы? Чтобы уменьшить трения, убедитесь, что у связанных товаров есть опция «Добавить в корзину».

4. Создайте большие и жирные кнопки «Добавить в корзину»

Когда дело доходит до страниц товаров, кнопки «Добавить в корзину» должны выделяться. Сделайте их большими, высококонтрастными и удобными для нажатия. Не поддавайтесь желанию быть остроумным и напишите текст призыва к действию, который будет недвусмысленным и ориентированным на действие.

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

Простые страницы оформления заказа

1. Покажите покупателям ход оформления заказа

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

2. Принимайте несколько форм оплаты

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

Также стоит рассмотреть варианты «купи сейчас, заплати позже» (BNPL), такие как Paypal Credit и Klarna. BNPL — это форма кредита в точках продаж, которая позволяет покупателям оплачивать товары с течением времени после их получения.

3. Подумайте о гостевой оплате

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

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

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

Это обязательно. Дайте покупателям краткое описание заказа, которое включает:

• Сведения о продукте и количестве
• Разбивка всех сборов
• Информация о доставке и оплате

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

5. Повысьте доверие с помощью значков безопасности и поддержки клиентов

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

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

Ознакомьтесь с рекомендациями по UX для электронной коммерции

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

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

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

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