1 38

Traditional Graphical

Interfaces: FormSus Lundgren

2 38

Remember, always

”Confusion and clutter are failures of design, not

attributes of information”

- Edward R Tufte

3 38

Colors• Color can be used to label

(= as noun)– Some items are blue, some

green etc

• Color can represent or imitate reality (= as representation)– Rivers are blue

• Color can be used to measure (= as quantity)– Color change = rate

• Color can enliven (=as beauty)

4 38

Colors

5 38

Color Considerations• Hue

– Color nuance

• Saturation– ”greyishness”

• Lightness– paleness

• In order to differentiate well, colors used togetheras background/foregroundhave to differ in at least lightness

6 38

Using Colors• Opposite colors should not be combined

unless they differ very much in lightness and/or saturation

– Red text on green is hard to read

– As is green text on red

– However changing lightness can help…

– Or saturation…

– Or both…

7 38

Using Colors• It is easier to read a dark text on a light

background…

• …than reading a light text on a dark background

• Also, the contrast shouldn’t be too high:

• Dark gray on white… …or black on light grey

• …is considered easier to read than black on white

8 38

Using Colors• Backgrounds or base colors should be

neutral and calm

• Bright colors draw attention. They should be used sparsely, and never next to each other

• If a picture contains morethan one strong color, balance must be achieved by intermingling them– i.e. having smaller

areas of one color within the other

9 38

Color Blindness• 8 - 12% of the population is color blind to

some extent, almost all men

• Several variants– Red, green and/or blue spectras can be

perceived abnormally or are totally missing

• Most common are– Protanopia unable to receive first color (red)

– Deuteranopia unable to receive second color (green)

http://www.btplc.com/age_disability/ClearerInformation/Colours/

10 38

”Normal” Vision

11 38

Protanopia (red-blind)

12 38

Deuteranopia (Green-Blind)

13 38

Color VisionNormal Protanopia Deuteranopia

14 38

Text• Basic on-screen typography:

– Linear fonts are preferred; they are easier to read on screen

– Serif fonts work only in larger sizes

• The background should be calm and contrast well with the text

• A width of 80 characters is optimal for reading

• CAPITALS ARE HARDER TO READ THAN LOWER CASE

Arial: linearTimes: serif

15 38

Space• Again: ”Confusion and

clutter are failures of design, not attributes of information”

• Clutter is best avoided by using space, a limited amount of colors and a grid

• Space is used to group or separate objects

• When in doubt: better too much space than too little!

16 38

Distinguishing Objects• Objects can be distinguished from others

using– Space

– Color

– Shape

– Separators such as lines

17 38

Balance• A layout must be balanced

– Very easy if the objects are regular

• Strategy: Position objects around an axis and try to put equal amounts of ”weight” on both sides

18 38

Balance• However, sometimes it’s a dead case…

19 38

Grid• Again: ”Confusion and clutter are failures

of design, not attributes of information”

• When creating a layout that carries information (as opposed to art) it is suitable to stick to a grid to avoid confusion

• In practice, this means aligning objects, and giving them the same height and/or width

20 38

A Hideous Example…

21 38

Adding Depth• We use shadows to create

an illusion of depth

• But we can also use more subtle ways; the brightness of an object– This is why input fields are

lighter than the background

22 38

Drawing Attention• We can draw attention to an object by…

• Highlighting it (as shown previously)

• Giving it a bright color

• Give it a border

23 38

Complications…• Center isn’t always center

24 38

Complications

25 38

Complications• Colors look different…

26 38

Complications

27 38

Complications• Finding the center of gravity

28 38

Complications

29 38

Flow• A layout that carries information (such as a

dialog box) must have its elements placed according to a logical and visual flow

• In western society normal flow goes from the upper left corner to the lower left corner:– Put the most important stuff top left!

Note: The white text areas stand out against the gray background

30 38

Flow

31 38

Envisioning Information• Show only relevant data

– Otherwise: clutter

• Show only reliable data– Otherwise: distrust

• Most important data comes first / is more colorful / is larger / etc!

• Provide several views– Layering data vs not layering

it

• Consider orientation– Which data dimension is the

most important?

– To the right: time

32 38

Envisioning Information• Integrate text, data and graphics in the

same display– Don’t dequantify data; let the graphic give

the overview

• Provide visual comparisons– Figures along with data

– Previews

33 38

Envisioning Information• Indicate causality

– Provide hints

• Use small multiples if suitable

34 38

In Short: Less Is More• When in doubt: go safe

– Fewer colors are normally better than many; create a palette and stick to it

– Some pixels extra space is normally better than cluttering

– Don’t over-use fonts and font sizes, stick to two or perhaps three fonts (headers, body and captions)

• If many levels of headings use numbering (e.g. ”1.2.2”) as distinguishing factor rather than minimal changes in font size or style

– Use one illustration style, not many

– Strive for a symmetrical design rather than asymmetrical…

35 38

The Thin Line• Antione de Saint Exupery: ”Perfection is

attained not when there is no longer anything to add, but when there is no longer anything to take away”

• True… or perhaps not;

36 38

In Short: Less Is More• When in doubt

– Fewer colors are normally better than many; create a palette and stick to it

– Some pixels extra space is normally better than cluttering

– Don’t over-use fonts and font sizes, stick to two or perhaps three fonts (headers, body and captions)

• If many levels of headnings use numbering (e.g. ”1.2.2”) as distinguishing factor rather than minimal changes in font size or style

– Use one illustration style, not many

• In this way

37 38

Redo it Right

38 38

Let’s order some coffee

• Make a small popup for ordering…

• …coffee or tea

• …with or without cream and/or sugar