• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Information Design for an Instrumented world
 

Information Design for an Instrumented world

on

  • 3,512 views

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

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.

Statistics

Views

Total Views
3,512
Views on SlideShare
3,482
Embed Views
30

Actions

Likes
17
Downloads
77
Comments
1

3 Embeds 30

http://lanyrd.com 17
https://podio.com 12
http://us-w1.rockmelt.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I dont know but the 1st design which very this simple design is inspiring me more n more! n it has great attraction! whether all are very inspiring, like this great collection.
    Very Nice designed!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information Design for an Instrumented world Information Design for an Instrumented world Presentation Transcript

    • 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 flickr
    • 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 offer.– 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 reflect 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 figure 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 defines vocabularies andconventions
    • Basically, “Here’s the stuff you can get, andthe format you’ll get it in”
    • Getting the stuff 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 figure 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: Huffduffer, Last.fm
    • Realtime SearchGood for filtering 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
    • NotificationsGood for important bits of real-time activitypeople don’t want to miss out on. Oftenfosters 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 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
    • T ! I C H ETS K
    • T ! I C H ETS K
    • 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 personaleditorial.
    • Take a minute to remember personaleditorial.Profile: 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 off the lorum ipsum.
    • What: re-envision an eBay seller profilescreen, 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 final challenge…
    • 1.THEMES
    • 2.ANNOTATIONS
    • 3.RELATIONSHIPS
    • 4.ARRANGEMENT
    • 5.MAINTENANCE
    • Thanks for coming along!
    • Contact & questions:Real-time: @hanArchival: han@hannahdonovan.com