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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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