Patterns of Card UI Design

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

. Agenda Card Container movement Card Patterns Container Patterns Movement Patterns

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

CardPatterns

Slide 6

Slide 6 text

Google Chrome Notifications CardPatterns Types of Cards Apple Passbook Facebook Paper

Slide 7

Slide 7 text

Google Chrome Notifications CardPatterns Short-lived Long-lived Types of Cards Apple Passbook Facebook Paper

Slide 8

Slide 8 text

CardPatterns Card as a Short-lived Long-lived Permanent Is Definitive Carries Data Record

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

CardPatterns Target Cloud Magic Apple Passbook Citia Card as aRecord via @khoi

Slide 13

Slide 13 text

CardPatterns Short-lived Long-lived Point-in-time Is Selective Has an Excerpt Card as a Teaser

Slide 14

Slide 14 text

CardPatterns Pinterest Facebook Evernote Twitter FlipBoard Card as aTeaser

Slide 15

Slide 15 text

CardPatterns Short-lived Long-lived Ephemeral Is Time-Sensitive Offers Choices Card as an Alert

Slide 16

Slide 16 text

CardPatterns Apple iOS 8 Google Android L Windows 8 Card as an Alert

Slide 17

Slide 17 text

CardPatterns Card as an Alert Tinder Jelly Seer CloudMagic via @khoi

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

CardPatterns Anatomy of Cards Source: Google Material Design Guidelines

Slide 20

Slide 20 text

CardPatterns Anatomy of Cards Source: Google Material Design Guidelines Context

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Context Lens Triggers Google Now Current Location Predicted Destination Current Time Mode of Transportation Ambient Reactive Well-defined CardPatterns Card has Context

Slide 27

Slide 27 text

Context Lens Triggers Soundclound in Storify Zoom / Crop Focus Depth of Field Card has a lens

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

doesn’t matter Size CardPatterns

Slide 31

Slide 31 text

doesn’t matter It’s about Size Power CardPatterns

Slide 32

Slide 32 text

Size

Slide 33

Slide 33 text

SMALL MEDIUM LARGE XL Size

Slide 34

Slide 34 text

Power

Slide 35

Slide 35 text

To See The gist Power

Slide 36

Slide 36 text

To See The gist To Act Upon it Power

Slide 37

Slide 37 text

To See The gist To Act Upon it To Make Something Power

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Cards

Slide 40

Slide 40 text

Have Different Sizes & Powers Cards

Slide 41

Slide 41 text

Have Different Sizes & Powers Have Different structure & Mixture Containers Cards

Slide 42

Slide 42 text

Cards Like Pinterest Containers

Slide 43

Slide 43 text

Cards Like Pinterest “Board”

Slide 44

Slide 44 text

Cards Like Pinterest “Board” Structure

Slide 45

Slide 45 text

Cards Like Pinterest “Board” Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Structure

Slide 46

Slide 46 text

Cards Like Facebook “feed” Video Text Photo Album Ads Events Messages

Slide 47

Slide 47 text

Cards Like Google Now “Stack” Map BOARDING PASS WEATHER NEXT APPOINTMENT REMINDER

Slide 48

Slide 48 text

Cards Like Apple Passbook “Stack” United BOARDING PASS AMC Movie Ticket Starbucks Card Target Coupon Starwood Loyalty Card

Slide 49

Slide 49 text

Cards Like FlipBoard “Collage” Photo ALBUM ARTICLE TWEET VIDEO IMAGE FACEBOOK POST BLOG POST ARTICLE mixture

Slide 50

Slide 50 text

Cards Like Storify “Page” HEADLINE VIDEO TWEET PODCAST Text

Slide 51

Slide 51 text

Cards Like Project Medici “Tree” ebook Excerpt Lecture Video Quiz PDF Paper Slide Deck Document Video Photo Document Lesson Lesson

Slide 52

Slide 52 text

Web Platform Container Card

Slide 53

Slide 53 text

Web Platform Quiz Video Podcast Game Simulation Article Container Card

Slide 54

Slide 54 text

Container Patterns

Slide 55

Slide 55 text

Patterns Container Emergent Curated Narrative Containers Help to tell a coherent story Faithful to user’s narrative choices Could be nested into a structure

Slide 56

Slide 56 text

Patterns Container Emergent Curated Narrative Containers Storify Storehouse Wix Inkling Habitat

Slide 57

Slide 57 text

Patterns Container Discovery Containers Surface what may be relevant Harness the collective mind User can tune and tweak Emergent Curated

Slide 58

Slide 58 text

Patterns Container Discovery Containers Pinterest Twitter Facebook Mobile Emergent Curated

Slide 59

Slide 59 text

Patterns Container Discovery Containers New Myspace Pandora Emergent Curated

Slide 60

Slide 60 text

Patterns Container Conversation Containers Directed solely by participants Allows back and forth exchanges Governed by etiquette and norms Emergent Curated

Slide 61

Slide 61 text

Patterns Container Emergent Curated Conversation Containers Kik DISCOURSE

Slide 62

Slide 62 text

Patterns Container Workflow Containers Chain together a series of actions Performed by multiple participants Can attach other cards as payloads Emergent Curated

Slide 63

Slide 63 text

Patterns Container Emergent Curated WORKFLOW Containers Asana Trello

Slide 64

Slide 64 text

Patterns Container Emergent Curated WORKFLOW Containers Jelly Google Now Apple iOS 8

Slide 65

Slide 65 text

Patterns Container Emergent Curated Narrative Containers Discovery Containers Conversation Containers Workflow Containers Sum m ary

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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:

Slide 69

Slide 69 text

Slide 70

Slide 70 text

CardMovement

Slide 71

Slide 71 text

CardMovement The most important aspect of the Card Metaphor

Slide 72

Slide 72 text

CardMovement you can Move Cards The most important aspect of the Card Metaphor

Slide 73

Slide 73 text

Narrative Discovery Conversation Workflow How Cards Move

Slide 74

Slide 74 text

Narrative Discovery Conversation Workflow How Cards Move Create it

Slide 75

Slide 75 text

Narrative Discovery Conversation Workflow How Cards Move Share it

Slide 76

Slide 76 text

Narrative Discovery Conversation Workflow How Cards Move Talk about it

Slide 77

Slide 77 text

Narrative Discovery Conversation Workflow How Cards Move Review & approve it

Slide 78

Slide 78 text

Narrative Discovery Conversation Workflow How Cards Move Publish it

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

card Architecture… in a nutshell

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

A PAGE An APP card Architecture… in a nutshell Render to Size/mode React to Action/Event

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

A PAGE An APP A FILE An API card Architecture… in a nutshell

Slide 86

Slide 86 text

A PAGE An APP A FILE An API card Architecture JS N … in a nutshell Card

Slide 87

Slide 87 text

vs Open EcoSystems Closed EcoSystems

Slide 88

Slide 88 text

CardMovement

Slide 89

Slide 89 text

CardMovement

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

Designing with Cards Case Study Saikiran Yerram Co-founder, Kipin Hall @agileseeker Image Source: Google Material Design Guidelines

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

ROI on Card UI Reuse Mini-apps Unify Web, Mobile Web, and Apps New Distribution Outlets Super Easy Partnerships User Loyalty

Slide 97

Slide 97 text

Open Closed

Slide 98

Slide 98 text

Web Windows Open Closed

Slide 99

Slide 99 text

Web

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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.

Slide 104

Slide 104 text

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……

Slide 105

Slide 105 text

Open Native Web Apps

Slide 106

Slide 106 text

Open Native Web Apps Cards

Slide 107

Slide 107 text

Mobile mobile Web Apps Cards

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

NEW YORK Let’s start a Card Movement!

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

@christse Thank you!

Slide 117

Slide 117 text

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