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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Дополнительные изображения и цвета. Хотя их можно включить и изящнее. Смотрите примеры выше и в предыдущей статье;
• Вторичные, но важные для выбора характеристики товара;
• Вариации продукта. Учтите, что пользователь может не заинтересоваться вариантом, показанным «по умолчанию»;
• Кнопки и другие повторяющиеся интерактивные элементы. Это снизит уровень визуального шума в каталоге;
• Характеристики совместимости.

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

• показывать всю информацию сразу;
• onHover будет по первому тапу.

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

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

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

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

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

• все вариации продукта;

• полное название;
• качественное и большое изображение. 55% сайтов в исследовании Бэймарда использовали недостаточно крупные изображения;
• изображения нужны для каждой вариации;
• цена;
  

• стоимость возможных дополнительных расходов. Например, доставки и возврата;

• доступность: можно ли купить сейчас, когда можно будет купить, сколько осталось;
• контрастная кнопка «Добавить в корзину». Не забудьте про фидбек от системы — добавлен ли уже товар в корзину.
• краткое и информативное описание.

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

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

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

• вид с разных сторон;

• возможность увеличить изображение;
• комплектацию продукта;
• фото, чтобы понять реальный размер. 42% пользователей пытается понять реальный размер товара по изображению.
• фото in-use;
• 360° обзор;
  
• видео с товаром или анимированное изображение;
• виртуальную примерку с помощью загрузки своей фотографии или AR, если это релевантно для сферы.

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

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

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

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

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

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

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

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

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

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

• дружелюбной к пользователю. Он считает рискованным заказывать в интернете;

• понятной. Люди не будут дешифровать сложные документы;

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

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

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

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

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

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

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

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

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

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

• показывайте распределение отзывов: сколько хороших, сколько плохих. Используйте графическое представление распределения, а не числовое;
• показывайте в начале худший и лучший. Плохие отзывы доказывают, что это не фейк;

• внесите возможность оценивать пользу мнений. Так люди сами отфильтруют хорошие и плохие отзывы;

• добавьте возможность фильтровать рейтинги по оценкам. Фильтрация должна быть без возможности выбора нескольких вариантов.

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

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

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

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

• нужны или возможны для этого товара;
• есть на сайте.

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

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

4. Давайте возможность перейти к родительской категории, а не только демонстрируйте ограниченное число товаров.

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

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

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

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

• не используйте быстрый просмотр, используйте onHover;
• делайте галерею правильно: добавляйте больше изображений и не скрывайте миниатюры. В статье много подробностей;
• показывайте дополнительные траты на доставку и условия возврата;
• отзывы продают. Нужно правильно их представлять;
  
• не путайте сопутствующие и альтернативные товары. Нужны обе категории вместе с категорией «Вы недавно смотрели»;
• не используйте табы. Скрытый контент обязательно кто-то не найдет и, возможно, уйдет на другой сайт.

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

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