Список продуктов — не просто набор ссылок на подробные страницы. Именно здесь пользователь впервые решает, какие варианты заслуживают внимания.
Если карточка показывает слишком мало, приходится открывать множество страниц только ради базового сравнения. Если в карточку пытаются поместить всё, список становится тяжёлым для просмотра.
Задача не в том, чтобы заполнить каждый сантиметр. Задача — дать достаточно информации для следующего осмысленного шага.
Карточка помогает сузить выбор
Исследования Baymard показывают, что недостаток информации в списках может приводить к тому, что пользователи пропускают подходящие варианты. В одном из их бенчмарков половина сайтов не показывала в списках достаточный набор полезных атрибутов.
Baymard выделяет несколько базовых типов информации, которые полезны во многих категориях, но отдельно подчёркивает значение характеристик, зависящих от конкретной категории.
Человек, сравнивающий обувь, смотрит на одни параметры. При выборе инструмента, запчасти или офисного оборудования важны уже другие.
Поэтому полезнее спрашивать не «сколько полей поместится в карточку», а «что нужно знать пользователю, чтобы понять, стоит ли изучать этот вариант дальше?».
Показывайте то, что действительно различает варианты
Больше полей не означает лучше.
В одной категории критичны размер, материал или цвет. В другой — габариты, мощность или совместимость.
Главное — одинаково показывать сопоставимую информацию у сопоставимых продуктов.
Baymard также показывает, что непоследовательные атрибуты затрудняют сравнение. Если характеристика есть в одной карточке и отсутствует в другой, пользователь может решить, что у второго варианта нет этой функции, хотя на самом деле просто не хватает данных.
У изображения и текста разные задачи
Изображение должно помогать быстро распознать продукт и показывать то, что действительно лучше воспринимается визуально. Текст должен объяснять то, чего на изображении не видно.
Одного названия часто недостаточно. Вариант, размер или одна ключевая характеристика могут быть нужны уже в списке.
А подробности, которые становятся важны только после предварительного выбора, лучше оставить на отдельной странице.
На мобильном приоритеты видны ещё лучше
Маленький экран оставляет меньше места для неудачных решений по содержанию.
Baymard описывает мобильные списки как баланс: информации должно хватать, чтобы не открывать заведомо неподходящие варианты, но избыток деталей мешает быстро получить общее представление о списке.
Поэтому лучше выбрать несколько полезных характеристик, чем пытаться уменьшить целую подробную страницу до размера карточки.
Одна схема подходит не всем категориям
Универсальной формулы для карточки нет.
В обычном интернет-магазине могут быть важны изображение, название, цена, вариант и несколько характеристик. В B2B-каталоге номер позиции, размеры, наличие или совместимость иногда полезнее рейтингов и рекламных меток.
Важно не количество элементов, а то, что они выбраны осознанно и повторяются последовательно.
Хорошая карточка должна решать три задачи:
- помогать быстро распознать вариант
- давать достаточно информации для оценки его релевантности
- упрощать сравнение с соседними вариантами
Остальное может объяснить подробная страница.
Карточке не нужно отвечать на все вопросы. Её задача — помочь пользователю понять, какие варианты стоит изучить подробнее.