5 ошибок интерфейса интернет-магазинов, которые могут снижать конверсию в покупку

Методология. Немодерируемый UI-тест с помощью решения Fastuna Where to Click. В тесте участвовали 200 мужчин и женщин по всей России от 18 до 60 лет. Пропорции по географии, полу и возрасту соответствуют переписи населения. Люди выполняли задания со смартфона в случайной последовательности. В каждом задании человек делал только один клик по экрану. Все клики платформа собрала в тепловые карты.

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

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

Универсальным считается подход, при котором вся карточка товара представляет единое целое и ведет на страницу товара. Например, в «Декатлоне» каждая уменьшенная карточка товара выделена визуально, что снижает вероятность разночтений. Процент верных кликов здесь выше — 82%.

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

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

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

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

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

Например, Kari используют для сортировки кнопку со схематичным изображением разнонаправленных стрелок. Лишь 35% респондентов идентифицировали ее функцию правильно.

H&M разместили опцию максимально заметно. В результате имеем существенно более высокий процент правильных кликов.

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

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

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

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

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

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

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