twp meetup

59
lessons from dashboard design. Source: Geckoboard

Upload: selwynjacob90

Post on 06-Aug-2015

57 views

Category:

Design


1 download

TRANSCRIPT

Page 1: TWP Meetup

lessons from dashboard design.

Source: Geckoboard

Page 2: TWP Meetup

Selwyn J. Kancharla

On the web.http://selwynjacob.com [email protected]

Page 3: TWP Meetup

break conventions

1

Page 5: TWP Meetup

1What if?But why?How can I?

Page 6: TWP Meetup

1Conventions to break conventions

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

Page 8: TWP Meetup

1

What if?dashboards are collaborative by nature

But why?should discussions take place elsewhere

How can we?weave a visual story around collaboration

Page 12: TWP Meetup

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

#happinesstip

Page 13: TWP Meetup

Simplify

2

Page 14: TWP Meetup

simplify, you must!Source: Vincent

Page 15: TWP Meetup

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

2

Page 16: TWP Meetup

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

2

Page 17: TWP Meetup

Source: City Dashboard

Page 18: TWP Meetup

Data-Ink Ratio =

2Ink used to show data

Total ink used on the graphic

Edward Tufte - The Visual Display of Quantitative Data

Page 19: TWP Meetup

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

Page 21: TWP Meetup
Page 22: TWP Meetup
Page 23: TWP Meetup
Page 24: TWP Meetup
Page 25: TWP Meetup
Page 26: TWP Meetup
Page 27: TWP Meetup
Page 28: TWP Meetup

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

Page 29: TWP Meetup
Page 30: TWP Meetup

Source: Robert Allison 2

Page 31: TWP Meetup

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

#happinesstip

2

Page 32: TWP Meetup

love at first sight

3info

Page 34: TWP Meetup

Easy to read, understand, and monitor

3

Page 35: TWP Meetup

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

3

Page 38: TWP Meetup

3Actionable, productive information VS Interesting but extraneous information

Page 39: TWP Meetup

3

Bullet Graph

Page 40: TWP Meetup

3

KPI Data Labels

Page 41: TWP Meetup

3

Line Chart

Page 42: TWP Meetup

3

Spark Lines

Page 43: TWP Meetup

3

Bar Graph

Page 44: TWP Meetup

3Source: Geckoboard

Page 45: TWP Meetup

3Source: Perceptual Edge

Page 46: TWP Meetup

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

#happinesstip

Page 47: TWP Meetup

get extra makeup out of the way

4

Page 48: TWP Meetup

Source: HDW

Page 49: TWP Meetup

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

4

Page 52: TWP Meetup

We know 3D is cool, but …

4

Page 54: TWP Meetup

Don’t try to entertain at the expense of communication

4

Page 55: TWP Meetup

4Source: Business Insider

Page 57: TWP Meetup

At every step, question if visual design aids content.

#happinesstip

4

Page 58: TWP Meetup

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