Information Design for an Instrumented world

Information Design for anInstrumented WorldHannah Donovan, 10 October 2011

Hello! I’m Hannah

Who are you?

I have a secret to tell you.

“The solution is the problem.”

What about you?

What you’re not going to learn this morning.

By albyantoniazzi on ﬂickr

We need to stop grasping for theperfect visualization and return tothe basic language of charts andgraphs. Only then can we begin touncover the relationships the datahas to oﬀer.– Brian SudaPhoto credit: andré.luís on Flickr

Photo credit: Alex Pounds

Olivier Gillet says:MAKEPhoto credit: Alex Pounds

Olivier Gillet says:MAKE APhoto credit: Alex Pounds

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

So what are we going to explore today?

The details.

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

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

Most of our instrumented world is measuredin terms of attention data.

ACTIVE PASSIVE posting scrobblingchecking in location tracking tweeting health monitoring

You guys…This is kind of crazy.

New conceptual breakthroughs areinvariably driven by thedevelopment of new technologies.– Don NormanPhoto credit: Piemont Share on Flickr

~2005~2010

~2005 Web APIs become popular~2010

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

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

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

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

Our job is to make sense of thisinstrumented world and all theinformation in it.

1.COMMON FORMATS AND PATTERNSARE EMERGING

For us: be aware and inquisitive, so we canchoose the right tool for the jobFor users: they will expect certain things towork in certain ways

2.THE AMOUNT OF PERSONAL DATACAN BE OVERWHELMING

For us: spoiled for choice, we have moredecisions to make than ever before.For users: signal vs. noise is becoming acommon problem.

3.DATA HAS DISTINCT TIMING

For us: we need to have sharp presentationskills for conveying the speed of the dataFor users: they care, and will often expectthings to be in real-time.

4.OUR DATA TRAILS ARE STARTING TOGET LONG

For us: we’re faced with a new challenge ofhow to reﬂect this meaningfully to usersFor users: they are becoming increasinglyaware of their history

OUR TOOLKITPart I

1.UNDERSTANDING THE DATA

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

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).

WHAT WHYthe goal use case evidence hunch etc.

2.GETTING THE DATA

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

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

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

Getting the stuﬀ you want out:An API allows you to call methods. Amethod is a structured way for asking for aparticular bit of information from an onlineservice.

Something like, “Hey, I want some info aboutthis thing” “How many?” “10, and be sure toinclude the picture bits”

Don’t clean up API vomit!

If the service is currently being workedon by your team, establish a dialoguewith them about this.

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

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

3.DESIGNING THE DATA

1. Sketch UI with pen & paper2. Get the data in-page3. Design the UI in-page

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

FeedsAnswers the question “what’s beenhappening recently?”

Twitter, Facebook

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

Ranked lists & leaderboards: Foursquare, Last.fm

User-facing StatsGood for showing a user’s overallperformance/usage and answers thequestion “How am I doing?”

User facing statistics: Flickr Pro, Amazon Author Central

CountersGood for showing less than three keystatistics about a user, and answers thequestion “How am I doing?” at a glance.

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

SparklinesGood for showing a huge amount of data insmall space, and can answer questions abouttrends within a sentence.

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

Line GraphsGood for showing continuous data andvisualising trends. Line graphs are good foranswering questions like “How did it lookduring ____?”

Line graph: Run Keeper, Withings Body Scale

Bar ChartsGood for visually comparing discreet dataand very versatile as the data in a bar chartcan be ordered however you want. Great foranswering questions like, “which one is___?”

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

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

Sentence: Huﬀduﬀer, Last.fm

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

Sentence: Twitter, Google

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

Favlikelovestar+1: Instagram, Favstar, Spotify

ReblahGood for services that want to cater to lazyusage. Responds to the impulse “I want tomake this part of my identity too”

Reblah: Tumblr, Twitter

Thumbs & StarsGood for services that depend on ratings forgood content to bubble to the top. Answersthe question “what do people think is best”?

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

NotiﬁcationsGood for important bits of real-time activitypeople don’t want to miss out on. Oftenfosters serendipity.

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

And remember to layer:At ﬁrst sight, reveal the bare minimumWith contextual UI, reveal moreFor the discerning, link to the source

What: re-envision Shazam’s tagged track UI,using some of the patterns we just talkedabout.Why: we could use any music API out thereto show more relevant data about what youjust found/remembered. IT ! C H ET S K

T ! I C H ETS K

Personal & proﬁle dataPart III

1.IN ‘N OUT DATA

Home: reﬂecting incoming data

Home: Feedville. Population, all of us.

Proﬁle: reﬂecting outgoing data

Proﬁle: new Facebook

Take a minute to remember personaleditorial.

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

2.IT’S ALL CONTEXT, BABY

ON: Goal-driven device phone PC ds up rkABOUT THE: ien ro et wo me fr g n Individual Aggregate iPad TV Browse-based device

2.CASES

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

Tip for dealing with cases:Keep your own UI gallery

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

Cases: logged in, looking at my data

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

Another tip:Lay oﬀ the lorum ipsum.

What: re-envision an eBay seller proﬁlescreen, for at least 2 cases.Why: There’s a ton of data at hand, and verylittle revealed about this person you’re aboutto fork over cash money to. T ! I C H ET S K

TimePart IVPhoto credit: alphadesigner on Flickr

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

Realtime

Recent past & Past

History

Time shifting

What: would Twitter look like if it showedwhat you’d been up to for the last fewmonths as well?Why: because nobody’s done it yet :) T ! I C H ET S K

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

How do we organise these long data trails?

We’ve all been sodistracted by The Nowthat we’ve hardly noticedthe beautiful comet tailsof personal historytrailing in our wake.– Matthew Ogle

We need to curate, look again.

Architecture ofserendipity– Frank Chimero

A ﬁnal challenge…

1.THEMES

2.ANNOTATIONS

3.RELATIONSHIPS

4.ARRANGEMENT

5.MAINTENANCE

Thanks for coming along!

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

Information Design for an Instrumented world

by Hannah Donovan

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 18

Statistics