Screen design Attention, Colour

psychological and physiological constraints

Attention

Attention

• What is attention?– Visual **– Audio

• What are the implications for UI designers?– Multi-tasking– Attention-grabbers

• And for UI evaluations?– Eye tracking– Think-aloud

• For your project– Guiding the user in where to attend

Memory

• Working memory– Miller, George A. "The magical number seven, plus or minus two: some limits on our capacity for processing information." Psychological

review 63.2 (1956): 81. (>17K gcites, Sep 2013) http://cogprints.org/730/1/miller.html

– WM very limited– Chunking is really important– Complex to user this to predict … but may explain think-aloud

observations– (Claude Shannon theory of information .. Brain as information

processing machine)• Long term memory

– Critical for recall at UI– And learning about UI– Mental model

Perception

• Translating external stimuli into the memory– Senses– Processing their information– Tightly interlinked physical and cognitive

• Simple example, reading a screen– Vision… visibility

Screen design• Tullis, Thomas S. "The formatting of alphanumeric displays: A review and analysis."

Human Factors: The Journal of the Human Factors and Ergonomics Society 25.6 (1983): 657-682.

• http://www.eastonmass.net/tullis/publications/1983-HF/FormattingAlphanumericDisplays.pdf

• Key outcomes in terms of– Performance versus affect (preferences)– Density (local/overall), grouping, layout complexity– Grouping related elements, organised for vertical scanning, with space between them aids

search in speed and preference• Science of screen design

– Careful empirical studies– Design of initial study– Replication– Impact of different technology– Impact of the particular task– Impact of user’s mental model, standards for device, application– Translation to your interface

Colour

• Valuable for screen design– Performance ++– Affect ++

• Well understood challenges that are avoidable but failure to do so can compromise performance

Tog Principleshttp://asktog.com/atc/principles-of-interaction-design/

• “Principle: Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot see the colors presented

• Principle: Test your site to see what color-blind individuals see

• Principle: Do not avoid color in the interface just because not every user can see every color.

• Principle: Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad.

Colour blindness

• Affected ~ 8% of men, .5% women• Testing tools eg

– http://enably.com/chrometric/. • For images images

– http://www.colblindor.com/coblis-color-blindness-simulator/.

Coblis — Color Blindness SimulatorTheir demo: normal vision

Green-Blind/Deuteranopia

Blue-Blind/Tritanopia

Red-Blind/Protanopia

What can you do about colour blindness?

• Be aware!• Design in black and white and add colour

sparingly• What else? …. Class activity

Colour

• Valuable for screen design– Performance ++– Affect ++

• Well understood challenges that are avoidable but failure to do so can compromise performance

Coding

• Means distinguishing different parts of an interface• Includes

– Font changes such as these

– Font with style and size– Use of colour such as here and here – seriously– Special symbols, shapes– Sound– Movement

• All are about ...

Coding

• Means distinguishing different parts of an interface• Includes

– Font changes such as these

– Font with style and size– Use of colour such as here and here – seriously– Special symbols, shapes– Sound– Movement

• All are about ... gaining attention

HAI2008.Lifelong ambient companions:

challenges and steps to overcome them

Colour can be poorly used• Means distinguishing different parts of an interface• Includes

– Font changes such as these

– Font with style and size– Use of colour such as here and here – seriously– Special symbols, shapes– Sound– Movement

• All are about ... gaining attention

Stroop effect

http://faculty.washington.edu/chudler/java/ready.html

Stroop Effect say the colour of the words here

From http://faculty.washington.edu/chudler/words.html

Colour

• Properties– Hue – wavelength (red .. violet)– Saturation, chroma (purity, mix of wavelengths)

• High saturation very pure• Low saturation, greyish

– Brightness, intensity, value • very low intensity becomes black

Visible Spectrum

Winter 2013 CSE 440: User Interface Design, Prototyping, and Evaluation 22

Physiology and colour

• Rods and cones• Fovea – detailed vision (eg text)• Only cones sensitive to colour

– 64% respond to red– 32% to green– 2% to blue (none in fovea!)

• Opposing colours at the neuron level– Red-green, yellow-blue

• Visual acuity reduced for violet end of spectrum• Insensitivity to blue increases with age• Blue seems harder to read, especially on some

backgrounds• With normal light, we see mid-spectrum colours

best (ie green, yellow)• Colour blindness

– Use additional redundant cue eg colour + box + brightness difference and this improves broad performance

• Reds appear closer than blues• Warm colours appear larger than cool colours

– eg red larger than blue• Blooming effect

– Light colours on dark backgrounds appear larger• Colours distant on spectrum require refocusing• After images and shadows can follow

– Opposing colours– Highly saturated colours

• Illumination matters too

Light text on a dark background

Dark text on a light background

Blooming – light text on dark background seem larger

Light text on a dark background

Dark text on a light background

Red text on a dark background

Red text on a light background

Red text seems to focus differently

Red text seems to focus differently

Red text seems to focus differently

Red text seems to focus differentlyRed text seems to focus differently

Red text seems to focus differently

So many ways to make mistakes...

Color GuidelinesAvoid simultaneous display of highly saturated, spectrally extreme colors

– e.g., no cyans/blues at the same time as reds, why?• refocusing!

– desaturated combinations are better pastelsWinter 2013 From: CSE 440: User Interface Design,

Prototyping, and Evaluation 32

Guidelineseg http://colorusage.arc.nasa.gov/guidelines.php

Examples:

• Pure blue shall not be used on a dark background for text, thin lines, or high resolution information. [Source: DOE-HFAC 1, 1992] FAA Human Factors Design Standard, p 8-58

• 8.6.2.2.7 Blue. Blue should not be used as the foreground color if resolution of fine details is required. [Source: DOD HCISG V2.0, 1992] FAA Human Factors Design Standard, p 8-57.

• http://colorusage.arc.nasa.gov/assets/blue_1.gif

More examples from NASA:from http://colorusage.arc.nasa.gov/guidelines_discrim_id.php

• Use no more than six colors to label graphic elements.

• Use colors in conformity with cultural conventions.

• Use color coding consistently across displays and pages

• Use color coding redundantly with other graphic dimensions.

• Don't use color coding on small graphic elements

Recommendations

• Use colour sparingly• Maximum codings 5 (+ or – 2) matching short term

memory• Design in monochrome first• Optimise all other aspects of design and layout• Add colour (with awareness of problems)• Use colour to:

– Draw attention (better than shape, size, brightness)– Show organisation, status, relationships

Blinking and movementWhen is it good?

And not?

Blinking and movement

• Hard to ignore• Reduces legibility• Can be really annoying

• Helpful for tiny cursors (otherwise hard to find and large ones are obtrusive)

• Helpful for critical situations

Shapes

• Conventions for some shapes– eg warning and errors

• Special shapes– eg little hand pointing

• Cultural boundaries

Summary

• Awareness of human factors affecting design

• Awareness of some basic guidelines for use of colour– Apply these for a simple form of no-user testing

by checking your UI against guidelines– Better done by person other than designer (role

for your teams to desk-check each other’s designs)