Prototyping, User CognitionRevisited, and more

Lecture 5

June 6, 2006

Recap:

• Cognitive aspects– Cognetics

– Implications for design

– E.g. Memory, attention, etc

• Mental models

Recap:

• Four Basic Activities– Identifying needs and establishing

requirements

– Developing alternate designs

– Building interactive versions of the designs

– Evaluating designs

• Users/stakeholders– Diversity

Recap:

• Interaction Modes/styles/paradigms

• Establishing requirements

• Task Analysis

• Data gathering techniques

Recall: Conceptual Models

• A description of the proposed system interms of a set of integrated ideas andconcepts about:– What it should do

– How it should behave

– What it should look like

…that is understandable by the users inthe manner intended

Recall: Conceptual Models

• Activity-based– Instructing

– Conversing/communicating

– Manipulating/navigating

– Exploring/browsing

• Object-based

• Metaphors

Conceptual Models toPhysical Design

• Interface design is iterative

• Cycle:– Think through a design problem

– Understand user needs/requirements

– Generate possible conceptual models

– Prototype Models

– Evaluate wrt usability and user experience goals

– Make changes

– Re-evaluate prototype/re-evaluate original data

Our Goals

• Describe prototyping• Enable you to produce a simple prototype• Enable you to produce a conceptual model

for a system and justify your choices• Enable you to attempt some aspects of

physical design• Explain the uses of task descriptions and

prototypes in conceptual design• Discuss standards, guidelines, and rules

• “It is often said that users can’t tell youwant they want, but when they seesomething and get to use it, they soonknow what they don’t want”

Design

• Two types– Conceptual

• Our conceptual models

– Physical• Details of the design

• Emerges iteratively

• Designers need an interactive version oftheir ideas called a prototype

Prototyping

• In interactive design– Series of screen sketches

– Storyboard (like a cartoon)

– Powerpoint slide show

– Video simulation

– Lump of wood!

– Cardboard mock-up

– Software (limited functionality)

Example

Build 10 notebooks

Why Prototypes…?

• Answer questions and supportdesigners…– In choosing between designs

– Clarifying vague requirements

– In iterative design

– Test feasibility

– User testing and evaluation / Stakeholders

– Compatibility

• Encourages reflection

What do you prototype?

• Technical Issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial, critical areas

Prototyping

• Brainstorm & chooserepresentation

• Rough out interface style• Task-centred walkthrough

and redesign

• Fine tune interface, screendesign

• Heuristic evaluation andredesign

• Usability testing andredesign

• Limited field testing• Alpha/Beta tests

• Low fidelity paper prototypes

• Medium fidelty prototypes

• High fidelityprototypes/restrictedsystems

• Working systems

Early Design

Late Design

Low-fidelity prototyping

• Does not look much like final product

• Simple, cheap and quick

• Never intended to be kept

• Example– Wooden PDA

LFP: Sketching

• Rough drawing of the externalappearance of the system– Stick figures and boxes okay!

• Forces focus on high-level concepts

• Hard to envison dialogue progression

LFP: Storyboarding

• A series of sketches showing how auser might progress through a taskusing the device being developed– Can use index cards, Post-Its e.g.

• Often used in conjunction withscenarios

• Offers stakeholders chance to role-playwith prototype

Activity

• Write a scenario describing how to fill acar with gas.

• Illustrate with a storyboard.

LFP: Wizard of Oz

• User interacts as if with product

• Computer connected to anothermachine where a human emulatesresponse

• Good for testing NLP interface, forexample

High-fidelity Prototyping

• Uses materials you would expect in finalproduct

• Looks close to final product

• Common prototyping software– Macromedia Director

– Visual Basic

– Smalltalk

HFP: Examples

• Painting/drawing programs– Design storyboards on computer

– Very thin, horizontal PT, no “feel”

• Scripted simulations/slide shows– “Animate” storyboard

– User follows script which simulates realsystem

– Script deviations cause prototype to fail

HFP: Examples con’t

• Interface builders– Designer can lay out common widgets

– Quick rep of look & feel

– Constrained to available widgets

– Can expand vertically through selectiveprogramming

– E.g. Mac Interface Builder• Designs drag & drop from a palette of widgets

HFP: Problems

• Take too long to build

• Users tend to comment on superficialaspects during testing

• Developers are reluctant to change

• Can set expectations too high

• One bug can bring testing to a halt

Considerations

• Cost and schedule constraints• Proof-of-concept• Navigation and flow• Look-and-feel the product• Usability testing• Facilitation skill/programming skill• Current development stage

Horizontal vs. Vertical

Full system

Horizontal

Vertical

Moving to a Real System

• Approaches to prototyping– Throw-away

• Elicit user reaction• Rapid

– Incremental• Build as separate components• Prototype each and test, then add to final

system

– Evolutionary• Prototype evolved to incorporate design

changes

Usability Guidelines

1. Visibility of system status

2. Speak the user’s language

3. Clearly marked exits

4. Consistency and standards

5. Help users recognize, diagnose and recover fromerrors

6. Error prevention

7. Recognition rather than recall

8. Flexibility & efficiency: novice & expert users

9. Aesthetic and minimalist design

10. Help and documentation

Golden Rules (Shneiderman)

1. Strive for consistency2. Enable frequent users to use shortcuts3. Offer informative feedback4. Design Dialogs to yield closure5. Offer error prevention and simple error

handling6. Permit easy reversal of actions7. Support internal locus of control8. Reduce short-term memory load

Tying back to Cognetics & theUser

• Recall: Cognition involves many processes– E.g. attention, memory,perception and learning

• Interface design can greatly affect how wellusers can perform– E.g. perceive, attend, learn and remember how to

do their tasks

• The conceptual framework of ‘mental models’show how and why people interact withproducts– Help design better products

Design from the User’sPerspective

• Now that we have a good idea of UIdesign…

…Can look back at our discussion ofcognition and apply it to design

Recall Core Cognitive Aspects

• Attention• Perception and recognition• Memory• Reading, speaking and listening• Problem-solving, planning, reasoning

and decision-making, learning

4 Basic Design Principles

• PARC:– Proximity– Alignment– Repetition– Contrast

• Careful how you rearrange thatacronym ;-)

Proximity

• Group related items together– Appear to belong together

• Use empty space wisely

• How does this relate to the corecognitive aspects?

Proximity Example

Recall Core Cognitive Aspects

• Attention• Perception and recognition• Memory• Reading, speaking and listening• Problem-solving, planning, reasoning

and decision-making, learning

Alignment

• Don’t place objects arbitrarily

• Every item should have visualconnection

• Strive for unity

• Don’t overuse

• How does this relate to the corecognitive aspects?

Alignment Example

Repetition

• Repeat key portions of design– Consistency

– Memorability

– Adds visual interest

• Humans love a pattern!

• How does this relate to the corecognitive aspects?

Repetition Example

• Bedroom at Arles -- Van Gogh

Contrast

• Want to draw attention but not confuse

• How does this relate to the corecognitive aspects?

Example

Some notes on colour

• Which is easiest to read and why?

• Guidelines for use of colour– Colour displays are attractive to users and

can often improve task

This is a test

This is a test This is a test

This is a test This is a test

This is a test

Benefits of Colour

• Can improve an uninteresting display• Can encode information• Can emphasize the logical organization

of information• Can draw attention to warnings• Can evoke emotional reactions of

joy,excitement, fear, or anger

3 Colour Dimensions• Hue

– Spectral wavelength composition of a colour thatproduces its perception

– The average human can discriminate approx. 150hues

• Intensity– Relative amount of lightness or darkness of the

colour in a range from black to white (also knownas value)

• Saturation– Purity of the colour in a scale from gray to the

most vivid variant of the perceived colour (alsoknown as chroma)

DANGER!Inappropriate use of colour canbe disasterous to theapplication

Colour Terminology• Brightness

– Subjective reaction to levels of light– Affected by luminance

• Luminance– Luminance is the amount of light emitted by an

object– Dependent on the amount of light falling on the

object’s surface and its reflective properties• Contrast

– A function of the luminance of the object and theluminance of its background

Physiological Colour Guidelines

1. Avoid simultaneous display of highlysaturated, spectrally extreme colours• Causes visual fatigue• Reds, oranges, yellows, and greens can be

viewed together without refocusing• Cyan and blues cannot easily be viewed

simultaneously with red• Avoid extreme colour pairs such as red and blue,

green and red, or yellow and purple• Desaturating spectrally extreme colours will

reduce the need for refocusing

Physiological Colour Guidelines2. Avoid pure blue for text, thin lines and small

shapes• Human visual system has trouble with detailed,

sharp, short-wavelength stimuli• Blue makes a good background colour

3. Avoid adjacent colours differing only in theamount of blue– edges will appear indistinct

4. Older viewers need higher brightness levelsto distinguish colours

Physiological Colour Guidelines5. Magnitude of a detectable change in colour

varies across the spectrum• Small changes in some colours are harder to

detect than small changes in others

6. Difficulty in focusing results from edgescreated by hue alone

• Multi-coloured images should be differentiated onthe basis of brightness as well as hue

• 3D buttons vs flat buttons

Physiological Colour Guidelines7. Avoid red and green in the periphery of

large-scale displays• Due to the insensitivity of the retinal periphery to

red and green, these colours in saturated formshould be avoided, especially for smallsymbolsand shapes

• Yellow and blue are good peripheral colours8. Opponent colours go well together

• good: red/green or yellow/blue• bad: red/yellow or green/blue

Physiological Colour Guidelines9. For colour-deficient observers, avoid single

colour distinctions• Colour blindness is a lack of perceptual

sensitivity to certain colours, as a result of a lackof one or more of the types of colour receptors

• Most common is inability to distinguish red andgreen

• About 10% of Caucasian males have a colourperception defect, but this is rare in females

Colour Blindness

Perceptual Guidelines

1. Hues change with background colour• When grouping elements by colour, make

sure that backgrounds or nearby coloursdo not change the hue of an element

• Limit the number of colours and makesure they are widely separated in thespectrum

How UIs Affect Users

• Expressive interfaces– The UI ‘appearance’ can elicit positive or

negative responses

• Negative aspects– User frustration!

Colour in Culture

Affective aspects

• UI goal– Design efficient and effective systems

• Recently– Design interactive systems that make

people respond in certain ways

– E.g. to be happy, to be trusting, to learn, tobe motivated

Expressive UI

• Look & Feel– Colour, icons, sounds, graphics and

animations, E.g. Mac OS X Aqua– Conveys an emotional state

• Can affect usability– People will tolerate more for a better result

• To a limit!

– E.g. A slow download rate for anaesthetically pleasing interface

User-created expressiveness

• Emoticons

• Acronyms/shorthand– LOL

– ROFL

– IMHO

– TTYL

– 2NITE

User Frustration

• Many Reasons– Application failure or crash– System does behave according to user

expectations– System provides insufficient information– Vague or insulting error messages– Unpleasant Look & Feel

• I.e. Garish, noisy, gimmicky or patronizing

Error messages

“The application <Fill In Your Favourite>has unexpectedly quit.”

Error 404 -- Web page not found

Some of my Favourites

Error Messages: Better

• Application failure:– “the application has expectedly quit due to poor coding

in the operating system”

• Web failure:– The requested page /helpme is not available on the

<Fill In> web server.– If you followed a link or bookmark to get to this page,

please let us know, so that we can fix the problem.Please include the URL of the referring page as wellas the URL of the missing page. Otherwise check thatyou have typed the address of the web page correctly.

Error Message: Guidelines

• Don’t scare the user– Avoid terms like FATAL, INVALID, BAD– Avoid UPPERCASE and “!”

• It’s your fault not the user’s (usually)

• Aim for clarity– Avoid long code numbers– Precise & concise– Clear, common language– Suggest how to fix– Phrase the message as a question– Context-senstive help

Activity

• Improve these Error Messages– SYNTAX ERROR on line 9!

– You have entered an invalid phone number

– Bad file name

– Printer not found. Abort? Retry? Ignore?

Should Computers SayThey’re Sorry?

• Reeves and Nass (1996) “The Media Equation”present psychological studies showing that peopletreat computers as real people and places– People are polite to computers– Treat “female” computers different than “male”– Large faces on a screen are offensive– Screen motion affects people like real-life motion

• Conclusion?– The human brain has not evolved to assimilate computer

technology!

Computer Etiquette

• Should emulate human etiquette• Psychological component

– Would users forgive computers as they wouldpeople when saying sorry?

– Sincerity• “I’m really sorry I crashed. I’ll try not to do it again”• “It hurts me when you’re mad”

• How else should computers communicatewith users?

Next…User-centered approaches

to interaction design