Почему вам нужны разные варианты карточек в каталоге

• Статьи
• 3 мин на чтение
• 
  9

Создание лучшего дизайна страницы каталога

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

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

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

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

Акцентная карточка

На акцентной карточке разместите самый заметный товар. Это может быть самый продаваемый, самый рейтинговый или особый товар, который вы хотите продемонстрировать. Если вы добавите метки (на примере Best seller) рядом с названием товара, то таким образом проинформируете пользователей о его уникальности.

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

Кастомная карточка

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

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

Карточка категории

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

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

Сравнение вариантов карточек

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

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

Пришло время прекратить применять одинаковые карточки в каталоге. Однообразная сетка скучна. Вы можете значительно улучшить её. Начните создавать разные варианты карточек для вашего контента. Достаточно всего нескольких вариантов.

Перевод статьи Why Your Cards Should Have Multiple Variants из блога UX Movement Newsletter