The document is a presentation on developing dashboards with user-centered design. It discusses how visualizing data can help answer questions and tells users to focus on the needs of personas when designing dashboards. The presentation guides attendees through an exercise where they identify key questions, available data, and prototype a dashboard to answer a persona's question using best practices like selecting the right chart, using visual cues, and getting early feedback.
2. Once you start looking,
you’ll see
data visualization
everywhere.
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. “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. 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. The best visualizations feel
intuitive and make complex
information accessible.
(Often, because they were
built with you in mind)
22. Image credit Ryan Morrill http://www.improving-visualisation.org/case-studies/id=6
23. 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
24. We can use tools like personas to focus
on the needs of our different users.
Kim Layla
25. 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 ?
28. 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
29. 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 ?
37. 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
40. 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
41. 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
43. 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
44. What’s your data story?
Time Trend
Image credit: https://ggwash.org/view/37967/dcs-housing-affordability-crisis-in-7-charts
45. 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.
47. 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?
48. 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/
49. 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/
50. 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/
52. How can you use visual cues to guide the user?
53. 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
56. Develop rough sketches
rooted in design best
practices to test different
ideas for charts and
dashboard layouts
In our design toolbox:
Sketching + Wireframing
58. Sketch a rough prototype of a
dashboard you could build to
answer her question.
TEST
PROTO-
TYPE
IDEATEDEFINEEMPATHY
59. 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 ?
60. 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
61. 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:
62. 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