Почему карточки это будущее веба?

http://insideintercom.io/why-cards-are-the-future-of-the-web/
image

Kарточки — будущее веба. Они становятся лучшим дизайн-паттерном для мобильных устройств.

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

Все это меняет архитектуру веба — от связанных между собой страниц к связанным в единый интерфейс элементарных частей информации.

image

Агрегация зависит от:
  • Человека, потребляющего контент, его интересов, предпочтений и поведения.
  • Интересов его друзей, их предпочтений и поведения.
  • Местонахождения и контекста.
  • Рекламного таргетинга.


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


Твиттер переходит на карточки


image

Совсем недавно Твиттер запустил Twitter Cards, способ отображения мультимедиа-объектов вместе с твитами, которые на них ссылаются. Сейчай Нью-Йорк Таймс должны больше заботиться о том, как выглядит их история в Твиттер-карточке, нежели на их собственном сайте, попросту потому, что карточку увидит бОльшая аудитория.

Гугл переходит на карточки



image

Запустив Google Now, Гугл переосмыслил доставку контента до пользователей: от результатов поиска к персонализированным фрагментам информации в виде карточек.

image
Яндекс тоже использует карточки в Островах

image
OfficeArt (источник)

Все переходят на карточки


image

Пинтерест построен на карточках. Новая функция в Спотифай — Discover — построена на карточках. Фейсбук в основном состоит из карточек. Много частей iOS7 основано на карточках (например, переключение между приложениями и Airdrop).

image
Дизайн Airdrop и Passbook в iOS7.

Список растет и несмотря на эти многочисленные примеры внедрения карточек — это только начало.

Карточка — концентрат информации


image

Как формат распространения информации карточки с нами уже давно. В Императорском Китае их использовали для игр еще в 9-м веке. Торговые карточки (ранний прототип визитки — от пер.) помогали лондонцам 17-го века найти поставщиков услуг. В Европе 18-го века лакеи аристократов использовали карточки, чтобы сообщить о приезде высокого гостя. И уже сотни лет люди используют визитные карточки.

Мы посылаем открытки на день рождения и другие праздники. В моем кошельке полно дебетовых карточек и кредиток, а также карточка водительских прав. В детстве я играл в карточные игры. Альбомы с наклейками Top Trumps, Pokemon, Panini, которыми я менялся с друзьями. Настольные карточные игры Монополия, Клуэдо, Trivial Pursuit. В докомпьютерные времена авиадиспетчеры использовали карточки для управления самолетами в небе, а некоторые делают так до сих пор.

image
Сториборд к фильму Blade Runner (источник).

Карточки — отличный рассказчик коротких историй. Ведь все великие (и не очень) фильмы в наше время используют карточки для раскадровки сюжета (т.н. сториборд – от пер.). Каждая карточка представляет одну сцену из фильма. Карточки, карточки, карточки, рассказывающие истории. Вспомните о фото-карточках, каждая из которых хранит в себе небольшой рассказ. А из путешествий мы шлем домой открытки.

image

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

Карточками можно манипулировать


image

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

image
Автор — Гриффин Джонстон (источник).

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

image
Автор — Кен Чен (источник).

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

image

Карточка — чистый лист в дизайне


Уже ясно, что дизайнеры приложений и взаимодействия активно используют карточки. То же самое верно для маркетологов и креативщиков в рекламе. Пока продолжается рост рынка социальных медиа и их распад на множество нишевых продуктов (занимающих с каждым днем все больше нашего времени), маркетинговые бюджеты неизбежно последуют за ним. Преобладающим дизайн-паттерном в новых сервисах и приложениях будут карточки. Потребление информации из Фейсбука, Твиттера, Пинтереста, Инстаграма, Лайна, да и всех остальных сервисов — все основано на метафоре карточки.

Я думаю, что нам никуда от этого не деться. Карточки — следующий «big thing» в дизайне и это невероятно захватывающе.

Примечания


Еще один пост о карточках Бенедикта Эванса. А принципы Google Cards хорошо описаны в гайдлайнах т.к. именно они освновной дизайн-прием в Google Glass.
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 36
  • +24
    Чувствую себя олдбоем — для меня до сих пор интернет остается местом, где основной формат представления информации — это статьи. Какой мне прок от карточек, если на них не напечатать RFC [сарказм]
    • +3
      Как-то не один из вариантов «карточек» (больше привык к «виджетам») меня надолго не привлекал. Сначала поиграешься, а потом надоедает. Обычные иконки или меню для запуска и достаточно. А то и вообще из консоли. Для уведомления об обновлениях есть уведомления :) А «карточные» дизайны меня лично заставляют только лишний раз напрягаться. За одним исключением — когда на них строго однотипная информация и глаз выхватывает неоднородности.
      • +8
        Статья просто пестрит карточками, такое ощущение что автор сейчас впадет в истерию приговаривая «карточки!».
        Ваш бизнес зависит от мобилок! (какой PC, вы о чем) Будущее за мобилками! а значит что? карточки карточки!
        Карточки абсолютно не смотрятся на большом мониторе, они может и подходят для мобильных устройств, но смотрятся отвратительно на современных мониторах, карточки мельтешат, глаза разбегаются и из за информационной перегрузки хочется эту мешанину поскорее закрыть.

        Обыкновенная мода, тот же имхонет ей поддался, и теперь выглядит ужастно.
        • –1
          Кстати да, ИМХОнет — самый яркий пример карточного уродства. Заходишь и непонятно ничего, до такой степени отвратительно стало, что на сайт возвращаться не хочется. Так что осторожней надо быть с карточками. Всему своё место.
          • 0
            Дело даже не в том хороши карточки в целом или нет, но в том что у имхонета получилось очень уродливое исполнение с крайне неудачной цветовой схемой. Карточки там вообще не нужны и не к месту, что называется поддались моде.
          • 0
            у нас, по-моему, неплохо смотрятся и на больших мониторах: http://pandorama.com
            • 0
              без регистрации ничего не видно, и зря.
              • 0
                виден скриншот на лендинге ) Раньше можно было смотреть и пользоваться в ограниченном объеме и без регистрации — в итоге мало кто регистрировался. Сейчас намного больше регистрирующихся пользователей
                • 0
                  и сколько из них мертвых душ? ;)
                  • 0
                    главное, что процент живых душ, выше чем был раньше :)
                    • +1
                      Ну-ну. В общем, некрасиво это пахнет.
              • 0
                У вас по крайней мере с цветовой гаммой не перебрали (из того что видно на скриншоте, как оно на самом деле смотрится, ясное дело не видно)
            • +2
              Все должно быть к месту. Если это реализуется в виде меню или в виде небольших блоков разнородной информации, то это удобно. Если карточками рисунки отображаются, то тоже удобно. Но если карточками отображается однородная информация с текстом, то жутко неудобно. Особенно, если карточки разной высоты.

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

                Само собой, всё должно быть к месту. На Хабре я не представляю себе карточки. Ну, кроме как в мобильном приложении (%.
                • +2
                  Удобнее в частных случаях, но не в контексте всего и вся. Для описанных вами случаев существуют адаптивные интерфейсы.
                  • 0
                    Вообще-то я об этом и говорю.
                    • 0
                      То есть по-вашему карточки === адаптивный интерфейс?
                      • 0
                        Один из приёмов, удобных для использования в адаптивных интерфейсах.
                        Вы цепляетесь к словам.
                • 0
                  Но если карточками отображается однородная информация с текстом, то жутко неудобно

                  По мне так ровно наоборот. По крайней мере пока смысловые части текста помещаются на одной строке.
                • –1
                  Карточки, карточки эвривэа!
                  • +1
                    Жаль забыли упомянуть WebOS, у которой управление запущенными приложениями как раз было основано на представлении в виде карточек. Там это, к слову, было реализовано задолго до того как стало трендом.
                    • 0
                      В WebOS и агрегация данных задолго до многих и HTML/JS за долго до… жесты прекрасны… Но palm/hp прос… В общем не вышло ничего толкового, но телефон (хожу с pre3) просто супер-пупер-мега крутой, если бы не утечки памяти и странные ребуты при съемке видео. А уж возможностей кастомизации хоть отбавляй. А главное — там реально всё летает, всегда казалось что интерфейс на старом телефоне с андроидом летал, но теперь кажется что он ползает рывками.
                      зы: а еще там есть полноценные иксы и ssh с соотвествующими возможностями
                      • +1
                        У меня лежит без дела HP Veer и в свое время продавать я его отказался потому, что больше такого не будет с этой гигантоманией и отказом от хардверных клавиатур (она в Veer сплошная магия даже с фонетическим вводом). Я обожаю WebOS и иногда включаю Veer, чтобы посмотреть как все должно быть на самом деле юзабельно (свайп от края до края с волной иконок быстрого доступа просто великолепен).
                        А как все было бездарно прос……да вы не хуже меня знаете полагаю.
                        • +1
                          У меня по той же причине лежит nokia n900. Такого чуда больше не будет, отдавать за копейки жалко, пользоваться проблематично (какой бы крутой не была OS, без стороннего софта она загибается).
                          • 0
                            Убер-девайс, иного не придумаешь после того как поигрался. Жаль изначально это был эксперимент и не более, однако Sailfish на него же вроде встанет?
                            • 0
                              Не в курсе что на него встает, т.к. боюсь потерять VoIP с видео из коробки.
                    • 0
                      Будущее веба — это микроформаты. Это выяснили еще во времена веб 2.0.
                      • +5
                        Потому, что невозможно читать? Нельзя выцепить нужную информацию? Рассеяние внимания усиленное многократно? Потому, что найти ничего нельзя? Потому, что они не юзабильны?

                        А, ну тогда да, будущее. У нас всё по такому вектору движется.
                        • 0
                          Просто тут как обычно — создали ажиотаж и возбудили тренд. К слову, карточки были и задолго до этой движухи — например представление товаров в интернет-магазинах и каталогах типа Яндекс маркета. Но это не значит, что если для данного случая прокатило, то и для остальных надо срочно применять. Тут как с CMS-ками когда из Wordpress пытаются сделать магазин или наоборот.
                          • 0
                            Все, что вы перечисляется относится к использованию карточек на десктопе, в большом окне браузера.

                            Разве внимание рассеяно, когда вы смотрите вертикальную ленту из карточек на телефоне? Однотипная подача, в виде карточки, помогает лучше отделить сам контент от окружающего его «дизайна».
                          • +5
                            все больше информационная деградация, обернутая в красивый фантик. потребляйте!

                            www.rowthree.com/wp-content/uploads/2011/04/TheyLiveRemake_650.jpg
                            • +2
                              Карточки хорошо, но не тогда, когда они по всем осям координат и даже в 3D расположены. Для мобильных устройств очень даже хорошо выходит. А вот на декстопе это просто ужасно, глаза разбегаются и кажется что заглянул не на сайт, а в мусорный бак.
                              • 0
                                Мне нравятся решения, когда на десктопе карточки масштабируются, а не повтовряют размер мобильных. Тогда получается не более 3-х колонок, что уже вполне прилично.
                              • –2
                                Вдохновило, спасибо :)
                                • +1
                                  В G+ ужасная реализация карточек, хуже было только в Facebook Timeline, жутко неюзабельно.
                                  • 0
                                    Messaging app Kik quietly opens its Cards content platform to third-party developers. Ссылка

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.