- Статьи
- 2 мин на чтение
- 72
Подвал в карточках для размещения метаданных
Дизайн данных для быстрого сканирования
Формат списка — популярный способ отображения данных, но он неидеален для карточек. Пользователи сканируют карточки, чтобы быстро найти то, что им нужно. Если они увидят список с данными, им будет трудно понять, чем карточки отличаются друг от друга.
В карточках есть иерархия данных. Есть основные данные, а есть метаданные. Основные данные — это сам контент, а метаданные — детали, которые описывают контент, чтобы добавить ему контекста.
Вместо того чтобы отображать метаданные в виде списка, поместите их в подвал карточки. В подвале пользователям будет легче различать характеристики контента, которые влияют на их выбор.
Например, если пользователь хочет купить автомобиль с небольшим пробегом и высоким MPG*, подвал в карточке облегчит сканирование этих метаданных. Без особых усилий человек сможет просмотреть несколько карточек и найти те автомобили, которые соответствуют его критериям. Чтобы сравнить характеристики, представленные в формате списка, пользователю придётся читать каждую строку.
*Примечание переводчика. MPG (miles per gallon) — американская характеристика: количество миль (1 миля = 1,609 км), пройденных на одном галлоне (3,785 л) топлива
Даже горизонтальный список трудно сканировать, если не выделить подвал. В примере ниже в обоих вариантах дизайнер разместил количество гостей, спален, кроватей и ванных комнат в виде горизонтального списка, разделенного буллитами. Когда вы отображаете эти метаданные в подвале карточки, их гораздо легче считывать.
Если вы добавите пиктограммы к метаданным, это усилит их значение и повысит удобство восприятия. Однако иконки не подходят, если метаданные слишком абстрактные.
Если метаданных слишком много, они могут не поместиться в подвале. В этом случае решите, какие из них наиболее важные.
На примере выше вы видите приложение для управления недвижимостью. В нём карточки содержат множество метаданных. Дизайнер решил поместить в подвал метаданные, связанные с продажами. В результате между различными характеристиками контента существует чёткая иерархия.
Для того, чтобы отделить подвал, необязательно использовать разделитель в виде линии. Если вы хотите чётко разграничить метаданные, хорошо работает заливка цветом.
Иногда метаданные влияют на выбор пользователя больше, чем основная информация. Создание подвала в карточке ускоряет сканирование метаданных. Когда легко понять, чем отличаются карточки, пользователи могут быстро сравнивать их и выбрать именно те, которые отвечают их потребностям.
Перевод статьи Why Your Cards Need a Footer for Metadata из блога UX Movement
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
