{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

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

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

В предыдущей серии

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

Во второй статье погрузились глубже, разобрали навигацию и звонки.

Сегодня я расскажу, как сделать хороший каталог.

Меня всё ещё зовут Женя Князев. Я всё ещё продуктовый дизайнер в digital-студии Mojo. Больше исследований, больше дизайна, больше конверсии. Поехали!

Каталог

В физическом или «каменном» (англ. brick-and-mortar) магазине большую часть товаров вы рассматриваете поверхностно: внешний вид, ценник, внешний вид, ценник, внешний вид, ценник и так далее.

В интернет-магазине делаете всё то же, но в каталоге. Онлайн-каталоги даже удобнее реальности:

82% людей изучают товары перед покупкой в интернете. 45% читают отзывы перед покупкой, которую совершат в «каменном» магазине.

Ничего удивительно. Изучать товары в интернете можно по пути на работу или даже на работе. И из друзей мало кто покупал «тот самый» пылесос.

Давайте упростим жизнь 82% людей и разберемся, что и как должно быть устроено в каталоге. За основу я взял исследование института Бэймэрд.

Карточка

Можно такую же, только другого цвета?

Сначала определите контент карточки. Изображение товара и цена — единственные универсальные характеристики. Они должны присутствовать на карточках любого интернет-магазина.

46% сайтов в исследовании Бэймэрда показывали слишком мало контента. Почти половина ТОП-50 eCommerce-сайтов США.

Контент должен удовлетворять потребностям потенциального покупателя. Пообщайтесь с ЦА. Узнайте, на что они обращают внимание. Например, для магазина одежды важно показывать доступные цвета.

Показывать цвета можно по-разному. H&M не даёт посмотреть на разные расцветки из каталога, только на странице продукта Интернет-магазин hm.com
А Lamoda вместо цветов на карточке показывает каждый цвет, как отдельный товар Интерне-магазин lamoda.ru
Это совсем другая история, но цвета можно выбрать даже тут Интернет-магазин apple.com

Если нет возможности провести интервью, то пообщайтесь с заказчиком. Хорошие маркетологи и руководители компаний должны понимать потребности своих покупателей.

После интервью мы убрали другие характеристики и добавили не самые очевидные: Производителя и Артикул. Один из наших проектов

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

И на эту, и на ту

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

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

Илья Бирман, арт‑директор дизайн-бюро Артёма Горбунова, создатель популярной типографской раскладки

Ты — избранный

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

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

Название списка «Избранное» лучше, чем «Виш-лист». Исследование NNG показало сильные ассоциации слова виш-лист со списком подарков у западной аудитории. Для России это слово будет ещё и непонятным многим пользователям.

Названия «Избранное» или даже «Мой список», не имели такой же коннотации, как «Виш-лист». Однако, от обеих функций ждут утомительную регистрацию.

История о цыплятах

Опыт

В университете McComb профессор маркетинга Радж Рагхунатхан со студентом показали участникам исследования две фотографии.

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

Первой сказали: «Обычная курица полезнее, но менее вкусная. Генно-модифицированная вкуснее, но менее полезна».

Вторая группа получила противоположную информацию: «Генно-модифицированная курица полезная и невкусная, а обычная вкусная, но не полезная».

Каждый участник выбирал одну курицу. Исследователи сравнили результаты. Они совпали.

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

Почему это интересно

После выбора исследователи спросили испытуемых о его причинах:

  • первая группа утверждала, что ценит здоровье выше вкуса;
  • вторая группа сказала, что вкус важнее.

Ни слова о внешности цыпленка. Они оправдывали эмоциональный выбор разумными причинами. В результате дали противоположные объяснения, чтобы оправдать одну и ту же «покупку».

Рационализация после покупки или Стокгольмский синдром покупателя — когнитивное искажение. Покупатель дорогого продукта ищет рациональные аргументы уже после покупки, а не до.

Фото и изображения

История про куриц напоминает и о первой статье. Гало-эффект, феномен первого впечатления и первичности действуют для товаров также, как и для интернет-магазина.

Фотографиям проще привлечь наше внимание, потому что они — эмоциональный коннектор.

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

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

adidas показывает разные фото в зависимости от положения указателя Интернет-магазин adidas.com
OZON показывает сразу все доступные фото товара Интернет-магазин ozon.ru

Отдельный жанр фото для определения размера. Положите рядом с товаром предмет с известным размером, и пользователь сможет визуально оценить размер продукта.

Кейс

VWO повысили конверсию MALL.CZ почти на 9,5% за счет увеличения фотографий. MALL.CZ — второй по величине eCommerce-ритейлер в Чешской Республике. Они продают различные товары как Amazon.

Важность размера и качества изображения подтверждает и NNG. Они обосновывают это увеличением размера экранов.

Качественный контент

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

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

Качественный контент

Лайфхак

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

При достаточных усилиях можно устроить фотосессию любого качества.

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

Фильтруй товар

Правильно подберите фильтры по характеристикам товара. Ещё одно исследование Бэймэрд показало, что только 16% топовых американских интернет-магазинов обеспечивают хороший UX фильтрации.

84%
топовых американских интернет-магазинов не обеспечивают хороший UX фильтрации.

Скорая помощь

  1. Учтите специфические характеристики для основных товаров магазина.

  2. Не забывайте про тематические фильтры: мероприятия, религия, традиции. 42% магазинов из исследования Бэймэрд о них забыли.

  3. Проверьте фильтры совместимости. Кейс: вы продаете сумки для ноутбука. Обязательно должен быть фильтр по совместимости с диагональю ноутбука.

  4. Если у вас больше 10 вариантов в фильтре, показывайте только часть. Кнопка «Показать ещё N» должна быть заметной, иначе пользователь решит, что это все доступные варианты.
  5. Самые популярные фильтры и наборы можно предлагать отдельно.
OZON.ru
Связной
Lamoda.ru

Горизонталь фильтрации

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

Оба сценария могут звучать странно. В обоих случаях пользователь просто покинет ваш магазин.

Так решил H&M Интернет-магазин hm.com
Горизонтальная фильтрация на сайте adidas Интернет-магазин adidas.com
Другое решение от IKEA Интернет-магазин ikea.com

Минусы горизонтальных фильтров

С горизонтальными фильтрами не всё так однозначно. Об этом говорят сами исследователи.

  • горизонтальный бар подходит только магазинам с малым количеством важных фильтров. Многие не влезут из-за ограничения в ширину экрана;

  • горизонтальная фильтрация вынуждает использовать выпадающие списки.

Выпадающие списки

Фильтры — обычно, выпадающие списки.

Вот три совета Бэймэрд, как сделать их лучше:

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

И три совета от Mojo:

  • обязательно показывайте, сколько товаров с такой характеристикой есть прямо сейчас. Сделайте неактивным вариант, в котором 0 товаров. Не удаляйте.
    Пример: зелёных кофточек размера M нет, но есть других цветов. Если вы удалите вариант, то для пользователя размера M не осталось вообще или не было изначально.
  • не используйте «гармошку»: выпадающий список в выпадающем списке. Особенно в мобильных интерфейсах. После трех уровней выпадающих списков, пользователь захочет вернуться назад и «будет боль». Чересчур длинный скролл утомляет;

  • не меняйте положение вариантов. Пользователь ждёт опции на одном и том же месте, иначе придется понять логику их движения. Это сложно.

Если вариантов в списке много

В сайдбаре можно

  • выводить их сразу. Пользователь не сможет оценить общую картину;

  • сделать скролл. В сайдбаре пользователь будет прокручивать то фильтр, то страницу.
Пример неудобного скролла — фильтрация на сайте SEPHORA Интернет-магазин sephora.ru

Решение для сайдбара

Добавьте кнопку «Показать все».

Исследование Baymard показало, что это лучший вариант. Сделайте кнопку контрастной. Пользователи не замечают её и думают, что видны все варианты.

Решение от Связного Интернет-магазин svayznoy.ru

В горизонтальном фильтре

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

Минус скролла в ограниченности области прокручивания, которую видит пользователь. Используйте скролл только для списков больше 10 пунктов. Не забывайте про Закон Наведения.

Чем длиннее и уже ваш список, тем больше вероятность ошибки пользователя.

Закон Наведения напрямую следует из Закона Фиттса и покрывает значительно больше областей.

Коротко

Каталог — важная часть пользовательского опыта. Мы разобрали карточку и фильтрацию.

  1. Проверьте информацию в карточках каталога. Исходите из потребностей аудитории.
  2. Сделайте сравнение товаров отдельной функцией. Пусть потеет машина.
  3. Фотографии — важно. Покупают на эмоциях. Единственный орган чувств для покупателей интернет-магазина — зрение. Большие и качественные фотографии могут повысить конверсию. Лайфхак: фотосессия в регионе.
  4. Проверьте опции в вашей фильтрации. Обратите внимание на специфические, тематические и фильтры совместимости.
  5. Фильтры в сайдбаре могут не заметить. Лучше делать горизонтальный бар. Однако, тут не всё так просто.
  6. Делайте выпадающие списки с умом. 6 советов «как» в статье.

Бонус

Ознакомьтесь с разбором магазина J.C.Penney. Он набрал наибольшее количество баллов в исследовании Бэймэрда и добрался до оценки «приемлемо». Всегда есть, куда расти.

В следующей серии

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

Заключение

Если вы еще не прочитали первую и вторую часть, то сейчас — самое время.

Подписывайтесь на Mojo, чтобы не пропустить следующую статью. Ставьте «+1», если вам понравилось. Буду рад поболтать в комментариях.

0
9 комментариев
Написать комментарий...

Комментарий удален модератором

Развернуть ветку
Antro
Автор

Спасибо, Ева! Надеюсь, что следующие статьи вас тоже порадуют :) 

Ответить
Развернуть ветку
Егор Сазанов

Спасибо, очень полезно!

Ответить
Развернуть ветку
Василиса Сигберт

Спасибо за статью и ссылки на исследования. Вы прекрасны)

Ответить
Развернуть ветку
Екатерина Иванова

Большое спасибо за этот цикл статей! Сейчас как раз более углубленно изучаю сферу ecommerce. ;)

Ответить
Развернуть ветку
Елена Назимко

Спасибо за полезности 👍

Ответить
Развернуть ветку
Павел Пашукевич

Автор молодец. Хорошая полезная статья. Из данной статьи конкретно нового мы ничего не узнали про интерфейсы - абсолютно всё у нас уже реализовано. До этого мы изучали разных конкурентов и брали у них то, что считали субъективно правильным. Видимо, субъективизм может быть объективным в редких случаях. В интерфейсах нет абсолютно правильных решений. Есть статистика и нужно ориентироваться на большую часть пользователей и их привычки и удобства. Вкусовая дискриминация будет всегда)))
Подкрепили знания исследованиями и самоутвердились.

Ответить
Развернуть ветку
Millsey

Лайк не глядя! :D

Ответить
Развернуть ветку
Sayyod Barotov

svyaznoy.ru

Ответить
Развернуть ветку
Айсулуу Аманкулова

+1

Ответить
Развернуть ветку
6 комментариев
Раскрывать всегда