1. 38 1 Traditional Graphical Interfaces: Form Sus Lundgren

2. 38 2 Remember, always ”Confusion and clutter are failures of design, not attributes of information” - Edward R Tufte

3. 38 3 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 4 Colors

5. 38 5 Color Considerations Hue –Color nuance Saturation –”greyishness” Lightness –paleness In order to differentiate well, colors used together as background/foreground have to differ in at least lightness

6. 38 6 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 7 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 8 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 more than one strong color, balance must be achieved by intermingling them –i.e. having smaller areas of one color within the other

9. 38 9 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 10 ”Normal” Vision

11. 38 11 Protanopia (red-blind)

12. 38 12 Deuteranopia (Green-Blind)

13. 38 13 Color Vision Normal Protanopia Deuteranopia

14. 38 14 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: linear Times: serif

15. 38 15 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 16 Distinguishing Objects Objects can be distinguished from others using –Space –Color –Shape –Separators such as lines

17. 38 17 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 18 Balance However, sometimes it’s a dead case…

19. 38 19 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 20 A Hideous Example…

21. 38 21 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 22 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 23 Complications… Center isn’t always center

24. 38 24 Complications

25. 38 25 Complications Colors look different…

26. 38 26 Complications

27. 38 27 Complications Finding the center of gravity

28. 38 28 Complications

29. 38 29 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 30 Flow

31. 38 31 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 32 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 33 Envisioning Information Indicate causality –Provide hints Use small multiples if suitable

34. 38 34 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 35 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 36 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 37 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