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.

Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications

446 views

Published on

Presented by Design for Context's Lisa Battle and Rachel Sengers at the User Experience Professionals Association (UXPA) Conference June 26, 2018, in Puerto Rico.

The power of communicating data visually can’t be overstated. We often need to convey a lot of information at a glance to help expert users 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. For all users, the micro-visualization is a small but powerful way to package detailed information in an easily digestible, visual form. Individually or arranged into arrays, these compact visual elements pack a huge punch, giving your users the ability to quickly assess trends, spot outliers, and identify priorities. This presentation will explore the use of data micro-visualizations to enhance user experience and explain how to utilize pre-attentive processing and gestalt mechanisms to design more effective visualizations.

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ➤➤ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications

  1. 1. UXPA 2018 • June 26, 2018 Big Data in Small Graphics Micro-visualizations in SaaS & enterprise applications ! #UXPA2018 @design4context Lisa Battle President & Principal Consultant lisa@designforcontext.com Rachel Sengers User Experience Designer rachel@designforcontext.com slides posted at: www.designforcontext.com/insights
  2. 2. @design4context Micro-visualizations UXPA 2018 2 SPEAKERS @design4context Lisa Battle Rachel Sengers
  3. 3. @design4context Micro-visualizations UXPA 2018 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 UXPA 2018 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 UXPA 2018 5 So… what is a micro-visualization?
  6. 6. @design4context Micro-visualizations UXPA 2018 6 NOT A MICRO-VISUALIZATION 0 20 40 60 80 100 120 140 160 180 2013 2014 2015 2016 2017 In Rs 000' crores Export and Imports – Last 5 Years Export Imports
  7. 7. @design4context Micro-visualizations UXPA 2018 7 A GESTURE AT THE DATA Export Imports last 5 years
  8. 8. @design4context Micro-visualizations UXPA 2018 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 UXPA 2018 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 UXPA 2018 10 STATIC – NOT DATA DRIVEN DATA DRIVEN OPENTABLE It’s data-driven
  11. 11. @design4context Micro-visualizations UXPA 2018 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 UXPA 2018 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 UXPA 2018 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/sequence QUANTITATIVE How much (higher number, bigger, taller, more important) LINE LENGTH SHAPESIZE IMPRECISE VALUE (SHADE) LIMITED TEXTURE LIMITED COLOR (HUE) LIMITED (MOTION) LIMITED LIMITED POSITION 2-D POSITION
  14. 14. @design4context Micro-visualizations UXPA 2018 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 UXPA 2018 15 Gestalt methods in combination USING SHAPE ALONE THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  16. 16. @design4context Micro-visualizations UXPA 2018 16 Gestalt methods in combination IMPACT OF COLOR THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  17. 17. @design4context Micro-visualizations UXPA 2018 17 Gestalt methods in combination PROXIMITY & CONTINUATION THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  18. 18. @design4context Micro-visualizations UXPA 2018 18 Gestalt methods in combination IMPACT OF COLOR THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  19. 19. @design4context Micro-visualizations UXPA 2018 19 Gestalt methods in combination IMPACT OF PROXIMITY THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  20. 20. @design4context Micro-visualizations UXPA 2018 20 Gestalt methods in combination IMPACT OF ENCLOSURE (CONNECTION) THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  21. 21. @design4context Micro-visualizations UXPA 2018 21 SUMMARY ● The strongest cues for similarity are (in this order): 1. Connectedness (Connection, Enclosure) 2. Proximity 3. Color ● Can use cues together to strengthen a message about what’s the same or different ● Can use cues separately to convey several messages about different kinds of relationships Gestalt methods in combination THANS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
  22. 22. @design4context Micro-visualizations UXPA 2018 22 Using color Adapted from The Big Book of Dashboards, by Wexler, Shaffer, and Cotgreave Color can be used to visually communicate… Order (sequence) e.g. low to high, or high to low Divergence e.g. opposite ends of a spectrum Focus to direct attention to a key point Alert to warn of a problem Category to differentiate things using color
  23. 23. @design4context Micro-visualizations UXPA 2018 23 Using visual symbols in combination
  24. 24. @design4context Micro-visualizations UXPA 2018 24 Singletons Label of thing!
  25. 25. @design4context Micro-visualizations UXPA 2018 25 Groupings Label of thing!
  26. 26. @design4context Micro-visualizations UXPA 2018 26 Small multiples Label of second thing! Label of first thing Label of third thing Label of fourth thing!
  27. 27. @design4context Micro-visualizations UXPA 2018 27 Arrays ! ! !
  28. 28. @design4context Micro-visualizations UXPA 2018 28 ● Their knowledge & experience; expert users and newbies/infrequent users ● 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
  29. 29. @design4context Micro-visualizations UXPA 2018 29 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 STATUS1
  30. 30. @design4context Micro-visualizations UXPA 2018 Power indicator 3 data dimensions: completeness, urgency, power status IPHONE 30
  31. 31. @design4context Micro-visualizations UXPA 2018 Stops 3 data dimensions 31 DESIGN FOR CONTEXT PROJECT category completion urgency, exceptions re-usable element, creates visual language
  32. 32. @design4context Micro-visualizations UXPA 2018 Dates 3 data dimensions: category, completeness, urgency 32 SCHEDULED ACTUAL DESIGN FOR CONTEXT PROJECT
  33. 33. @design4context Micro-visualizations UXPA 2018 Icon strip Differentiating presence/absence of content 33 OBJECT 1 - HAS NO CONTENT OBJECT 2 - HAS SOME CONTENT OBJECT 3 - HAS ALL THE CONTENT DESIGN FOR CONTEXT PROJECT
  34. 34. @design4context Micro-visualizations UXPA 2018 Badges Shape size reinforces quantity 34 IPHONE
  35. 35. @design4context Micro-visualizations UXPA 2018 Color bars Position & color indicates urgency; use of small multiples 35 DESIGN FOR CONTEXT PROJECT
  36. 36. @design4context Micro-visualizations UXPA 2018 Maps Small multiples 36 DYNATRACE
  37. 37. @design4context Micro-visualizations UXPA 2018 37 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 PROCESS VISUALIZATIONS2
  38. 38. @design4context Micro-visualizations UXPA 2018 One step 38 Attach invoice
  39. 39. @design4context Micro-visualizations UXPA 2018 A series of steps (horizontal) 39 Request approval ApprovalAttach invoice Categorize expenses
  40. 40. @design4context Micro-visualizations UXPA 2018 A classic process visualization 40 Request approval ApprovalAttach invoice Categorize expenses 2
  41. 41. @design4context Micro-visualizations UXPA 2018 A classic process visualization 41 Request approval ApprovalAttach invoice Categorize expenses 3
  42. 42. @design4context Micro-visualizations UXPA 2018 Small multiples 42 93-50439 93-51364 93-51592
  43. 43. @design4context Micro-visualizations UXPA 2018 Small multiples compressed 43 US1233 US1285 US1291 C P D
  44. 44. @design4context Micro-visualizations UXPA 2018 Steps with arrows Arrows are often used in process visualizations (here, they form part of the step shapes) 44 DESIGN FOR CONTEXT PROJECT
  45. 45. @design4context Micro-visualizations UXPA 2018 45 Steps (vertical) Status indicators in sequence; icons for category of steps; latest step at bottom DESIGN FOR CONTEXT PROJECT
  46. 46. @design4context Micro-visualizations UXPA 2018 Steps (vertical) Status indicators in sequence; icons for category of steps; latest step at top PARCELTRACK 46
  47. 47. @design4context Micro-visualizations UXPA 2018 Steps Horizontal, vertical 47 GOOGLE MAPS
  48. 48. @design4context Micro-visualizations UXPA 2018 48 DESIGN FOR CONTEXT PROJECT Group of status indicators Progress bar effect
  49. 49. @design4context Micro-visualizations UXPA 2018 49 DESIGN FOR CONTEXT PROJECT Small multiples Bar chart effect @design4context Micro-visualizations UXPA 2018
  50. 50. @design4context Micro-visualizations UXPA 2018 50 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 PERFORMANCE STATISTICS3
  51. 51. @design4context Micro-visualizations UXPA 2018 Goals vs. actuals 51 DESIGN FOR CONTEXT PROJECT
  52. 52. @design4context Micro-visualizations UXPA 2018 Goals vs. actuals With controls to change context 52 DESIGN FOR CONTEXT PROJECT
  53. 53. @design4context Micro-visualizations UXPA 2018 Goals vs. actuals Leaf as goal & status indicator 53 NEST
  54. 54. @design4context Micro-visualizations UXPA 2018 Goal as a range 54 FITBIT
  55. 55. @design4context Micro-visualizations UXPA 2018 Small multiples With controls to change what you’re comparing 55 FACEBOOK INSIGHTS
  56. 56. @design4context Micro-visualizations UXPA 2018 Small multiples with an array DESIGN FOR CONTEXT PROJECT 56
  57. 57. @design4context Micro-visualizations UXPA 2018 Small multiples with an array DESIGN FOR CONTEXT PROJECT 57
  58. 58. @design4context Micro-visualizations UXPA 2018 Quantity heatmap COLOR BLINDNESS RED/GREEN DEUTERANOPIA RED/GREEN PROTANOPIA BLUE/YELLOW TRITANOPIA 58 PEOPLE HR
  59. 59. @design4context Micro-visualizations UXPA 2018 Interaction temperature Lack of suitable pre-attentive cues to convey relative quantity 59 FACEBOOK INTERACTIONS
  60. 60. @design4context Micro-visualizations UXPA 2018 Chart as an icon When reach goal, chart turns into motivational icon 60 FITBIT
  61. 61. @design4context Micro-visualizations UXPA 2018 61 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 GROWTH GRAPHICS4
  62. 62. @design4context Micro-visualizations UXPA 2018 Growth visualization 62 FORD EFFICIENCY LEAVES
  63. 63. @design4context Micro-visualizations UXPA 2018 Growth visualization 63 DESIGN FOR CONTEXT PROJECT
  64. 64. @design4context Micro-visualizations UXPA 2018 Wedges Use of segments (intervals) DUOLINGO 64
  65. 65. @design4context Micro-visualizations UXPA 2018 65 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8TIMELINES5
  66. 66. @design4context Micro-visualizations UXPA 2018 Timeline as navigation 66 ROUNDUP READY
  67. 67. @design4context Micro-visualizations UXPA 2018 Timeline as navigation 67 SCRIBBLELIVE DAILY
  68. 68. @design4context Micro-visualizations UXPA 2018 Timeline with quantity 68 JOHN LARKIN
  69. 69. @design4context Micro-visualizations UXPA 2018 Up & down shapes (win & loss) 69 www.anychart.com/blog/2016/04/02/winloss-javascript-sparkline-chart-anychart/
  70. 70. @design4context Micro-visualizations UXPA 2018 Timeline patterns 70 JAWBONE
  71. 71. @design4context Micro-visualizations UXPA 2018 71 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8TREND INDICATORS6
  72. 72. @design4context Micro-visualizations UXPA 2018 Arrows Up/down/zero direction, use of color DESIGN FOR CONTEXT PROJECT 72
  73. 73. @design4context Micro-visualizations UXPA 2018 Triangles Up/down direction 73 DESIGN FOR CONTEXT PROJECT
  74. 74. @design4context Micro-visualizations UXPA 2018 Sparklines In combination with up/down arrows & color 74 TWITTER DASHBOARD
  75. 75. @design4context Micro-visualizations UXPA 2018 Sparklines - types 75 TWITTER DASHBOARD Regular sparkline Min and max points First and last points Markers Column chart Win loss chart
  76. 76. @design4context Micro-visualizations UXPA 2018 Sparkline effect 76 DYNATRACE DYNATRACE
  77. 77. @design4context Micro-visualizations UXPA 2018 77 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8PREVIEWS7
  78. 78. @design4context Micro-visualizations UXPA 2018 Visualizing the number of available options 78 KAYAK
  79. 79. @design4context Micro-visualizations UXPA 2018 Visualizing the number of available options 79 KAYAK KAYAK
  80. 80. @design4context Micro-visualizations UXPA 2018 Visualizing impact of choices 80FIDELITY RETIREMENT CALCULATOR
  81. 81. @design4context Micro-visualizations UXPA 2018 Visualizing impact of choices 81FIDELITY RETIREMENT CALCULATOR
  82. 82. @design4context Micro-visualizations UXPA 2018 82 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 NAVIGATION & ORIENTATION8
  83. 83. @design4context Micro-visualizations UXPA 2018 Article orientation WALKER LIVING COLLECTIONS CATALOGUE 83 Visualization on right hand side
  84. 84. @design4context Micro-visualizations UXPA 2018 Article orientation WALKER LIVING COLLECTIONS CATALOGUE 84 Where you are now + relative length of this section
  85. 85. @design4context Micro-visualizations UXPA 2018 Book navigation 85 KINDLE
  86. 86. @design4context Micro-visualizations UXPA 2018 Welcome back 86 Visualization on right hand side MICROSOFT OFFICE - POWERPOINT
  87. 87. @design4context Micro-visualizations UXPA 2018 87 STATUS1 PROCESS VISUALIZATIONS2 PERFORMANCE STATISTICS3 GROWTH GRAPHICS4 TIMELINES5 TREND INDICATORS6 PREVIEWS7 NAVIGATION & ORIENTATION8 A GESTURE AT THE DATA
  88. 88. @design4context Micro-visualizations UXPA 2018 88 ● Packaging detailed information in an easily digestible, visual way. ● Simplify – remove extraneous elements. ● Singletons, groupings, small multiples, arrays ● Different ways that microvisualizations can be used ● Designing for user context A GESTURE AT THE DATA
  89. 89. UXPA 2018 • June 26, 2018 Big Data in Small Graphics Micro-visualizations in SaaS & enterprise applications ! #UXPA2018 @design4context Lisa Battle President & Principal Consultant lisa@designforcontext.com Rachel Sengers User Experience Designer rachel@designforcontext.com slides posted at: www.designforcontext.com/insights

×