Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr...

Display of Information:Design, Fonts, Graphs

Dr Hugh CrumleyCenter for Instructional Technology

Original

Proximity

Alignment

Contrast

Repetition

Design Principles

• Contrast make different• Repetition parallel elements• Alignment strong lines, don’t center• Proximity use whitespace

Williams, R. Non-designer’s Design Book

Fonts

Serif Sans serif

UPPER CASE

• Use sparingly for short phrases• NOT READABLE; LIKE SHOUTING• Titles: Capitalize the Content Words

Graphs: Data to Ink Ratio

• Show max data: erase non-data ink• Show min furniture & chartjunk• Use whitespace

Graph: Inches of Rainfall

• Pie• Radar• Bar• Line

Jan Feb Mar Apr May June July Aug…

1 5 3 6 5 6 10 9…

Excel Bar Graph

Janu

ary

Mar

ch

May

July

Sep

tem

ber

Nov

embe

r S102468

1012

Month

Inches of Rain

Rainfall in 2001

Excel Pie Graph

Rainfall in 2001

1 53

6

5

6

109

11

62 2

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

Excel Radar Graph

Rainfall in 2001

0

5

10

15January

February

March

April

May

JuneJuly

August

September

October

November

December

Series1

Excel Line Graph

Rainfall in 2001

02468

1012

Janu

aryFeb

ruary

March

April

MayJu

ne July

Augus

tSep

tembe

rOcto

ber

Novembe

rDece

mber

Month

Inch

es o

f rai

n

Improved BarInches of Rainfall in 2001

1

5

3

65

6

109

11

6

2 2

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

New & Improved BarInches of Rainfall in 2001

1

5

3

65

6

109

11

6

2 2

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Tasks in Perception

• Angle (or slope)• Area• Color hue/saturation• Length• Position along a common scale• Position along identical, nonaligned scales• Volume

Tasks in Perception

• Position along a common scale • Position along identical, nonaligned scales • Length• Angle (or slope)• Area• Volume• Color hue/saturation

Distance!

ReferencesDickison, M. (2008.) Goose & swan graphics from

http://www.numberpix.com/Becker R. and Cleveland, W. (1996). S-Plus Trellis

Graphic User’s Manual. Mathsoft , Inc., Seattle, WA and Bell Labs, Murray Hill, NJ.

Robbins, Naomi B. 2005. Creating More Effective Graphs. John Wiley and Sons, Hoboken, NJ.

Tufte, Edward R. [1983] (2001). The Visual Display of Quantitative Information, 2nd Edition. Graphics Press, Cheshire, CT.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.