Designing User-Centered Visualizations

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

Transcript

1. Designing User-Centered Visualizations presented by Interactive Things 1
2. presented by Interactive Things Foundation 2 User-centered based on human anatomy and cognition
3. presented by Interactive Things Visual Practices 3 Information Design Information Visualization Data Visualization Scientific Visualization Visual Analytics
4. presented by Interactive Things Visual Practices 4 Information Design Information Visualization Data Visualization Scientific Visualization Visual Analytics
5. Massimo Vignelli: 1972 NYC Subway Map, http://flic.kr/p/81V1M8
6. presented by Interactive Things Visual Practices 6 Information Design Information Visualization Data Visualization Scientific Visualization Visual Analytics
7. Moritz Stefaner: Map Your Moves, http://ixt.gs/WTuYqh
8. presented by Interactive Things Visual Practices 8 Information Design Information Visualization Data Visualization Scientific Visualization Visual Analytics
9. Jan Willem Tulp: The Data Centric Universe, http://ixt.gs/11kvezK
10. presented by Interactive Things Visual Practices 10 Information Design Information Visualization Data Visualization Scientific Visualization Visual Analytics
11. Juliana Freire: VisTrails, http://ixt.gs/14yzX57
12. presented by Interactive Things Visual Practices 12 Information Design Information Visualization Data Visualization Scientific Visualization Visual Analytics
13. Panopticon: QlikView Platform for Real-Time Visual Analytics, http://qlikview.com
14. presented by Interactive Things 14 Data Representation Human MAPPING PERCEPTION INTERACTION
15. Stephen Few: Tapping the Power of Visual Perception
16. Jacques Bertin, 1918 — 2010
17. L.B. Finer and S.K. Henshaw, "Estimates of U.S. abortion incidence in 2001-2003" Which group has the highest/lowest rates? Which group has an increasing / decreasing / flat / bumpy / etc. Which group has a faster/slower rate of change?
18. Jorge Camoes, http://ixt.gs/VxsKRt Fastes rate of change: Age 40 > or Age < 15 Decreasing temporal trend: Age 30 > Highest rate: Age < 15
19. Jorge Camoes: Growth of Walmart, http://ixt.gs/12c32DQ
20. Jorge Camoes: Growth of Walmart, http://ixt.gs/12c32DQ
21. Jorge Camoes: Growth of Walmart, http://ixt.gs/12c32DQ
22. presented by Interactive Things 20 Position Hue Direction Brightness Saturation Shape Visual Attributes Texture Scale
23. presented by Interactive Things 21 Time Alphabet Category Random Hierarchy Visual Ordering Location
24. presented by Interactive Things 22 Ordinal Nominal Temperature Velocity Duration Medals Ratings Satisfaction Categories Countries Names Data Types Quantitative
25. presented by Interactive Things Best Practices 1. Remove the obvious, focus on the meaningful. 23
26. presented by Interactive Things Best Practices 1. Remove the obvious, focus on the meaningful. 2. Data to ink ratio. 24
27. Brian Suda: A Practical Guide To Designing With Data
28. Brian Suda: A Practical Guide To Designing With Data
29. Brian Suda: A Practical Guide To Designing With Data
30. Brian Suda: A Practical Guide To Designing With Data
31. Brian Suda: A Practical Guide To Designing With Data
32. presented by Interactive Things Best Practices 1. Remove the obvious, focus on the meaningful. 2. Data to ink ratio. 3. Data to action ratio. 30
33. The New York Times: 512 Paths to the White House
34. presented by Interactive Things Best Practices 1. Remove the obvious, focus on the meaningful. 2. Data to ink ratio. 3. Data to action ratio. 4. Avoid chart junk. 32
35. Stephen Few
36. presented by Interactive Things Best Practices 1. Remove the obvious, focus on the meaningful. 2. Data to ink ratio. 3. Data to action ratio. 4. Avoid chart junk. 5. Please, just don’t lie. 34
37. Steve Jobs: U.S. SmartPhone Marketshare
38. presented by Interactive Things The idea for information design is: Don't get it original, get it right. 36 Edward Tufte “
39. presented by Interactive Things Process User-centered based on human behavior 37
40. presented by Interactive Things 38 Attitudes Motivations Skills Aptitudes Activities
41. presented by Interactive Things 39
42. presented by Interactive Things Ben Fry Computational Information Design 40 acquire parse filter mine represent refine interact COMPUTER SCIENCE STATISTICS INFORMATION & INTERACTION DESIGN
43. presented by Interactive Things 41 Research Design Implementation Conception
44. presented by Interactive Things Ville Vivante City of Geneva 42
45. presented by Interactive Things Ville Vivante City of Geneva 42
47. Visualization Patterns Convey growth, interaction, dynamics, ebb and flow.
49. presented by Interactive Things Ville Vivante City of Geneva 46 Conception Research Design Implementation
50. presented by Interactive Things Ecoplace Dashboard AXA 47
51. presented by Interactive Things Ecoplace Dashboard AXA 47
52. presented by Interactive Things 48 Ecoplace Dashboard AXA Implementation Research Design Conception
53. presented by Interactive Things WIDE UNESCO 49
54. presented by Interactive Things WIDE UNESCO 49
55. presented by Interactive Things WIDE UNESCO 50 Research Design Implementation Conception
56. presented by Interactive Things 51 I asked a few friends…
57. presented by Interactive Things 52 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
58. presented by Interactive Things 53 Here’s a consolidated view…
59. presented by Interactive Things 54 Inform Content Requirements Audience Goals Technical assessments Design research Deploymentenvironment Involvestakeholder Competition landscape User experience research User scenarios 1 Prepare Gather the data Clean the data Format the data Mine the data Organize the data Normalization Massage the data Gather additional research Develop data structure Assess data quality Assess data quantity 2 Explore Ask questions of the data Inspect the data Explore the data Analyze the data Rapid exploratory visualizations View from different view points Encode the data Use Tableau Use Excel Interviewing the data Texture of the data 3 Discover Find tendencies Find stories Find relationships Find hotspots Find structures Find facts Find patterns Indentify problems Answer questions Understand the data Indentify insights 4 Sketch Sketch on paper Sketch in code Explore range of concepts Draft visualization ideas Make big changes early Translate data to form Experiment with algorithms Different views on the data Testing out ideas visually Create custom visualizations 5 Question Review Ask questions Get feedback Get perspectives Does it answer the questions? Does it meet the expected goals? Is it useful? Does it tell a story? Collaborative reworking Start over Does it offer insights? 6 Design Visual design Functional design Technical design Experience design Wireframes Prototypes Composition ideas Interaction model User flow Information architecture Hierarchical structure Mockups 7 Develop Refine Polish Build Iterate User interactivity adjustments Interface motion and adjustments Make adjustments Refine the functional design Refine the visual design Care about the details 8 Evaluate Usability testing Design evaluation Expert review Usage observation Interface tests User mechanics tests Performance tests 9 Deliver Launch Promote Deploy Document Public relation campaigns Ambassador outreach Traditional public relations methods 10
60. presented by Interactive Things Outlook User-centered based on human emotions 55
61. Charles Joseph Minard: Napoleon's March to Russia 1812– 1813
62. Averyanov Alexander: The Attack of Moscow Regiment
63. presented by Interactive Things WIDE UNESCO 58
64. presented by Interactive Things WIDE UNESCO 58
65. presented by Interactive Things WIDE UNESCO 58
66. presented by Interactive Things WIDE UNESCO 58
67. presented by Interactive Things Stories are important cognitive events, for they encapsulate, into one compact package, information, knowledge, context, & emotion. 59 Donald Norman “
68. presented by Interactive Things 60 Do they necessarily need to be explicit to be touching?
69. Clara Kayser-Bril, Nicolas Kayser-Bril and Marion Kotlarski: 100 years of world cuisine
70. Fernanda Viegas & Martin Wattenberg: Wind Map, http://hint.fm/wind
71. presented by Interactive Things 63 Do they necessarily need to be touching to be meaningful?
72. CNN & Stamen: Home and Away, http://ixt.gs/12bKW4T
73. NASA: Climate Change Key Indicators, http://ixt.gs/W0AjfX
74. The New York Times: What Could Disappear, http://nyti.ms/SktOCY
75. presented by Interactive Things 67 The best stories can be reduced to one single thought.
76. presented by Interactive Things Thank You! Benjamin Wiederkehr interactivethings.com 68