UX пособие для увеличения продаж в e-commerce

Данное пособие — перевод рекомендаций, составленных Google на основе анализа сотен сайтов розничной торговли, в ходе которого было выделены универсальные элементы UX, которые могут повлиять на продажи. В данном руководстве вам будут предложен список улучшений мобильных версий сайтов в 6 областях (рис. 1):

Список областей для улучшений в мобильных версиях

Рисунок №1 — Список областей  для улучшений в мобильных версиях

Для всех рекомендаций, изложенных здесь, должно быть проведено А/Б тестирование!

Что мы можем подчеркнуть из сайтов, обозначенных Google как “лучшие из лучших”:

  1. Главная страница
  2. Меню и навигация
  3. Поиск
  4. Категория и продукты(карточки товаров)
  5. Конверсия
  6. Оптимизация форм

Глава 1: Главная страница

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

Рекомендации для главной страницы

Рисунок №2 — Рекомендации для главной страницы

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

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

Данные сайты имеют:

  1. Кнопки CTA расположены выше границы с экраном и имеют понятный призыв к действию(рис. 3).

https://nest.com/ (Learn more — Подробнее)

https://www.amazon.com/ (Sign in — Зарегистрироваться)

https://www.asos.com/ (Shop women, Shop men — Женский магазин, Мужской магазин)

Понятные призывы к действию и кнопки CTA выше границы экрана

Рисунок №3 — Понятные призывы к действию и кнопки CTA выше границы экрана

  1. Принципы, ориентируемые на прибыль(рис. 4).

https://m.sephora.com/ (Выберите 5 пробников и получи 75$ на покупку по коду)

https://www.target.com/ (Экономия — до 25% свободного места с органайзерами)

https://www.westelm.com/m/ (Зарегистрируйся и получи 15% скидки)

Выгодные предложения, ориентируемые на прибыль

Рисунок №4 — Выгодные предложения, ориентируемые на прибыль

  1. Отсутствуют баннера на всю страницу(рис. 5).

https://www.adiamor.com/

https://www.forever21.com/us/shop

https://www.asos.com/

На первых 2х сайтах баннера занимают не более 30-50% экрана, что позволяет не отвлекать внимание от главных конверсионных элементов, меню и пр. На 3м сайте баннер занимает 80-90% экрана, но меню, поиск, корзина, и кнопки CTA доступны и заметны пользователю.

Отсутствие баннеров на всю страницу

Рисунок №5 — Отсутствие баннеров на всю страницу

  1. Нет автоматических каруселей(рис. 6).

https://www.novica.com/

https://www.macys.com/

Нет автоматических каруселей

Рисунок №6 — Нет автоматических каруселей

Исследование(рис. 7), которое показывает, что карусели плохо работают.

Соотношение кликов к количеству баннеров в каруселях

Рисунок №7 — Соотношение кликов к количеству баннеров в каруселях

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

  • Человеческий глаз реагирует на движение, поэтому важные кнопки и информация может быть упущена.
  • Слишком много сообщений = ни одного сообщения. Если нужно донести важную информацию, то минимизируйте ее количество, чтобы она лучше запоминалась.
  • Баннерная слепота. Феномен в веб-юзабилити, при котором человеческий глаз не воспринимает баннеры, рекламные блоки или объекты, похожие на них.

Исследования:

  1. https://conversionxl.com/blog/dont-use-automatic-image-sliders-or-carousels/
  2. https://www.clickz.com/rotating-banners-just-say-no/45917/
  3. https://www.widerfunnel.com/rotating-offers-the-scourge-of-home-page-design/
  4. https://www.nngroup.com/articles/auto-forwarding/

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

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

  1. Популярные категории на главной странице(рис. 8).

https://www.boots.com/ (Новогодние подарки, Красота, Для детей, Духи)

https://www.lulus.com/ (Свитеры, Для отпуска)

https://www.victorianplumbing.co.uk/ (Ванные комнаты, Туалеты, Умывальники, Ванны и т.д.)

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

Рисунок №8 — Популярные категории на главной странице

  1. Социальные профили(рис. 9).

https://www.tuftandneedle.com/

https://poshmark.com/

Социальные профили

Рисунок №9 — Социальные профили

А теперь возьмем несколько примеров наших сайтов и опишем их юзабилити(рис. 10).

Примеры e-commerce в Украине

Рисунок №10 — Примеры e-commerce в Украине

https://mbest.aliexpress.com/?lan=ru

На главной расположены:

  1. уникальное предложение $4 на счет, если скачать приложение;
  2. самые продаваемые товары;
  3. товары рекомендации;
  4. кнопки CTA регистрации;
  5. все возможные способы оплаты.

Минусы:

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

https://comfy.ua/dnepropetrovsk/

На главной расположены:

  1. уникальное предложение, в виде распродажи;
  2. популярные категории;
  3. топы продаж;
  4. социальные профили;
  5. CTA подписки;
  6. видеообзоры товаров;
  7. дополнительные сервисы поддержки покупателя.

Минусы:

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

https://www.zolotoyvek.ua/ru/

На главной расположены:

  1. компактный баннер с уникальным предложением и кнопкой CTA;
  2. популярные акции и категории;
  3. CTA подписки;
  4. способы оплаты;
  5. дополнительные сервисы поддержки покупателя;
  6. социальные профили.

https://tabletki.ua/

На главной расположены:

  1. заметный поиск;
  2. популярные категории;
  3. популярные товары;
  4. новости.

Минусы:

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

https://kasta.ua/

На главной расположены:

  1. уникальные ограниченные предложение для мужчин и женщин, детей;
  2. популярные категории;
  3. дополнительные сервисы поддержки покупателя;
  4. возможные способы оплаты;
  5. новости;
  6. социальные профили.

Минусы:

  1. отсутствие ключевой кнопки CTA

https://rozetka.com.ua/

На главной расположены:

  1. заметный поиск;
  2. понятные кнопки CTA;
  3. популярные товары;
  4. новинки;
  5. контактные телефоны.

Минусы:

  1. более 3х баннеров в карусели, но плюс, что она не автоматическая;
  2. социальные профили.

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

Продолжение читайте во второй главе Меню и навигация

Автор Ирина Старченко
практикующий Seo-специалист
и программист любитель

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *