Designing User-Centered Visualizations

Designing User-Centered Visualizations

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

708f993eda474c9b86face222f2fe90e?s=128

Benjamin Wiederkehr

January 31, 2013
Tweet

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

  46. None
  47. Visualization Patterns Convey growth, interaction, dynamics, ebb and flow.

  48. None
  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