CS2003 Usability Engineering Principles, requirements & prototyping Jane Coughlan

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.

http://mitpress.mit.edu/leonardoslaptop

http://www.cs.umd.edu/~ben

http://mitpress.mit.edu/leonardoslaptop

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

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…


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








standardiseVelcro

Shoelace








standardise Electric Showers








standardise

?








standardise

Door open, microwave off








standardise








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.

Documents

CS2003 Usability Engineering Principles, requirements & prototyping Jane Coughlan