Chapter 11

Design, prototyping, and construction

Outline

Prototyping and construction Conceptual design Physical design Using scenarios in design Using prototypes in design

Prototyping and construction

What is a prototype? Ranges from a paper-based storyboard through

to a complex piece of software Allows stakeholders to

Interact with an envisioned product Gain real experiences Explore imagined uses

So, a prototype is a limited representation of a design that allows users to interact with it and to explore its suitability

Why prototype?

To test out the technical feasibility of an idea To clarify some vague requirements To do some user testing and evaluation To check that a certain design direction is

compatible with the rest of the system development

Your purpose will influence the kind of prototype you build

Low-fidelity prototyping

Does not look very much like the final product Simple, cheap, and quick to produce/modify Only for exploration

Low-fidelity prototyping

Examples: Storyboarding – shows steps a user might go

through to perform a task by using the product Sketching Prototyping with index cards Wizard of Oz – a human operator sits and

simulates the software’s response to the user

Storyboards

• Often used with scenarios, bringing more detail, and a chance to role play

• It is a series of sketches showing how a user might progress through a task using the device

• Used early in design

From: www.id-book.com

Sketching

• Sketching is important to low-fidelity prototyping

• Don’t be inhibited about drawing ability. Practice simple symbols

From: www.id-book.com

Card-based prototypes

• Index cards (3 X 5 inches) • Each card represents one screen or part of

screen• Often used in website development

From: www.id-book.com

‘Wizard-of-Oz’ prototyping• The user thinks they are interacting with a

computer, but a developer is responding to output rather than the system.

• Usually done early in design to understand users’ expectations

>Blurb blurb>Do this>Why?

User

From: www.id-book.com

High-fidelity prototyping

Looks much more like the final product

Powerpoint prototype has characteristics of high and low fidelity

Low-fidelity prototype

Advantages Lower development cost Evaluate multiple design

concepts Useful communication

device Address screen layout

issues Useful for identifying

market requirements Proof-of-concept

Disadvantages Limited error checking Poor detailed

specification to code to Facilitator-driven Limited utility after

requirements established Limited usefulness for

usability tests Navigational and flow

limitations

High-fidelity prototype

Advantages Complete functionality Fully interactive User-driven Clearly defines navigational

scheme Use for exploration and test Look and feel of final

product Serves as a living

specification Marketing and sales tool

Disadvantages More expensive to develop Time-consuming to create Inefficient for proof-of-

concept designs Not effective for

requirements gathering

Compromises in prototyping

• All prototypes involve compromises• For software-based prototyping maybe there is a

slow response? sketchy icons? limited functionality?

• Two common types of compromise• ‘horizontal’: provide a wide range of

functions, but with little detail• ‘vertical’: provide a lot of detail for only a few

functions• Compromises in prototypes mustn’t be ignored.

Product needs engineering

Construction: from design to implementation

Evolutionary prototyping involves evolving a prototype into the final product The prototypes should be subjected to rigorous

testing along the way

Throwaway prototyping uses the prototypes as stepping stones towards the final design The prototypes are thrown away and the final

product is built from scratch

Conceptual design

Transform needs/requirements into a conceptual model

A conceptual model is an outline of what people can do with a product what concepts are needed to understand how to

interact with it Empathize with users – really understand the

users’ experience

Conceptual design

Key guiding principles of conceptual design are: Keep an open mind but never forget the users

and their context Discuss ideas with other stakeholders as much as

possible Use low-fidelity prototyping to get rapid feedback Iterate, iterate, iterate

Conceptual design

Requirements activity Provide information about the concepts involved

in a task and their relationships Empathize with users together with

requirements Provide information about the product’s user

experience goals Give a good understanding of what the product

should be like

Developing an initial conceptual model

Interface metaphors

Which interface metaphors would be suitable to help users understand the product?

3 steps to choose a good metaphor Understand what the system will do Understand which parts of the system users may

have difficulties with Generate metaphors

Interface metaphors

Evaluate metaphors How much structure does the metaphor provide? How much of the metaphor is relevant to the

problem? Is the interface metaphor easy to represent? Will your audience understand the metaphor? How extensible is the metaphor?

Interface metaphors

Example- a group travel organizer : printed travel brochure

Structure? A book with pages, a cover, binding, an index, table of contents, and content about destinations and accommodation

Relevant? Content is relevant. Page turning is less relevant. Keeping info updated should be easier with the organizer.

Interface metaphors

Example- a group travel organizer : printed travel brochure

Easy to represent? Holiday info could be a set of brochure-like ‘pages’

Understood by audience? Yes

How extensible? Extended to include functionalities of a book

Interface metaphors

Example- a group travel organizer : travel consultant

Structure? Travelers specify their needs. Consultants do research.

Relevant? To some extent. Some may like someone else to search for their holidays; some may not.

Interface metaphors

Example- a group travel organizer : travel consultant

Easy to represent? Represented by a software agent, or database entry and search facility

Understood by audience? Yes

How extensible? The consultant could give a few or a large number of options

Interaction type

Which interaction type(s) would best support the users’ activities? Instructing, conversing, manipulating, or exploring

Example: travel organizer Instructing – finding information about visa

regulations Conversing – finding information about holiday

plans

Interface type

Do different interface types suggest alternative design insights or options?

Thinking about a conceptual model should not be influenced by a predetermined interface type

Considering different interfaces prompt alternatives one step towards producing practical prototypes

Expanding the initial conceptual model

Expanding the conceptual model

What functions will the product perform? i.e. how the task will be divided up between the human and the machine (task allocation) Too high cognitive load for the user, the device

may be too stressful Too much control taken by the device (inflexible),

the product may not be used What functions will be ‘hard-wired’, what will

be left under software control

Expanding the conceptual model

How are the functions related to each other? Temporally, e.g. one must be performed before

another Categorizations, e.g. all functions relating to

telephone memory storage in a cell phone

The relationships between tasks (task analysis) supply information to support these kinds of decisions

Expanding the conceptual model

What information needs to be available? What data is required to perform a task? How is this data to be transformed by the system?

Physical design

Where the border between conceptual design and physical design lies is not relevant

What’s more important is that the conceptual design should not be tied to physical constraints too early because this might inhibit creativity

Using scenarios in design

Expressed proposed or imagined situations Used throughout design in many ways

Used as scripts for user evaluation of prototypes Provide a concrete example of a task Used as the basis of storyboard creation Build a shared understanding among team

members Sell ideas to users, managers, potential

customers

Using scenarios in design

Plus and minus scenarios to capture the most positive and negative consequences of a particular proposed design solution

Using prototypes in design

Generate storyboard from scenario

From: www.id-book.com

Scenario for holiday planner

“The Thomson family enjoy outdoor activity holidays and want to try their hand at sailing this year. There are four members of the family: Sky who is 10 years old, Eamonn who is 15 years old, Claire who is 35, and Will who is 40. While out on a shopping trip they call by at the travel agents

in their local town to start exploring the possibilities ... The travel organizer is located in a quiet corner of the agents’ office, where there

are comfortable seats and play things for young children. They all gather around the organizer and enter their initial set of requirements—a sailing holiday for four novices. The stand-alone console is designed so that all members of the family can interact easily and comfortably with it. The

system’s initial suggestion is that they should consider a flotilla holiday, where several novice crews go sailing together and provide mutual

support for first-time sailors…”

Generate card-based prototype from use case

From: www.id-book.com

Use case for holiday planner1. The system displays options for investigating visa and vaccination

requirements.

2. The user chooses the option to find out about visa requirements.

3. The system prompts user for the name of the destination country.

4. The user enters the country’s name.

5. The system checks that the country is valid.

6. The system prompts the user for her nationality.

7. The user enters her nationality.

8. The system checks the visa requirements of the entered country for a

passport holder of her nationality.

9. The system displays the visa requirements.

10. The system displays the option to print out the visa requirements.

11. The user chooses to print the requirements.

Summary

• Different kinds of prototyping are used for different purposes and at different stages

• Prototypes answer questions, so prototype appropriately

• Construction: the final product must be engineered appropriately

• Conceptual design (the first step of design)

• Consider interaction types and interface types to prompt

creativity

• Storyboards can be generated from scenarios• Card-based prototypes can be generated from use cases

From: www.id-book.com

Chapter 12

Introducing evaluation

Outline

Why, what, where and when of evaluation Evaluation approaches and methods Evaluation case studies

Why, what, where and when of evaluation

Why evaluate? Get feedback on early design ideas Able to fix problems before launching to market Focus on real problems rather than on designers’

preferences What to evaluate

Early design ideas Prototypes Finished products

Why, what, where and when of evaluation

Where to evaluate laboratory or natural settings

When to evaluate Formative evaluation – to check that the product

continues to meet users’ needs Summative evaluation – to assess whether the

finished product meets required standards

The language of evaluation

Analytical evaluation an approach to evaluation that does not involve

end-users, e.g. heuristic evaluation, walkthroughs, and modeling

Controlled experiment A study that is performed in a laboratory which is

controlled by the evaluator Field study

A study that is done in a natural environment

The language of evaluation

Formative evaluation Heuristic evaluation

An approach to evaluation in which knowledge of typical users is applied to identify usability problems

Predictive evaluation An approach to evaluation in which theoretically

based models are used to predict user performance

The language of evaluation

Summative evaluation Usability laboratory

a laboratory that is designed for usability testing User studies

Any evaluation that involves users directly Usability study

An evaluation that is performed to examine the usability of a design or system

The language of evaluation

Usability testing An approach to evaluation that involves

measuring users’ performance and evaluating their satisfaction with the system in question on certain tasks in a laboratory setting

User testing An evaluation approach where users are asked to

perform certain tasks using a system or prototype in an informal or laboratory setting

Evaluation approaches

Usability testing Field studies Analytical evaluation

Evaluation methods

Observing users Asking users Asking experts User testing Inspections Modeling users’ performance

Characteristics of approaches

Usability testing

Field studies

Analytical

Users do task natural not involved

Location controlled natural anywhere

When prototype early prototype

Data quantitative qualitative problems

Feedback measures & errors

descriptions problems

Type applied naturalistic expert

From: www.id-book.com

Evaluation approaches and methods

Method Usability testing

Field studies

Analytical

Observing x x

Asking users

x x

Asking experts

x x

Testing x

Modeling x

From: www.id-book.com

Evaluation case studies

Evaluation to design a mobile record system for Indian ANMs A field study using observations and

interviews to refine the requirements. It would replace a paper system. It had to be easy to use in rural

environments. Basic information would be recorded: identify

each house-hold, head of house, no. members, age and medical history of members, etc.

From: www.id-book.com

Could these icons be used with other cultures?

For more interesting examples of mobile designs for the developing world see Gary Marsden’s home page:http://people.cs.uct.ac.za/~gaz/research.html

From: www.id-book.com

Multiple methods to evaluate the 1984 OMS

• Early tests of printed scenarios & user guides. Early simulations of telephone keypad. An Olympian joined team to provide feedback. Interviews & demos with Olympians outside US. Overseas interface tests with friends and family. Free coffee and donut tests. Usability tests with 100 participants. A ‘try to destroy it’ test. Pre-Olympic field-test at an international event. Reliability of the system with heavy traffic.

From: www.id-book.com

Key points

Evaluation & design are closely integrated in user-centered design.

Some of the same techniques are used in evaluation as for establishing requirements but they are used differently (e.g. observation interviews & questionnaires).

Three main evaluation approaches are:usability testing, field studies, and analytical evaluation.

The main methods are:observing, asking users, asking experts, user testing, inspection, and modeling users’ task performance.

Different evaluation approaches and methods are often combined in one study.

Triangulation involves using a combination of techniques to gain different perspectives, or analyzing data using different techniques.

Dealing with constraints is an important skill for evaluators to develop.

From: www.id-book.com

Chapter 13

An evaluation framework

DECIDE: a framework to guide evaluation

1. Determine the goals 2. Explore the questions 3. Choose the evaluation approach and

methods 4. Identify the practical issues 5. Decide how to deal with the ethical issues 6. Evaluate, analyze, interpret, and present

the data

Determine the goals

Goals determine the scope of evaluation Different goals

To make sure that the design met users’ needs To fine tune an interface To examine how mobile tech changes working

practices To investigate what makes collaborative computer

games engaging

Explore the questions

Questions make goals operational Example:

Goal: Find out why some people prefer to purchase paper airline tickets rather than e-tickets

Questions: What are customers’ attitudes to these e-tickets? Do they trust the system? Is the user interface to the ticketing system poor?

Explore the questions

Questions can be further broken down into very specific subquestions

Example: Question: Is the user interface to the ticketing

system poor? Subquestions:

Is the system difficult to navigate? Is the terminology confusing? Is the response time too slow?

Choose the approach and methods

Depend on Goals Questions Resources Practical issues Ethical issues

Identify the practical issues

Kind of users to be involved target user groups (level of experience, gender,

age, etc.) tasks

Logistical issues Facilities and equipment

How will you do the video recording? How will you record the data when users move quickly

from one environment to another? Schedule and budget

Identify the practical issues

Kind of expertise needed to perform the evaluation Running user tests requires knowledge of

experimental design and video recording

Using statistical measures needs knowledge of statistics -> consult a statistician

Decide about ethical issues

Develop an informed consent form

Participants have a right to:- Know the goals of the study;- Know what will happen to the findings;- Privacy of personal information;- Leave when they wish; - Be treated politely

From: www.id-book.com

Evaluate, interpret & present data

The approach and methods used influence how data is evaluated, interpreted and presented

The following need to be considered:- Reliability: can the study be replicated?- Validity: is it measuring what you expected?- Biases: is the process creating biases?- Scope: can the findings be generalized?- Ecological validity: is the environment influencing the findings?

i.e. Hawthorn effect

From: www.id-book.com

Key points

There are many issues to consider before conducting an evaluation study.

These include the goals of the study, the approaches and methods to use, practical issues, ethical issues, and how the data will be collected, analyzed and presented.

The DECIDE framework provides a useful checklist for planning an evaluation study.

From: www.id-book.com