Information Design for an Instrumented World

Slide 1

Slide 1 text

Information Design for an Instrumented World Hannah Donovan, 10 October 2011

Slide 2

Slide 2 text

Hello! I’m Hannah

Slide 3

Slide 3 text

Who are you?

Slide 4

Slide 4 text

I have a secret to tell you.

Slide 5

Slide 5 text

“The solution is the problem.”

Slide 6

Slide 6 text

What about you?

Slide 7

Slide 7 text

What you’re not going to learn this morning.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

By albyantoniazzi on ﬂickr

Slide 10

Slide 10 text

We need to stop grasping for the perfect visualization and return to the basic language of charts and graphs. Only then can we begin to uncover the relationships the data has to oﬀer. – Brian Suda Photo credit: andré.luís on Flickr

Slide 11

Slide 11 text

Photo credit: Alex Pounds

Slide 12

Slide 12 text

Olivier Gillet says: MAKE Photo credit: Alex Pounds

Slide 13

Slide 13 text

Olivier Gillet says: MAKE A Photo credit: Alex Pounds

Slide 14

Slide 14 text

Olivier Gillet says: MAKE A POINT. Photo credit: Alex Pounds

Slide 15

Slide 15 text

So what are we going to explore today?

Slide 16

Slide 16 text

The details.

Slide 17

Slide 17 text

The details are not the details. They make the design. – Charles Eames

Slide 18

Slide 18 text

We people, we have a lot of details now. We live in an instrumented world

Slide 19

Slide 19 text

Most of our instrumented world is measured in terms of attention data.

Slide 20

Slide 20 text

ACTIVE PASSIVE scrobbling location tracking health monitoring posting checking in tweeting

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

You guys… This is kind of crazy.

Slide 28

Slide 28 text

New conceptual breakthroughs are invariably driven by the development of new technologies. – Don Norman Photo credit: Piemont Share on Flickr

Slide 29

Slide 29 text

~2005 ~2010

Slide 30

Slide 30 text

Web APIs become popular ~2005 ~2010

Slide 31

Slide 31 text

Web APIs become popular Moore’s law applied to data storage ~2005 ~2010

Slide 32

Slide 32 text

Web APIs become popular Moore’s law applied to data storage Big data ~2005 ~2010

Slide 33

Slide 33 text

Web APIs become popular Moore’s law applied to data storage Big data Ability to build real-time interfaces ~2005 ~2010

Slide 34

Slide 34 text

Web APIs become popular Moore’s law applied to data storage Big data Ability to build real-time interfaces Cloud computing ~2005 ~2010

Slide 35

Slide 35 text

Our job is to make sense of this instrumented world and all the information in it.

Slide 36

Slide 36 text

1. COMMON FORMATS AND PATTERNS ARE EMERGING

Slide 37

Slide 37 text

For us: be aware and inquisitive, so we can choose the right tool for the job For users: they will expect certain things to work in certain ways

Slide 38

Slide 38 text

2. THE AMOUNT OF PERSONAL DATA CAN BE OVERWHELMING

Slide 39

Slide 39 text

For us: spoiled for choice, we have more decisions to make than ever before. For users: signal vs. noise is becoming a common problem.

Slide 40

Slide 40 text

3. DATA HAS DISTINCT TIMING

Slide 41

Slide 41 text

For us: we need to have sharp presentation skills for conveying the speed of the data For users: they care, and will often expect things to be in real-time.

Slide 42

Slide 42 text

4. OUR DATA TRAILS ARE STARTING TO GET LONG

Slide 43

Slide 43 text

For us: we’re faced with a new challenge of how to reﬂect this meaningfully to users For users: they are becoming increasingly aware of their history

Slide 44

Slide 44 text

OUR TOOLKIT Part I

Slide 45

Slide 45 text

1. UNDERSTANDING THE DATA

Slide 46

Slide 46 text

Use the WW brief: What do you want, and why do you want it?

Slide 47

Slide 47 text

Use the WW brief: What do you want, and why do you want it? (It’s your job to ﬁgure out how to do it).

Slide 48

Slide 48 text

WHAT the goal WHY use case evidence hunch etc.

Slide 49

Slide 49 text

2. GETTING THE DATA

Slide 50

Slide 50 text

Is it a data dump or is it live? If it is live, then you are probably relying on an API (your own or external).

Slide 51

Slide 51 text

An API: Collectively, an API is a bit like a “styleguide” — it deﬁnes vocabularies and conventions

Slide 52

Slide 52 text

Basically, “Here’s the stuﬀ you can get, and the format you’ll get it in”

Slide 53

Slide 53 text

Getting the stuﬀ you want out: An API allows you to call methods. A method is a structured way for asking for a particular bit of information from an online service.

Slide 54

Slide 54 text

Something like, “Hey, I want some info about this thing” “How many?” “10, and be sure to include the picture bits”

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Don’t clean up API vomit!

Slide 57

Slide 57 text

If the service is currently being worked on by your team, establish a dialogue with them about this.

Slide 58

Slide 58 text

Types of questions I like to ask: What parameters can it have? How expensive is this? What can we compare this against?

Slide 59

Slide 59 text

If the answer is “no”… Explain what you want and why you want it. Let them ﬁgure out how ;-)

Slide 60

Slide 60 text

3. DESIGNING THE DATA

Slide 61

Slide 61 text

1. Sketch UI with pen & paper 2. Get the data in-page 3. Design the UI in-page

Slide 62

Slide 62 text

Design patterns for visualising personal data Part II Photo credit: number657 on Flickr

Slide 63

Slide 63 text

Feeds Answers the question “what’s been happening recently?”

Slide 64

Slide 64 text

Twitter, Facebook

Slide 65

Slide 65 text

Ranked Lists & Leaderboards Answers the question “who’s winning?”

Slide 66

Slide 66 text

Ranked lists & leaderboards: Foursquare, Last.fm

Slide 67

Slide 67 text

User-facing Stats Good for showing a user’s overall performance/usage and answers the question “How am I doing?”

Slide 68

Slide 68 text

User facing statistics: Flickr Pro, Amazon Author Central

Slide 69

Slide 69 text

Counters Good for showing less than three key statistics about a user, and answers the question “How am I doing?” at a glance.

Slide 70

Slide 70 text

Counters: Hype Machine, Twitter, Foursquare, Dribble, Lanyrd

Slide 71

Slide 71 text

Sparklines Good for showing a huge amount of data in small space, and can answer questions about trends within a sentence.

Slide 72

Slide 72 text

Sparklines: From Edward Tufte’s ‘Beautiful Evidence’, Flickr, Amazon

Slide 73

Slide 73 text

Line Graphs Good for showing continuous data and visualising trends. Line graphs are good for answering questions like “How did it look during ____?”

Slide 74

Slide 74 text

Line graph: Run Keeper, Withings Body Scale

Slide 75

Slide 75 text

Bar Charts Good for visually comparing discreet data and very versatile as the data in a bar chart can be ordered however you want. Great for answering questions like, “which one is___?”

Slide 76

Slide 76 text

Bar chart: Last.fm, Nike+, Brian Suda’s ‘Designing with Data’

Slide 77

Slide 77 text

Sentence (yes, the sentence!) Good for contextualising data in a conversational tone. Great for answering questions that could use a bit of personality.

Slide 78

Slide 78 text

Sentence: Huﬀduﬀer, Last.fm

Slide 79

Slide 79 text

Realtime Search Good for ﬁltering out signal in vast amounts of real-time noise. Answers the question “what is happening with x right now?”

Slide 80

Slide 80 text

Sentence: Twitter, Google

Slide 81

Slide 81 text

Favlikelovestar+1 Good for services that have lifestream data that people want to hug; use these for that visceral “I want to keep this! I love this!” response.

Slide 82

Slide 82 text

Favlikelovestar+1: Instagram, Favstar, Spotify

Slide 83

Slide 83 text

Reblah Good for services that want to cater to lazy usage. Responds to the impulse “I want to make this part of my identity too”

Slide 84

Slide 84 text

Reblah: Tumblr, Twitter

Slide 85

Slide 85 text

Thumbs & Stars Good for services that depend on ratings for good content to bubble to the top. Answers the question “what do people think is best”?

Slide 86

Slide 86 text

Thumbs & Stars: eBay, iTunes store, YouTube, Last.fm images

Slide 87

Slide 87 text

Notiﬁcations Good for important bits of real-time activity people don’t want to miss out on. Often fosters serendipity.

Slide 88

Slide 88 text

Notiﬁcations: Facebook, Google+, Android, Email

Slide 89

Slide 89 text

And remember to layer: At ﬁrst sight, reveal the bare minimum With contextual UI, reveal more For the discerning, link to the source

Slide 90

Slide 90 text

What: re-envision Shazam’s tagged track UI, using some of the patterns we just talked about. Why: we could use any music API out there to show more relevant data about what you just found/remembered. SKETCH IT!

Slide 91

Slide 91 text

SKETCH IT!

Slide 92

Slide 92 text

SKETCH IT!

Slide 93

Slide 93 text

SKETCH IT!

Slide 94

Slide 94 text

Personal & proﬁle data Part III

Slide 95

Slide 95 text

1. IN ‘N OUT DATA

Slide 96

Slide 96 text

Home: reﬂecting incoming data

Slide 97

Slide 97 text

Home: Feedville. Population, all of us.

Slide 98

Slide 98 text

Proﬁle: reﬂecting outgoing data

Slide 99

Slide 99 text

Proﬁle: new Facebook

Slide 100

Slide 100 text

Take a minute to remember personal editorial.

Slide 101

Slide 101 text

Take a minute to remember personal editorial. Proﬁle: MySpace circa 2006

Slide 102

Slide 102 text

2. IT’S ALL CONTEXT, BABY

Slide 103

Slide 103 text

ABOUT THE: Individual Aggregate ON: Goal-driven device Browse-based device phone PC iPad TV me friends group network

Slide 104

Slide 104 text

2. CASES

Slide 105

Slide 105 text

Logged out, looking at some data Logged in, looking at my data Logged in, looking at someone else’s data Logged out, looking at no data (yet) Logged in, looking at where my data will go Logged in, looking at where someone else’s data will go DATA IS PRESENT NO DATA YET! ANONYMOUS MINE SOMEONE ELSE

Slide 106

Slide 106 text

Tip for dealing with cases: Keep your own UI gallery

Slide 107

Slide 107 text

Cases: Logged in, looking at where my data will go

Slide 108

Slide 108 text

Cases: logged in, looking at my data

Slide 109

Slide 109 text

Cases: logged in, looking at someone else with no data yet

Slide 110

Slide 110 text

Another tip: Lay oﬀ the lorum ipsum.

Slide 111

Slide 111 text

SKETCH IT! What: re-envision an eBay seller proﬁle screen, for at least 2 cases. Why: There’s a ton of data at hand, and very little revealed about this person you’re about to fork over cash money to.

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

Time Part IV Photo credit: alphadesigner on Flickr

Slide 115

Slide 115 text

Real time Recent past (~1 day ago) Past (~1 week ago) History (archives) Now Joined

Slide 116

Slide 116 text

Realtime

Slide 117

Slide 117 text

Recent past & Past

Slide 118

Slide 118 text

History

Slide 119

Slide 119 text

Time shifting

Slide 120

Slide 120 text

SKETCH IT! What: would Twitter look like if it showed what you’d been up to for the last few months as well? Why: because nobody’s done it yet :)

Slide 121

Slide 121 text

Our data trails are getting long Part V Photo credit: Gonzak on Flickr

Slide 122

Slide 122 text

How do we organise these long data trails?

Slide 123

Slide 123 text

We’ve all been so distracted by The Now that we’ve hardly noticed the beautiful comet tails of personal history trailing in our wake. – Matthew Ogle

Slide 124

Slide 124 text

We need to curate, look again.

Slide 125

Slide 125 text

Architecture of serendipity – Frank Chimero

Slide 126

Slide 126 text

A ﬁnal challenge…

Slide 127

Slide 127 text

1. THEMES

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

2. ANNOTATIONS

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

3. RELATIONSHIPS

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

4. ARRANGEMENT

Slide 134

Slide 134 text

5. MAINTENANCE

Slide 135

Slide 135 text

Thanks for coming along!

Slide 136

Slide 136 text

Contact & questions: Real-time: @han Archival: han@hannahdonovan.com