38 1 Traditional Graphical Interfaces: Form Sus Lundgren

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

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)

38 4 Colors

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

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…

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

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

38 9 Color Blindness % 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)

38 10 ”Normal” Vision

38 11 Protanopia (red-blind)

38 12 Deuteranopia (Green-Blind)

38 13 Color Vision Normal Protanopia Deuteranopia

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

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!

38 16 Distinguishing Objects Objects can be distinguished from others using –Space –Color –Shape –Separators such as lines

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

38 18 Balance However, sometimes it’s a dead case…

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

38 20 A Hideous Example…

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

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

38 23 Complications… Center isn’t always center

38 24 Complications

38 25 Complications Colors look different…

38 26 Complications

38 27 Complications Finding the center of gravity

38 28 Complications

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

38 30 Flow

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

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

38 33 Envisioning Information Indicate causality –Provide hints Use small multiples if suitable

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…

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;

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

38 37 Redo it Right

38 Let’s order some coffee Make a small popup for ordering… …coffee or tea …with or without cream and/or sugar