Developing Dashboards with User-Centered Design
-
Upload
amanda-makulec -
Category
Data & Analytics
-
view
400 -
download
1
Transcript of Developing Dashboards with User-Centered Design
![Page 1: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/1.jpg)
excella.com
@excellaco
DevelopingDashboards withUser-centeredDesign
Tech Lady Hackathon #5
October 21, 2017 | Washington DC
Amanda Makulec
Data Visualization Lead | Excella Consulting
![Page 2: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/2.jpg)
Once you start looking, you’ll see
data visualizationeverywhere.
![Page 3: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/3.jpg)
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
![Page 4: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/4.jpg)
“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).
![Page 5: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/5.jpg)
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
![Page 6: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/6.jpg)
The best visualizations feel intuitive and make complex
information accessible.(Often, because they were
built with you in mind)
![Page 7: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/7.jpg)
Tools are smart.
But a tool can’t know your user
like you can.
![Page 8: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/8.jpg)
Even ugly dashboards take time to build.
Let’s build betterdashboards that someone
is delighted to use.
![Page 9: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/9.jpg)
![Page 10: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/10.jpg)
D E S I G NT H I N K I N G
![Page 11: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/11.jpg)
Image credit: http://cohort21.com/lesliemcbeth/2015/03/04/bring-it-back-design-thinking-teacher-growth/
![Page 12: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/12.jpg)
DESIGN SPRINT
![Page 13: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/13.jpg)
Data has changed how we make choices.
What do you do whenyou want to plan a dinner
out in a new city?
![Page 14: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/14.jpg)
![Page 15: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/15.jpg)
Your design mission
Create a prototype ofone of the two core
dashboards for yournew start up.
![Page 16: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/16.jpg)
E M P A T H YW h o i s o u r U S E R ?
![Page 17: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/17.jpg)
![Page 18: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/18.jpg)
How can we put ourselves as designers into the data user’s shoes?
![Page 19: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/19.jpg)
What are our data user’s wants, needs, and interests?
![Page 20: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/20.jpg)
What are our data user’s challenges and pain points?
![Page 21: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/21.jpg)
EMPATHY
![Page 22: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/22.jpg)
Image credit Ryan Morrill http://www.improving-visualisation.org/case-studies/id=6
![Page 23: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/23.jpg)
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
![Page 24: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/24.jpg)
We can use tools like personas to focus on the needs of our different users.
Kim Layla
![Page 25: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/25.jpg)
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 ?
![Page 26: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/26.jpg)
What are your user’s high priority questions to be answered?
![Page 27: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/27.jpg)
In our design toolbox:
Journey Maps
![Page 28: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/28.jpg)
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
![Page 29: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/29.jpg)
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 ?
![Page 30: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/30.jpg)
Remember
Think beyond the data we have to the
metrics we need.
![Page 31: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/31.jpg)
![Page 32: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/32.jpg)
RestaurantRating (or other metric)Cuisine type
![Page 33: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/33.jpg)
My locationRestaurant location
RestaurantRating (or other metric)Cuisine type
![Page 34: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/34.jpg)
What data is available to answer your user’s questions?
![Page 35: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/35.jpg)
Remember: keep it simple.You don’t need to show every data point
![Page 36: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/36.jpg)
In our design toolbox:
How Might We…?
![Page 37: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/37.jpg)
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
![Page 38: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/38.jpg)
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 ?
![Page 39: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/39.jpg)
Selecting the right best chart
![Page 40: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/40.jpg)
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
![Page 41: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/41.jpg)
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
![Page 42: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/42.jpg)
What’s your data story?
Distribution
![Page 43: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/43.jpg)
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
![Page 44: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/44.jpg)
What’s your data story?
Time Trend
Image credit: https://ggwash.org/view/37967/dcs-housing-affordability-crisis-in-7-charts
![Page 45: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/45.jpg)
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.
![Page 46: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/46.jpg)
Adapted from Alberto Cairo
![Page 47: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/47.jpg)
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?
![Page 48: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/48.jpg)
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/
![Page 49: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/49.jpg)
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/
![Page 50: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/50.jpg)
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/
![Page 51: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/51.jpg)
Combining views in a dashboard
![Page 52: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/52.jpg)
How can you use visual cues to guide the user?
![Page 53: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/53.jpg)
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
![Page 54: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/54.jpg)
Zoom and filter
![Page 55: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/55.jpg)
Details on demand
![Page 56: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/56.jpg)
Develop rough sketchesrooted in design best practices to test different ideas for charts and dashboard layouts
In our design toolbox:
Sketching + Wireframing
![Page 57: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/57.jpg)
Share your prototypeswith your user for early feedback so you don’t end up in this situation…
![Page 58: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/58.jpg)
Sketch a rough prototype of adashboard you could build to answer her question.
TESTPROTO-
TYPEIDEATEDEFINEEMPATHY
![Page 59: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/59.jpg)
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 ?
![Page 60: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/60.jpg)
Favorite Resources for Diving in on Design Thinking
• Stanford d. School Bootcamp Bootlegdschool.stanford.edu/resources
• IDEO Design Kitideo.com/post/design-kit
![Page 61: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/61.jpg)
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:
![Page 62: Developing Dashboards with User-Centered Design](https://reader033.fdocuments.in/reader033/viewer/2022051521/5a6593c97f8b9a92368b4643/html5/thumbnails/62.jpg)
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