Оформить покупку или закрыть сайт? 5 ошибок интерфейса, которые заставляют клиентов уходить

В эффективном интерфейсе все работает на пользователя. Все до последнего пикселя.

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

Но главное – знать, что именно менять.

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

 

5 распространенных UX-ошибок, снижающих конверсию и как это исправить

Далее примеры того, как точны, точны изменения UX/UI способны превратить юзабилити ошибки в точки роста.

1. Десктопная версия сайта, плохо вмещаемая в мобайл

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

Адаптив – это еще не mobile UX.

Сегодня мобильная коммерция – стандарт. 75% eCommerce-покупок в мире проходят с мобильных устройств. И если сайт неудобно пользоваться с телефона или планшета, то вы теряете клиентов и прибыль.

Например, дизайн сайта Robinzon, официального дистрибьютора Samsonite в Украине, создавался не как уменьшенная копия рабочего стола, а по принципу mobile-first . Это когда мобильная версия имеет свою логику, структуру и учитывает паттерны поведения именно мобайл пользователя:

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

Дизайн интернет-магазина Robinzon

 

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

2. Запутанная навигация, усложняющая поиск нужного товара

Навигация — это не просто «меню» и «каталог». Это о том, как быстро и просто юзер находит необходимое.

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

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

 

Это особенно критично для крупных онлайн-магазинов, таких как VARUS — сервис с тысячами наименований, категорий, подкатегорий и различных форматов доставки. Для создания удобной навигации и каталога в этом онлайн-проекте были:

• Проанализированы тепловые карты, вебвизор, типовые сценарии взаимодействия пользователей с каталогом (какие запросы делают, где и что ищут);
• Проведен бенчмаркинг навигации среди 10 основных конкурентов.

 

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

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

 

Разработка структуры каталога для VARUS

 

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

Вид каталога интернет-магазина VARUS в мобильной версии до и после редизайна

 

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

3. Страница товара без… важной информации о товаре

Именно на странице товара пользователь взвешивает все за и против, и принимает решение о покупке. И если посетитель не видит ответа на свои вопросы, он не купит. Не потому, что товар плохой. А потому, что не хватает аргументов: фото низкого качества, отсутствие характеристик, недостаточно описания, преимущества не очевидны, не видна цена и условия.

Всё это о структуре страницы.

К примеру, для интернет-магазина профессиональной косметики Lamour удалось повысить эффективность страницы товара и увеличить средний чек увеличился в 1,7 раза путем изменения layout-а и упорядочения информации по приоритетности:

• Вынесли ключевые элементы (большое фото с каруселью, название, цена, кнопка, оплата, доставка) на первый экран;
• Упростили описание и сделали структурированным: с подзаголовками, списками, отдельными блоками;
• Добавили социальное доказательство и бренд-преимущества в виде отдельного блока (объяснили, что означает необычная кнопка «Только Pro»).

 

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

Страница товара интернет-магазина Lamour

4. Cross-sell и up-sell без логики = упущенные возможности для роста AOV

Важно не наличие рекомендации, а ее уместность. Так что, если в блоке «С этим товаром покупают» такие же или отсутствуют в наличии товары, а в блоке «Вам может понравиться» предлагают не релевантные товары, то это не работает и толку от того ноль.

А вот правильно настроенный cross-sell и up-sell – это не только плюс к среднему чека, а улучшение опыта пользователя.

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

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

Пример реализации блока cross-sell в корзине интернет-магазина YouShouldBeHair
 

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

 5. Сложный и долгий процесс оформления = незавершенная покупка

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

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

Хороший пример клиентоориентированного интерфейса – страница оформления заказа на сайте интернет-магазина ORNER:

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

 

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

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

Хороший интерфейс не всегда продает, а удобный – всегда

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

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

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