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 w...
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 ...
~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-ti...
~2005   Web APIs become popular        Moore’s law applied to data storage        Big data        Ability to build real-ti...
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 tow...
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...
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 e...
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 increasing...
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 bi...
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 d...
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...
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 coul...
Sentence: Huffduffer, Last.fm
Realtime SearchGood for filtering out signal in vast amountsof real-time noise. Answers the question“what is happening with...
Sentence: Twitter, Google
Favlikelovestar+1Good for services that have lifestream datathat people want to hug; use these for thatvisceral “I want to...
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 t...
Reblah: Tumblr, Twitter
Thumbs & StarsGood for services that depend on ratings forgood content to bubble to the top. Answersthe question “what do ...
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...
What: re-envision Shazam’s tagged track UI,using some of the patterns we just talkedabout.Why: we could use any music API ...
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            ...
2.CASES
ANONYMOUS                   MINE              SOMEONE ELSE DATA IS   Logged out, looking   Logged in, looking at   Logged ...
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 rev...
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 ...
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...
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
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Upcoming SlideShare
Loading in...5
×

Information Design for an Instrumented world

3,511
-1

Published on

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.

Published in: Design, Technology, Business
1 Comment
16 Likes
Statistics
Notes
  • 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!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,511
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
83
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

Information Design for an Instrumented world

  1. 1. Information Design for anInstrumented WorldHannah Donovan, 10 October 2011
  2. 2. Hello! I’m Hannah
  3. 3. Who are you?
  4. 4. I have a secret to tell you.
  5. 5. “The solution is the problem.”
  6. 6. What about you?
  7. 7. What you’re not going to learn this morning.
  8. 8. By albyantoniazzi on flickr
  9. 9. 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
  10. 10. Photo credit: Alex Pounds
  11. 11. Olivier Gillet says:MAKEPhoto credit: Alex Pounds
  12. 12. Olivier Gillet says:MAKE APhoto credit: Alex Pounds
  13. 13. Olivier Gillet says:MAKE A POINT.Photo credit: Alex Pounds
  14. 14. So what are we going to explore today?
  15. 15. The details.
  16. 16. The details are not the details. They make the design.– Charles Eames
  17. 17. We people, we have a lot of details now. Welive in an instrumented world
  18. 18. Most of our instrumented world is measuredin terms of attention data.
  19. 19. ACTIVE PASSIVE posting scrobblingchecking in location tracking tweeting health monitoring
  20. 20. You guys…This is kind of crazy.
  21. 21. New conceptual breakthroughs areinvariably driven by thedevelopment of new technologies.– Don NormanPhoto credit: Piemont Share on Flickr
  22. 22. ~2005~2010
  23. 23. ~2005 Web APIs become popular~2010
  24. 24. ~2005 Web APIs become popular Moore’s law applied to data storage~2010
  25. 25. ~2005 Web APIs become popular Moore’s law applied to data storage Big data~2010
  26. 26. ~2005 Web APIs become popular Moore’s law applied to data storage Big data Ability to build real-time interfaces~2010
  27. 27. ~2005 Web APIs become popular Moore’s law applied to data storage Big data Ability to build real-time interfaces~2010 Cloud computing
  28. 28. Our job is to make sense of thisinstrumented world and all theinformation in it.
  29. 29. 1.COMMON FORMATS AND PATTERNSARE EMERGING
  30. 30. 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
  31. 31. 2.THE AMOUNT OF PERSONAL DATACAN BE OVERWHELMING
  32. 32. For us: spoiled for choice, we have moredecisions to make than ever before.For users: signal vs. noise is becoming acommon problem.
  33. 33. 3.DATA HAS DISTINCT TIMING
  34. 34. 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.
  35. 35. 4.OUR DATA TRAILS ARE STARTING TOGET LONG
  36. 36. For us: we’re faced with a new challenge ofhow to reflect this meaningfully to usersFor users: they are becoming increasinglyaware of their history
  37. 37. OUR TOOLKITPart I
  38. 38. 1.UNDERSTANDING THE DATA
  39. 39. Use the WW brief:What do you want, and why do you want it?
  40. 40. 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).
  41. 41. WHAT WHYthe goal use case evidence hunch etc.
  42. 42. 2.GETTING THE DATA
  43. 43. Is it a data dump or is it live?If it is live, then you are probably relying onan API (your own or external).
  44. 44. An API:Collectively, an API is a bit like a“styleguide” — it defines vocabularies andconventions
  45. 45. Basically, “Here’s the stuff you can get, andthe format you’ll get it in”
  46. 46. 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.
  47. 47. Something like, “Hey, I want some info aboutthis thing” “How many?” “10, and be sure toinclude the picture bits”
  48. 48. Don’t clean up API vomit!
  49. 49. If the service is currently being workedon by your team, establish a dialoguewith them about this.
  50. 50. Types of questions I like to ask:What parameters can it have?How expensive is this?What can we compare this against?
  51. 51. If the answer is “no”…Explain what you want and why youwant it. Let them figure out how ;-)
  52. 52. 3.DESIGNING THE DATA
  53. 53. 1. Sketch UI with pen & paper2. Get the data in-page3. Design the UI in-page
  54. 54. Design patterns for visualising personal data Part IIPhoto credit: number657 on Flickr
  55. 55. FeedsAnswers the question “what’s beenhappening recently?”
  56. 56. Twitter, Facebook
  57. 57. Ranked Lists & LeaderboardsAnswers the question “who’s winning?”
  58. 58. Ranked lists & leaderboards: Foursquare, Last.fm
  59. 59. User-facing StatsGood for showing a user’s overallperformance/usage and answers thequestion “How am I doing?”
  60. 60. User facing statistics: Flickr Pro, Amazon Author Central
  61. 61. CountersGood for showing less than three keystatistics about a user, and answers thequestion “How am I doing?” at a glance.
  62. 62. Counters: Hype Machine, Twitter, Foursquare, Dribble, Lanyrd
  63. 63. SparklinesGood for showing a huge amount of data insmall space, and can answer questions abouttrends within a sentence.
  64. 64. Sparklines: From Edward Tufte’s ‘Beautiful Evidence’, Flickr, Amazon
  65. 65. Line GraphsGood for showing continuous data andvisualising trends. Line graphs are good foranswering questions like “How did it lookduring ____?”
  66. 66. Line graph: Run Keeper, Withings Body Scale
  67. 67. 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___?”
  68. 68. Bar chart: Last.fm, Nike+, Brian Suda’s ‘Designing with Data’
  69. 69. Sentence (yes, the sentence!)Good for contextualising data in aconversational tone. Great for answeringquestions that could use a bit of personality.
  70. 70. Sentence: Huffduffer, Last.fm
  71. 71. Realtime SearchGood for filtering out signal in vast amountsof real-time noise. Answers the question“what is happening with x right now?”
  72. 72. Sentence: Twitter, Google
  73. 73. 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.
  74. 74. Favlikelovestar+1: Instagram, Favstar, Spotify
  75. 75. ReblahGood for services that want to cater to lazyusage. Responds to the impulse “I want tomake this part of my identity too”
  76. 76. Reblah: Tumblr, Twitter
  77. 77. Thumbs & StarsGood for services that depend on ratings forgood content to bubble to the top. Answersthe question “what do people think is best”?
  78. 78. Thumbs & Stars: eBay, iTunes store, YouTube, Last.fm images
  79. 79. NotificationsGood for important bits of real-time activitypeople don’t want to miss out on. Oftenfosters serendipity.
  80. 80. Notifications: Facebook, Google+, Android, Email
  81. 81. And remember to layer:At first sight, reveal the bare minimumWith contextual UI, reveal moreFor the discerning, link to the source
  82. 82. 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
  83. 83. T ! I C H ETS K
  84. 84. T ! I C H ETS K
  85. 85. T ! I C H ETS K
  86. 86. Personal & profile dataPart III
  87. 87. 1.IN ‘N OUT DATA
  88. 88. Home: reflecting incoming data
  89. 89. Home: Feedville. Population, all of us.
  90. 90. Profile: reflecting outgoing data
  91. 91. Profile: new Facebook
  92. 92. Take a minute to remember personaleditorial.
  93. 93. Take a minute to remember personaleditorial.Profile: MySpace circa 2006
  94. 94. 2.IT’S ALL CONTEXT, BABY
  95. 95. 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
  96. 96. 2.CASES
  97. 97. 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
  98. 98. Tip for dealing with cases:Keep your own UI gallery
  99. 99. Cases: Logged in, looking at where my data will go
  100. 100. Cases: logged in, looking at my data
  101. 101. Cases: logged in, looking at someone else with no data yet
  102. 102. Another tip:Lay off the lorum ipsum.
  103. 103. 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
  104. 104. TimePart IVPhoto credit: alphadesigner on Flickr
  105. 105. Joined History (archives) Past (~1 week ago) Recent past (~1 day ago)Now Real time
  106. 106. Realtime
  107. 107. Recent past & Past
  108. 108. History
  109. 109. Time shifting
  110. 110. 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
  111. 111. Our data trails are getting long Part VPhoto credit: Gonzak on Flickr
  112. 112. How do we organise these long data trails?
  113. 113. We’ve all been sodistracted by The Nowthat we’ve hardly noticedthe beautiful comet tailsof personal historytrailing in our wake.– Matthew Ogle
  114. 114. We need to curate, look again.
  115. 115. Architecture ofserendipity– Frank Chimero
  116. 116. A final challenge…
  117. 117. 1.THEMES
  118. 118. 2.ANNOTATIONS
  119. 119. 3.RELATIONSHIPS
  120. 120. 4.ARRANGEMENT
  121. 121. 5.MAINTENANCE
  122. 122. Thanks for coming along!
  123. 123. Contact & questions:Real-time: @hanArchival: han@hannahdonovan.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×