Преимущества и недостатки использования карточек
Как и любая другая техника в дизайне, интерфейс в карточном стиле - это еще не гарантия удобства и простоты в использовании. Карточный дизайн, пожалуй, одна из тех тем, о которых дизайнеры готовы спорить весь день напролет.
Они основаны на визуальном восприятии или на интерактивности? (По всей видимости, и то, и другое.) Разве они не устарели и не вышли из моды? (Только если вы оформили их подобным образом.) А пользователям они хотя бы нравятся? (Да, когда хорошо сделаны.)
К тому же, карточки достигли уровня повсеместного присутствия, который также делает их дискуссионным дизайнерским решением. От розничной торговли и продажи домов, до использования всевозможными Dribbblers (баскетбольные карточки) - вы можете встретить карточки практически в любом уголке всемирной паутины.
Теперь, давайте рассмотрим некоторые их преимущества и недостатки:
Преимущества
- Адаптивность способствует тому, что карточки просты в использовании. Прямоугольная форма без проблем растягивается и сжимается для наилучшего соответствия горизонтальной и вертикальной ориентациям мобильных устройств, а это значит, что пользователи получают интерфейс, который одинаково выглядит на всех устройствах (это повышает уровень доверия, упрощает восприятие, и, как следствие, способствует простоте и удобству в использовании).
- Прекрасно подходит для агрегированного контента. Карточки хорошо подходят для сбора информации из множества источников и ее размещения в рамках структуры одного вебсайта.
- Легко воспринимаемые контентные блоки упрощают пользователям просмотр и переход по клику. В стандартной схеме карточки представлены в равнозначной иерархии (каждая соответствует одной “мысли”), при этом пользователи ничем не ограничены при просмотре, и выбирают то, что им интересно.
- Карточки побуждают пользователей делиться контентом в социальных сетях. Не забудьте адаптировать размер карточки под платформы социальных сетей и добавить кнопки «нажми-чтобы-рассказать», чтобы делиться информацией с другими пользователями было проще.
- Не ограничены какими-либо эстетическими рамками. Карточки одинаково уместны как при общем или минимальном дизайне, так и при более декоративном и ярком. Как и конструктивные элементы “дизайна в контейнерном стиле”, карточки могут быть организованы в более структурированный формат журнального стиля или выложены в кирпичном формате, с бесконечной полосой прокрутки (в зависимости от того, что у вас за сайт на Битрикс и какие у него пользователи).
Недостатки
- Стиль может восприниматься в некотором смысле затасканным и надоевшим. Особенно справедливо для сайтов, который просто дублируют дизайн Pinterest или Facebook.
- Нуждаются в умелой разработке. Карточки это больше чем просто внешний вид. Они требуют интерактивности с пользователем, которая подразумевает множество взаимодействий, а также удобство и простоту в использовании.
- Опасность перегрузки визуального восприятия. Так как карточки часто используются на сайтах, содержащих большое количество информации, они могут в конечном итоге вызывать ощущение беспорядка. Формат журнального стиля, тем не менее, это отличное решение именно для контекстно-тяжелых сайтов.
- Сложно создать эффективный дизайн. Удачный дизайн в карточном стиле требует пристального внимания к деталям и демонстрации мастерства техники дизайна на гораздо меньшем и более беспощадном пространстве, чем обычно. Каждая карточка должна иметь прекрасно выдержанный визуальный баланс между изображениями, текстом, и ненавязчивыми вторичными действиями – в противном случае, она будет работать значительно хуже стандартных линейных схем.
Карточки служат для достижения конкретно определенных целей в дизайне, и все же, перед началом работы с ними убедитесь в том, что знаете, с чем имеете дело.
Рекомендации по успешному применению карточного дизайна
Судя по всему, все едины во мнении, что овладеть мастерством карточного дизайна не так просто, как кажется. Использование карточного интерфейса требует ясного эстетического оформления и непосредственного вовлечения пользователя в четко определенное действие – гармоничного сочетания принципов визуального дизайна и простоты и удобства в использовании.
Согласно руководству по эффективному дизайну интерфейса в карточном стиле: “Удачный карточный дизайн должен быть простым. Также, он предполагает наполненность контентом. Для успешного проекта в карточном стиле необходимы оба этих компонента. Однако, существует также множество других техник дизайна, которые позволяют прибавить в функциональности и эстетичности.
«В карточках замечательно то, что действительно отсутствует строгий набор дизайнерских правил, которого вы должны придерживаться. Базовые принципы хорошего дизайна это все, что вам нужно понимать, чтобы начать создавать проект в карточном стиле».
Можно выделить семь основных принципов создания карточного дизайна:
- Используйте больше пространства – негативное пространство помогает организовывать и разделять элементы внутри каждой карточки.
- Один блок информации на карточку – думайте о каждой карточке как об уникальном призыве к действию. Сервис Pinterest наполняется информацией в той мере, в какой мы сами ему ее предлагаем – она включает изображение, пользователя, категорию, репины и избранное (наряду с другими опциями, которые мы видим после наведения указателя).
- Выбирайте ясное, четкое изображение – Изображения на карточках чаще всего бывают маленького размера и должны быть правильно обрезаны и масштабированы под те контейнеры, в которые помещаются. Мы рекомендуем, чтобы изображение занимало 50-75 процентов пространства вашей карточки, оставляя остальное для текста и негативного пространства.
- Используйте простое оформление шрифтов – Хотя ярко оформленный заголовок может сработать, простое шрифтовое оформление выигрывает в случае с частым повторением миниатюрных изображений. Для начала попробуйте неувядаемую гарнитуру sans-serif средней толщины - для заголовка карточки и нормальной толщины - для основного текста.
- Добавьте неожиданную деталь – Рассмотрите возможность добавления анимируемого эффекта, видео, круговой рамки или уникальной цветовой схемы, чтобы ваши карточки выделялись из того, что делают другие дизайнеры. Расценивайте это как щепотку специй: добавьте только штрих и не смешивайте слишком большое число эффектов, иначе ваш дизайн будет выглядеть чересчур старательным.
- Создавайте открытую сетку – Создайте стандартную сетку, которая будет подчеркивать равномерность интервалов между карточками и работать для различных размеров и пограничных точек.
- Отдайте приоритет простоте и удобству в использовании – Сконцентрируйтесь в первую очередь на том, какую функцию должна выполнять каждая карточка, и только во вторую - на визуальном восприятии, а затем выполните дизайн так, чтобы он соответствовал тому, что пользователь ожидает получить от карточки. Не жалейте пробелов при создании гиперссылок.
Мастерство карточного дизайна заключается в безукоризненном следовании фундаментальным положениям теории дизайна 101 (пожалуй, что это как раз и есть самое сложное). Качественный уровень любого карточного интерфейса не превышает того уровня, на котором выполнен дизайн любой его отдельно взятой карточки.
Подумайте о том, что у вас есть всего несколько сантиметров коммерческой площади экрана, чтобы превратить множество неупорядоченных элементов в заманчиво выглядящее объявление. Правильное использование цвета, типа, интервалов и создание гармонии - жизненно необходимы. Также, не забывайте про размер и масштаб. Тогда как некоторые виды дизайна могут включать в себя карточки большого или превышающего обычный размера, большинство все же требует использования маленьких карточек (карточек “мобильного размера”), и дизайн должен быть эффективен в рамках этой сжатой структуры.
Приложение для управления процессами Trello (на фото выше) отлично справляется с задачей наслаивания интерфейса в карточном стиле на приятном глазу фоновые изображения, создавая тем самым индивидуальную панель инструментов пользователя. В этом случае карточки организуют контент и делают информацию простой для поиска и повторного использования.
Платформа для публикации портфолио «Contently» использует карточки для отображения практически бесконечной череды ссылок в простом и удобном для использования виде. Каждая статья связана с помощью карточки с картинкой и коротким описанием, при этом карточка содержит множество микро-информации (такой как шеры, твиты и лайки). Это прекрасный пример того, как можно уместить большое количество информации в маленькую карточку, сохранив при этом интуитивность интерфейса пользователя.
Будущее карточек в дизайне
Интерфейсы в карточном стиле находились в постоянном состоянии эволюции, и будут продолжать двигаться в этом направлении. Скорее всего, главные инновации можно будет наблюдать в областях адаптивного дизайна и дизайна мобильных приложений, особенно учитывая «бумажное» влияние Материального дизайна на дизайн приложений для Android.
Материальный дизайн определяет карточки как «кусочек бумаги с уникальными связанными данными, служащий отправной точкой к более подробной информации. Например, карточка может содержать фото, текст и ссылку, касающиеся одного отдельно взятого предмета».
Документация Google по карточкам является самой обширной из тех, что мы видели на текущий момент. Одновременно с тем, что многое из представленного описывается самым подробным и исчерпывающим образом, материальный дизайн дает ясную картину того, какие типы контента, дизайна и интерактивности должны быть применены в том наборе карточек, который будет эффективным.
Карточки это интерактивный инструмент по своей природе, а интерактивный дизайн это одна из наиболее стремительно развивающих дисциплин дизайна. Не удивимся, если в ближайшем будущем вы начнете видеть больше карточек с видео или автоматически обновляемым контентом.
Хотя большинство дизайнеров используют карточки в качестве ссылки на другой контент или информацию, они, безусловно, могут быть эффективны в той модели удобства и простоты использования, которую предлагает материальный дизайн. В этом случае карточки отображают информацию по мере того, как происходят отдельные взаимодействия, начиная с автоматической сортировки и до включения в себя новой или обновленной информации, например, прогноза погоды. Пользователи Windows Phone уже приучены к такому типу интерактивности, но с большой долей вероятности это распространится и на более широкую аудиторию пользователей Android.
Хотя дизайнеры сфокусировались на тех карточках, размер которых склонен быть более “мобильным”, дизайн с использованием карточек размером выше среднего также обретает популярность. Большие карточки, особенно с яркими цветами и жирным шрифтом, это интересный способ добавить новые оттенки в веб-дизайн и создать четко выраженные зоны визуального интереса.
Комбинация больших и маленьких карточек помогает сфокусировать внимание пользователей, в первую очередь, на каком-то определенном контенте, а также установить визуальную иерархию среди всех карточек. HOW arkitekter (на фото выше) применяет комбинацию карточек, размер которых превышает обычный, при этом одни используются в качестве ссылок на другие страницы, чтобы помочь пользователям перемещаться по сайту, другие же несут в себе конкретную информацию и отображаются в процессе работы с ресурсом.
Красочный цвет и простой шрифт непринужденно познакомят пользователя с контентом. Крупноразмерный дизайн с широкими интервалами - это свежий взгляд на минималистский стиль, основанный на карточках.
Начав с очков Google Glass, карточки определенно оставили отпечаток и в мире нательных аксессуаров. Несмотря на то, что широко бытует мнение о том, что Google Glass стали потребительским провалом, они все еще имеют шансы на жизнь на профессиональном рынке. И, хотя их будущее, несомненно, под вопросом, нет никаких сомнений в зависимости этих очков от карточек из-за особенностей дизайна интерфейса. Продукт может и провалиться, но будет интересно посмотреть на то, как выводы по дизайну, сделанные после этого, будут применены к другим продуктам дополненной реальности (или даже в целом, к адаптивному дизайну и дизайну мобильных приложений).
Всегда интересно размышлять о типе технологии, которая еще только должна быть разработана и том, как старое вновь будет превращаться в новое.
Наконец, не будем забывать, что карточки были лишь обычными кусочками бумаги до того, как мы увидели в них потенциал цифрового шаблона интерактивного дизайна.
