Дизайн
Mojo
6301

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

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

В закладки
Слушать

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

В предыдущих сериях

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

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

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

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

Сегодня

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

Quick View или грех быстрого просмотра

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

Найти быстрый просмотр сейчас уже не так просто. Многие крупные бренды от него отказались, но вот Wildberries Интернет-магазин wildberries.ru
По размеру это почти уже страница товара Интернет-магазин wildberries.ru
На Lamoda все немного скромнее. Быстрый просмотр вызывается неприметной кнопкой «Подробнее», а размер модального окна ближе к классическому Интернет-магазин lamoda.ru
Классическое решение использует и Спортмастер Интернет-магазин sportmaster.ru
Тут даже с каруселью, которая переключается на другой товар Интернет-магазин sportmaster.ru

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

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

Выглядит правильно, вы все врете

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

Первые проблемы

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

Костыли — признак плохого дизайна.

Дополнительные изображения

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

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

В каталоге изображения уже достаточно крупные. При наведении на карточку изображение изменяется. Интернет-магазин hm.com

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

Дополнительная информация

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

Пользователь снова запутался

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

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

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

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

Еще решения

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

Вот как Reebok справляется с разными изображениями и расцветками Интернет-магазин reebok.ru

Есть наводка

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

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

46%
показывают слишком мало информации на карточках.

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

Информация для состояния onHover:

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

Что с мобильной версией, умник?

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

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

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

Два стула Интернет-магазин laredoute.ru

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

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

Коротко про быстрый просмотр и onHover

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

Страница товара

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

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

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

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

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

Снова про изображения

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

92,6%
пользователей ориентируются на внешний вид

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

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

Хозяйке на заметку

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

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

Галерея

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

H&M использует свежее решение и прокручивает левую часть экрана, не уменьшая фотографии и без карусели Интернет-магазин hm.com
Такое же решение можно найти у Zara Интернет-магазин zara.com
Классическое решение от ASOS. Ни одной миниатюры не скрыто, хотя сами миниатюры маловаты. Интернет-магазин asos.com
Продолжаем приставать к Wildberries. Миниатюры скрыты за карусель и до 80% пользователей не посмотрит всех изображений. Интернет-магазин wildberries.ru

Дополнительные траты

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

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

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

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

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

Возврат

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

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

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

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

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

Крайне лаконично Интернет-магазин asos.com
OZON не знает стоимость доставки курьером, но показывает, что это не бесплатно. Интернет-магазин ozon.ru
Так вас проинформирует Nike Интернет-магазин nike.com

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

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

Отзывы и оценки

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

График зависимости количества заказов от количества отзывов Данные Yotpo
Больше отзывов → больше покупок → больше отзывов → больше покупок... Данные Yotpo

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

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

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

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

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

  • добавьте возможность фильтровать рейтинги по оценкам. Фильтрация должна быть без возможности выбора нескольких вариантов.
По этим данным нельзя сделать вывод, сколько пользователей какую оценку поставили. Интернет-магазин svyaznoy.ru

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

Сопутствующие и альтернативные товары

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

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

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

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

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

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

Вы недавно смотрели

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

Скажи табам нет

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

Интернет-магазин dns-shop.ru

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

Если ты что-то скрыл, то пользователи этого не заметят.

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

Итоги

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

Заключение

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

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

{ "author_name": "Mojo", "author_type": "self", "tags": [], "comments": 18, "likes": 50, "favorites": 296, "is_advertisement": false, "subsite_label": "design", "id": 130539, "is_wide": false, "is_ugc": true, "date": "Mon, 01 Jun 2020 12:30:02 +0300", "is_special": false }
Объявление на vc.ru
0
18 комментариев
Популярные
По порядку
Написать комментарий...
2

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

Ответить
0

Посмотреть все фото, не переходя в карточку — круто.

Быстрый просмотр действительно вырастит показатели, но это костыль, а не решение — не круто. Я довольно подробно постарался объяснить в статье, почему. Ну и тут я стою на плечах гигантов — ребята из Бэймэрд провели исследования за меня.

Если остались вопросы, то готов обсудить :)

Ответить
0

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

Ответить
0

А проект еще не готов? Я бы с удовольствием посмотрел :) 

Ответить
2

Отправил в личку ссылку.

Ответить
0

Бро, отправь тоже в ЛС, у меня тоже оптовка, интересно посмотреть реализацию

Ответить
0

тоже интересно для оптовки посмотреть ..

Ответить
1

OZON не знает стоимость доставки курьером, но показывает, что это не бесплатно.

Где? На картинке этого не видно.

Ответить
1

В случае с пунктом выдачи написано «бесплатно», для доставки курьером такой пометки нет. Соответственно, не бесплатно :)

Ответить
1

Вам соответственно, а многим покупателям вряд ли)

Ответить
1

Лично я рекомендую все равно добавлять минимальную стоимость доставки :)

Ответить
1

Очень полезная статья! Очень своевременно

Ответить
0

Спасибо) Делаете свой интернет-магазин?

Ответить
0

Приятные статьи. Первая понравилась. А почему у вашей студии такой ужасный сайт? 😅

Ответить
0

Рад, что статья понравилась!

Сайт, кстати, обновится в ближайший месяц. Позовем вас оценить :)

Ответить
1

Интересно будет посмотреть.

В какой-то статье вы упомянули Ильяхова (главред). Вот у него в "Пиши, сокращай" хорошо написано про всякие "продающие" тексты, типа как у вас на главной. Суть - пишите, что вы можете дать клиентам, а не чем вы хотите похвастаться. У вас прям идеальный кейс чтобы по этой книге разобрать. Давайте взглянем:

26-е среди креативных веб-студий России

И это главная информация, которую вы даёте людям. Это то, почти точно прочитает большинство, в отличие от других заголовков на странице. Что она даёт? Ничего. Была бы разница, если бы вы были на 86 или 14 месте? Сомневаюсь.

Следим за трендами в дизайне и задаем их сами

Мне, как клиенту, конечно, приятно знать, что вы не отстаете от моды, но что мне это даёт? Пишите о том, чем это будет хорошо мне - например, "Делаем современные и экспериментальные дизайны" - уже понятно, что либо будет как минимум не хуже чем у других в плане "современности", либо получу что-то интересное и необычное.

Современные инструменты

Да вы можете хоть в пейнте работать под win 3.1 или дизайнить таблицами в ворде (:D), мне было бы все равно, если результат будет крутым. А вот то что проводите исследования - это, имхо, хорошая и важная инфа, которая показывает, что вы не от балды делаете, а работаете именно с моей ЦА. Мне было бы интересно это знать.

Входим в группу компаний Friendly Design —дизайн-сообщество c полумиллионным охватом

Я, конечно, новичок в дизайн-среде, но про эту группу слышу впервые. А условному владельцу магазина пиломатериалов вообще будет плевать, куда вы там входите или выходите) и опять же - это не даёт вашим клиентам никакой инфы. Что за группа компаний? Чем это хорошо? Что за полумиллионый охват?
Тут я бы вообще вынес текст последующий вместо этого заголовка. Потому что анализ конкретного кейса и подстраивание под клиента - это важно.

Используем передовые технологии в проектах

Опять то же самое. Почему не написать, например, "Делаем так, что посетителя просто не оторвать от сайта. Используем..." 

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

Ответить
0

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

Ответить
0

Статья, как и предыдущие рекомендована к прочтению.
Не согласны с быстрым просмотром. Считаем, что удалять быстрый просмотр - затея неудачная. Аргумент автора статьи о том, что пользователю недостаточно информации можно парировать правильным оформлением и позиционированием быстрого просмотра и возможностью просмотреть товар подробнее в карточке номенклатуры.
Мы выводим в форме быстрого просмотра значимые свойства товара, видеоматериалы, фотографии. При этом очень заметно сообщаем пользователю, что можно узнать о товаре больше, если нажать кнопку "Узнать подробнее", "Посмотреть ещё видео", "Отзывы о товаре" и тд. Они ведут уже в карточку товара.
Основная цель использования быстрого просмотра где бы то ни было - неуход пользователя на страницу товара, иначе ему сложно вернуться в нужное место каталога.
Также мы открываем каждый товар каталога в новой вкладке - мы видим, что пользователи могут закрыть вкладку и вернуться последнее место каталога.
Кроме того, мы использовали OnHover для десктопа, где можно по курсору менять фото, почитать дополнительные свойства. На мобилах мы можем показать только дополнительные фото листанием, как на Озон. Свойства на мобиле не отображаем. Но здесь помогает быстрый просмотр. Очень удобно. Даже учитывая подгрузку формы быстрого просмотра, это не меняет факта неухода пользователя на другую страницу.

Ответить

Комментарии