На пути к покупке: лучшие UX-практики в области электронной коммерции

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

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

Потенциал электронной коммерции просто ошеломляет. Доходы в этой области повышаются год за годом. На долю офлайн-продаж по-прежнему приходится большая часть розничной выручки, но резкий рост электронной коммерции неоспорим. Важную роль здесь сыграла пандемия COVID-19: например, за 2020 год объем онлайн-продаж в США превзошел все ожидания и вырос на 32,4% (с 598 миллиардов долларов до 791).

Источник: Digital Commerce 360

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

Источник: Merchant Savvy

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

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

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

  • Не слишком перегруженная главная страница с ценностным предложением, перед которым сложно устоять
  • Хорошо организованные страницы категорий, на которых легко ориентироваться
  • Безупречные страницы товаров, сочетающие социальные доказательства и убедительный контент
  • Простая и понятная страница оформления заказа, которая показывает прогресс и позволяет покупателям чувствовать себя уверенно
4 наиболее распространенные страницы на десктопных сайтах электронной коммерции: главная страница, страницы категорий, страницы товаров и страница оформления заказа (Judy)

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

Главная страница без лишних деталей

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

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

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

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

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

Если на вашем сайте представлено несколько категорий товаров, целесообразно добавить в интерфейс “липкую” панель поиска, чтобы покупатели могли быстрее найти то, что они ищут (Native Union)
3. Давать товарам названия, понятные покупателям

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

Компания Bacca производит деревянные подставки для ноутбуков и музыкальных инструментов. Названия ее товаров просты, но отражают их назначение.
4. Выделяйте специальные предложения и акции

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

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

Распродажи, специальные предложения и рекламные акции должны выделяться и быть заметными на главной странице (Package Free)

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

1. Представляйте товары в виде сетки

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

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

На десктопных версиях сайтов покупатели предпочитают просматривать товары, расположенные в виде сетки, а не списка (Wayfair)
2. Обеспечьте удобную навигацию

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

Навигация на страницах категорий должна быть интуитивно понятной, лаконичной и простой в использовании (TRUE Linkswear)
3. Покажите бестселлеры

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

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

Бренд Great Jones поддерживает свою “домашнюю” индивидуальность, отмечая бестселлеры иконкой рукавицы-прихватки.

Безупречные страницы товаров

1. Привлекайте клиентов с помощью социальных доказательств

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

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

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

Рейтинги, отзывы и фотографии покупателей — мощные мотиваторы (Etsy)
2. Используйте тексты и изображения, чтобы показать будущие положительные изменения в жизни покупателей

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

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

Текст и изображения на страницах товаров Allbirds’ помогают покупателям представить свое идеальное будущее после совершения покупки
3. Зарабатывайте больше с помощью дополнительных продаж и сопутствующих товаров

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

Вы также можете предложить сопутствующие товары, которые дополняют основной продукт. Покупаете обувь? Почему бы не купить еще шнурки и супинаторы? Чтобы убрать препятствия, убедитесь, что рядом с сопутствующими товарами есть кнопка "Добавить в корзину".

Десктопная версия сайта Amazon предоставляет массу возможностей для дополнительных и перекрестных продаж, а также импульсивных покупок
4. Создавайте большие и яркие кнопки "Добавить в корзину"

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

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

Создавайте кнопки "Добавить в корзину", которые легко найти и нажать (Kin Euphorics)

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

1. Показывайте покупателям, на каком этапе оформления заказа они находятся

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

Индикатор выполнения на странице оформления заказа помогают покупателям увидеть свет в конце воронки продаж (Mulberry)
2. Принимайте несколько форм оплаты

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

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

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

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

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

Two Chimps — это сервис подписки на кофе, но он позволяет покупателям совершать разовые покупки в гостевом режиме
4. Предоставьте четкое резюме заказа

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

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

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

Резюме — обязательная часть процесса оформления заказа в интернет-магазине (Vipp)
5. Завоюйте доверие с помощью сертификатов безопасности и качественной поддержки клиентов

Завоюйте доверие покупателей, разместив на сайте сертификаты безопасности (специальные отметки рядом с полем оплаты, например, “this site is SSL secured” — данный сайт защищен SSL) и рекомендации третьих лиц. Страница оформление заказа — отличное место, чтобы напомнить покупателям о рейтингах и отзывах.

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

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

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

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

Основы

Как улучшить UX сайтов электронной коммерции?

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

Что такое лучшие UX-практики?

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

Что такое UX в электронной коммерции?

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

Что такое “качественный опыт взаимодействия” в области электронной коммерции?

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

Что такое дизайн электронной коммерции?

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

Источник:
Toptal
arrow