Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Information Design for an Instrumented world


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, 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
  • 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  Yes  No
    Your message goes here

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.
  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
  32. 32. For us: spoiled for choice, we have moredecisions to make than ever before.For users: signal vs. noise is becoming acommon problem.
  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.
  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
  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 ;-)
  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,
  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:, 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,
  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, 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: