Patterns of Card UI Design

C14f6f7b7ce45e286106e7e7d5421f40?s=47 Chris Tse
July 08, 2014

Patterns of Card UI Design

*** NEW: A live recording of this talk is now available at https://vimeo.com/120858063

Card-based User Interface (Card UI) is the new hotness. Recent announcements from Google around the unification of their user interfaces across mobile and web using Material Design show that that the big players are firmly behind this new UI trend. It seems like when you are more than 50 million users, e.g. Facebook, Twitter, Pinterest, etc, you are using some sort of Card-based UI/UX in your app.

Aside from looking like pieces of card-sized tactile “material”, are there more to designing a good Card UI that deliver insights and drive actions? Christopher Tse, a technology/designer, has looked into the many card-based applications, and have discovered a common set of design patterns in how cards are constructed and assembled. He also cataloged the patterns shared between different types of containers, from those focused on storytelling to those facilitating discovery.

In this follow-up presentation to his popular “Stacking the Card Deck” talk, Chris delves deeper to the implication of Card UI design for the practicing UX professional. This new Card UI have the potential to bridge the divide between native app and responsive web design. UX practitioners that wish to set the trends and establish the conventions should invest time to understand what has been done thus us and how we can evolve this emerging field of Card UI design together. If you want to help contribute in a future design-athon or collaborate workshop, sign up for our mailing list at CardStack.io (http://cardstack.io).

Related Decks from Previous Talks:

Stacking the Card Deck [Manifesto]
https://speakerdeck.com/christse/stacking-the-card-deck-reclaiming-our-mobile-future-with-html5-based-cards

Card UI Architecture Design [Technical]
https://speakerdeck.com/christse/card-ui-architecture-design

Resources & Links:

Google Material Design Style Guide
http://www.google.com/design/spec

Guardian Beta: The Container Model and Blended Content
http://next.theguardian.com/blog/container-model-blended-content/

Kipin Hall: Sai Yerram, Founder
http://kipinhall.com
http://twitter.com/agileseeker

Notes from the NYC UX Acrobatics event by Elliot Noma
http://newyorktechtalksummaries.wordpress.com/2014/07/09/patterns-of-card-user-interface-design/

Follow @christse on Twitter for updates on the Card UI movement
http://twitter.com/christse

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

July 08, 2014
Tweet

Transcript

  1. Patterns of Card UI Design How to organize cards in

    containers to deliver insights and drive actions Chris Tse Presented by Follow @christse on Twitter Amplify DUMBO Event Location NYC UX Acrobatics Meetup Organizer Presentation Date July 8, 2014 NYC ACROBATICS UX ADVANCED UX TRACK
  2. . Agenda Card Container movement Card Patterns Container Patterns Movement

    Patterns
  3. Previous Talks Thoughtworks NYC Event Location NYC Meteor Meetup Meetup

    Organizer Presentation Date July 1, 2014 Building Embeddable JavaScript Apps for Web and Mobile Devices Chris Tse Presented by Follow @christse on Twitter TECHNICAL TRACK Card UI Architecture Design Stacking The Card Deck Reclaiming Our Mobile Future with HTML5-based Cards Chris Tse Presented by Follow @christse on Twitter AOL + Huffington Post Event Location NYC CSS/UX Meetup Meetup Organizer Presentation Date June 5, 2014
  4. Previous Talks Thoughtworks NYC Event Location NYC Meteor Meetup Meetup

    Organizer Presentation Date July 1, 2014 Building Embeddable JavaScript Apps for Web and Mobile Devices Chris Tse Presented by Follow @christse on Twitter TECHNICAL TRACK Card UI Architecture Design Stacking The Card Deck Reclaiming Our Mobile Future with HTML5-based Cards Chris Tse Presented by Follow @christse on Twitter AOL + Huffington Post Event Location NYC CSS/UX Meetup Meetup Organizer Presentation Date June 5, 2014 Khoi Vinh (@khoi) VP UX @trywildcard, blogger @subtraction, former design director @nytimes
  5. CardPatterns

  6. Google Chrome Notifications CardPatterns Types of Cards Apple Passbook Facebook

    Paper
  7. Google Chrome Notifications CardPatterns Short-lived Long-lived Types of Cards Apple

    Passbook Facebook Paper
  8. CardPatterns Card as a Short-lived Long-lived Permanent Is Definitive Carries

    Data Record
  9. Google Chrome Notifications CardPatterns Types of Cards Apple Passbook Facebook

    Paper Record Card as a Short-lived Long-lived
  10. Google Chrome Notifications CardPatterns Types of Cards Apple Passbook Facebook

    Paper Record Card as a Teaser Card as a Short-lived Long-lived
  11. Google Chrome Notifications CardPatterns Types of Cards Apple Passbook Facebook

    Paper Record Card as a Teaser Card as a Alert Card as an Short-lived Long-lived
  12. CardPatterns Target Cloud Magic Apple Passbook Citia Card as aRecord

    via @khoi
  13. CardPatterns Short-lived Long-lived Point-in-time Is Selective Has an Excerpt Card

    as a Teaser
  14. CardPatterns Pinterest Facebook Evernote Twitter FlipBoard Card as aTeaser

  15. CardPatterns Short-lived Long-lived Ephemeral Is Time-Sensitive Offers Choices Card as

    an Alert
  16. CardPatterns Apple iOS 8 Google Android L Windows 8 Card

    as an Alert
  17. CardPatterns Card as an Alert Tinder Jelly Seer CloudMagic via

    @khoi
  18. CardPatterns Short-lived Long-lived Types of Cards Record Card as a

    Teaser Card as a Alert Card as an Permanent Is Definitive Carries Data Point-in-time Is Selective Has an Excerpt Ephemeral Is Time-Sensitive Offers Choices Sum m ary
  19. CardPatterns Anatomy of Cards Source: Google Material Design Guidelines

  20. CardPatterns Anatomy of Cards Source: Google Material Design Guidelines Context

  21. CardPatterns Anatomy of Cards Source: Google Material Design Guidelines Context

    Lens
  22. CardPatterns Anatomy of Cards Source: Google Material Design Guidelines Context

    Lens Triggers
  23. Anatomy of Cards Source: Google Material Design Guidelines Context Lens

    Triggers CardPatterns
  24. Source: Google Material Design Guidelines Triggers Context Lens Triggers Lens

    CardPatterns
  25. Source: Google Material Design Guidelines Triggers Context Lens Triggers Lens

    Lens Triggers Lens Context CardPatterns
  26. Context Lens Triggers Google Now Current Location Predicted Destination Current

    Time Mode of Transportation Ambient Reactive Well-defined CardPatterns Card has Context
  27. Context Lens Triggers Soundclound in Storify Zoom / Crop Focus

    Depth of Field Card has a lens
  28. “Don’t you want to watch this video?” “Proclaim your love

    about Sricaha” “Don’t show me again.” “Tell your friends you like Sriracha!” “Find out what’s the big deal about Sriracha.” “Gotta blog this.” “Defend Sriracha!” Facebook Newsfeed Triggers Lens Context Enumerated Packaged Prioritized CardPatterns Card has Triggers
  29. Sum m ary Record Card Lens Context Triggers Context Lens

    Triggers Context Triggers Lens Short-lived Long-lived Short-lived Long-lived CardPatterns Teaser Card Alert Card
  30. doesn’t matter Size CardPatterns

  31. doesn’t matter It’s about Size Power CardPatterns

  32. Size

  33. SMALL MEDIUM LARGE XL Size

  34. Power

  35. To See The gist Power

  36. To See The gist To Act Upon it Power

  37. To See The gist To Act Upon it To Make

    Something Power
  38. None
  39. Cards

  40. Have Different Sizes & Powers Cards

  41. Have Different Sizes & Powers Have Different structure & Mixture

    Containers Cards
  42. Cards Like Pinterest Containers

  43. Cards Like Pinterest “Board”

  44. Cards Like Pinterest “Board” Structure

  45. Cards Like Pinterest “Board” Photo Photo Photo Photo Photo Photo

    Photo Photo Photo Photo Photo Photo Structure
  46. Cards Like Facebook “feed” Video Text Photo Album Ads Events

    Messages
  47. Cards Like Google Now “Stack” Map BOARDING PASS WEATHER NEXT

    APPOINTMENT REMINDER
  48. Cards Like Apple Passbook “Stack” United BOARDING PASS AMC Movie

    Ticket Starbucks Card Target Coupon Starwood Loyalty Card
  49. Cards Like FlipBoard “Collage” Photo ALBUM ARTICLE TWEET VIDEO IMAGE

    FACEBOOK POST BLOG POST ARTICLE mixture
  50. Cards Like Storify “Page” HEADLINE VIDEO TWEET PODCAST Text

  51. Cards Like Project Medici “Tree” ebook Excerpt Lecture Video Quiz

    PDF Paper Slide Deck Document Video Photo Document Lesson Lesson
  52. Web Platform Container Card

  53. Web Platform Quiz Video Podcast Game Simulation Article Container Card

  54. Container Patterns

  55. Patterns Container Emergent Curated Narrative Containers Help to tell a

    coherent story Faithful to user’s narrative choices Could be nested into a structure
  56. Patterns Container Emergent Curated Narrative Containers Storify Storehouse Wix Inkling

    Habitat
  57. Patterns Container Discovery Containers Surface what may be relevant Harness

    the collective mind User can tune and tweak Emergent Curated
  58. Patterns Container Discovery Containers Pinterest Twitter Facebook Mobile Emergent Curated

  59. Patterns Container Discovery Containers New Myspace Pandora Emergent Curated

  60. Patterns Container Conversation Containers Directed solely by participants Allows back

    and forth exchanges Governed by etiquette and norms Emergent Curated
  61. Patterns Container Emergent Curated Conversation Containers Kik DISCOURSE

  62. Patterns Container Workflow Containers Chain together a series of actions

    Performed by multiple participants Can attach other cards as payloads Emergent Curated
  63. Patterns Container Emergent Curated WORKFLOW Containers Asana Trello

  64. Patterns Container Emergent Curated WORKFLOW Containers Jelly Google Now Apple

    iOS 8
  65. Patterns Container Emergent Curated Narrative Containers Discovery Containers Conversation Containers

    Workflow Containers Sum m ary
  66. Patterns Container Ever-Changing EverGreen Narrative Containers Discovery Containers Conversation Containers

    Workflow Containers Sum m ary
  67. None
  68. With the container model we move away from thinking about

    specific pages on the site and how they might be filled with content, instead we start first with the content and each page is simply seen as a series of containers. “ http://j.mp/container-model Source:
  69. With the container model we move away from thinking about

    specific pages on the site and how they might be filled with content, instead we start first with the content and each page is simply seen as a series of containers. “ http://j.mp/container-model Narrative Containers Source:
  70. CardMovement

  71. CardMovement The most important aspect of the Card Metaphor

  72. CardMovement you can Move Cards The most important aspect of

    the Card Metaphor
  73. Narrative Discovery Conversation Workflow How Cards Move

  74. Narrative Discovery Conversation Workflow How Cards Move Create it

  75. Narrative Discovery Conversation Workflow How Cards Move Share it

  76. Narrative Discovery Conversation Workflow How Cards Move Talk about it

  77. Narrative Discovery Conversation Workflow How Cards Move Review & approve

    it
  78. Narrative Discovery Conversation Workflow How Cards Move Publish it

  79. If ‘card’ is the future, how to build it?

  80. card Architecture… in a nutshell

  81. A PAGE card Architecture… in a nutshell Render to Size/mode

  82. A PAGE An APP card Architecture… in a nutshell Render

    to Size/mode React to Action/Event
  83. A PAGE An APP A FILE card Architecture… in a

    nutshell Render to Size/mode React to Action/Event Restore From Saved States
  84. A PAGE An APP A FILE An API card Architecture…

    in a nutshell Render to Size/mode React to Action/Event Restore From Saved States Report Metadata
  85. A PAGE An APP A FILE An API card Architecture…

    in a nutshell
  86. A PAGE An APP A FILE An API card Architecture

    JS N … in a nutshell Card
  87. vs Open EcoSystems Closed EcoSystems

  88. CardMovement

  89. CardMovement

  90. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  91. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  92. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  93. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  94. Designing with Cards Case Study Saikiran Yerram Co-founder, Kipin Hall

    @agileseeker Image Source: Google Material Design Guidelines
  95. Syllabus Tracks + Check-ins + Retention = Digitize existing syllabus

    content to help students with time organization, goal setting and improving grades. A predefined set of activities tailored for each major, with an intent to form an academic habit or achieve a milestone in an area of interest. Behavioral methodologies like goal setting, check ins, nudges to encourage check ins on tasks. Track their usage patterns and recommend ways to improve or connect them to school resources Invision Mockups
  96. ROI on Card UI Reuse Mini-apps Unify Web, Mobile Web,

    and Apps New Distribution Outlets Super Easy Partnerships User Loyalty
  97. Open Closed

  98. Web Windows Open Closed

  99. Web

  100. Web The most open, amazing, transformative human-made ecosystem ever.

  101. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last…
  102. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps
  103. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps The greatest breakthrough in how we use technology in our everyday lives.
  104. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps The greatest breakthrough in how we use technology in our everyday lives. We can’t stay here for ever……
  105. Open Native Web Apps

  106. Open Native Web Apps Cards

  107. Mobile mobile Web Apps Cards

  108. CardStack Card Organizer Card Packaging Card Contracts Card Sandbox Card

    Glazier (Reference container implementation) GitHub (All cards are separate projects) Conductor.js (JS framework-agnostic) Polymer (For trusted code) & Oasis.js (For untrusted code) Material Design or Grid Style Sheet Coming Soon Everything you need to build HTML5 Cards and Containers .io 5 4 3 2 1 CardEcosystem
  109. Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1 CardEcosystem
  110. Make some cards that are useful and share the source,

    allow derivatives Step 2 Existing APIs Fresh Card UI HTML5 Card HTML5 Card HTML5 Card HTML5 Card HTML5 Card OAuth / JSON CardEcosystem
  111. Make some cards that are useful and share the source,

    allow derivatives Step 2 Existing APIs Fresh Card UI HTML5 Card HTML5 Card HTML5 Card HTML5 Card HTML5 Card OAuth / JSON CardEcosystem
  112. Building an open Card Catalog based on open source reputation

    Step 3 Cards for End-Users Code From Developers CardEcosystem
  113. Building an open Card Catalog based on open source reputation

    Step 3 Cards for End-Users Code From Developers CardEcosystem
  114. NEW YORK Let’s start a Card Movement!

  115. Patterns of Card UI Design How to organize cards in

    containers to deliver insights and drive actions Chris Tse Presented by Follow @christse on Twitter NYC ACROBATICS UX ADVANCED UX TRACK http://cardstack.io For More information
  116. @christse Thank you!

  117. Container Patterns Narrative Discovery Conversation Workflow Card Patterns Record Teaser

    Alert Context Lens Triggers Curated Emergent Long-Lived Short-lived concept + design by @christse Full deck at j.mp/cardpatterns source: Cardstack.io Patterns of Card UI Design: Cheat sheet