Как правильно использовать карточки в дизайне сайта

Делаем интерфейс сайта удобным для людей и эффективным для бизнеса
Карточки — символ современного веба. Небольшой блок с самой важной информацией, который работает как ссылка на страницу с продуктом или постом. Карточки позволяют быстро просматривать и фильтровать информацию. Написали руководство, как эффективно использовать карточки в интерфейсе. Статья будет полезна всем, кто работает с контентом на сайте.
Карточка — инфоблок, элемент интерфейса, который работает как превью более подробного контента. Карточка содержит ключевую информацию и служит ссылкой на страницу с более подробной информацией.
Карточки сейчас используют везде — когда мы выбираем авиабилеты, листаем карточки постов в ленте соцсетей, когда заказываем обед на сайте доставки еды, скроллим сайт с новостями. Обычно их располагают на экране в группе — плиткой или списком равнозначных единиц контента.
Зачем использовать карточки при создании сайта?
Главное достоинство карточки — универсальность. Она подходит для любой темы и случая, для разных платформ и устройств. Правильно спроектированная карточка (в которой прослеживается логика контента) улучшает UX сайта или приложения.
Преимущества карточек:
1
Интуитивность. Они понятны пользователю. Как в жизни, карточки — это визуальная подсказка для нашего мозга, которая воспринимает этот элемент как цельную единицу информации.
2
Информация легко усваивается. Карточки — это информация, разбитая на небольшие кусочки. Такая подача ценится людьми, так как экономит их время, помогая быстрее понять суть. Слона проще есть по частям.
3
Привлекательность. Дизайн с карточками часто насыщен видео, картинками. Это привлекает пользователей, которые охотнее воспринимают изображения, чем текст, и таких большинство.
4
Подходят для отзывчивого дизайна. Карточки можно как угодно крутить: прямоугольная форма вписывается в разные ориентации и в любые размеры экранов (можно масштабировать во все стороны). Это значит, что у пользователей остается один опыт на всех устройствах.
Делаем: когда нужны карточки
Тематические блоки. Карточки хорошо подходят, если на вашей странице много равнозначных элементов. На сайте интернет-магазина удобно группировать тематические блоки — рубрики — по карточкам: верхняя одежда, обувь, сумки, юбки.
Лэндинг центра йоги и фитнеса Mind&Body
Интерактивный контент. Карточки удобно использовать для коротких действий с одной кнопкой. Это может быть кнопка «купить», «узнать подробнее» и другие.
Сайт компании солнечной энергетики Solarcomplekt
Когда люди просматривают, а не ищут. Карточки удобны для просмотра информации. Например, когда будущий заказчик просматривает портфолио, у него нет задачи найти какой-то конкретный проект. Он сканирует все работы, чтобы получить представление об уровне исполнителя.
Проекты дизайнеров на Behance.net
Идеи для использования карточек
Общий принцип: то, что можно представить в виде списка, легко перевести в формат карточек.

Что можно показать карточками:
  • Серия статей на главной странице блога
  • Список вакансий
  • Работы в портфолио
  • Вопросы и ответы (FAQ)
  • Услуги агентства
  • Направления для туристического агентства
  • Объекты недвижимости на сайте девелопера
  • Оглавление для рецептов
  • Номера мини-отеля или хостела
  • Стили в школе танцев
  • Навигация по лонгриду
Карточки среди нас
Человек всегда был окружен карточками как физическими носителями данных. Открытка на день рождения, обмен визитками на деловой встрече, водительские права и игра в дурака — все эти карточки объединяет одно: мы быстро считываем с них определенное сообщение.
Веб-карточка, как и ее материальный аналог, сообщает пользователю самую необходимую информацию. Карточки хорошо воспринимаются на интуитивном уровне, потому что этот формат нам давно и хорошо знаком.
Не делаем: когда карточки не к месту
Строгий порядок. Когда нужно расположить контент по порядку, карточки не подойдут — они, наоборот, подчеркивают равнозначность контента и делают объекты похожими друг на друга.
Выдача поисковых запросов на google.ru
Галерея изображений. Картинки активно используют в карточках, но когда вы приводите человека на страницу с галереей фотографий — например, с прошедшей вечеринки, карточки затруднят восприятие информации. Лучше просто расставить картинки по сетке, чтобы глазу было легче усваивать контент.
Правила дизайна карточек
Карточки бывают разные
C фоновым изображением. Поверх картинки, которая занимает все поле карточки, располагается текст. Такие карточки могут быть интерактивными: если навести курсор — фоновая картинка чуть-чуть увеличивается или становится ярче. Можно не добавлять текст поверх фотографии, а сделать элемент появления — при наведении курсора появляется текст.
Изображение и текст — отдельно. Заголовок находится под картинкой или рядом. Такие карточки могут располагаться в колонках или по парам на одном уровне. Вместо картинки может использоваться также иконка. Есть широкая карточка, например, когда нужно привлечь внимание к одному продукту. Она занимает почти всю ширину поля, при этом изображение находится слева, а подпись — справа.
Только текст. Предельно лаконичная карточка: заголовок и подпись. Этот тип может использоваться, например, для раздела с тарифами, где нужно быстро сообщить информацию, не отвлекая внимание пользователя.
Работа с карточками на Тильде
Чтобы сделать карточки на Тильде, используйте блоки из категории «Плитка и ссылка» или «Список страниц».
1. Сколько должно быть карточек в одном ряду
Количество карточек в ряду зависит от контента. Если элементов много и их значение второстепенно, можно разместить их на шести карточках.
Чем значимее элемент, тем крупнее карточка.

Совет дизайнера
Если карточки будет расположены в несколько рядов, на этапе подготовки контента попробуйте скорректировать количество элементов, чтобы оно было кратно 12 — 1, 2, 3, 4, 6.
2. Размер карточек и фотографий
На Тильде используется стандартная сетка из 12-ти колонок, поэтому ширина карточки зависит от того, сколько карточек в ряду. Высоту карточек можно задать в настройках.
Оптимальный размер изображений для карточек зависит от количества карточек и заданной высоты.


Пример:

Блок TE100. Если оставить высоту карточки по умолчанию, то оптимальный размер изображений будет:
  • Для двух карточек в ряд: 560×400px
  • Для трех карточек в ряд: 360×260px
  • Для четырех карточек: 260×185px
Блоки с карточками в библиотеке Тильды

Совет дизайнера
Не используйте изображения меньшего размера, чем карточка— они растянутся и будут «мыльными». Очень большие изображения лучше сократить — это уменьшит время загрузки страницы. Сделать это можно в встроенном редакторе фотографий прямо на Тильде.
3. Типографика
Текст — важный элемент карточки. Заголовок на фоне или на картинке должен читаться без усилий. Лучше выбрать достаточно крупный и броский шрифт. Подзаголовок уступает заголовку в размерах и стиле написания; при этом он все равно должен легко читаться.

Текста на карточке должно быть минимум: только самое-самое важное, чтобы заинтересовать, увлечь и мотивировать пойти дальше.

Совет дизайнера
Если для всего сайта вы используйте шрифт с тонким начертанием, на карточке сделайте его нормальным (400) или полужирным (500) — это улучшит читаемость.
4. Визуальные эффекты
Легкая тень по периметру карточки визуально выделяет ее на экране и дает понять, что вся карточка — это одна большая кнопка. Добавить тень можно в блоке TE600.
Сайт лаборатории Wonderful с легкой тенью на карточках
Если фоном карточки служит изображение, рекомендуется применить к нему фильтры — это приглушит детали изображения и текст будет читаться лучше. Укажите в настройках цвет «в начале» (он будет наложен на верхнюю часть картинки) и цвет «в конце» (для нижней части). При наведении курсора фильтры будут осветляться, слегка «раскрывая» изображение.

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

Совет дизайнера
Если на карточке текст накладывается на фотографию, то не используйте фотографии с мелкими деталями и множеством цветов — получится каша. Эффектный прием (который еще и улучшает читаемость) — сделать изображение монохромным или двухцветным и наложить сверху цветной фильтр.
5. Кнопки на карточке
Карточка позволяет предпринять одно или несколько действий. На каждое действие должна быть своя кнопка или иконка, например, «сохранить на потом» и «купить» (для сайта интернет-магазина).

Карточка — часто (но не всегда) сама по себе кнопка: нажал на нее, перешел на страницу. Можно ввести одну кнопку СТА (call-to-action — «призыв к действию»), которая дает пользователю «подсказку». Например, надпись «узнать больше» приглашает кликнуть на карточку.
Не забываем про SEO
Поскольку карточка — тоже ссылка, подумайте об использовании Rel nofollow.

Поисковые системы учитывают при ранжировании в том числе ссылки на сайт, которые размещены на других сайтах. Чем больше ссылок, тем выше рейтинг. Если вы ссылаетесь на сторонний ресурс, но не хотите передавать вес странице (например, это платная ссылка), поставьте в настройках галочку Rel nofollow — это сообщит поисковым системам, что ссылку не нужно учитывать при индексировании.
Rel nofollow
Атрибут, который скрывает нужные ссылки от поисковой индексации. Работает и с Google, и с Яндекс.
Еще пара советов, как работать с карточками
Любая карточка состоит из текстовых и изобразительных элементов. На карточке можно расположить кнопки действия или сама карточка может работать как ссылка: кликаем на нее — и попадаем на привязанную к ней страницу.
Одна карточка — одна идея. На карточке может быть много разных элементов, но они все должны формировать один понятный объект. Это должен быть цельный кусок контента для пользователя.
Сайт Bunch of questions. Собрание историй
Не жалейте белого пространства. Каждая карточка — отдельный элемент контента. Чтобы пользователь мог хорошо усвоить весь контент, стоит не скупиться на пустое пространство вокруг и между карточками.
Онлайн магазин Voodooboks
Ограничьте размер контента. В карточке должна содержаться самая важная информация. Карточка может вести на страницу с подробной информацией, но сама должна отражать только суть. Много информации в нее просто не поместится, а контент будет хуже восприниматься.
Лэндинг Mazda CX-5
Делайте красиво и просто. Картинка — король в дизайне карточек, качественные картинки привлекают внимание пользователей. В то же время сам дизайн карточки должен быть простым: советуем использовать базовую типографику, чтобы текст легко считывался.
Шаблон лэндинга на Tilda.cc
Создайте иерархию внутри карточки. Иерархия контента в самой карточке помогает управлять вниманием пользователя. Самый важный контент разместите наверху карточки. Используйте разделители, когда нужно явно обозначить границу между контентом.
Derevnya.com
Отталкивайтесь от задач сайта и продукта. От целей сайта и бизнеса зависит, какой контент показать пользователю. Нам нужно расположить элементы каталога в магазине одежды или сделать карточку призывом к брони билетов? Карточки под разные цели будут отличаться.
Примеры классных карточек в вебе
Карточка — отличный способ рассказывать быстрые истории и наглядно представить информацию. Неважно, какой у вас бизнес — туристическое бюро, юридическая фирма или сервис по доставке пиццы, приготовленной в дровяной печи. На любом сайте и в приложении карточка приводит информацию в порядок и помогает пользователю составить первое впечатление.

Автор: Инна Бурштейн, Ира Смирнова
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также: