Карточки в UI‑дизайне

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

Карточка — это блок, внутри которого располагается контент (изображение, текст). В нем содержится основная информация о товаре или услуге. Как правило, этот UI-элемент работает как ссылка и перенаправляет пользователя на страницу с более подробной информацией.

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

1. Универсальность

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

2. Быстрая считываемость

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

3. Понятность

Этот UI-элемент интуитивно понятен пользователю. Для нашего мозга карточка — это цельная единица информации. Мы осознаем, что весь контент, который находится в одном блоке, относится к одному вопросу, продукту, услуге или теме. Это происходит из-за того, что долгое время карточки на бумажных носителях окружали нас абсолютно везде: коллекционные карточки, визитки, ценники и этикетки.

4. Адаптивность

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

5. Эстетичность

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

Универсальность карточного дизайна позволяет использовать его при разработке сайтов и приложений разной направленности. Мы собрали основные векторы веб-дизайна, где вы можете использовать карточки:

E-Commerce

При создании сайтов интернет-магазинов дизайн карточки должен быть грамотно построен, потому что он превращает обычного пользователя в покупателя. Поэтому важно привлечь внимание аудитории, мотивировать ее на покупку. Здесь на первом месте стоит название товара. Также важно указать цену и акцию, если товар попадает в нее. Часто на карточку помещаются призыв к действию и «купить» или «заказать».

Лента новостей

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

Сайты с визуальным контентом

Сайты-коллекции с большим количеством визуального материала, такие как Pinterest или Behance используют карточки, где основной объем элемента занимает изображение. Это позволяет потенциальному заказчику или клиенту быстро просмотреть портфолио или художественные ориентиры (для насмотренности), чтобы получить представление о стиле, возможностях, вариантах работ и проектов.

Блог

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

Платформы для работы в команде

Такие сервисы как Trello, Miro, Jira помогают организовать работу в команде. Основой таких платформ становится карточный дизайн, где отражены имя ответственного, задача, статус и срочность. Организация файлов в Figma также основана на карточной системе.

Карточки могут быть абсолютно разными, но по соотношению текста и визуала эти UI-элементы можно разделить на три группы:

1. Текст

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

2. Изображение и текст

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

3. Изображение как фон

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

Структура карточки может меняться в зависимости от ее содержимого. какие-то элементы вы можете убирать или добавлять.

Изображение

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

Также вы можете добавить микровзаимодействие — затемнить картинку, но при наведении курсора фильтры будут осветляться, слегка «раскрывая» изображение.

Типографика

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

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

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

Иерархия

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

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

Одна карточка — одна идея

Помните: карточки направлены на то, чтобы помогать пользователям быстро считывать информацию, заранее объединенную в смысловые блоки.

Не стоит размещать в одной карточке разные по теме и смыслу идеи, т. к. мы воспринимаем карточку как единый цельный объект.

Разграничить действия

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

Состояния

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

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

• Просмотрено/ выбрано — если карточка была просмотрена пользователем, ее внешний вид может быть изменен: переведен в монохром, затемнен или обведен контур. Вариантов может быть много, все зависит от контекста и фантазии дизайнера.

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