Designing Human-Centered Visualizations

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

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