Улучшение пользовательского опыта электронной коммерции (UX) – это один из способов увеличить доход вашего интернет-магазина без необходимости увеличения его трафика.

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

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

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

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

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

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

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

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

  • Время загрузки: быстро и стабильно ли сайт загружается на всех устройствах?
  • Навигационные меню: Организованы ли меню с учетом потребностей пользователей?
  • Доступность: Соответствует ли интернет-магазин новейшим стандартам доступности?
  • Карта путешествия: Перенаправляется ли пользователь в нужное место, когда нажимает ссылку или кнопку?
  • Удобство для мобильных устройств. : Хорошо ли работает магазин на мобильных устройствах?
  • Копирайтинг: Эффективно ли слова веб-сайта передают информацию и представляют его бренд?

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

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

«Они могут попасть на страницу продукта или сообщение в блоге», – говорит Дэниел. «Для Bull and Cleaver две самые посещаемые страницы нашего сайта — это запись в блоге о различиях между билтонгом и вяленой говядиной, а также страница продукта, которая является целевой страницей для некоторых наших объявлений».

6 лучших практик UX электронной коммерции, которым следует следовать

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

  1. Приоритезируйте функциональность превыше всего
  2. Создавайте воронки продаж, а не веб-страницы
  3. Привлекайте внимание и внимание
  4. Напишите текст, ориентированный на пользователя
  5. Сделайте навигацию в интернет-магазине интуитивно понятной
  6. Всегда учитывайте UX мобильной электронной коммерции

1. Ставьте функциональность превыше всего

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

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

«В целом Будьте осторожны с яркими особенностями», — говорит Дэниел Патрисио из Bull and Cleaver. «Люди создают отличные производительные веб-сайты, а затем просят разработчика Upwork добавить только одну вещь, которая их ломает. Слайдеры изображений – худшие виновники этого».

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

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

Веб-сайт Allbirds показывает, что дизайн сам по себе прост, но брендинг делает его популярным

2. Создавайте воронки продаж, а не веб-страницы.

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

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

Посетителями вашего сайта могут быть:

    • Социальные сети. пользователи, которые нажали на объявление.
    • Пользователи, которые нашли ваш сайт с помощью запроса Google.
    • Отправьте электронное письмо подписчикам, отвечающим на призыв к действию

Недавние клиенты, зашедшие прямо на ваш сайт.

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

«Один из лучших способов использовать UX электронной коммерции для увеличения конверсии можно с помощью воронок продаж», — говорит Дэниел. «Возьмем SEO. Прежде чем перейти к своему веб-сайту, вы спросите: «Кто нас ищет?» Что они ищут? Какой контент им нужен? К чему это приведет к покупке?»

Популярная воронка продаж для интернет-магазинов — это перенаправление пользователей из рекламы в социальных сетях на целевую страницу веб-сайта. Ниже вы можете увидеть, как реклама в социальных сетях компании по производству портативных аккумуляторов Shargeek направляет зрителей на целевую страницу с подробным описанием представленного продукта:

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

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

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

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

3. Привлекайте внимание и намерения с помощью маркетинга.

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

Один из способов проникнуть в умы ваших пользователей на этап маркетинга — понять, привлекает ли ваш контент внимание или намерение:

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

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

Скриншот рекламы Ruffwear на Facebook о зимних куртках для собак, которая ведет на страницу коллекции курток для собак

В этом объявлении Facebook Ruffwear использует карусель изображений, чтобы привлечь внимание пользователей, которые пассивно прокручивают страницу. Ваш взгляд сначала обращается к самому крупному тексту («Зимние куртки для собак»), а не к написанию слева направо и сверху вниз.

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

Чтобы удовлетворить намерения</. Среди пользователей поисковых систем Ruffwear также создает контент, соответствующий ключевому слову «зимние куртки для собак». Обратите внимание, как заголовок страницы напоминает поисковый запрос, а метаописание страницы содержит соответствующие фразы:

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

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

4. Напишите текст, ориентированный на пользователя.

Дыхание — это автоматическое поведение. Вы не думаете о вдохе и выдохе, если только что-то не мешает дышать или не привлекает ваше внимание к акту дыхания (как это предложение).

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

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

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

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

Используйте меньше слов

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

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

Возьмите этот пример из компании по очистке воздуха Домашняя страница Molekule. Через несколько секунд после перехода на страницу пользователь узнает, что этот бренд:

  • Получил награды за свою продукцию
  • Выпускает уникальный очиститель, который не только собирает загрязняющие вещества
    • Имеет отзывы четыре звезды и выше.
    • Продает продукты по цене от 650 до 1300 долларов.
    • Предлагает 30-дневную пробную версию со 100% возвратом средств.
    • Имеет собственную технологию под названием PECO

    Домашняя страница Molekule, на которой показана их главная копия (удостоенные наград очистители воздуха), рейтинги 4–5+ звезд для двух их продуктов, много информации за короткое время

    Создайте каркас вашего UX-копии

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

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

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

    ?? Совет для профессионалов: Никогда не стоит недооценивать влияние, которое одно слово или предложение может оказать на пользовательский опыт.

    5. Сделать навигацию в интернет-магазине интуитивно понятной

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

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

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

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

    Макеты меню

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

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

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

    • Прикрепленный заголовок для поиска с призывом к действию: «Найдите то, что вам понравится!» (при прокрутке пользователем главное меню исчезает, но панель поиска остается)
    • Меню навигации, в котором можно щелкнуть некоторые элементы, чтобы развернуть подменю, а также информационное ссылки на страницы «Как это работает» и «О нас»
    • Список коллекций на основе размера для пользователей, которые, независимо от того, имели ли они это в виду или нет, теперь рассматривают размер как ключевую переменную в их решение о покупке

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

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

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

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

    От там они могут использовать фильтры и параметры сортировки, чтобы сузить поиск, или повторно посетить меню навигации, чтобы просмотреть что-то еще.

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

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

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

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

    6. Всегда учитывайте UX мобильной электронной коммерции.

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

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

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

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

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

    В редакторе тем Shopify вы можете переключаться между видом на рабочем столе и на мобильном устройстве во время внесения изменений:

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

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

    Сейчас, когда так много мобильных платежей параметры — Shop Pay, Apple Pay, Google Pay, Meta Pay, PayPal и многое другое — теперь у пользователей есть возможность ускоренной оплаты при доставке и информация об оплате уже введена.

    Распространенные ошибки UX электронной коммерции, которых следует избегать

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

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

    Спросите себя: свободен ли мой сайт электронной торговли от:

    • медленных элементов ?
    • Непродуманный текст?
    • Вынужденный путь пользователя?
    • Страницы, предназначенные не для того экрана?

    Медленные элементы

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

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

    Непродуманный текст

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

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

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

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

    • Подведение итогов политика
    • Напоминание клиентам о коде скидки, который они могут использовать
    • Сопутствующие товары

    Скриншот страницы продукта Chubbies, на котором выделены 3 фрагмента информации, которые повторяются несмотря на то, что они появляются где-то на сайте

    Принудительный путь пользователя

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

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

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

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

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

    Страницы, предназначенные для неправильного экрана

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

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

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

    Как найти и устранить проблемы с пользовательским интерфейсом на вашем сайте электронной коммерции

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