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.

Micro-visualizations: Small Visualizations that Make a Big Impact

1,986 views

Published on

Presentation by Rachel Sengers and Lisa Battle at the UXDC2017 conference in Washington, DC, on April 15, 2017.

We hear a lot about visualizations for big data these days, but what about small data? The power of communicating data visually can’t be overstated. When designing for expert users, we often need to convey a lot of information at a glance to help them make quick decisions and work efficiently. For infrequent or novice users, a visual overview of a process or concept can provide orientation and help reduce the risk of mistakes. Enter the micro-visualization, a way of packaging detailed information in an easily digestible, visual way. In this presentation, we present examples of several different types of micro-visualizations and discuss how they can be used effectively to improve user experience.

Published in: Technology
  • Be the first to comment

Micro-visualizations: Small Visualizations that Make a Big Impact

  1. 1. @design4context Micro-visualizations UXDC 2017 1 Rachel Sengers + Lisa Battle User experience designers @design4context Micro-visualizations SMALL VISUALIZATIONS THAT MAKE A BIG IMPACT #UXDC2017 #microvizUXDC • 15 APRIL, 2017 Presentation is online – Go to www.designforcontext.com/publications
  2. 2. @design4context Micro-visualizations UXDC 2017 2 Lisa Battle Jennifer Chaffee SPEAKERS SHOUT OUT TO @design4context Rachel Sengers Michael Owens
  3. 3. @design4context Micro-visualizations UXDC 2017 3 We hear a lot about big data visualizations these days, but what about small data? The power of communicating data visually can’t be overstated. When designing for expert users, we often need to convey a lot of information at a glance to help them make quick decisions and work efficiently. For infrequent or novice users, a visual overview of a process or concept can provide orientation and help reduce the risk of mistakes.
  4. 4. @design4context Micro-visualizations UXDC 2017 4 Enter the micro-visualization, a way of packaging detailed information in an easily digestible, visual way. In this presentation, we present examples of several different types of micro-visualizations and discuss how they can be used effectively to improve user experience.
  5. 5. @design4context Micro-visualizations UXDC 2017 5 So… what is a micro-visualization?
  6. 6. @design4context Micro-visualizations UXDC 2017 6 NOT A MICRO-VISUALIZATION 0 20 40 60 80 100 120 140 160 180 2011 2013 2014 2015 2016 In Rs 000' crores Export and Imports Export Imports
  7. 7. @design4context Micro-visualizations UXDC 2017 7 A GESTURE AT THE DATA Export Imports last 5 years
  8. 8. @design4context Micro-visualizations UXDC 2017 8 NETWORK MONITORING APP DESIGN FOR CONTEXT PROJECT It’s small Not the focus of the app Part of a larger page – not the entire page Embeddable NOT A MICRO-VISUALIZATION MICRO-VISUALIZATION MAP APP ZILLOW
  9. 9. @design4context Micro-visualizations UXDC 2017 9 It’s small Not a deep, immersive experience But it can point to one Easily digestible Small number of data dimensions Can be parsed quickly Not the focus of the app Part of a larger page – not the entire page Embeddable Re-usable
  10. 10. @design4context Micro-visualizations UXDC 2017 10 STATIC – NOT DATA DRIVEN DATA DRIVEN OPENTABLE It’s data-driven
  11. 11. @design4context Micro-visualizations UXDC 2017 11 The mechanics of visualization Item A 1 of 5 steps done Item B 3 of 5 steps done Item C 2 of 5 steps done A B C
  12. 12. @design4context Micro-visualizations UXDC 2017 12 The mechanics of visualization Item A 150 cubic feet Item B 101 cubic feet Item C 172 cubic feet B C A
  13. 13. @design4context Micro-visualizations UXDC 2017 13 Visual vocabulary USING PRE-ATTENTIVE PROCESSING THANKS TO: STEPHEN FEW, JACQUES BERTIN, WEISKOPF/MACHIRAJU/MÖLLER CATEGORIES Different types of distinct items ORDER Items are in an order QUANTITATIVE How much (higher number, bigger, taller, more important) LINE LENGTH SHAPEPOSITIONSIZE IMPRECISE VALUE (SHADE) LIMITED TEXTURE LIMITED COLOR (HUE) LIMITED (MOTION) LIMITED LIMITED2-D POSITION
  14. 14. @design4context Micro-visualizations UXDC 2017 14 Gestalt THANKS TO: STEPHEN FEW’S INFORMATION DASHBOARD DESIGN BOOK PROXIMITY ENCLOSURESIMILARITY COLOR SIZE SHAPE ORIENTATION CONNECTION WHAT BELONGS TOGETHER + WHAT IS DIFFERENT CLOSUREALIGNMENT (A.K.A. CONTINUITY) COMBINATION EXAMPLE
  15. 15. @design4context Micro-visualizations UXDC 2017 15 Using visual indicators in combination
  16. 16. @design4context Micro-visualizations UXDC 2017 16 Singletons Label of thing!
  17. 17. @design4context Micro-visualizations UXDC 2017 17 Groupings Label of thing!
  18. 18. @design4context Micro-visualizations UXDC 2017 18 Small multiples Label of second thing! Label of first thing Label of third thing Label of fourth thing!
  19. 19. @design4context Micro-visualizations UXDC 2017 19 Arrays ! ! !
  20. 20. @design4context Micro-visualizations UXDC 2017 20 ● Their knowledge & experience ● What’s important for them to know at a glance ● What needs to be called to their attention? ● What are the typical quantities/ranges they are dealing with? What are the outliers? Designing for user context
  21. 21. @design4context Micro-visualizations UXDC 2017 21 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 STATUS1
  22. 22. @design4context Micro-visualizations UXDC 2017 Power indicator 3 data dimensions: completeness, urgency, power status IPHONE 22
  23. 23. @design4context Micro-visualizations UXDC 2017 Stops 3 data dimensions 23 DESIGN FOR CONTEXT PROJECT category completion urgency, exceptions re-usable element, creates visual language
  24. 24. @design4context Micro-visualizations UXDC 2017 Dates 3 data dimensions: category, completeness, urgency 24 SCHEDULED ACTUAL DESIGN FOR CONTEXT PROJECT
  25. 25. @design4context Micro-visualizations UXDC 2017 Icon strip Differentiating presence/absence of content 25 OBJECT 1 - HAS NO CONTENT OBJECT 2 - HAS SOME CONTENT OBJECT 3 - HAS ALL THE CONTENT DESIGN FOR CONTEXT PROJECT
  26. 26. @design4context Micro-visualizations UXDC 2017 Badges Shape size reinforces quantity 26 IPHONE
  27. 27. @design4context Micro-visualizations UXDC 2017 Color bars Position & color indicates urgency; use of small multiples 27 DESIGN FOR CONTEXT PROJECT
  28. 28. @design4context Micro-visualizations UXDC 2017 Maps Small multiples 28 DYNATRACE
  29. 29. @design4context Micro-visualizations UXDC 2017 29 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 PROCESS VISUALIZATIONS2
  30. 30. @design4context Micro-visualizations UXDC 2017 Steps Status indicators in ordered sequence, left-to-right DESIGN FOR CONTEXT PROJECT 30
  31. 31. @design4context Micro-visualizations UXDC 2017 Steps Status indicators in sequence; icons for category of steps DESIGN FOR CONTEXT PROJECT @design4context Micro-visualizations UXDC 2017 31
  32. 32. @design4context Micro-visualizations UXDC 2017 Steps Horizontal, vertical 32 GOOGLE MAPS @design4context Micro-visualizations UXDC 2017 32
  33. 33. @design4context Micro-visualizations UXDC 2017 Percent complete Progress bar, left-to-right 33 FACEBOOK 2012 LINKED IN 2017
  34. 34. @design4context Micro-visualizations UXDC 2017 Percent complete Bottom up 34 LINKEDIN
  35. 35. @design4context Micro-visualizations UXDC 2017 35 DESIGN FOR CONTEXT PROJECT Group of status indicators Progress bar effect
  36. 36. @design4context Micro-visualizations UXDC 2017 36 DESIGN FOR CONTEXT PROJECT Small multiples Bar chart effect @design4context Micro-visualizations UXDC 2017 36
  37. 37. @design4context Micro-visualizations UXDC 2017 37 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 PERFORMANCE STATISTICS3
  38. 38. @design4context Micro-visualizations UXDC 2017 Goals vs. actuals 38 DESIGN FOR CONTEXT PROJECT
  39. 39. @design4context Micro-visualizations UXDC 2017 Goals vs. actuals Controls to change context 39 DESIGN FOR CONTEXT PROJECT
  40. 40. @design4context Micro-visualizations UXDC 2017 Goals vs. actuals Leaf as goal & status indicator 40 NEST
  41. 41. @design4context Micro-visualizations UXDC 2017 Goal as a range 41 FITBIT
  42. 42. @design4context Micro-visualizations UXDC 2017 Small multiples Controls to change what you’re comparing 42 FACEBOOK INSIGHTS
  43. 43. @design4context Micro-visualizations UXDC 2017 Small multiples with an array DESIGN FOR CONTEXT PROJECT 43
  44. 44. @design4context Micro-visualizations UXDC 2017 Small multiples with an array DESIGN FOR CONTEXT PROJECT 44
  45. 45. @design4context Micro-visualizations UXDC 2017 Frequency heat mapPEOPLE HR COLOR BLINDNESS RED/GREEN DEUTERANOPIA RED/GREEN PROTANOPIA BLUE/YELLOW TRITANOPIA 45
  46. 46. @design4context Micro-visualizations UXDC 2017 46 FACEBOOK INTERACTIONS Interaction temperature Lack of pre-attentive cues to convey relative quantity
  47. 47. @design4context Micro-visualizations UXDC 2017 Chart as an icon When reach goal, chart turns into motivational icon 47 FITBIT
  48. 48. @design4context Micro-visualizations UXDC 2017 48 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 GROWTH GRAPHICS4
  49. 49. @design4context Micro-visualizations UXDC 2017 Growth visualization 49 FORD EFFICIENCY LEAVES
  50. 50. @design4context Micro-visualizations UXDC 2017 Growth visualization 50 DESIGN FOR CONTEXT PROJECT
  51. 51. @design4context Micro-visualizations UXDC 2017 Wedges Use of segments (intervals) DUOLINGO 51
  52. 52. @design4context Micro-visualizations UXDC 2017 52 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8TIMELINES5
  53. 53. @design4context Micro-visualizations UXDC 2017 Status icons in a sequence PARCELTRACK 53
  54. 54. @design4context Micro-visualizations UXDC 2017 Timeline as navigation 54 ROUNDUP READY
  55. 55. @design4context Micro-visualizations UXDC 2017 Timeline as navigation 55 SCRIBBLELIVE DAILY
  56. 56. @design4context Micro-visualizations UXDC 2017 Timeline with quantity 56 JOHN LARKIN
  57. 57. @design4context Micro-visualizations UXDC 2017 Timeline patterns 57 JAWBONE
  58. 58. @design4context Micro-visualizations UXDC 2017 58 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8TREND INDICATORS6
  59. 59. @design4context Micro-visualizations UXDC 2017 DESIGN FOR CONTEXT PROJECT 59 Arrows Up/down/zero direction, use of color
  60. 60. @design4context Micro-visualizations UXDC 2017 Triangles Up/down direction 60 DESIGN FOR CONTEXT PROJECT
  61. 61. @design4context Micro-visualizations UXDC 2017 Sparklines In combination with up/down arrows & color 61 TWITTER DASHBOARD Sparklines, popularized by Ed Tufte: a micro-visualization of a line chart
  62. 62. @design4context Micro-visualizations UXDC 2017 Sparkline effect 62 DYNATRACE DYNATRACE
  63. 63. @design4context Micro-visualizations UXDC 2017 63 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8PREVIEWS7
  64. 64. @design4context Micro-visualizations UXDC 2017 Calculator with dial FIDELITY RETIREMENT CALCULATOR 64
  65. 65. @design4context Micro-visualizations UXDC 2017 65 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 NAVIGATION & ORIENTATION8
  66. 66. @design4context Micro-visualizations UXDC 2017 Article orientation WALKER LIVING COLLECTIONS CATALOGUE Visualization on right hand side 66
  67. 67. @design4context Micro-visualizations UXDC 2017 Article orientation WALKER LIVING COLLECTIONS CATALOGUE 67 Where you are now + relative length of this section
  68. 68. @design4context Micro-visualizations UXDC 2017 Book navigation 68 KINDLE APP
  69. 69. @design4context Micro-visualizations UXDC 2017 Welcome back 69 Visualization on right hand side MICROSOFT OFFICE
  70. 70. @design4context Micro-visualizations UXDC 2017 70 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 A GESTURE AT THE DATA
  71. 71. @design4context Micro-visualizations UXDC 2017 71 ● Packaging detailed information in an easily digestible, visual way ● Singletons, groupings, small multiples, arrays ● Examples of different ways that microvisualizations can be used ● Designing for user context A GESTURE AT THE DATA
  72. 72. @design4context Micro-visualizations UXDC 2017 72 Rachel Sengers + Lisa Battle User experience designers @design4context Micro-visualizations SMALL VISUALIZATIONS THAT MAKE A BIG IMPACT #UXDC2017 #microvizUXDC • 15 APRIL, 2017 Presentation is online – Go to www.designforcontext.com/publications

×