Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть четвёртая

Четвёртая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг удобнее для людей. Мы в Mojo собрали лучшие практики из своего опыта и подкрепили их исследованиями.

Меня зовут Женя Князев. Я продуктовый дизайнер в Mojo. У нас большая экспертиза в дизайне и неплохая база исследований. Недавние eCommerce-проекты вдохновили меня рассказать о дизайне интернет-магазинов.

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

Во второй статье я продолжил погружение. В статье подробно разобрана навигация и звонки. Навигация влияет на опыт использования всего сайта. Ошибаться нельзя.

В других местах тоже нельзя.

В третьей статье темой стал каталог. Ошибки в карточках, фильтрации товаров, инсайты про горизонтальный фильтр-бар и небольшой бонус в конце. Читайте и вдохновляйтесь :)

Еще немного поговорим про каталог: грехи быстрого просмотра и альтернативы, а потом перейдем к странице товара. Обсудим, как сделать её идеальной. Статья получилась слишком длинной, поэтому корзину и оформление заказа перенес в следующий выпуск.

Не знал, куда отнести тему с быстрым просмотром. Это еще не страница товара, но уже не каталог. Начнем с примеров.

На момент исследования института Бэймэрд функция использовалась почти в половине ТОП-50 интернет-магазинов США.

В 2019 году Wildberries стали крупнейшим магазином по версии Data Insight. Грехи всё те же.

В интернете легко найти статью, где рассказывается о пользе быстрого просмотра. Большая часть из них опирается на идею «чем меньше времени от товара до добавления в корзину, тем лучше». В случае с быстрым просмотром все далеко не так однозначно.

Быстрый просмотр показывает пользователю дополнительные характеристики, больше фото и акций. Некоторые из испытуемых Бэймэрд считают функцию полезной — так происходит со всеми «костылями». Люди считают их полезными, но хотели бы вы всю жизнь ходить на костылях?

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

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

Больше примеров в третьей статье. Там я уже рассказывал про хорошую карточку в каталоге.

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

Во второй статье я уже приводил цитату Джошуа Бревера о том, что пользователь не мыслит, как вы.

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

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

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

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

Определите вторичную, но важную для принятия решения информацию. Научитесь говорить «нет». Балансируйте, не упадите в сторону ложного упрощения.

Цель — не заставлять пользователя «прыгать» из каталога к странице продукта и обратно.

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

Спойлер: оба варианта плохие.

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

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

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

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

В третьей статье мы подробно обсудили важность изображений. Подолью масла в огонь. Бэймэрд показали, что 56% пользователей используют фотографию, как первичный источник данных. По данным KISSMetric 92,6% пользователей ориентируются на внешний вид при решении о покупке.

Идеальный блок с изображениями товара должен содержать:

Делать хорошие фото и видео дорого. Легче всего реализовать первые пять пунктов — начните с них. За последние три советуем браться только при большом количестве ресурсов.

Разрешите пользователям добавлять свои фотографии. Это редкая практика и большое упущение. Качественные фото других покупателей вызывают больше доверия и при этом бесплатные.

А еще фотосессии в регионах обойдутся дешевле, чем в Москве или в Питере.

Несколько фото образуют галерею. В галерее должны быть миниатюры всех изображений одновременно. 50–80% пользователей не заметит иконку карусели и пропустит скрытые изображения.

Все очень просто — их нужно показывать полностью. Схема «расскажу о том, что продукт обойдется на 1000 рублей дороже потом, когда ты уже решил и купишь» не работает.

23% людей прекращают заказ, когда узнают стоимость доставки в момент оформления заказа. 64% пользователей ищет стоимость доставки на странице товара.

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

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

10% пользователей отказываются от заказа из-за неудовлетворительной политики возвратов. Как мы уже знаем, важна не только суть, но и внешний вид.

Политика возврата должна выглядеть, а лучше быть:

Часто людям достаточно только 2-3 предложений, которые описывают суть. Например, «Можно примерить перед покупкой и не выкупать. Вернуть можно в течение 14 дней после покупки. Для этого сохраняйте этикетки на товаре и не используйте его»

Снабдите иконкой и вуаля. Все понятно и прозрачно. Главное, чтобы там говорилась правда.

Если возврат невозможен, предупредите пользователя заранее. У него не будет претензий, если он согласился на «правила игры».

Отзывы продают, приведу статистику из исследования Yotpo.

Люди читают отзывы и доверяют им. В 2014 году 88% людей ответило, что доверяет отзывам, как персональным рекомендациям.

Не удаляйте негативные рейтинги. Они помогают продавать, только правильно их обрабатывайте.

Текст и фото отзыва важны не меньше, чем итоговый результат.

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

Если у товара отзывов больше 5-10, то:

Рейтинги и честность добавят доверия к вашему магазину.

Показывайте и те, и другие. Это разные истории. Аналогичные товары помогают пользователю найти подходящий. Сопутствующие товары — элементы для «комплектации» (дополнения, аксессуары и уход).

Если пользователь не нашел «правильный» продукт, он не будет искать сопутствующие товары.Альтернативы продукту помогают искать и принять решение о покупке на сайте.

Категория сопутствующих товаров покажет, что они:

При этом разделяйте альтернативные и сопутствующие или дополняющие товары. Несколько советов:

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

Интересный вывод от Бэймард: столь любимые табы ведут к проблемам.

Можно уже сформулировать некоторое правило:

Звучит самоочевидно.

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

Ставьте +1, если эта статья вам понравилась. Буду рад обсудить вопросы в комментариях.