Офтоп
Alexander Lashkov

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

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

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

{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": [], "comments": 25, "likes": 21, "favorites": 3, "is_advertisement": false, "subsite_label": "flood", "id": 4434, "is_wide": true, "is_ugc": true, "date": "Thu, 17 Jul 2014 14:19:43 +0400", "is_special": false }
0
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/

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Читать все 25 комментариев
Тренды мобильных игр в 2021 году — обзор индустрии мобильных игр

Индустрия мобильных онлайн-игр — анализ, тенденции и статистика

NASA и SpaceX отправят научный зонд для поиска жизни на спутнике Юпитера в 2024 году Статьи редакции

Запуск миссии Europa Clipper обойдётся в $178 млн — столько NASA выделяет компании Илона Маска по условиям контракта.

Как я попался на офлайн-развод в «Pure», а затем нашел актрису

В этом году я встретил на «Pure» новый для меня вид мошенничества, что стоило мне больше 2352 грн. Смысл развода состоит в том, чтобы завести на свидание в подставное кафе и вынудить оплатить счет с сильно завышенной суммой.

Пластиковый «дом будущего» должен был решить проблему нехватки жилья, а стал аттракционом в Диснейленде Статьи редакции

В конце 50-х архитекторы в США построили здание из пластмассы и «оснастили» его бытовыми предметами грядущих десятилетий — атомной микроволновкой, ультразвуковой посудомойкой, движущимися проекторами, гигантским экраном, пластиковой мебелью и посудой.

У Дома будущего Monsanto было четыре крыла Iconichouses
Возможности, как в корпорации, а гибкость, как у стартапа. Что думают о своей работе сотрудники DiDi

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

4 скрытых трат на программное обеспечение, которые необходимо предвидеть ПОСЛЕ публикации приложения

Давайте представим, что после нескольких месяцев напряженной работы ваше мобильное приложение, наконец, готово к работе. Но когда вы просматриваете свои финансовые отчеты, вы замечаете, что ваши ежемесячные расходы не уменьшились, а наоборот- выросли. Что происходит?

Можно ли продолжать работать в той же компании после выгорания: история продакт-менеджера Тинькофф

В Тинькофф — 28 000 сотрудников, и у каждого своя история. Кто-то легко справляется с работой, и после всех задач спокойно отключается и идет отдыхать. Другим все может даваться труднее, даже сложно в уйти в отпуск — думает, «как я всё здесь брошу». Мы начинаем серию статей от лица наших сотрудников, которые делятся своим опытом: какие появлялись…

Восточная Техника успешно автоматизирует процессы управления складами на базе решения Columbus-WMS
«Стартап-полка»: Самокат набирает производителей альтернативных продуктов

Онлайн-ритейлер Самокат совместно с Ассоциацией Производителей Альтернативных Пищевых Продуктов объявляют сбор заявок от инновационных производителей продуктов для участия в «стартап-полке» Самоката. Лучшие продукты попадут в постоянный ассортимент Самоката в раздел «Супермаркет» уже этой осенью.

Как мы создали программный продукт для НКО, не имеющий аналогов в России, и (пока что) заработали на нём только геморрой

Это история о том, что бывает, когда одна типичная для некоммерческих организаций черта – ожидание всяческих преференций – выходит на первый план, превращается в требовательную инфантильность и рубит все отношения между заказчиком и исполнителем.
Мы почти бесплатно сделали ПО для НКО на базе Битрикс24, не имеющее аналогов в России, а вместо…

На конференции «B Word» Илон Маск в очередной раз поменял свою позицию по биткоину

В ходе конференции где также присутствовали Джек Дорси и Кэти Вуд, Маск отметил, что он является владельцем биткойнов не только через баланс Tesla и SpaceX, но и лично владеет биткойнами, эфиром и Dogecoin.

null