Офтоп Alexander Lashkov
12 436

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

Дизайнер Крис Це (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. Всегда можно представить набор элементов простым списком (или иерархическим деревом), а дополнительные атрибуты показывать только для выбранного элемента. В таком случае у нас еще больше свободы самовыражения в области подробностей, но страдает наглядность представления списка: можем там показать только название элемента и какую-то картинку (иконку). Если же усложнять представление списка, получатся опять-таки карточки, будь они неладны (или таблица — как повернуть).

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

#Интерфейсы #карточки #карточный_UI #карточные_интерфейсы #Алексей_Копылов #Егор_Гилев

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
Статьи по теме
Радиокнопки: стоит ли по умолчанию выбирать ответ за пользователя
Новый тренд веб-дизайна: контурные кнопки
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439_ui","\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0435_\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0435\u0433\u043e\u0440_\u0433\u0438\u043b\u0435\u0432","\u0434\u0438\u0437\u0430\u0439\u043d","\u0430\u043b\u0435\u043a\u0441\u0435\u0439_\u043a\u043e\u043f\u044b\u043b\u043e\u0432"], "comments": 25, "likes": 21, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 4434, "is_wide": true, "is_ugc": true, "date": "Thu, 17 Jul 2014 14:19:43 +0400" }
{ "id": 4434, "author_id": 729, "diff_limit": 1000, "urls": {"diff":"\/comments\/4434\/get","add":"\/comments\/4434\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/4434"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791, "possessions": [] }

25 комментариев 25 комм.

Популярные

По порядку

Написать комментарий...
11

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

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

Ответить
3

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

Ответить
1

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

Ответить
1

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

Ответить

5

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

Ответить
0

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

Ответить
1

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

Ответить
–9

HTML5 — ущербный.

Ответить
2

Вы, я полагаю, пользователь IE?

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }