11 советов по UX для электронной торговли, которые помогут вам повысить коэффициент конверсии

«Мы вводим новшества, начиная с клиента и работая в обратном направлении. В центре внимания не продукт, а покупатель ».

Сказал Джефф Безос, описывая подход Amazon к пользовательскому опыту.

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

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

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

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

Вот список того, что вы можете найти в этой статье:
Что такое Ecommerce UX?
Почему так важен UX электронной торговли?
Каковы наиболее важные показатели UX электронной торговли?
Какие платформы электронной коммерции имеют лучший пользовательский интерфейс?
Как улучшить UX электронной торговли (пользовательский опыт): 11 советов
1. Соберите прямые отзывы клиентов
2. Повысьте скорость вашего сайта
3. Создайте интуитивно понятную навигацию и поиск.
4. Различия между мобильным и настольным компьютерами
5. Упростите формы оформления заказа
6. Используйте информационный макет, ориентированный на клиента, для страниц продукта.
7. Оптимизация для всей воронки продаж
8. Используйте каркасы и прототипы.
9. Предупреждайте клиентов о предложениях, скидках и бесплатных подарках.
10. Воссоздайте покупательский опыт в магазине
11. Выполняйте последовательные долгосрочные тесты.
Подведение итогов UX-советов для электронной коммерции
Звучит неплохо? Давайте копаться.

Что такое Ecommerce UX?

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

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

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

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

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

Почему так важен UX электронной торговли?

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

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

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

Каковы наиболее важные показатели UX электронной торговли?

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

Вот тройка лучших, за которыми следует следить:

• Удовлетворенность - насколько пользователи довольны покупками? Эти данные обычно собираются после покупки с помощью форм, в которых пользователей просят оценить опыт от «Очень доволен» до «Очень недоволен».
• Готовность дать рекомендацию - как часто клиенты делятся вашими предложениями и акциями при появлении запроса? NPS (Net Promoter Score) - популярная версия этого показателя.
• Завершение задачи - сколько клиентов адекватно завершают задачи, которые они приходят на ваш сайт для выполнения.
  Мы написали обширное руководство, в котором описаны лучшие инструменты оптимизации в 2019 году. Многие из этих инструментов можно использовать для сбора прямых отзывов клиентов, будь то от обычных посетителей вашего сайта или от специализированных UX-тестеров.

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

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

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

• Shopify - Shopify - одна из самых популярных платформ для малого и среднего бизнеса. Это идеально, если у вас небольшой магазин, потому что множество вариантов настройки, тем и надстроек позволяют легко внедрять и быстро тестировать изменения дизайна. Платформа также имеет платформу глубокой аналитики для отслеживания и анализа поведения клиентов в контексте UX.
• Magento - Magento - это решение корпоративного уровня, которое позволяет в высокой степени настраивать дизайн витрины. Если у вас есть специальная команда разработчиков, Magento предоставит вам свободу настраивать пользовательский интерфейс именно так, как вы хотите, с доступом к мощному набору функций, тем и надстроек.
• BigCommerce - BigCommerce регулярно считается одной из лучших платформ электронной коммерции в целом. У него много последователей, состоящих как из крупного, так и из малого бизнеса. Как крупный бизнес, у вас есть возможность комбинировать ряд внутренних параметров настройки в среде, которая идеально подходит для разработчиков, позволяющих вносить более сложные изменения.
• WooCommerce - если вы запускаете свой сайт на WordPress, немногие другие платформы могут соответствовать набору функций, который вы получаете с WooCommerce. Что касается пользовательского опыта, существует большая свобода настройки витрины и пути к покупке, а также множество плагинов, которые упрощают добавление новых функций без необходимости привлечения помощи разработчиков. Крупные предприятия сообщают о проблемах с WooCommerce, особенно при масштабировании. Однако для малого и среднего бизнеса это надежное решение.
• PrestaShop - PrestaShop - это облачная платформа с открытым исходным кодом, которая идеально подходит для сложной настройки. Гибкость PrestaShop делает его идеальным выбором для разработчиков и розничных продавцов, которым нужен высокий уровень гибкости без дополнительных затрат на корпоративные решения, такие как Magento. Тысячи надстроек делают задачу реализации новой функциональности еще проще.

Как улучшить UX электронной торговли (пользовательский опыт): 11 советов

Вот краткое изложение одиннадцати основных советов по UX:

1. Соберите прямые отзывы клиентов

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

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

Вот несколько советов, о которых следует помнить:

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

Более длинные опросы реже заполняются. (Источник)

2. Повысьте скорость вашего сайта

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

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

Увеличение времени загрузки страницы увеличит вашу «среднюю ценность страницы». (Источник)

Перейдите в Google PageSpeed ​​Insights и запустите свой сайт с помощью бесплатного инструмента. Вам будут даны практические советы по увеличению скорости вашего сайта и устранению проблем, которые его замедляют.

Хотите больше подобных идей?

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

на Я прочитал политику конфиденциальности и принимаю условия рассылки.

Установите этот флажок, чтобы продолжить

Woohoo! Вы только что зарегистрировались. Проверьте свой почтовый ящик, чтобы подтвердить подписку.

• Оптимизация изображений. Используйте соответствующие форматы для изображений и убедитесь, что они не больше, чем должны быть.
  Минимизация HTML, Javascript и CSS. Минификация - это, по сути, процесс, который «минимизирует» код разработчика, избавляясь от ненужных пробелов, запятых, примечаний и т. Д. Когда вы используете популярный CDN, такой как Cloudflare, код вашего сайта будет автоматически уменьшен.
• Уменьшите количество перенаправлений - для перенаправления требуется несколько ответов сервера, что увеличивает время, необходимое для полной загрузки страниц. Более того, перенаправления невероятно разочаровывают с точки зрения пользовательского опыта.
• Используйте быстрого хостинг-провайдера - вы мало что можете сделать, чтобы улучшить скорость вашего хостинга, если он медленный. Убедитесь, что вы выбрали быстрого поставщика, желательно с опытом работы в секторе электронной коммерции. Вы также можете рассмотреть возможность перехода с общего хостинга на выделенный сервер или VPS (виртуальный частный сервер).

Мы написали подробное руководство по скорости сайта, которое вы можете проверить, нажав здесь.

3. Создайте интуитивно понятную навигацию и поиск.

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

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

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

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

4. Различия между мобильным и настольным компьютерами

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

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

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

5. Упростите формы оформления заказа

Брошенные корзины, которые часто встречаются как на мобильных, так и на настольных компьютерах, часто являются результатом длинных и утомительных форм оформления заказа. Есть несколько простых настроек, которые сделают формы оформления заказа более удобными.
Брошенные корзины очень высоки на всех устройствах. (Источник)
Вот что вам нужно сделать, чтобы упростить формы оформления заказа как на мобильных, так и на настольных компьютерах:

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

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

6. Используйте информационный макет, ориентированный на клиента, для страниц продукта.

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

Вот несколько советов по макету страницы вашего продукта:

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

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

7. Оптимизация для всей воронки продаж

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

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

Задайте следующие вопросы, чтобы убедиться, что все ваши страницы хорошо сочетаются друг с другом:

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

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

8. Используйте каркасы и прототипы.

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

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

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

9. Предупреждайте клиентов о предложениях, скидках и бесплатных подарках.

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

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

10. Воссоздайте покупательский опыт в магазине

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

Включите на страницы своих продуктов следующее:

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

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

11. Выполняйте последовательные долгосрочные тесты.

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

Но есть роковая ошибка, которой необходимо избегать.

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

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

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

Подведение итогов UX-советов для электронной коммерции

Давайте вернемся на секунду к Джеффу Безосу. Он описал миссию Amazon - «стать самой клиентоориентированной компанией на Земле».

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

Но есть причина, по которой этот термин так популярен. Клиентоориентированность работает.

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

Загрузите свой бесплатный контрольный список для электронной торговли из 115 пунктов и взломайте свой рост доходов и прибыли

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