Baymard Institute: 61 рекомендация для e-commerce, о которых стоит знать

На 7-8 году постоянной работы с MiniShop я узнал, что существует Baymard Institute — датская исследовательская компания, с 2009 года занимающаяся исключительно UX интернет-магазинов. 200,000+ часов реального тестирования с пользователями, 4,400+ модерируемых сессий, 771 гайдлайн. 71% компаний из Fortune 500 e-commerce используют их рекомендации. Фактически главный мировой источник данных о том, как должен быть устроен интернет-магазин.

Подписка у них платная ($500), но в блоге и открытых статьях достаточно материала, чтобы переосмыслить многие привычные решения. Я собрал самое интересное — то, что применимо к нашим проектам на MODX.

Checkout: вдвое больше полей, чем нужно

Средний checkout содержит 23 элемента формы. По данным Baymard, идеальное количество — 12-14 (7-8 полей, пара чекбоксов, пара дропдаунов). При этом 65% крупных сайтов имеют «посредственный» или худший checkout UX. Улучшение checkout может дать до +35% к конверсии.

Несколько конкретных рекомендаций:

• 39% сайтов не объясняют, зачем просят номер телефона — и 14% покупателей бросают checkout именно из-за этого
• 62% не выделяют guest checkout как основной вариант, хотя 24% бросают корзину из-за обязательной регистрации
• Регистрацию рекомендуют предлагать после оплаты — «хотите сохранить данные для следующего раза?»

Корзина: удалять без подтверждения

Вот что меня зацепило и с чего началось моё погружение в Baymard. Удаление товара из корзины не должно требовать подтверждения — в отличие от других деструктивных действий. Вместо confirm-диалога рекомендуется показывать кнопку «Восстановить» (undo/toast), чтобы случайное удаление можно было откатить одним кликом.

Логика простая: пользователь удаляет из корзины осознанно в 99% случаев. Диалог подтверждения только раздражает. А вот случайное удаление undo решает мягче и быстрее.

Основные причины отказа от покупки — цифры, которые стоит держать в голове:

• 39% — неожиданные допрасходы (доставка, налоги)
• 21% — слишком долгая доставка
• 19% — обязательная регистрация
• 18% — слишком сложный checkout
• 15% — ошибки и падения сайта
• 10% — мало способов оплаты

Карточка товара: 7 типов фото

51% крупных сайтов имеют «посредственный» UX карточки товара. Baymard выделяет 7 типов фотографий, которые в идеале должны быть: на белом фоне, в масштабе (рядом с человеком или предметом), в контексте использования, текстура/детали крупным планом, совместимость с другими товарами, фото от покупателей, описательные (с размерами и характеристиками прямо на фото).

Ещё: 63% сайтов не показывают фото от покупателей на карточке, а стоимость доставки пользователи ищут ещё до корзины — и ожидают увидеть её на карточке товара.

Поиск и фильтрация

67% крупных сайтов — «посредственная» или худшая навигация. По фильтрам:

• Обязательный минимум: цена, рейтинг, бестселлеры, новинки
• Логика: OR внутри одного фильтра (красный ИЛИ синий), AND между фильтрами (цвет И размер). 32% не позволяют мультивыбор внутри фильтра
• Счётчик товаров у каждого значения — обновляемый в реальном времени
• 77% autocomplete не показывают категорию в подсказках

Мобильная версия

Ни один из исследованных сайтов не получил оценку «хорошо» в мобильном UX. Cart abandonment на мобильных — 86% (против 70% на десктопе). 63% не подставляют правильную клавиатуру для типа поля (numpad для телефона, email-клавиатура для email). 87% не отключают автокоррекцию для имён и адресов.

Что с этим делать

Часть рекомендаций в MiniShop3 уже реализована — кнопки +/− для количества, ссылки на товар в корзине, inline-валидация. Часть — в планах. Рекомендую заглянуть в блог Baymard — там сотни статей с конкретными данными.