Embed Size (px)
DESCRIPTION
In a world where all our online interactions – and increasingly offline ones too – are logged and measured, how do designers integrate and present this information in a meaningful way?Whether it be real-time Twitter search results, Last.fm listening history or personal Fitbit stats, we now expect services to serve up, compare and contextualize the most interesting bits of our behaviour from the scores of data they collect about us.If you want to add stats, graphs and other bits of lifestream data to your web app, this workshop is for you. Leave with an understanding of how to wrestle with interaction design challenges such as: dealing with too much/too little user-generated data; what to show different user types (e.g. logged in/out users); when to show aggregate vs. individual datasets and more.
Citation preview
Information Design for an Instrumented 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 flickr
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 offer.
– Brian Suda
Photo credit: andré.luís on Flickr
Photo credit: Alex Pounds
Olivier Gillet says:
MAKE
Photo credit: Alex Pounds
Olivier Gillet says:
MAKE A
Photo 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. We live in an instrumented world
Most of our instrumented world is measured in terms of attention data.
ACTIVE PASSIVE
scrobblinglocation trackinghealth monitoring
posting checking in
tweeting
You guys…
This is kind of crazy.
New conceptual breakthroughs are invariably driven by the development of new technologies.
– Don Norman
Photo credit: Piemont Share on Flickr
~2005
~2010
Web APIs become popular~2005
~2010
Web APIs become popular
Moore’s law applied to data storage
~2005
~2010
Web APIs become popular
Moore’s law applied to data storage
Big data
~2005
~2010
Web APIs become popular
Moore’s law applied to data storage
Big data
Ability to build real-time interfaces
~2005
~2010
Web APIs become popular
Moore’s law applied to data storage
Big data
Ability to build real-time interfaces
Cloud computing
~2005
~2010
Our job is to make sense of this instrumented world and all the information in it.
1.
COMMON FORMATS AND PATTERNS ARE EMERGING
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
2.
THE AMOUNT OF PERSONAL DATA CAN BE OVERWHELMING
For us: spoiled for choice, we have more decisions to make than ever before.
For users: signal vs. noise is becoming a common problem.
3.
DATA HAS DISTINCT TIMING
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.
4.
OUR DATA TRAILS ARE STARTING TO GET LONG
For us: we’re faced with a new challenge of how to reflect this meaningfully to users
For users: they are becoming increasingly aware 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 figure out how to do it).
WHAT
the goal
WHY
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 on an API (your own or external).
An API:
Collectively, an API is a bit like a “styleguide” — it defines vocabularies and conventions
Basically, “Here’s the stuff you can get, and the format you’ll get it in”
Getting the stuff 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.
Something like, “Hey, I want some info about this thing” “How many?” “10, and be sure to include the picture bits”
Don’t clean up API vomit!
If the service is currently being worked on by your team, establish a dialogue with 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 you want it. Let them figure out how ;-)
3.
DESIGNING THE DATA
1. Sketch UI with pen & paper
2. Get the data in-page
3. Design the UI in-page
Design patterns for visualising personal dataPart II
Photo credit: number657 on Flickr
Feeds
Answers the question “what’s been happening recently?”
Twitter, Facebook
Ranked Lists & Leaderboards
Answers the question “who’s winning?”
Ranked lists & leaderboards: Foursquare, Last.fm
User-facing Stats
Good for showing a user’s overall performance/usage and answers the question “How am I doing?”
User facing statistics: Flickr Pro, Amazon Author Central
Counters
Good for showing less than three key statistics about a user, and answers the question “How am I doing?” at a glance.
Counters: Hype Machine, Twitter, Foursquare, Dribble, Lanyrd
Sparklines
Good for showing a huge amount of data in small space, and can answer questions about trends within a sentence.
Sparklines: From Edward Tufte’s ‘Beautiful Evidence’, Flickr, Amazon
Line Graphs
Good for showing continuous data and visualising trends. Line graphs are good for answering questions like “How did it look during ____?”
Line graph: Run Keeper, Withings Body Scale
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___?”
Bar chart: Last.fm, Nike+, Brian Suda’s ‘Designing with Data’
Sentence (yes, the sentence!)
Good for contextualising data in a conversational tone. Great for answering questions that could use a bit of personality.
Sentence: Huffduffer, Last.fm
Realtime Search
Good for filtering out signal in vast amounts of real-time noise. Answers the question “what is happening with x right now?”
Sentence: Twitter, Google
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.
Favlikelovestar+1: Instagram, Favstar, Spotify
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”
Reblah: Tumblr, Twitter
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”?
Thumbs & Stars: eBay, iTunes store, YouTube, Last.fm images
Notifications
Good for important bits of real-time activity people don’t want to miss out on. Often fosters serendipity.
Notifications: Facebook, Google+, Android, Email
And remember to layer:
At first 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 talked about.
Why: we could use any music API out there to show more relevant data about what you just found/remembered.
SKETCH IT!
SKETCH IT!
SKETCH IT!
SKETCH IT!
Personal & profile dataPart III
1.
IN ‘N OUT DATA
Home: reflecting incoming data
Home: Feedville. Population, all of us.
Profile: reflecting outgoing data
Profile: new Facebook
Take a minute to remember personal editorial.
Take a minute to remember personal editorial.
Profile: MySpace circa 2006
2.
IT’S ALL CONTEXT, BABY
ABOUT THE:Individual Aggregate
ON:Goal-driven device
Browse-based device
phone
PC
iPad
TV
me friends grou
pnetw
ork
2.
CASES
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 ISPRESENT
NO DATA YET!
ANONYMOUS MINE SOMEONE ELSE
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 off the lorum ipsum.
SKETCH IT!
What: re-envision an eBay seller profile 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.
TimePart IV
Photo credit: alphadesigner on Flickr
Real time
Recent past (~1 day ago)
Past (~1 week ago)
History (archives)
Now
Joined
Realtime
Recent past & Past
History
Time shifting
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 :)
Our data trails are getting longPart V
Photo credit: Gonzak on Flickr
How do we organise these long data trails?
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
We need to curate, look again.
Architecture of serendipity
– Frank Chimero
A final challenge…
1.
THEMES
2.
ANNOTATIONS
3.
RELATIONSHIPS
4.
ARRANGEMENT
5.
MAINTENANCE
Thanks for coming along!
