Pro Yearly is on sale from $80 to $50! »

Designing Human-Centered Visualizations

Designing Human-Centered Visualizations

Approaching human-centered visualizations from three different human perspectives: anatomy and cognition, behavior, and emotion.

708f993eda474c9b86face222f2fe90e?s=128

Benjamin Wiederkehr

February 22, 2013
Tweet

Transcript

  1. Designing Human-Centered Visualizations presented by Interactive Things 1

  2. presented by Interactive Things Perzeption & Anatomie 2 Human-centered in

    Sinne von
  3. Stephen Few: Tapping the Power of Visual Perception

  4. Stephen Few: Tapping the Power of Visual Perception

  5. Jacques Bertin: Semiology of Graphics

  6. presented by Interactive Things The idea for information design is:

    Don't get it original, get it right. 5 Edward Tufte “
  7. presented by Interactive Things Kognition & Verhalten 6 Human-centered in

    Sinne von
  8. presented by Interactive Things 7

  9. presented by Interactive Things 7

  10. presented by Interactive Things 7 Einstellung

  11. presented by Interactive Things 7 Einstellung Tätigkeit

  12. presented by Interactive Things 7 Einstellung Tätigkeit Fähigkeit

  13. presented by Interactive Things 7 Einstellung Tätigkeit Fähigkeit Fertigkeit

  14. presented by Interactive Things 7 Einstellung Motivation Tätigkeit Fähigkeit Fertigkeit

  15. presented by Interactive Things 8

  16. presented by Interactive Things 8

  17. presented by Interactive Things 8 Struktur

  18. presented by Interactive Things 8 Struktur Textur

  19. presented by Interactive Things 8 Struktur Textur Qualität

  20. presented by Interactive Things 8 Struktur Textur Qualität Quantität

  21. presented by Interactive Things 8 Struktur Format Textur Qualität Quantität

  22. presented by Interactive Things 8 Struktur Format Textur Qualität Quantität

  23. Aufwand Zeit

  24. Recherche Aufwand Zeit

  25. Recherche Konzeption Aufwand Zeit

  26. Recherche Konzeption Design Aufwand Zeit

  27. Recherche Konzeption Design Implementation Aufwand Zeit

  28. Recherche Konzeption Design Implementation Aufwand Zeit Projekt Management

  29. Aufwand Zeit

  30. presented by Interactive Things 11 ZIS HelloWallet HDRO National Geographic

    Thumbtack WEF EUREX Swisscom NZZ
  31. Ville Vivante City of Geneva

  32. Ville Vivante City of Geneva

  33. Ville Vivante City of Geneva

  34. Ville Vivante City of Geneva

  35. Ville Vivante City of Geneva Recherche

  36. Ville Vivante City of Geneva Konzeption Recherche

  37. Ville Vivante City of Geneva Konzeption Recherche Design

  38. Ville Vivante City of Geneva Konzeption Recherche Implementation Design

  39. Ville Vivante City of Geneva Dieser Moment!

  40. Ecoplace Dashboard AXA

  41. Ecoplace Dashboard AXA

  42. Ecoplace Dashboard AXA

  43. Ecoplace Dashboard AXA

  44. Ecoplace Dashboard AXA Recherche

  45. Ecoplace Dashboard AXA Recherche Konzeption

  46. Ecoplace Dashboard AXA Recherche Design Konzeption

  47. Ecoplace Dashboard AXA Implementation Recherche Design Konzeption

  48. Ecoplace Dashboard AXA Das grosse Warten

  49. WIDE UNESCO

  50. WIDE UNESCO

  51. WIDE UNESCO

  52. WIDE UNESCO

  53. WIDE UNESCO Research

  54. WIDE UNESCO Research Conception

  55. WIDE UNESCO Research Design Conception

  56. WIDE UNESCO Research Design Implementation Conception

  57. presented by Interactive Things 18 Also habe ich einige Freunde

    befragt…
  58. presented by Interactive Things 19

  59. presented by Interactive Things 19 design questions testing user visual

    ask story find sketches create develop make question get identify research ideas iterate define different explore set wireframe side iteration start refine interesting finding use technical sketch requirements structure goals look sketching form gathering board interface adjustments server foundations client technology level public traditional new facts clean organize draft prototype early figure visualizations evaluate standard changes later points ways key build review insights interaction translate processing tableau patterns away exploration visually support narrative process hierarchy project representation refinement know feel hand one graphics combination tweak analysis strategic idea concepting white ideation experience scenarios drawings assessments flow diagrams lot font color studies mechanics tests layered compositions interactivity motion copywriting audio communication perform alpha quality assurance performance beta usability surveys promotion relation campaigns ambassador outreach relations methods social media channels curious discover passionate investigate inspect retrieve models execute solutions improve deliver present final document describe main findings insight rapid exploratory minimalist instantiations quickly cycle big smaller feedback fresh perspectives evaluation talk audience deployment environment involve stakeholder play analyze learn view draw possible visualizing answers evolve frames functionality method meet expected useful offer tell craft deploy launch celebrate enjoy remind love parse normalize properties latent structures massage tendency encode known methodologies visualize r relationships something break tools represent experiment algorithms apply inspiration areas colors fonts alignment interviewing views asking thumbnail test composition answering gather additional sources reading everything spot holes unique intent clarifying complex explaining highlighting trend supporting argument great identifying problems reality check collaborative reworking discovering accurate narratives creating solidify hierarchical mood building understandable important information choosing format determining approach phase releasing world personally attached vague ready attempts problem worth publishing counting words sorting themes illustrator high contents raw preliminary grip explorations tools, excel produce many highlight individual parts sense texture throw tweaking comes understand getting touch progress custom made functional prototypes mostly adobe flash playing java html 5 techniques, frameworks d3 raphaël puzzle solving arrange imagining certain things several versions dialogue come quick conclusion conversation leads options sophistication cleaning, reformatting, fixing, calculating visible prototyping answer stories basic approaches care details definition acquisition sets, mining hotspots focuses data, interactions looking prior examples paper code mockups range concepts development delivery archive engagement iterations
  60. presented by Interactive Things 20 …und das Beste davon für

    euch zusammengestellt.
  61. presented by Interactive Things 21

  62. presented by Interactive Things 21 Leider ohne Frankenstein. Sorry, Carlo.

  63. presented by Interactive Things 22

  64. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals
  65. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data
  66. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data
  67. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights
  68. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas
  69. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives
  70. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives Create the specification for implementation. Design 7 Visual design Functional design Technical design Experience design
  71. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives Create the specification for implementation. Design 7 Visual design Functional design Technical design Experience design Build a flawlessly working application. Develop 8 Refine Polish Build Iterate
  72. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives Create the specification for implementation. Design 7 Visual design Functional design Technical design Experience design Build a flawlessly working application. Develop 8 Refine Polish Build Iterate Ensure the result is readable and usable. Evaluate 9 Usability testing Design evaluation Expert review Usage observation
  73. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives Create the specification for implementation. Design 7 Visual design Functional design Technical design Experience design Build a flawlessly working application. Develop 8 Refine Polish Build Iterate Ensure the result is readable and usable. Evaluate 9 Usability testing Design evaluation Expert review Usage observation Finalize the project and celebrate. Deliver 10 Launch Promote Deploy Document
  74. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives Create the specification for implementation. Design 7 Visual design Functional design Technical design Experience design Build a flawlessly working application. Develop 8 Refine Polish Build Iterate Ensure the result is readable and usable. Evaluate 9 Usability testing Design evaluation Expert review Usage observation Finalize the project and celebrate. Deliver 10 Launch Promote Deploy Document
  75. presented by Interactive Things 22 Have a shared vision for

    the project. Inform 1 Content Requirements Audience Goals Have the data ready for analysis and usage. Prepare 2 Gather the data Clean the data Format the data Mine the data Understand the texture of the data. Explore 3 Ask questions of the data Inspect the data Explore the data Analyze the data Understand the contents of the data. Discover 4 Indentify problems Answer questions Understand the data Indentify insights Trying out and testing ideas visually. Sketch 5 Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Verifiy the selected visualization method. Question 6 Review Ask questions Get feedback Get perspectives Create the specification for implementation. Design 7 Visual design Functional design Technical design Experience design Build a flawlessly working application. Develop 8 Refine Polish Build Iterate Ensure the result is readable and usable. Evaluate 9 Usability testing Design evaluation Expert review Usage observation Finalize the project and celebrate. Deliver 10 Launch Promote Deploy Document
  76. presented by Interactive Things Emotion & Meinung 23 Human-centered in

    Sinne von
  77. presented by Interactive Things Stories are important cognitive events, for

    they encapsulate, into one compact package, information, knowledge, context, & emotion. 24 Donald Norman “
  78. Charles Joseph Minard: Napoleon's March to Russia 1812– 1813

  79. Averyanov Alexander: The Attack of Moscow Regiment

  80. WIDE UNESCO

  81. WIDE UNESCO

  82. WIDE UNESCO

  83. WIDE UNESCO

  84. presented by Interactive Things 28 Muss eine Visualisierung explizit sein

    um zu berühren?
  85. Clara Kayser-Bril, Nicolas Kayser-Bril and Marion Kotlarski: 100 years of

    world cuisine
  86. Peter Crnokrak: Everyone Ever In The World, http://ixt.gs/11XvYAD

  87. Peter Crnokrak: Everyone Ever In The World, http://ixt.gs/11XvYAD

  88. presented by Interactive Things 31 Muss sie berühren um aussagekräftig

    zu sein?
  89. CNN & Stamen: Home and Away, http://ixt.gs/12bKW4T

  90. CNN & Stamen: Home and Away, http://ixt.gs/12bKW4T

  91. CNN & Stamen: Home and Away, http://ixt.gs/12bKW4T

  92. Fernanda Viegas & Martin Wattenberg: Wind Map, http://hint.fm/wind

  93. Fernanda Viegas & Martin Wattenberg: Wind Map, http://hint.fm/wind

  94. The New York Times: What Could Disappear, http://nyti.ms/SktOCY

  95. The New York Times: What Could Disappear, http://nyti.ms/SktOCY

  96. The New York Times: What Could Disappear, http://nyti.ms/SktOCY

  97. The New York Times: What Could Disappear, http://nyti.ms/SktOCY

  98. presented by Interactive Things 35 Die besten Geschichten können auf

    einen Gedanken reduziert werden.
  99. presented by Interactive Things 36

  100. presented by Interactive Things Vielen Dank! Benjamin Wiederkehr interactivethings.com 36