lessons from dashboard design.

Source: Geckoboard

Selwyn J. Kancharla

On the web.http://selwynjacob.com selwyn@umich.edu

break conventions

1

Source: Barcroft TV

1What if?But why?How can I?

1Conventions to break conventions

1. Understand the context2. Do not break for the sake of breaking3. Refer to 2

1Source: FusionCharts

1

What if?dashboards are collaborative by nature

But why?should discussions take place elsewhere

How can we?weave a visual story around collaboration

1Source: FusionCharts

1Source: FusionCharts

1Source: FusionCharts

1Don’t stick with plain ol’ conventions. Go the extra mile and show your users that you care.

#happinesstip

Simplify

2

simplify, you must!Source: Vincent

Remove content that doesn’t support data.It is information that viewers read without a reward

2

- You don’t have to show everything- Avoid meaningless visual content- Drill-down if necessary- White space is a good thing. Really.

2

Source: City Dashboard

Data-Ink Ratio =

2Ink used to show data

Total ink used on the graphic

Edward Tufte - The Visual Display of Quantitative Data

Tufte’s Principles

2Edward Tufte - The Visual Display of Quantitative Data

1. Above all else show data 2. Maximize data-ink ratio 3. Erase non-data ink 4. Erase redundant data-ink 5. Revise and edit

Dark Horse Analytics

Don’t bring in unwanted varietyIncreases cognitive load and perceptual strategy for interpreting content

It is many people’s jobDon’t make them work harder than necessary

2

Source: Robert Allison 2

Reason before you add. Every new item competesfor attention, space, and action.

#happinesstip

2

love at first sight

3info

Source: Dhrubo

Easy to read, understand, and monitor

3

- Provide adequate context- Maintain visual hierarchy- Express measures meaningfully- Guide the flow and attention

3

3Source: Phoenix Government

3Source: Williamsburg City Government

3Actionable, productive information VS Interesting but extraneous information

3

Bullet Graph

3

KPI Data Labels

3

Line Chart

3

Spark Lines

3

Bar Graph

3Source: Geckoboard

3Source: Perceptual Edge

3Design information to be self-guiding, contextual,and actionable.

#happinesstip

get extra makeup out of the way

4

Source: HDW

Avoid- Unnecessary decoration- Cute visuals with no meaning- Color abuse- Fancy typography- Automobile Gauges. Please.

4

4Source: Dashboard Insights

4Source: Dundas

We know 3D is cool, but …

4

4Source: FusionCharts

Don’t try to entertain at the expense of communication

4

4Source: Business Insider

4Source: Ducksboard

At every step, question if visual design aids content.

#happinesstip

4

Books- The visual display of quantitative information - Edward Tufte- Information dashboard design - Stephen Few- Designing with the mind in mind - Jeff Johnson- Design for Information - Isabel Meirelles

fin.

let us talk. selwyn@umich.edu