Logo

Как обеспечить омниканальность и улучшить показатели сайта

Денис Студенников

Руководитель отдела UX/UI студии Турум-бурум

Тезисы вебинара:

  1. Что такое грубые ошибки интерфейса. Как они влияют на ключевые показатели и омниканальность. Как их выявить самостоятельно.
  2. Подходы к изменению дизайна сайта.
  3. Примеры изменения интерфейса для увеличения дохода и развития омниканальности на примере проекта Intertop и других.

Грубые ошибки интерфейса. Как они влияют на KPI?

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

Рассмотрим основные показатели KPI интернет-магазина:

  1. Conversion Rate – коэффициент конверсии.
  2. Transaction Rate – коэффициент транзакций.
  3. ARPU – средний доход на пользователя.
  4. Average Order – средний чек.
  5. Bounce Rate – показатель отказов.
  6. Exit Rate – показатель выходов.
  7. Pages/Session – глубина просмотра.

Bounce Rate. О чем говорит высокий показатель отказов?

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

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

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

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

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

Exit Rate. Какие ошибки влияют на показатель выходов?

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

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

Проблемы:

  • нелинейное повествование,
  • главный акцент на кнопки «минус», «плюс», «удалить»,
  • большое количество полей,
  • отсутствие call to action,
  • неправильная подача информации.

Как исправить: составить понятную структуру.

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

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

Слева понятное линейное повествование. Мы спрашиваем, как зовут человека, его номер телефона и емейл для эффективного емейл-маркетинга. Но объясняем, что емейл нужен для отслеживания статуса заказа, получения информации об акциях и т. д. Фамилия нужна лишь в случаях доставки “Новой почтой”. Если же у магазина есть точки самовывоза – поле “Фамилия” не нужно. Ниже четко разграничены блоки «Куда отправлять» и «Как платить». Это все помещается условно на одном экране и требует единственного шага от покупателя. Мобильная версия точно такая же, единственное, что информация о заказе находится внизу.

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

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

Соотношение метрик desktop/mobile/tablet

Важно понимать соотношение трафика на десктопе, мобильном телефоне и планшете.

Ни для кого не секрет, что более 70% покупок совершаются с мобильного устройства. И ваш интерфейс должен быть адаптирован под мобильные устройства. Конечно, не в том случае, если у вас B2B-портал, на котором работают люди с ноутбука и компьютера. Во всех других случаях устройство нужно учитывать, и здесь пригодится Mobile First.

Какой тип ошибок может быть допущен, если не учитывать источник трафика? На слайде – пример старого интерфейса магазина суши «966», когда еще не было большого увлечения мобильными приложениями.

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

На слайде – новая версия того же сайта:

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

Сайт выполнен по принципу Mobile First и готов для потока заказов из мобильных устройств. Если у вас также преобладает мобильный трафик – рекомендую следовать этому принципу для комфортного оформления заказа!

Average Order Value. Как увеличить средний чек?

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

На слайде – карточка товара магазина обуви. Хотя интерфейс немного устарел, в целом выглядит неплохо:

  • большое фото товара,
  • акцент на цене,
  • большая кнопка,
  • понятный интерфейс.

В чем проблема? Очень мало ценности для пользователя – не используется весь потенциал сайта.

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

Пример – страничка нашего клиента магазина косметики «Monami». Здесь понятная структура карточки товара, но главное, что к румянам предлагается купить палетку.

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

Кроме карточки товара, мы можем использовать и корзину.

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

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

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

Что нужно мужчине кроме подарка? Подарочная упаковка!

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

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

Ещё один пример коммуникации магазина со своим покупателем.

Пользователь добавил в корзину смартфон Samsung Galaxy A9 за 13 тыс. грн и готов оплатить. На странице корзины всплывает рекомендация приобрести power bank за 480 грн.

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

Используйте потенциал своих сайтов и не забывайте об этих блоках!

Инструменты для анализа юзабилити

  1. Hotjar
  2. Plerdy
  3. Google Analytics
  4. Google Tag Manager
  5. Google Optimize
  6. Google Forms
  7. PageSpeed Insights
  8. Five second test
  9. VWO
  10. AB Tasty

Они позволяют:

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

Лучшая возможность что-то доработать – спросить у пользователей об их болях или же попросить совета.

Примеры омниканальности в интерфейсе на сайте Intertop

Магазин Intertop является омниканальным fashion-ритейлером №1 в Украине. Занимается продажей брендовой обуви, одежды.

Наша команда проанализировала старый интерфейс и провела опрос среди пользователей «Почему вы не завершили заказ».

В результате получили такие комментарии:

  • «Требуется примерка в отделении Новой почты, не совсем удобно примерять шорты. Хотелось бы выбрать вариант доставки в магазин, но он был недоступен».
  • «Почему нет возможности сделать доставку в магазин?»
  • «Я хочу зарезервировать данные модели в магазине, примерить их с ребенком и купить то, что подойдет».
  • «Хочу самовывозом из магазина, чтобы нормально померить и если подойдет – купить».

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

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

Дальше мы проанализировали, что не каждый клик «Резервировать» заканчивался резервированием, то есть многие пользователи просто смотрели, а магазин в итоге терял деньги.

Кроме этого, были такие ошибки в процессе резервирования товара:

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

Решение проблем:

  1. При резервировании открывается список магазинов, опция google-карты по умолчанию закрыта. Это решение принесло сокращение в 10 раз количества запросов Google Maps и сохранило колоссальный бюджет!
  2. Покупка для зарегистрированного пользователя составляет один клик. Новому покупателю для регистрации нужно заполнить всего лишь три поля (номер телефона, емейл и пароль).

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

Кейс Juliette Lingerie. Наличие товара в магазине

Juliette – магазин брендовой пляжной одежды, нижнего белья и аксессуаров.

Сложности интерфейса:

  • покупатели хотели покупать в один клик,
  • интересовались примеркой в оффлайн-магазине.

На самом деле кнопка «Примерить» была, но ее не было видно. Кроме этого, частые вопросы о примерке в чат нагружали call-центр.

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

Результаты оптимизации сайта:

  • снижение нагрузки на call-центр,
  • отработка пожеланий клиентов о резервировании товара.

Инстаграм-блок на примере сайта Pratik

Pratik – украинский производитель качественной обуви из кожи.

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

Здесь встречается похожая ошибка таких магазинов – при посещении сайта, нажимая на кнопку товара, покупатель автоматически уводится в Instagram. Это не очень хороший вариант, поскольку покупка в магазине гораздо удобнее и понятней. Такая конверсия лишает всякого смысла вложения в сайт.

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

Результаты:

  1. Показатель отказов с mobile уменьшился на 10%.
  2. По сравнению со старой версией сайта 20% десктопного трафика перешло в mobile.
  3. Коэффициент конверсии с mobile увеличился на 33,33%.
  4. Показатель с desktop уменьшился на 85%.
  5. Коэффициент конверсии с desktop увеличился на 170,73%.

Омниканальность на примере кейса 966.ua

Проекту 966.ua более 5 лет – это доставка паназиатской кухни в Днепре, Харькове и Одессе.

Сейчас пользователь может общаться посредством четырех каналов:

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

Телефон: опция была изначально, но покупатели часто не знали, что 966 – это и название магазина, и номер телефона. Мы исправили это и указали отдельно номер на сайте.

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

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

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

Четыре основных тезиса для эффективной смены интерфейса

  1. Анализируйте свой веб-сайт.
  2. Поймите потребности пользователя. Не ставьте интересы бизнеса выше интересов пользователя – между ними должна быть корреляция.
  3. Дорабатывайте интерфейс постоянно. Разберитесь, как это работает и что важно, узнавайте best practices, следуйте трендам или же сами создавайте новые.
  4. Принимайте осознанные решения, основанные на цифрах и фактах. Без цифр вы всего лишь человек с мнением.
Special Request Inline