excella.com
@excellaco
DevelopingDashboards withUser-centeredDesign
Tech Lady Hackathon #5
October 21, 2017 | Washington DC
Amanda Makulec
Data Visualization Lead | Excella Consulting
Once you start looking, you’ll see
data visualizationeverywhere.
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
“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).
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
The best visualizations feel intuitive and make complex
information accessible.(Often, because they were
built with you in mind)
Tools are smart.
But a tool can’t know your user
like you can.
Even ugly dashboards take time to build.
Let’s build betterdashboards that someone
is delighted to use.
D E S I G NT H I N K I N G
Image credit: http://cohort21.com/lesliemcbeth/2015/03/04/bring-it-back-design-thinking-teacher-growth/
DESIGN SPRINT
Data has changed how we make choices.
What do you do whenyou want to plan a dinner
out in a new city?
Your design mission
Create a prototype ofone of the two core
dashboards for yournew start up.
E M P A T H YW h o i s o u r U S E R ?
How can we put ourselves as designers into the data user’s shoes?
What are our data user’s wants, needs, and interests?
What are our data user’s challenges and pain points?
EMPATHY
Image credit Ryan Morrill http://www.improving-visualisation.org/case-studies/id=6
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
We can use tools like personas to focus on the needs of our different users.
Kim Layla
D E F I N EW 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 ?
What are your user’s high priority questions to be answered?
In our design toolbox:
Journey Maps
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.
TESTPROTO-
TYPEIDEATEDEFINEEMPATHY
I D E A T EW 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 ?
Remember
Think beyond the data we have to the
metrics we need.
RestaurantRating (or other metric)Cuisine type
My locationRestaurant location
RestaurantRating (or other metric)Cuisine type
What data is available to answer your user’s questions?
Remember: keep it simple.You don’t need to show every data point
In our design toolbox:
How Might We…?
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.
TESTPROTO-
TYPEIDEATEDEFINEEMPATHY
P R O T O T Y P EW h a t D E S I G N
w i l l w e c r e a t e ?
Selecting the right best chart
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
Different chart types work well for different kinds of data stories and analysis results.
For more on chart selection, check out DataVizCatalogue.comImage from the DataVizCatalogue.com
What’s your data story?
Distribution
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
What’s your data story?
Time Trend
Image credit: https://ggwash.org/view/37967/dcs-housing-affordability-crisis-in-7-charts
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.
Adapted from Alberto Cairo
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?
How will you use visual cuesto guide the user?
Declutter
Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
How will you use visual cuesto guide the user?
Color
Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
How will you use visual cuesto guide the user?
Text
Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
Combining views in a dashboard
How can you use visual cues to guide the user?
Dashboard on Tableau Public: https://public.tableau.com/profile/amakulec#!/vizhome/WomeninPublicHealthSalaryDashboard/WomeninPublicHealthSalariesMore on the Z pattern: https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c
Overview first
Zoom and filter
Details on demand
Develop rough sketchesrooted in design best practices to test different ideas for charts and dashboard layouts
In our design toolbox:
Sketching + Wireframing
Share your prototypeswith your user for early feedback so you don’t end up in this situation…
Sketch a rough prototype of adashboard you could build to answer her question.
TESTPROTO-
TYPEIDEATEDEFINEEMPATHY
P A I R S H A R EW 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 ?
Favorite Resources for Diving in on Design Thinking
• Stanford d. School Bootcamp Bootlegdschool.stanford.edu/resources
• IDEO Design Kitideo.com/post/design-kit
Data Viz Design Dashboards Design Inspiration
Storytelling with DataEvergreen DataPolicy VizEffective GraphsAnn K. EmeryData Viz Hub
Perceptual EdgeVisualising DataDashboard Design Series from Juice Analytics
Information is BeautifulFlowing DataTableau Public GalleryEager Eyes
…and cautionary talesJunk ChartsWTF Viz
For more on data visualization:
For more on prototype thinking:
Build a Tower, Build a Team Tom WujecA TED Talk on teams and prototype thinking with the marshmallow challenge | https://www.ted.com/talks/tom_wujec_build_a_tower
Top Related