Лого vc.ru

Визуальное представление контента: карточные интерфейсы

Визуальное представление контента: карточные интерфейсы

Дизайнер Крис Це (Chris Tse) выступил с презентацией, в которой затронул тему карточного UI и объяснил реальный потенциал подобных интерфейсов. ЦП публикует главные тезисы этого выступления и мнения отечественных экспертов в рубрике «Интерфейсы».

Поделиться

Дизайнеры используют карточки в интерфейсах для того, чтобы добиться их «отзывчивости» на различных устройствах и размерах экрана. Карточки есть в проектах Twitter, Google Now, Passbook, Pinterest, Facebook Paper и т.д. Эти сервисы вывели карточные интерфейсы на уровень мейнстрима, но не раскрывают весь потенциал подобной организации контента, уверен Крис Це.

Что такое карточки

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

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

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

Карточки в интерфейсе Facebook сообщают пользователю о возможных действиях

Карточки могут быть представлены различным образом. Це называет варианты структуры контейнерами, и приводит некоторые примеры — «доски» Pinterest, коллажи Flipboard, ленту Facebook, стек Google Now и т.д.

Возможности карточек

Крис Це говорит, что при правильном использовании, карточки могут выглядеть, как адаптивный веб-контент, работать, как мобильное приложение и казаться обычным файлом, который можно сохранить и использовать снова — для реализации всего перечисленного не нужно ничего, кроме стандартных средств CSS, JavaScript и HTML5.

В рамках презентации Це рассказал о подходе Card Runtime, с помощью которого разработчики смогут создавать в своих проектах карточки с контентом сторонних приложений.

Перспективы

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

Благодаря HTML5 карточки можно переносить между различными приложениями, устройствами, пользователями и даже отдельными сервисами. А это, в свою очередь, позволяет создавать «цепочки» карточек, говорит Це. В конце своего выступления он представил ссылку на сервис по созданию HTML5-карточек и контейнеров CardStack.io.

Полное видео презентации представлено ниже:

Редакция ЦП задала отечественным экспертам вопрос о том, считают ли они карточки полезным средством представления информации:

Алексей Копыловдиректор UX-практики компании iDecide

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

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

Презентация просто отличная, после нее я убедил своих коллег перевести наш текущий проект в карточный вид.

Егор ГилевUX-директор Acronis

Используя карточки в интерфейсах, важно выйти за рамки банального подражания Pinterest и Flipboard. Попробуем копнуть глубже, и сформулировать: что такое карточки, и зачем они нужны? Предположим, у нас есть какая-то повторяющаяся группа элементов интерфейса с четко обозначенными границами. Карточка? Да, конечно! Минимальные требования соблюдены: «повторяющаяся» и «четко очерченная».

Ответив на вопрос «что», попробуем разобраться, «зачем». Когда нужно представить на экране массив данных, состоящий из элементов с хоть сколько-нибудь сложной структурой (больше 2-3 полей), у нас не так много годных вариантов: карточки, таблица, или же какая-то конструкция с отношениями master-detail.

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

Какие преимущества у карточек перед таблицами? Гибкость при размещении на экране. Широкий экран можно замостить в несколько колонок, а на телефоне показать только одну (адепты адаптивности в восторге). На сенсорных экранах в карточку проще попасть пальцем. Больше свободы в способах представления информации: фотографии, диаграммы. Таблицы скучны! Зато, как правило, таблицы компактнее. Удобнее сравнивать параметры, скользя взглядом по колонке. Легче организовать сортировку.

Третий путь: конструкции с отношениями master-detail. Всегда можно представить набор элементов простым списком (или иерархическим деревом), а дополнительные атрибуты показывать только для выбранного элемента. В таком случае у нас еще больше свободы самовыражения в области подробностей, но страдает наглядность представления списка: можем там показать только название элемента и какую-то картинку (иконку). Если же усложнять представление списка, получатся опять-таки карточки, будь они неладны (или таблица — как повернуть).

Вот между этими тремя соснами мы и ходим. Не заблудитесь!

Статьи по теме
Радиокнопки: стоит ли по умолчанию выбирать ответ за пользователя04 июня 2014, 18:29
Новый тренд веб-дизайна: контурные кнопки28 мая 2014, 17:01
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Мне нравится эта мода, но я упорно не могу привыкнуть к сайтам, на которых карточки не выровнены по высоте, когда нарушается сетка (Pinterest тот же).
Я больше времени трачу на восприятие такой информации из-за непонимания последовательности просмотра контента.
Другое дело, когда размер карточек разный по ширине, при этом сетка прослеживается (ЦП, TJ).

Я не дизайнер, рассуждаю с точки зрения пользователя.

Согласен. Именно из-за интерфейса не смог находиться на пиннтересте дольше пары минут. Хотя идея хорошая.

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

а есть где-нибудь пасхалки?
Ну пролистал все карточки до футера - получи ачивку)

Человеку привычнее читать сверху вниз и слева направо (если вы не еврей, иначе справа налево). Подписи к карточкам же приходится читать какими-то дурацкими волнами. Из-за этого у меня постоянное чувство, что какую-то из подписей я пропустил.

Вот-вот, такое же ощущение с карточками.

0

Вчера как раз просматривал кучу картинок на пинтересте, и, из-за лесенки, нервничал на тему, все ли я просмотрел или что-то пропустил.

Система лайков тоже ущербна.

0

В FemmeKiosque.com я попробовал искать промежуточный вариант между визуалом карточек и "некарточек". Пользователи говорят, что немного получилось.

0

Переводил статью на эту тему. «Почему карточки это будущее веба?» – habrahabr.ru/post/194196/

0

В своем проекте тоже использовал "карточный вид", но от тренда разграничился двумя основными отличиями:
1. Карточки выровнены по высоте. (намного удобнее читать контент, взгляд идет по прямой линии, не дергаясь зигзагом. Из-за того что карточки не сильно отличаются по высоте, это избавляет от слишком больших "пробелов" в рядах)
2. Карточки расположены не впритык друг к другу, а на приличном расстоянии. (это дает каждой карточки индивидуальность и большую значимость, чем когда они слеплены в большую массу, пользователь не рассматривает каждую отдельно, а пролистывает, останавливаясь только на самых ярких (выделяющихся) картинках)

0

А почему не сделать их одинаковыми по высоте?
+ большое расстояние так себе, по-моему

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

0

Судя по скриншоту, "бронировать" придется совсем чуть-чуть. Мне кажется, что одинаковые карточки будут смотреться гораздо аккуратнее даже с пустыми двумя стоками.

Это имхо, конечно, вам виднее. Просто для меня это скриншот из разряда "ад перфекциониста".

0

Ну как то так. Посмотрим, возможно этот вариант более юзабелен, а возможно и нет )

0

вы считаете пустое место в описании смотрится нормально?

0

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

Хоть я уже и нашел компромиссное решение, с удовольствием бы выслушал ваш вариант.

0

Ну да, так себе. Я бы в таком случае пытался работать с названием и описанием каждой записи. Если это проблематично, то первый вариант, естественно, более предпочтителен...

0

Не совсем понял что имеете ввиду "Я бы в таком случае пытался работать с названием и описанием каждой записи"?
Название и описание объединены в один текстовый блок. 140 символов максимальная длина описания. Карточки может добавлять любой пользователь. Описание автоматически берется из title добавляемого сайта с возможностью свободного редактирования.

0

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

0

мой вариант: обрезка текста по символам (а не словам) с плавным затемнением и последующим исчезанием остального контента

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Михаил Марков

Любите любите, любовь дело хорошее) Только давайте по честноку: что такого связанного с ракетами / двигателями S7 вообще сделало? Ну кроме того, что купило "входной билет") У них есть лаборатория или научный центр?

ТАСС узнало о планах S7 создать собственный космодром на орбите
0
Культурный Код

Ivan Kolyhalov,
1. как в проекте не может быть кофаундера?
2. Кофаундера нельзя добавить после запуска.. он может быть владельцем, но уже не кофаундером!!!!
3. Кофаундер, это всего лишь юридический статус. Команда может быть и с одним кофаундером.
4. Т.е. Cofoundit для проектов с одиним кофаундером только?
5. ФРИИ оценивает стоимость проекта, по числу кофаундеров?
6. Если уж очень надо, то в кофаундеру уж лучше взять проверенного человека но с меньшим опытом, чем кого-попало из интернет.
7. Если есть дибилойды, которые Лучше в кофаундеры взять людей которых ты зн

ФРИИ официально запустил сервис для поиска сооснователей стартапов Cofoundit
0
ObliQ Brutale

А на хрена конкретно Вам в космос?

Читайте внимательно - запуск спутников.

Конечно Вы при росте 1,9 метра в спутник н поместитесь - места мало, а с системами жизнеобеспечения так вообще не останется )

... но это не отнимает Вашего права не любить S7

А я их очень люллю, регулярно - в лице одной из стюардесс )

ТАСС узнало о планах S7 создать собственный космодром на орбите
0
Erik Gimaletdinov

По сути да. Если видите значок PayPass, то оплатить сможете

«Ведомости» анонсировали запуск Apple Pay в России в октябре
0
ObliQ Brutale

И не стыдно Вам в 21 век высоких технологий носить древнюю фамилию "Борисоглебский" ?

А если без шуток: пукни в лужу, смешнее будет

ТАСС узнало о планах S7 создать собственный космодром на орбите
0
Показать еще