Вы читаете перевод статьи Николая Бабича “Using Card-Based Design To Enhance UX”. Над переводом работали: Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Как улучшить UX при помощи карточного дизайна
Мобильные и веб-приложения отказываются от страниц в пользу совершенно нового, полностью персонализированного опыта. Опыт этот строится на объединении множества отдельных элементов контента. Карточки — новая творческая концепция дизайна.
И как бы вы ни относились к этой концепции, карточки прочно заняли свое место в дизайне.
Что такое карточки?
Это те небольшие прямоугольники с картинками и текстом, которые служат точками входа в более углубленное изучение вопроса. Карточки — это первое, что приходит в голову, если нужно сбалансировать эстетику интерфейса и юзабилити. Все потому, что это удобный способ отображения контента, состоящего из различных элементов.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-13.png)
Пример карточки. Источник: Material Design.
Отличная метафора
Карточки в интерфейсе — это отличная метафора, поскольку они очень напоминают настоящие, осязаемые карты. До появления мобильных устройств, они были повсюду: визитки, бейсбольные карточки, игральные карты и т.д. Карточки, как модель взаимодействия, получили достаточно широкое распространение. Поэтому пользователи на интуитивном уровне понимают, что карточка несет в себе.
Карточки — отличный способ передачи быстрых историй. Хороший пример из реальной жизни — бейсбольные карточки. С обеих сторон небольшой карточки содержится вся ключевая информация об игроке, которая вам нужна.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image.jpeg)
Каждая карточка представляет игрока. Источник картинки: liveauctiongroup
Организация контента
Содержимое карточки подразделяется на смысловые блоки — за счет чего экономится экранное пространство. Точно так же, как предложения в тексте группируются в параграфы и формируют смысловые блоки, различные элементы, собранные на карточке, создают целостную единицу контента.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-14.png)
Пример подборки карточек. Источник: Material Design.
Карточные лейауты заняли ведущие позиции в дизайне, когда гиганты вроде Facebook начали внедрять карточные интерфейсы в своих десктопных и мобильных приложениях. Facebook вовсю использовал “контейнерный” дизайн, чтобы удобно группировать информацию, несмотря на практически бесконечный поток данных.
Привлекательный внешний вид
Обычно карточный дизайн сильно полагается на визуальные элементы. Изображения — это сильная сторона такого дизайна. Дизайн-студии подтверждают, что использование изображений поднимает дизайн сайта или приложения на новый уровень — ведь они мгновенно и эффективно привлекают внимание. Упор на изображения автоматически делает карточный дизайн более привлекательным для пользователей.
Взять, хотя бы, Dribbble — известный в творческом сообществе сайт, на котором дизайнеры демонстрируют свои работы. Пожалуй, карточный дизайн лучше всего подходит для отображения контента такого типа.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-15.png)
Сайт Dribbble.
Как спроектировать карточку
Карточки в пределах одного лейаута должны быть одинаковой ширины, а вот высота может быть разной. Максимальная высота карты ограничена доступным пространством платформы, но может быть временно увеличена (к примеру, чтобы отобразить поле с комментариями).
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-1.jpeg)
Высота карточки может быть фиксированной или переменной. Источник изображения: Intercom
С точки зрения дизайна, у карточки должны быть скругленные уголки и короткая тень. Благодаря скругленным уголкам карта выглядит как отдельный блок контента, а тени создают ощущение глубины.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-16.png)
Скругленные уголки и короткая тень. Источник: Material Design.
Эти элементы привнесут в дизайн легкую визуальную пикантность, не отвлекая пользователя от содержимого. Кроме того, благодаря им карточка будет словно выпрыгивать со страницы. Также можно применить эффекты анимации и движения.
![](https://ux-journal.ru/wp-content/uploads/2020/04/1_LxKZBYZuif-zLS3vwUb5Ag.gif)
Преимущества карточек
Если применять карточки правильно, можно значительно улучшить UX приложения. Благодаря своей функциональности и форме, карты выступают интересным и интуитивным элементом интерфейса.
Легкоусвояемая форма
Как вы уже знаете, главный — контент. Карточки в дизайне — это контейнеры, которые можно заполнить чем угодно. Если поместить контент на карточки — пользователям будет проще его усваивать. Таким образом, пользователи получают легкий доступ к тому контенту, который интересен именно им — что способствует глубокой вовлеченности.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-18.png)
В этой подборке — карточки с разными This card collection contains cards with varied content types. Source: Material Design.
Адаптивный и мобильный дизайн
Самое важное в карточках то, что они легко поддаются всяческим манипуляциям. Карточный дизайн хорошо подходит как для десктопов, так и для мобильных устройств — ведь карты преподносят контент небольшими, легкоусвояемыми порциями. Они также хорошо подходят для адаптивного дизайна, поскольку служат контейнерами информации, которые с легкостью масштабируются.
И наконец, карточки помогают создать единую эстетику на множестве разных устройств. Поэтому карточный дизайн обеспечивает согласованный пользовательский опыт на любых устройствах.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-2.jpeg)
Дизайн под большой палец
Карточки просто созданы под большой палец. Карточный дизайн словно специально адаптирован под приложения. В этом и есть главная причина популярности карточек в мобильном дизайне. Цифровые карточки в телефоне ведут себя так же, как и физические карты, что обеспечивает пользователям комфортный опыт взаимодействия. Им не приходится думать: “как же здесь все работает?” Пользователям нравится простота карточного дизайна, и они интуитивно понимают принцип: перевернуть карточку для дополнительной информации или смахнуть, чтобы увидеть следующую.
![](https://ux-journal.ru/wp-content/uploads/2020/04/1_G2SKlZ780LDO4GOOGbAH5A.gif)
Где использовать?
Лента
Карточки используются в лентах: с их помощью создается естественная хронология событий. Вспомните как Facebook использует карточки, чтобы дать быстрый обзор недавних событий в ленте. Новостная лента Facebook — бесконечный поток информации, но каждая карта сама по себе индивидуальна. Суть карточек — в выделении составляющих. Карты делят бесконечный информационный поток на самостоятельные элементы, которыми можно поделиться.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-3.jpeg)
Открытие нового
Карточки — это естественный способ отображения нового контента. Взгляните на карточный паттерн Tinder: смахивая карты справа налево, вы находите все больше новых людей, которые соответствуют вашим вкусам.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-4.jpeg)
Источник изображения: Tinder.
Pinterest использует карточки-пины в своей динамической сетке, чтобы организовать контент и вовлечь пользователей в бесконечное пролистывание.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-20.png)
Что общего у этих двух сервисов? Они берут информацию из приложения и делают ее актуальной на данный момент.
Диалоги
Поскольку карточки — это контейнеры для информации, они идеально подходят для отображения действий. Основное действие на карточке — это обычно сама карточка. Посмотрим на сервис AirDrop на устройствах Apple. Когда появляется запрос на передачу данных, отображается карточка-уведомление с возможностью принять или отклонить файлы.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-5.jpeg)
Есть только одно действие, независимо от вашего выбора. Источник изображения: Apple
Организация рабочего процесса (Workflow)
Карточки можно легко поделить на категории для выполнения целого спектра задач. Отличный пример использования карточек — Trello. Техника управления продуктом (заимствованная у Kanban) полностью основана на картах. Доска Trello — это поле, заполненное карточками, каждая из которых представляет собой отдельную задачу.
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-21.png)
Источник изображения: joelonsoftware
Когда не стоит использовать карты
Однородный контент
Не стоит использовать карты, если ваш контент однороден и не предполагает множества действий. Вместо этого представьте содержимое в форме быстрого сканируемого списка (или сетки).
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-6.jpeg)
Слева: Наличие множества карточек мешает пользователю быстро просканировать информацию. Источник изображения: Material Design.
Карточки не нужны в галерее изображений. Сетка с плитками (tiles) — наибоее чистый и легкий способ представления галереи. См. пример ниже:
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-7.jpeg)
Слева: Для отображения картинок используются карточки. Справа: сетка с плитками. Источник: Material Design.
Большой размер экрана
Карточный способ представления информации хорошо работает на маленьких экранах, а на больших обычно превращается в нечинаемый хаос с кучей рамок. Даже если визуально такой лейаут смотрится круто, он проигрывает по объективным показателям: таким как скорость чтения и степень усвоения информации. Посмотрите как выглядит страница Pinterest на большом экране:
![](https://ux-journal.ru/wp-content/uploads/2017/01/word-image-8.jpeg)
Редизайн существующего приложения
Если пользователи уже привыкли к вашему приложению и считают его удобным, новая визуальная логика может сбить их с толку. Важно узнать мнение пользователей: что они хотели бы видеть. Владея этой информацией, вы сможете опытным путем, постепенно вносить изменения в дизайн и наблюдать за эффектом от этих изменений.
Заключение
Надеюсь, что теперь вы чувствуете, почему карточный дизайн набирает популярность. Думаю, что этот тренд не выйдет из моды в ближайшее время. Карточки — не только визуально простой инструмент, но самый гибким способ создать согласованный пользовательский опыт. Современные люди быстро ищут информацию, и карточки подходят для этого очень хорошо — на любом устройстве. Хороший пользовательский опыт всегда ориентирован на людей.
Спасибо!
Подписывайтесь на UX Planet: Twitter | Facebook
Изначально опубликовано на babich.biz