Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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