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.

Developing Dashboards with User-Centered Design

766 views

Published on

Design sprint session hosted at the TechLady Hackathon, focused on the basic principles and techniques for starting a design process with who will use the data, rather than the tables and tools.

Published in: Data & Analytics
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Developing Dashboards with User-Centered Design

  1. 1. excella.com @excellaco Developing Dashboards with User-centered Design Tech Lady Hackathon #5 October 21, 2017 | Washington DC Amanda Makulec Data Visualization Lead | Excella Consulting
  2. 2. Once you start looking, you’ll see data visualization everywhere.
  3. 3. 6 am 8 am 9 am 9:15 am 12:30 pm 12:45 pm 3 pm 4 pm 5:30 pm 7 pm 10 pm
  4. 4. “The two optic nerves [in the eyes] are sending what we now know are 20 megabits a second of information back to the brain.” Edward Tufte We are visual processors (and companies know that).
  5. 5. 0 2 4 6 8 10 Taste Auditory Olfactory Tactile Visual Sub-conscious (millions of bits per second) 0 10 20 30 40 Conscious (bits per second) Adapted from: Tor Norretranders' The User Illusion
  6. 6. The best visualizations feel intuitive and make complex information accessible. (Often, because they were built with you in mind)
  7. 7. Tools are smart. But a tool can’t know your user like you can.
  8. 8. Even ugly dashboards take time to build. Let’s build better dashboards that someone is delighted to use.
  9. 9. DESIGN THINKIN G
  10. 10. Image credit: http://cohort21.com/lesliemcbeth/2015/03/04/bring-it-back-design-thinking-teacher-growth/
  11. 11. DESIGN SPRINT
  12. 12. Data has changed how we make choices. What do you do when you want to plan a dinner out in a new city?
  13. 13. Your design mission Create a prototype of one of the two core dashboards for your new start up.
  14. 14. EMPATHY W h o i s o u r U S E R ?
  15. 15. How can we put ourselves as designers into the data user’s shoes?
  16. 16. What are our data user’s wants, needs, and interests?
  17. 17. What are our data user’s challenges and pain points?
  18. 18. EMPATHY
  19. 19. Image credit Ryan Morrill http://www.improving-visualisation.org/case-studies/id=6
  20. 20. Each persona represents a significant portion of people in the real world and enables the designer to focus on a manageable and memorable cast of characters, instead of focusing on thousands of individuals.” “A persona is depicted as a specific person but is not a real individual; rather, it is synthesized from observations of many people. From: https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/ In our design toolbox: Personas
  21. 21. We can use tools like personas to focus on the needs of our different users. Kim Layla
  22. 22. DEFINE W h a t Q U E S T I O N d o e s t h e u s e r n e e d t o a n s w e r ?
  23. 23. What are your user’s high priority questions to be answered?
  24. 24. In our design toolbox: Journey Maps
  25. 25. 1.Pair up with another participant. 2.Read the two personas. 3.Pick one. 4.Identify the key question you think needs be answered by the dashboard for that persona. TEST PROTO- TYPE IDEATEDEFINEEMPATHY
  26. 26. IDEATE W h a t D A T A d o w e h a v e t o a n s w e r t h e q u e s t i o n ?
  27. 27. Remember Think beyond the data we have to the metrics we need.
  28. 28. Restaurant Rating (or other metric) Cuisine type
  29. 29. My location Restaurant location Restaurant Rating (or other metric) Cuisine type
  30. 30. What data is available to answer your user’s questions?
  31. 31. Remember: keep it simple. You don’t need to show every data point
  32. 32. In our design toolbox: How Might We…?
  33. 33. Review your question to answer for your persona + the background on data. Then, ideate (brainstorm!) a list of data you could use to answer her question. TEST PROTO- TYPE IDEATEDEFINEEMPATHY
  34. 34. PROTOTYPE W h a t D E S I G N w i l l w e c r e a t e ?
  35. 35. Selecting the right best chart
  36. 36. Great data design… ✓ Tells a clear story ✓ Engages the user ✓ Uses visual cues to guide the user ✓ Is well designed for the display size and medium
  37. 37. Different chart types work well for different kinds of data stories and analysis results. For more on chart selection, check out DataVizCatalogue.com Image from the DataVizCatalogue.com
  38. 38. What’s your data story? Distribution
  39. 39. What’s your data story? Compare Categories Image credit: The Information Lab, https://www.thedataschool.co.uk/ben-davis/making- barbell-plots-tableau/ Image credit: The Fiscal Times, http://www.thefiscaltimes.com/2015/11/05/5- Charts-Explain-Gender-Pay-Gap
  40. 40. What’s your data story? Time Trend Image credit: https://ggwash.org/view/37967/dcs-housing-affordability-crisis-in-7-charts
  41. 41. Gestalt, n. a psychology term which means "unified whole". It refers to theories of visual perception* developed by German psychologists in the 1920s. *PROXIMITY / SIMILARITY / ENCLOSURE / CLOSURE / CONTINUITY / CONNECTION How visually accurate does your chart need to be? Consider Gestalt principles.
  42. 42. Adapted from Alberto Cairo
  43. 43. Interesting Function Form Integrity David McCandless, 2012 1. Function: they let you see trends and patterns clearly. 2. Form: they are visually appealing and well structured to attract readers and hold their attention. 3. Integrity: they portray the data accurately and honestly. 4. Interesting: they are relevant and meaningful, or reveal new information. How will you use visual cues to guide the user?
  44. 44. How will you use visual cues to guide the user? Declutter Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
  45. 45. How will you use visual cues to guide the user? Color Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
  46. 46. How will you use visual cues to guide the user? Text Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
  47. 47. Combining views in a dashboard
  48. 48. How can you use visual cues to guide the user?
  49. 49. Dashboard on Tableau Public: https://public.tableau.com/profile/amakulec#!/vizhome/WomeninPublicHealthSalaryDashboard/WomeninPublicHealthSalaries More on the Z pattern: https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c Overview first
  50. 50. Zoom and filter
  51. 51. Details on demand
  52. 52. Develop rough sketches rooted in design best practices to test different ideas for charts and dashboard layouts In our design toolbox: Sketching + Wireframing
  53. 53. Share your prototypes with your user for early feedback so you don’t end up in this situation…
  54. 54. Sketch a rough prototype of a dashboard you could build to answer her question. TEST PROTO- TYPE IDEATEDEFINEEMPATHY
  55. 55. PAIR SHARE W h a t i s s i m i l a r ? W h a t i s d i f f e r e n t ?
  56. 56. Favorite Resources for Diving in on Design Thinking • Stanford d. School Bootcamp Bootleg dschool.stanford.edu/resources • IDEO Design Kit ideo.com/post/design-kit
  57. 57. Data Viz Design Dashboards Design Inspiration Storytelling with Data Evergreen Data Policy Viz Effective Graphs Ann K. Emery Data Viz Hub Perceptual Edge Visualising Data Dashboard Design Series from Juice Analytics Information is Beautiful Flowing Data Tableau Public Gallery Eager Eyes …and cautionary tales Junk Charts WTF Viz For more on data visualization:
  58. 58. For more on prototype thinking: Build a Tower, Build a Team Tom Wujec A TED Talk on teams and prototype thinking with the marshmallow challenge | https://www.ted.com/talks/tom_wujec_build_a_tower
  59. 59. Amanda Makulec Data Visualization Lead Excella Consulting amanda.makulec@excella.com @abmakulec excella.com @excellaco

×