Пользователь
0,0
рейтинг
18 сентября 2013 в 04:21

Дизайн → Почему карточки это будущее веба? перевод recovery mode

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.
Перевод: Paul Adams
tvrbo @tvrbo
карма
1,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (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. Ссылка

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