CHAPTER 9 SCREEN DESIGN n OBJECTIVES n To

CHAPTER 9 SCREEN DESIGN n OBJECTIVES n To describe the difference between presenting info on paper and on screen n To understand screen layout issue

SCREEN DESIGN LECTURE TOPICS Screen vs. Paper n Screen Components n Design Issue n Screen Layout Basic n Navigation n

Paper Screen Problem Char of Media Printed Illuminated – may reflect like mirror Glare & visual distraction Focus Down Horizontal Room light needed High Low More visual interference – increased muscle work Continual Readjustment

SCREEN DESIGN: SCREEN VS. PAPER n n n Information visualization in HCI Must account for: A comprehensible mental image (metaphor) Appropriate organization of data, functions, tasks and roles (cognitive models) Quality appearance characteristics (the ‘look’) Effective interaction sequencing (the ‘feel’)

SCREEN DESIGN: SCREEN COMPONENTS Layout Format, proportions and grids Text Typefaces and typesetting Imagery signs, icons, symbols, concrete to abstract Visual identity unique appearance Animation dynamics of display Color and Texture Convey complex information and pictorial reality

SCREEN DESIGN: DESIGN ISSUES Content n Polarity n Text n Color n Images n Layout n

SCREEN DESIGN: DESIGN ISSUES Content n n Overall density (how much information on the screen) Local Density (how tightly packed the information on the screen) Grouping (number of separate groups and size of groups). Layout complexity

SCREEN DESIGN: DESIGN ISSUES Polarity n n Paper is dark type on light background If screen is light on dark, eye readjustment is necessary Amount of simulation must be examined may be Layout complexity

SCREEN DESIGN: DESIGN ISSUES Text n n n Character size & type use appropriate character height poorly defined font is harder to see Font type : HCI HCI Bold is often more visible from a distance The best combinations is the Title case

SCREEN DESIGN: DESIGN ISSUES Legibility and readability n n n n Legibility 1 -2 typefaces (3 max), 1 -3 size variations max Careful use of normal, italics, bold. Typesetting: word and line spacing, text orientation, line length, indentation, colour. Readability In the US there is public law that said public information should use words that a student of Grade 8 will understand. Also need to consider people with communication, learning and memory difficulties

SCREEN DESIGN: DESIGN ISSUES Text Colour n n n Black n white – most visual comfort (but problems for people with dyslexia) Generally – end of spectrum harder to see (red, blue, violets) Preferred – middle of spectrum easier on eye (green, yellow, orange)

SCREEN DESIGN: DESIGN ISSUES Colour - Background n n n Black n white – most visual comfort (but problems for people with dyslexia) Generally – end of spectrum harder to see (red, blue, violets) Preferred – middle of spectrum easier on eye (green, yellow, orange)

SCREEN DESIGN: DESIGN ISSUES Colour combination: Good Legibility Good white on red white on green Better Best white on blue black on yellow Yellow on black Black on white on black Green on white Red on yellow Red on white

SCREEN DESIGN: DESIGN ISSUES Colour combination: Bad Legibility Blue on yellow or orange Green on red or orange Yellow or orange on blue Red or orange on green

SCREEN DESIGN: DESIGN ISSUES Some question to ask; Does color add something that cannot be provided by black and white? n Is the chosen color appropriate for the text or object? n Does the color provide cues to improve understanding or memory? n Are there any visual problems that may make the information less legible? n

SCREEN DESIGN: DESIGN ISSUES Images Signs, icons, symbols right choice within spectrum from concrete to abstract Icon design very hard except for most familiar, always label them Image position and type should be related image ‘ family’ don’t mix metaphors Consistent and relevant image use not gratuitous identifies situations, actions

SCREEN DESIGN: SCREEN LAYOUT BASICS Introduction n n The display functions as a grid with some areas having greater impact than others The display acts as a set of many planes, each one on a layer closer to the user than the one behind it White space is design element Text and ideas must be chunked in order to be comprehended

SCREEN DESIGN: SCREEN LAYOUT BASICS n n n Cultural reading patterns impact design: western style: horizontal, L to R, Top to Bottom other cultural patterns differ Graphics have greater impact than text Animation has greater attention getting impact than graphics Sound has an impact equivalent to animation

SCREEN DESIGN: SCREEN LAYOUT BASICS Grids Horizontal and vertical lines to locate window components aligns related components Organizations contrast to bring out dominant elements grouping of elements by proximity show organizational structure alignment Consistency location Format Repetition organization

SCREEN DESIGN: SCREEN LAYOUT BASICS

SCREEN DESIGN: SCREEN LAYOUT BASICS n Screen Real Estate §Areas of the screen that automatically add emphasis to material, graphic or text paced here §Tend to minimize whatever located there §Ideal for navigational devices such as button bars, pull down menus, or status information

SCREEN DESIGN: SCREEN LAYOUT BASICS n Screen Real Estate §Neutral impact on whatever is located there §Good for summation text or summary graphics §Tend to add minimal impact to any graphics or text located there

SCREEN DESIGN: DESIGN ISSUES Economy of visual elements n Minimise number of controls n Include only those that are necessary n eliminate or relegate others to secondary windows n Minimize clutter (e. g use tab folders, but don’t overdo it) n so information is not hidden n

SCREEN DESIGN: NAVIGATION Not really screen design, more design of a set of screens. n Depth vs. breadth n it is generally advisable to avoid deep structure n

SCREEN DESIGN: NAVIGATION

COLORS

Rainbow - colours in the eye and on the screen play with colours n use of colour n 'physics' of colour n how we see colour n how computers do colour n see also www. colormatters. com n

play with colours n n n colour is surprisingly complex u physics, aesthetics, psychology using colour can be fun u experiment , play with it! context matters t we all see colours differently t perception of colour depends on surroundings t different at midday or night

the eye of the beholder context matters

good use of colour using conventions (red for alarms etc. ) n ‘branding’ parts of an interface n occasional emphasis n redundant coding u i. e. in addition to other means t e. g. web link colours - also underlined n yucky clip art, but was all I could find

bad use of colour over use - without very good reason (e. g. kids’ site) n colour blindness n poor use of contrast n do adjust your set! u adjust your monitor to greys only u can you still read your screen? n

'physics' of colour n n ‘colour’ is the wavelength of light t like pitch is the wavelength of sound spectrum -7 4 x 10 -7 m u from red - longest 7 x 10 m u to violet - shortest u and beyond … t red infra red (heat) microwaves radio t violet ultraviolet . . . nasty radiation

mixing colour n mixing paint blue + yellow = green (really cyan) n mixing lights red + green = yellow n called additive and subtractive colour

additive colour - mixing light physically both colours in the mixed light u like a chord in music u light is really red + green u we see yellow u

subtractive - mixing paint cyan paint absorbs a lot of red u yellow paint absorbs a lot of blue u cyan + yellow absorbs most of the red and blue leaving mainly green light reflected u so we see green u

primary colours in music we hear chords and harmony C+G E n there are no primary ‘notes’ in music n n so why three primary colours?

in the eye n n n two types of sensory cells: rods u see black and white and grey u best in low light u good at seeing movement cones u see colours u best in bright light

how we see colour n . . . three types of cones: u red, green and blue! u well nearly. . . t … like 3 radios tuned to different stations u each type sensitive to a range of light frequencies u eye compares ‘response’ of each kind

rods and cones n n n how many u more in the centre (fovea) than the edges => better central vision where they are u cones towards centre, rods towards edge => peripheral vision low-light, good at movement, black and white how fast u black and white faster (in brain) than colour

how computers do colour lots of spots of red, blue and green n eye merges them to form colours n like pointillist painting n colours described using RGB u amount of each colour they have u e. g. #ff 00 ff = purple n

variations n n different colour models: t HSI, CMYK, CIE t used for different purposes screen depth u number of bits used per pixel t 24 = 8 bits per colour (RGB) = 16 million colours t 32 as above, also ‘alpha channel’ (transparency) t 16 = 5 bits per colour = ‘thousands of colours’ t 8 too few to split, need designed palettes

palettes n n mapping: t 256 colours (8 bits) selection of full (24 bit) RGB options: u application palettes (why funny things happen!) u system palette (slightly different between platforms) u web colours t 6 colour levels for each RGB channel 6 x 6 x 6 = 216 t combinations of hex 00, 33, 66, 99, cc, ff t e. g. #cc 3300, #0000 ff, #999999

Putting them together screen layout and design basic principles n grouping, structure, order n alignment n use of white space n

basic principles ask u what is the user doing? n think u what information, comparisons, order n design u form follows function n

available tools grouping of items n order of items n decoration - fonts, boxes etc. n alignment of items n white space between items n

grouping and structure n logically together physically together Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item size 10 screws (boxes) …… 7 … 3. 71 … cost 25. 97 …

order of groups and items think! - what is natural order n should match screen order! u use boxes, space etc. u set up tabbing right! n instructions u beware the cake recipie syndrome! n

decoration use boxes to group logical items n use fonts for emphasis, headings n but not too many!! n ABCDEFGHIJKLM NOPQRSTUVWXYZ

alignment - text you read from left to right (English and European) n align leftboring hand side but n Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan readable! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess

alignment - names n Usually scanning for surnames make it easy! Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Janet Gregory Russell Dix Finlay Abowd Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell

alignment - numbers 532. 56 n think purpose! 179. 3 256. 317 15 n which is biggest? 73. 948 1035 3. 142 497. 6256

alignment - numbers visually: n long number = big number n align decimal points n or right align integers n 627. 865 1. 005763 382. 583 2502. 56 432. 935 2. 0175 652. 87 56. 34

multiple columns n scanning across gaps hard: (often hard to avoid with large data base fields) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

multiple columns - 2 n use leaders sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

multiple columns - 3 n or greying sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams (vertical too) 85

multiple columns - 4 n or even (with care!) ‘bad’ alignment sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

white space - the counter WHAT YOU SEE

white space - the counter WHAT YOU SEE THE GAPS BETWEEN

space to separate

space to structure

space to highlight

one-by-one – WIMPish Elements widgets - the bits that make the GUI n what do they do, what are they good for n little things matter n

widgets? individual items on a GUI screen. . . u checkboxes, menus, toolbars, buttons etc. n three aspects: u appearance - what they look like u interaction - how they behave u semantics - what they mean n

appearance

appearance includes words n n verbs - action words u quit, exit, embolden, italicise adjectives - description/state words u bold, italic nouns - usually as a form of description u Times New Roman, US Letter beware of mixes … u embolden + italic !!? !

behaviour

behaviour … ctd. some bits the toolkit does for you u but is it right? n some you control u e. g. drawing, interactions between widgets n beware timing issues u e. g. large selections under Windows apps. n

semantics n menus, buttons, etc. n do things … n … lets make it bold italic

YOU say what it means n n n semantics usually up to you u although widgets may link direct to database u even then, you say what links think separately: u meaning first - what you want it to do u then appearance - how you do it choose the widget for the job

what do you want? n n n actions u usually menu, buttons, or toolbar setting state/options u usually checkbox, radio button, combibox but … u menus can be used to set state etc. .

how many? one of several options u radio buttons, selection menu n zero, one or more options u checkbox, multi-choice menu n free choice u offer recent/typical shortcuts u one line text boxes often terrible! n

and more. . . n number u fixed e. g. bold, italic, underline u variable e. g. font list u scolling through telephone list … liveness u grey out inactive options dynamic interactions u some choices dependent on others

design is difficult little things matter

a design story. . . n n n documentation browser numbered scroll bar page-up/down buttons … on screen only … no-one used the buttons … why?

a design story … ctd. text jump scrolled n eye focus on buttons n disorientating n n … can we put it right?

a design story. . . ctd. section head at top n scroll buttons at top n opposite section head n difference? n … amazing! n

still looks wrong why?

hands across the screen? guidance u appearance u instinct u behaviour u analysis n why questions n

let’s look at scroll bars

scroll bars are simple. . . n Scrollbars may look different, but are basically the same. They just sit on the right hand side of the screen. You press the up button and the screen goes down, you press the down button and the screen goes up. . . hey wait a minute

always on the right? n well usually … n but is it right? n or should it be left?

watch the birdie

a little history n n n Xerox Palo Alto Labs u hotbed of computing research u programming environments (Lisp, Smalltalk) u Xerox Star (late 1970 s) - 1 st office GUI Apple u Lisa - technology from Star, but too expensive u Macintosh - birth of popular windows interfaces Microsoft u may get there someday. . .

Star and scrollbars n n pre-Star (Smalltalk etc. ) on the left Star - scrollbar on the right u to avoid visual clutter and ease text reading Star scrolling u page at a time - not continuous u very different model what is right - left or right … just hands across the screen?

up or down n Option 1 - normal today u arrow up = screen down & scroll handle up Option 2 u arrow up = screen up & scroll handle down which is right? no easy answer do an experiment!

Star team did it n n n Option 2 - won u so we have the wrong kind of scroll bar! why? two versions of Star interface u before and after experiments Xerox passed designs to Apple … … but gave the wrong one

the systems info and help management goal start add user the BIG picture navigation and dialogue main screen remove user add user confirm remove user messages

recap - levels widget choice u menus, buttons etc. n screen design n application n environment u other apps, O/S n

the web too n widget choice • elements and tags – <a href=“. . . ”> screen design n application n environment n • page design • site navigation • the web – external links

think about structure n n within a screen u previous lecture. . . local u looking from this screen out global u structure of site, movement between screens wider still u relationship with other applications

think about use n who is going to use the application? n how do they think about it? n what will they do with it? n …. games?

local from one screen looking out

four golden rules knowing where you’ve been u or what you’ve done n knowing where you are n knowing what you can do n knowing where you are going u or what will happen n

goal seeking goal start

goal seeking goal start progress with local knowledge only. . .

goal seeking goal start … but can get to the goal

goal seeking goal start … try to avoid these bits!

beware the big button trap things other things more things the thing from outer space

global between screens within the application

hierarchical diagrams the system info and help management add user remove user messages

hierarchical diagrams ctd. n parts of application u screens or groups of screens the systems n typically functional separation info and help management add user remove user messages

think about dialogue n what does it mean in UI design?

think about dialogue Minister: do you name take this woman … n Man: I do n Minister: do you name take this man … n Woman: I do n Minister: I now pronounce you man and wife n

network diagrams main screen remove user add user confirm

network diagrams ctd. what leads to what n what happens when n including branches n n more task oriented main screen remove user add user confirm

return to scenarios user presses ‘on’ button n login prompt appears n user enters user name and password n top level menu page appears n user selects ‘maze’ n … … n

scenarios ctd. Pros: u easy to understand u concrete (errors less likely) n Cons: u one route through the system u no branches, no special conditions n So: n

wider still between applications and the world wide web. . .

between applications style issues: u platform standards, consistency n functional issues u cut and paste n navigation issues u embedded applications u links to other apps … the web n

web structure n knowing what is there u 3 million web sites! u countless pages n so much to see and so little time n … but when did you last search the entire Library of Congress? n

the geometry of the web n n n links u extrinsic geometry (inxight) content u intrinsic geometry (alexia) u searching and finding people u recommendation