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

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

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

SCREEN DESIGN: SCREEN VS. PAPER 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 Polarity Text Color Images Layout

Content SCREEN DESIGN: DESIGN ISSUES 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

Polarity SCREEN DESIGN: DESIGN ISSUES 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

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

Legibility and readability SCREEN DESIGN: DESIGN ISSUES Legibility and readability 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

Text Colour SCREEN DESIGN: DESIGN ISSUES 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)

Colour - Background SCREEN DESIGN: DESIGN ISSUES 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)

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

Colour combination: Bad Legibility 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

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

Images SCREEN DESIGN: DESIGN ISSUES 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

Introduction SCREEN DESIGN: SCREEN LAYOUT BASICS 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 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

Grids SCREEN DESIGN: SCREEN LAYOUT BASICS 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 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 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 Minimise number of controls Include only those that are necessary  eliminate or relegate others to secondary windows Minimize clutter (e.g use tab folders, but don’t overdo it) so information is not hidden

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

SCREEN DESIGN: NAVIGATION

COLORS

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

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

the eye of the beholder context matters

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

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

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

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

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

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

primary colours in music we hear chords and harmony C + G  E there are no primary ‘notes’ in music so why three primary colours? not physics … but the eye

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

how we see colour ... three types of cones: red, green and blue! well nearly ... … like 3 radios tuned to different stations each type sensitive to a range of light frequencies eye compares ‘response’ of each kind each mix has same response as some pure colour 3 receptors => 3 dimensions of colour

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

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

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

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

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

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

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

grouping and structure logically together  physically together Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

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

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

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

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

alignment - numbers think purpose! which is biggest? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256

alignment - numbers visually: long number = big number align decimal points or right align integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

multiple columns 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 use leaders sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

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

multiple columns - 4 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 what do they do, what are they good for little things matter

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

appearance

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

behaviour

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

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

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

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

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

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

design is difficult little things matter

a design story ... 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 eye focus on buttons  disorientating … can we put it right?

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

still looks wrong why?

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

let’s look at scroll bars

scroll bars are simple ... 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? well usually … but is it right? or should it be left?

watch the birdie

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

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

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

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

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

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

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

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

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

from one screen looking out local from one screen looking out

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

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 the thing from outer space more things other things

between screens within the application global between screens within the application

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

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

think about dialogue what does it mean in UI design?

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

network diagrams main screen remove user confirm add user

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

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

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

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

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

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

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