1

The Design Process

Lecture 10Date: 2nd March

2

Overview

•4 basic activities in HCI

•Requirements

•Design

•Develop

•Evaluation

3

Design Model

Design Model

Requirements

Design

Build/DevelopPrototyping

Evaluate

4

Prototypes

In other design fields a prototype is a small-scale model:

a miniature cara miniature building or town

Prototyping

5

“Users can’t tell you what they want, but when they see something and use it, they soon know what they don’t want” (Preece)

A prototype is an invaluable design tool for testing ideas, clarifying requirements and initiating user input and feedback

Core component of iterative design

Prototypes

Prototyping

6

In HCI design it can be (among other things):

a series of screen sketchesa storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide showa video simulating the use of a systema lump of wood (e.g. PalmPilot)a cardboard mock-upa piece of software with limited functionality written in the target language or in another language

What is a Prototype?

Prototyping

7

•Evaluation and feedback are central to interaction design

•Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing

•Team members can communicate effectively

•You can test out ideas for yourself

•It encourages reflection: very important aspect of design

•Prototypes answer questions, and support designers in choosing between alternatives

Why Prototype?

Prototyping

8

•Technical issues

•Work flow, task design

•Screen layouts and information display

•Difficult, controversial, critical areas

What to Prototype?

Prototyping

9

Fidelity refers to the level of detail:•Low Fidelity

•Storyboards•Wizard of Oz

•Medium Fidelity

•High Fidelity•Software tools for prototyping

Types of Prototype

Prototyping

10

•Uses a medium which is unlike the final medium, e.g. paper, cardboard

•Is quick, cheap and easily changed

•Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’

Low Fidelity Prototypes

Prototyping

11

•Often used with scenarios, bringing more detail

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

•Used early in design

Storyboards

Prototyping

12

•

Storyboards

Prototyping

13

•

Storyboards

Prototyping

14

•

Storyboards

Prototyping

15

•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?

UserUser

Wizard of Oz Prototyping

Prototyping

WizardWizard

16

Human ‘wizard’ simulates system response interprets user input according to an algorithm controls computer to simulate appropriate output uses real or mock interface wizard sometimes visible, sometimes hidden

“pay no attention to the man behind the curtain!”

Useful for:Useful for:adding simulated and complex vertical functionalitytesting futuristic ideas

Wizard of Oz Prototyping

Prototyping

17

IBM: an imperfect listening typewriter using continuous speech recognition

Secretary trained to:- understand key words as “commands”

- to type responses on screen as the system would

manipulating graphic images through gesture and speech

Intelligent Agents / Programming by demonstration Person trained to mimic “learning agent”

- user provides examples of task they are trying to do

- computer learns from them

Shows how people specify their tasks

In both cases, system very hard to implement, even harder to change!

Wizard of Oz Prototyping - Examples

Prototyping

18

Prototyping with a computerPrototyping with a computer•simulate some but not all features of the interface•engaging for end users

PurposePurpose•provides sophisticated but limited scenario for the user to try•can test more subtle design issues

DangersDangers•user’s reactions often “in the small”•users reluctant to challenge designer•Users reluctant to touch the design•management may think its real!

Medium Fidelity Prototyping

Prototyping

19

•Uses materials that you would expect to be in the final

product.

•Prototype looks more like the final system than a low-

fidelity version.

•For a high-fidelity software prototype common

environments include Macromedia Director, Visual Basic,

and Smalltalk.

•Danger that users think they have a full system…….

High Fidelity Prototyping

Prototyping

20

•High fidelity prototypes usually used for physical design

•Physical design considers more concrete, detailed issues of designing the interface: screens, menus, icons,

•Guidelines for physical design. Examples:

Nielsen’s usability guidelines

Styles guides: commercial, corporate

decide ‘look and feel’ for you

widgets prescribed, e.g. icons, toolbar

Physical Design & High Fidelity Prototyping

Prototyping

21

•By nature, prototype cannot as functional as end system -> compromise•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 Prototyping

Prototyping

22

•Horizontal prototype – shows user interface but has

limited functionality behind the buttons/controls. No

database links included.

•Vertical prototype – contains all of the high level and low

level functionality of particular areas in the system

Horizontal vs. Vertical Prototyping

Prototyping

23

•Requirements Animation – functional requirementsare demonstrated in a s/w prototype

•Throw-away prototyping– similar to requirements animation.. and prototype is not developed into the final product

•Evolutionary prototyping – prototype is not discarded and is used as the basis for the next iteration of design. I.e. system “evolves” from prototype

•Incremental prototyping – final product is build as separate components, one at a time – allows large systems to be installed in phases to avoid delays between specification and delay

Prototyping Methods

Prototyping

24

Prototype method Description Useful tool

Requirements animation Allows possible requirements to be demonstrated in a prototype which can then be assessed by users

Screen painters are suitable for animating the representational aspects.  Data manipulation and other high-level languages are suitable for animating the functional aspects.   Authoring languages, menu builders and active images tools prototype operational aspects

Rapid (throw-it-away) prototyping

Aims to collect information on requirements and the adequacy of possible designs.  Recognises that requirements are likely to be inaccurate when first specified.  the emphasis is on evaluating the prototype before discarding it in favour of some other implementation

Representational requirements and designs can be quickly created using screen painters, forms systems, report generators and menu systems.  Hypermedia and VHLL systems are also particularly suitable

Evolutionary prototyping compromise between production and prototyping.  The system can cope with change during and after development.  Helps overcome the traditional gap between specification and implementation

It is important to prototype using the facilities that will eventually be used to implement the final system.  Additions and amendments are made to the model following evaluation and the system is regenerated

Incremental prototyping the system is built incrementally, one section at a time.  Incremental prototyping is based on one over all design.

Re-usable software and highly modular languages can be useful as more pieces are ‘bolted on’ to gradually produce the final system.

 

25

Prototyping and Design

•Prototyping is useful at different stages of design:

Productconceptualisation

Task level

Screen Design

Prototyping

26

•Product conceptualisation – prototype used in earlystages of product development to gain a better understanding of the kind of product required

•Task Analysis – during requirements analysis, useprototype to clarify exactly how certain tasks will be accomplished. Critical for systems such as process controlfault diagnosis (e.g. MoD in U.K requires an executableprototype from the functional specs for all s/w projects

•Screen Design – verifying the details of screen design – icons, menus, screen layouts, use of colour, visual and audio effects, grouping of menu commands

Prototyping and Design

Prototyping

27

Prototyping S/w Tools

Need to choose the right software tools for the prototype:

What prototyping method? - will prototype be thrown away? Evolutionary? etc

What is the purpose?

- product conceptualisation? Screen design?

Who will be developing it?

- how much programming skill required?

Prototyping

28

Production tools

(that can be usedfor prototyping too)

Prototypingtools

Specifically used for prototyping

Prototyping S/w Tools

Prototyping

29

Production tools:

Produces re-usable software

X Constraints of producing quality s/w not necessarily compatible with prototyping

X Code management over head can slow production

X Higher costs of producing prototype

X Requires development skills -

Prototyping S/w Tools

Prototyping

30

Prototyping specific tools

Faster

Can be used by non technical staff

X Must be throw-away

X May not look exactly like future system

X May limit what can be configured

Prototyping S/w Tools

Prototyping

31

Prototyping specific tools

RAPID

MacroMind Director

HyperCard

Visual basic (can be used as part of productionsystem)

Examples of Prototyping S/w Tools

Prototyping

32

• Visual Basic for prototyping– The “Tools” menu contains the set of

Visual Basic tool that can be used to quickly build a user interface

– For example, the programmer can bring up the “Menu Editor” to design pull down and cascading menus for the user interface

– Developer can distribute executable for review

Prototyping S/w Tools

Prototyping

33

Menu Editor in Menu Editor in Visual BasicVisual Basic

34

Prototyping – Management Issues

Time – takes time to develop, particularly for throw-away prototypes

Planning – many PMs do not have experience required to plan and cost a design process with prototyping

Non-functional features e.g. safety and reliability not included

Contracts – difficult to manage prototyping activities via a contract

Prototyping

35

Design Model

Design Model

Requirements

Design

Build/Develop

EvaluateEvaluation Paradigms

36

Evaluation

2 types of evaluation•Formative evaluation is done at different stages of development to check that the product meets users’ needs.

•Summative evaluation assesses the quality of a finished product.

Our focus is on formative evaluation

Evaluation Issues

37

Evaluation

What to evaluate:Iterative design & evaluation is a continuous process that examines:

•Early ideas for conceptual model •Early prototypes of the new system•Later, more complete prototypes

Designers need to check that they understand users’ requirements.

Evaluation Issues

38

Evaluation

When to evaluate:•Throughout design•From the first descriptions, sketches etc. of users needs through to the final product•Design proceeds through iterative cycles of ‘design-test-redesign’

•Evaluation is a key ingredient for a successful design.

Evaluation Issues

39

Evaluation

•Evaluation

•Evaluation paradigms

•Expert reviews

•Usability testing

•Survey instruments

•Acceptance testing

Evaluation Issues

40

Expert Reviews

Evaluation Issues

• Formal expert reviews have proven to be effective

• Expert reviews range from a half day to one week, although a lengthy training period may be required

• Expert review methods: • Heuristic evaluation • Guidelines review • Consistency inspection • Cognitive walkthrough • Formal usability inspection

41

Expert Reviews

Evaluation Issues

• Can be scheduled at several points in the development process  

• Different experts tend to find different problems in an interface, so 3-5 expert reviewers can be highly productive

• Experts may not have an adequate understanding of the task domain or user communities.

• Experienced expert reviewers can have difficulty knowing how first-time users will behave

42

Usability Testing

•Usability testing involves measuring typical users’ performance on tasks that are typical of those for which the system was designed

•Performance is generally measured in terms of number of errors and time to complete the task

•Forms of usability testing:•Paper mockups•Discount usability testing•Competitive usability testing•Universal usability testing•Field test and portable labs•Remote usability testing•Can-you-break-this tests

Evaluation Issues

43

Survey Instruments•Written user surveys are a familiar, inexpensive companion for usability tests and expert reviews.

•Keys to successful surveys•Clear goals in advance•Development of focused items that help attain the goals.

•Online surveys avoid the cost of printing and the extra effort needed for distribution and collection of paper forms.

•Many people prefer to answer a brief survey displayed on a screen, instead of filling in and returning a printed form.

Evaluation Issues

44

Survey Instruments•Goals would be to ascertain

•users background (age, gender, origins, education, income)

•experience with computers (specific applications or software packages, length of time, depth of knowledge)

•job responsibilities (decision-making influence, managerial roles, motivation)

•personality style (introvert vs. extrovert, risk taking vs. risk aversive, early vs. late adopter, systematic vs. opportunistic)

•reasons for not using an interface (inadequate services, too complex, too slow)

•familiarity with features (printing, macros, shortcuts, tutorials)

•their feeling state after using an interface (confused vs. clear, frustrated vs. in-control, bored vs. excited).

Evaluation Issues

45

Acceptance Tests

•For large implementation projects, the customer usually sets objective and measurable goals for hardware and software performance e.g.

•Time to learn specific functions •Speed of task performance •Rate of errors by users •Human retention of commands over time •Subjective user satisfaction

•If the completed product fails to meet these acceptance criteria, the system must be reworked until success is demonstrated.

Evaluation Issues

46

Articulate:•who users are•their key tasks

User and task descriptions

Requirement:

Design:

Build:

Brainstorm designs

Participatory design

User-centered design

Evaluatetasks

User involvement

Representation & metaphors

low fidelity prototyping methods

Throw-away paper prototypes

Participatory interaction

Task scenario walk-through

Refined designs

Graphical screen design

Interface guidelines

Style guides

high fidelity prototyping methods

Testable prototypes

Usability testing

Heuristic evaluation

Completed designs

Alpha/beta systems or complete specification

Field testing

Interface Design and Usability Engineering

Evaluation:

47

Summary of Lecture• Lifecycle models

• Software engineering lifecycle models

• HCI lifecycle models   • Usability Engineering Lifecycle Model

• Star Lifecycle Model

• HCI design models• Requirements

• Design• User-centred design

• Develop/Build• Prototyping

• Evaluation• Evaluation paradigms

48

Terms of Reference• Preece, J. et al. (2002) Interaction Design

• Shneiderman, B. & Plaisant, C. (2005) Designing the User Interface

• Benyon, D. et al (2005) Designing Interactive Systems

• Helander, M. et al (1997) Handbook of Human-Computer Interaction

• Hartson, R. & Hix, D. (1989) Towards Empirically Derived Methodologies and Tools for HCI Development

• Mayhew, D. (1995) The Usability Engineering Lifecycle

• Alan Dix et al (1993) Human Computer Interaction

References