За последние несколько лет, дизайн с карточками набрал огромную популярность. Компании типа Google, Facebook и Twitter, которые насчитывают миллионы пользователей, только усиливают популярность этого компонента UI в своих интерфейсах. И это неудивительно так, как карточки являются прекрасным ответом на развитие адаптивного дизайна. Они являются автономными единицами, которые можно перемещать и объединять с различными типами контента. Они легко адаптируются под различные разрешения экранов. От размещения в одну колонку на мобильных устройствах до множества колонок на девайсах с большим экраном.

В компании ZURB мы определили, что карточки являются прекрасным решением для работы с клиентами и часто использовали их при дизайне продуктов для веб. В Google написали довольно глубокое исследование об использовании карточек в рамках Material Design фреймворка. Также, стоит упомянуть хороший контент от команды компании Intercom. Пересмотрев недавно более 100 наших работ за последние несколько лет, мы отметили некоторые подводные камни, с которыми сталкиваются дизайнеры при создании карточного UI:

Большие визуальные «пропасти» между контентом разной длины

дизайн карточек большие отступы

В идеальном мире, наш контент ровный и красивый, как в наших Sketch файлах, но реальный мир расставляет все на свои места. Заголовки длиннее, описания отличаются по длине, а имена не всегда состоят из 4-х букв (как того хочет Apple). Когда карточки размещаются в сетке на больших экранах, мы часто видим большие расстояния между ними. Это не означает, что пробелы нельзя использовать вообще. Это значит, что непоследовательные пробелы могут нарушить компактность и затруднить восприятие карточек.

При возникновении таких трудностей, мы просим наших дизайнеров следовать трем правилам. Прежде всего необходимо понимать, имеют ли смысл такие «усеченные» данные. Будут ли заголовки и описания иметь смысл при таких ограничениях в отображении? Потеряет ли пользователь доступ к самой необходимой информации? Во-вторых, необходимо понимать, есть ли смысл использовать карточки в таком варианте макета. Это работает в случае, когда контент не нужно долго сканировать взглядом, а пользователю достаточно только бегло просмотреть содержимое. И, наконец, мы смотрим, можем ли мы переместить контент внутри карточки для того, чтобы заставить ее корректно отображаться в одной колонке во всех размерах девайса. Это позволяет карточкам быть достаточно короткими или длинными и зачастую позволяет компактно отображать информацию внутри сайта.

Слишком много карточек в области видимости

дизайн карточек, много карточек в зоне видимости

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

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

Слишком много действий на разных областях карточки

дизайн карточек, много действий на карточках

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

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

Загруженность карточек контентом

дизайн карточек, много контента на карточках

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

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

Усиление визуального эффекта, когда в этом нет необходимости

дизайн карточек, ненужное визуальное усиление

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

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

Играйте своими карточками правильно

Карточный дизайн был очень хорошо воспринят в веб дизайне и команда ZURB использовала этот принцип в течении нескольких лет. Мы испытали карточки при создании сайтов и веб приложений во всех сферах, от финансов до биотехнологий и всегда считали такой подход очень гибким. Мы также смогли отметить рост количества проектов с карточными компонентами, которые создаются «с нуля» с тех пор, как наши дизайнеры начали верстать при помощи Foundation 6. Наша команда учла все основные случаи использования карточек в верстке и смогла добавить их в будущую версию Foundation 6.3. Это означает, что отныне, использовать карточки в ваших работать станет еще проще, однако, не стоит забывать про «подводные камни», описанные в данной статье.

Мы тестируем карточки в Foundation 6.3 Release Candidate. Полноценный релиз назначен на 15 декабря!