cs2003 usability engineering principles, requirements & prototyping jane coughlan
TRANSCRIPT
CS2003 Usability Engineering
Principles, requirements & prototypingJane Coughlan
The New Computing
• The old computing is about what computers can do; the new
computing is about what people can do.
• The New Computing movement stems from the book "Leonardo's Laptop: Human Needs and the New Computing Technologies" by Ben Shneiderman (MIT Press, summer 2002) as a result of research initiatives from the Human-Computer Interaction Lab at the University of Maryland (e.g., studies of user frustration).
• Successful technologies are those that are truly useful and therefore in
harmony with users' needs. They must support
relationships and activities that enrich the users' experiences.
What is NEW Computing ...
• ... UsableUsers’ experience with information and computing
technology could be dramatically better. It’s time to get angry about the quality of our computing environments: too many crashes, too many confusing designs, too many frustrations. We need to pressure software, hardware, and network developers to work together to develop more reliable and comprehensible products.
Too many people find computers frustrating
• What do users want – what’s most important to them?– Trust?– Privacy?– Reliability?– Security?– Simplicity?– Ease?Etc. Etc.
New Computing is also ...
• ... UniversalThe New Computing is also about empowerment for
everyone. Effective designs should be usable by every one: young and old, novice and expert, well and poorly educated, owners of new and older computers, speakers of English and other languages. Universal designs can improve the quality for all users.
Universal Usability• UU has been linked to meeting needs of disabled users.• Likely to meet and benefit the needs of all users so it is a
democratic endeavour.• If we adapt for users with diverse physical, visual,
auditory or cognitive disabilities we are likely to benefit users with different preferences, tasks, skills, hardware.
• EXAMPLE:– Think of curb-cuts – are they just for wheelchairs?– If it was a technology feature it would make good business
sense and create mass appeal
New Computing is ...
• ... UsefulThe New Computing is about enabling users to concentrate on
their personal needs and support their relationships with others. Users appreciate information and communication technologies most when they experience a sense of safety, mastery, and accomplishment. The New Computing technologies will enable users to accomplish their tasks and to relax, enjoy, and explore.
User-centred design• Design philosophy and process where needs, wants, and limitations of
users are given extensive attention at each stage of the design process.
• Below an example of the process as associated research methods at every stage
User-centred design• Consistency - invisible• Predictability – familiar (creates confidence)• Metaphors – shopping basket• Controllable – you can do what *you* want
We recognise and value GOOD design- Example: e-business is tied to interface design improvements e.g.,
more ticket sales
Think of how do we use technology?-Support relationships with family/friends-Teach/learn-Shop-Gather info, communicate, collaborate, distribute ideas
We are not particularly interested in the technology, we are more interested in our own information needs and relationships.
The User Experience
• User experience – refers to how a product behaves and is used by people in the real world and applies to all products (from mobile phone to your jumper).
• Also refers to how people feel about their product and their pleasure and satisfaction when looking/holding it etc to achieve that overall impression.
• Remember it is about designing for a user experience – i.e., you can create the design features that can evoke it.
• Apple – have they got it right?• Does the iphone/ipod/ipad create a quality user experience?• How realistic is it for designers to take all the user experience
factors into account? (e.g., usability, functionality, aesthetics, content, look and feel, emotional appeal).
• http://www.youtube.com/watch?v=ahtHKCQUD2k&feature=related
User Experience goals
• Satisfying - aesthetically pleasing• Enjoyable- fun• Engaging - supportive of creativity• Pleasurable - enhancing sociability• Exciting - emotionally fulfilling• Entertaining - stimulating• Helpful• Motivating
Usability
• Efficiency – how much effort to complete tasks? E.g., time
• Effectiveness – can users do what they want to do?• Satisfaction – ease of use?
• Dependent on:• Users - who is using the product? e.g. experts or
novices?• Goals - what are the users trying to do?• Context - where and how is the product being used?
Relationship between user experience and usability
• Flow is an important concept for informing the design of user experiences.
• Refers to an intense emotional involvement that comes from being completely involved in an activity such as a restaurant meal.
• "the holistic experience that people feel when they act with total involvement" (Csikszentmihalyi, 1975: 36)
• REF: Csikszentmihalyi, M. (1975), Beyond Boredom and Anxiety, Jossey-Bass, San Francisco, CA.
Constituent elements of the flow experience
• challenge & curiosity– an activity should trigger curiosity and allow the learner at the
same time to formulate goals, while preserving some element of surprise regarding the outcome.
• control– Providing levels to play (in gaming), technical difficulties in
project, some liberty to select goals strategies & tactics• fantasy
– imagination and freedom (make believe + voluntary activity)• feedback
– clear and immediate feedback should be provided if the goal or not has been reached.
• self-esteem– tasks should be adapted (see above) and encouragement to
learn & augment results should be provided.
Emotion
• Positive correlations between aesthetics and usability has led some such as Don Norman to change way of thinking.
• The good looking ATM example
• Three levels of emotion for design– Visceral – look, feel, sound (appearance)– Behavioural – use (pleasure and effectiveness)– Reflective – impression (self and personal
satisfaction)
Emotion
• A way of thinking about technology as a vehicle for emotions rather than for function and make more considered design decisions.
• Reference: Norman, D.A. 2005. Emotional Design. Basic Books. New York.
Screen design and layout
• Seminal work of Norman (1988)– Constraints
• making use of properties to tell users what they can and cannot do– Mappings
• making links clear and obvious– Visibility
• making clear what is happening– Consistency
• making things work in the same way at different times – Experience
• making use of what users know– Affordance
• making use of the properties of items to suggest use– Simplicity
• making tasks as simple as possible
• SOURCE: Norman, D. (1988). The Psychology of Everyday Things. Basic Books, New York.
CS1101/2012S - Interactive Systems 18
Norman - a design should…...
make sure users can figure out what to do tell what is going on
if user asks: “how am I going to remember that”, the
design has failed
Several steps to achieve this…
CS1101/2012S - Interactive Systems 19
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardise
vs.
recognition
recall
CS1101/2012S - Interactive Systems 20
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardiseVelcro
Shoelace
CS1101/2012S - Interactive Systems 21
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardise Electric Showers
CS1101/2012S - Interactive Systems 22
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardise
?
CS1101/2012S - Interactive Systems 23
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardise
Door open, microwave off
CS1101/2012S - Interactive Systems 24
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardise
CS1101/2012S - Interactive Systems 25
Norman’s 7 UCD design principles
1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible4. Get the mapping right5. Exploit the power of
constraints, both natural and artificial
6. Design for error7. When all else fails,
standardise
QWERTY layout Sholes 1880
Where do you plug in the mouse?SOURCE: www.baddesigns.com
Which way do you go? SOURCE: www.baddesigns.com
How do you operate the lift? SOURCE: www.baddesigns.com
29
User requirements
what is a requirement? A statement about an intended product that specifies
what it should do and how it should perform. requirements aren’t usually a ‘given’ factor:
they aren’t always what they initially appear to be, or what designers are told that they are
stakeholder conflicts can arise some req’s can arise within the design/development phases
expect this and prototype carefully! Goal is to establish requirements from a process of
understanding user needs Requirements need to be clear and we need to know
when they have been fulfilled
30
How to identify requirements
1. start by asking people, then go looking yourself it need not be a formal process although there are lots of formal approaches to choose from
2. follow a user-centred approach and use an appropriate form of data collection
31
What does the requirements process look like?
Source: http://www.volere.co.uk/masteringrequirementsprocess.htm
32
one way: Volere requirements process
5 steps - need to identify the following requirements types (adapted from the Volere Requirements Specification Template):
1. drivers (the business-related forces)2. project constraints (how the eventual product must
fit into the world, e.g. interfacing with existing hardware)
3. functional requirements (fundamental subject matter of the system)
4. non-functional requirements (behavioural properties that the specified functions must have, such as performance or usability)
5. project issues (conditions under which the project will be done)
Read Robertson & Robertson (2006) Mastering the Requirements Process
33
The “Volere requirements shell”
34
Usability requirements typically cover: Fit criterion – a way of measuring when the solution meets the
requirement Efficiency of use
how quickly or accurately the user can use the product Ease of remembering
how much should casual users be expected to remember? Error rates
e.g. it may crucial that the user commits very few, or no, errors. Overall satisfaction in using the product (e.g., user experience goals) Feedback
how much feedback does the user need in order to feel confident that it is doing what the user expects
- adapted from Shneiderman (1992) BUT others could be considered…
Fits with user characteristics (age, experience) Fits with desired function (product needs to communicate,
calculate, monitor x etc) Fit with environmental context (location, busy etc) Fit with group norms and practices (what is the context of use?)
35
Examples of usability requirements Description. e.g.s include:
“The product shall be easy for 11 year-old children to use.” “The product shall help the user to avoid making
mistakes.” “The product shall make the users want to use it.” “The product shall be used by people with no training, and
possibly no understanding of English.” ‘Fit’ Criterion (may be perhaps over-simplistic!)
[An agreed percentage, say 90%] of a test panel of 11 year olds shall be able to successfully complete [list of tasks] within [specified time]
One month’s use of the product shall result in a total error rate of less than [an agreed percentage, say 2%]
An anonymous survey shall show that [an agreed percentage, say 75%] of the users are regularly using the product after [an agreed time] familiarization period
These must be measurable and objective; users will determine acceptable criteria
36
Beyond the requirements specification: prototyping the interactive system
Two approaches:1. using a formal
specification2. developing the
specification out of the prototype
37
Why prototype?
design process - ‘involves searching for an acceptable design in an infinitely large design space’
Some requirements are not discovered until the user has the opportunity to use a product
problems - we... i. may not recognise a good design ii. may mistakenly think a bad design is good
38
What is a prototype?
Prototype = ‘building a physical working model of all, or part of the proposed system and using it to identify weaknesses in the understanding of the real requirements’
Full-size or to scale Fully or partially functional In HCI prototype may be a ‘virtual’ model – a ‘simulation’ Good for involving users in design
39
What do we use prototyping for? work out details and test them (sometimes impossible to
specify in advance)– in ways not possible at level of verbal description
quickly and cheaply build features of interest to try out– although hard to tell what these are
concrete approach– used to show users what inputs, intermediate stages and
outputs look like users can suggest changes...
– and see if it does what they want– …and see what is technically feasible
key issues: the “-Ations” Visualisation (see ideas in concrete form), elicitation (gather
ideas from domain experts and users), revelation (uncovering any unanticipated use), communication (to others), evaluation (what works, what doesn’t?), verification (can you build it? Does it work as designed to?)
Requirements gathering feeds into the building, testing, enhancing activities in prototyping
40
In essence, prototyping provides ...
… continuous feedback on the current design situation
design guidelines will not be applicable in all circumstances
Need not be computer based or have full functionality
Greatly aided by good software tools
Prototyping does NOT mean ‘build in haste’
41
When to prototype?
when... application area is poorly defined cost of rejection is v. high final version is essential to be right 1st time
forces the designer to visualise all steps and how the interface will operate in
practice Early on is best
42
Methods for prototyping
requirements
animationRepresentational (software tools to
demonstrate functionality)
rapidPrototyping
Exploratory
incrementalPrototyping
Section at a time, design is added to
module 1
module 2:incremental prototype
EP
evlovprotopy
evolutionaryPrototyping
Gradual, but will not be fixing requirements at an early stage
of prototyping method
throw away
43
Varieties of prototype (and compromises!)
full prototype vs. paper prototype
Complete functionality vs no (real) functionality
horizontal prototype vs. vertical prototype
Breadth (a range of functions with little detail) vs depth (providing a lot of detail for
only a few functions)
lo-fi prototype vs. hi-fi prototype (and med-fi!)
Little resemblance to final product (e.g., storyboarding, sketching, index cards) vs.
Close resemblance (use of software tools e.g., flash, visual basic).
44
Storyboards
Often used with scenarios, bringing more detail, and a chance to role play
a series of sketches showing how a user might progress through a task using the device
Used early in design Identify key events or activities associated with the scenario,
how many steps are involved? What are the design issues? also called interface-flow diagrams, window navigation
diagrams, or context-navigation maps Raises: usability questions Sketching
Sketching is important to low-fidelity prototyping
Don’t be inhibited about drawing ability
Include things (e.g., people, objects, actions, icons etc)
45
Card-based prototypes
Index cards (3 X 5 inches) Each card represents one screen or part of
screen Often used in website development User can step through the cards, pretending to
perform the task while interacting with the cards
46
Paper prototyping in action
http://www.youtube.com/watch?v=GrV2SZuRPv0
Prototype web mail service
47
Prototyping to support design
product conceptualisation allows exploration of alternative designs what might this system/application/device actually look like or
do? e.g. what might a word processor on a palm sized device look
like? task level prototyping
how suitable the design is at the level of performing users’ tasks
asks how can an individual task be performed - what steps are required?
e.g. how might cut and paste operations be performed? screen design prototyping
focus on icons, menus and screen layouts asks what would the screen layouts actually look like, to assess
their suitability? e.g. where are the buttons and widgets going to be placed?
48
Which prototype for what information?
low fidelity sketches and models focus on the outward appearance and
‘feel’ of the designed system crudeness means that people focus on the high level
concepts hard to envisage fine interaction details Good for evaluating design concept and cheap
development cost
high fidelity slow to build reluctance to change the design - all that hard work! testers and reviewers tend to focus on fit and finish issues
(colour of buttons, etc.) - BAD! Good for look and feel of final product being fully
interactive, but more expensive to develop
49
Reading
all HCI books have sections on prototyping but an excellent one is:Snyder, C. (2003) Paper prototyping: the fast and
easy way to design and refine user interfaces. Content: very useful insight into and examples of the
process of prototyping. A must read if doing paper prototyping.