October 13th 2014 LECTURE 11 USABILITY...

86
LECTURE 11 USABILITY - PROTOTYPING October 13th 2014 human computer interaction 2014, fjv 1

Transcript of October 13th 2014 LECTURE 11 USABILITY...

Page 1: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

LECTURE 11

USABILITY - PROTOTYPING

October 13th 2014

human computer interaction 2014, fjv1

Page 2: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Recapitulation Lecture #10

Tool box for HCI

• Task Analysis

• Cognitive techniques

– GOMS/CCT

– ERMIA

– CWA

• Dialogue Analysis-Design

• Color/Text Analysis-Design

human computer interaction 2014, fjv2

Page 3: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Example: Cognitive Task Analysis

human computer interaction 2014, fjv3

A B

C D

C D

A B

Send in 2011, by former CS HCI student

OV Chipcard Checkout Counter

Page 4: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Waterfall with iteration

Requirementsspecification

Architecturaldesign

Detaileddesign

Coding andunit testing

Integrationand testing

Operation andmaintenance

• Discoveries in later stages can be reflected in

iterations

• Requirements were incomplete in the analysis

phase

• Therefore sometime better to acknowledge

incompleteness and use advanced understanding

• It is clear that the design process is not at all linear

• Preference for Star Model ?

human computer interaction 2014, fjv4

Page 5: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Star Model – Representations ...

human computer interaction 2014, fjv5

Dialog Analysis

Cognetics

User Analysis

Task Analysis

Technology

Assessment

Problem

Statement

Context

Analysis

Usability

Analysis

Specification

Prototype

Cognetics

Prototype

High-Fidelity

Usability

testing

Interaction

Design

Page 6: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

USABILITY

USABILITY ENGINEERING

6human computer interaction 2014, fjv

Page 7: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability

• Definition: Usability comprises the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment

• In design/development process– Usability Specifications

– Levels of Specification

– Measurement

• Usability engineering – Comparable to Software Engineering

human computer interaction 2014, fjv7

Page 8: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability & 7 Stages model

• Gulf of execution

– Translate user’s formulation of actions

to the system

• Gulf of evaluation

– Effect of action in user’s expectation of changed

system state

• A good conceptual design & Mental Model

helps in dealing with Gulf of

execution/evaluation

8human computer interaction 2014, fjv

Page 9: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability engineering

• Providing structured methods in UI design during product development

• Measuring very specific user actions in specific situations

• Try to find real usability problem(s)

– e.g. programming errors in VCR/interactive TV

• Usability specifications is not the same as Usability

– e.g. Video Recording still a pain to program!

9human computer interaction 2014, fjv

Page 10: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Engineering Life Cycle

• Close to Soft Systems (lecture 9)

• Holistic view of usability engineering

• Links to software engineering

– OOSE

• Requirements, Design, Evaluating, Prototyping

• Scaled down for smaller projects

• Usability goals are formulated in a style guide

10human computer interaction 2014, fjv

Page 11: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability ~ Prototyping

• A chick and egg problem

• The sequence in which we discuss it does not reflect the sequence of its natural occurrence

• Imagine the Star Model

• How do usability & prototyping relate to evaluation!

• Focus on Usability specification!, this happens early in the design trajectory:

– requirements engineering

11human computer interaction 2014, fjv

Page 12: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability

“Usability comprises the effectiveness, efficiency and satisfaction with which

specified users can achieve specified goals in a particular environment.”

Page 13: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Components (from #1)

• Learnability (also referred to as Memorability)

• Ease of learning the system, i.e. the basic tasks

• Skills retained over time

• Throughput (also referred to as Efficiency)

• Speed of task performance

• Low user error rate

• Flexibility• Suitability for intended user expertise

• Can system be customised?

• Attitude (also referred to as Satisfaction)• User subjective satisfaction with system

13human computer interaction 2014, fjv

Page 14: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Studio’s

• Studios are decorated according to specific usability questions

• Studio equipment is context dependent

14human computer interaction 2014, fjv

Page 15: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Specifications

• Definition and purpose

• Usability factors

• Measuring instruments

• Usability specification process

• Setting usability levels

• Advantages and disadvantages

15human computer interaction 2014, fjv

Page 16: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Definition (1990)

• ISO 9241definition

“Effectiveness, efficiency and satisfaction with

which specified users can achieve specified

goals in a particular environment.”

• Functional ~ Usability Specifications

– Functional specifications:

are central to ensuring system functionality

– Usability specifications:

are central to ensuring system usability

16human computer interaction 2014, fjv

Page 17: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

ISO usability standard 9241

Adopts traditional usability categories:

• effectiveness

– can you achieve what you want to?

• efficiency

– can you do it without wasting effort?

• satisfaction

– do you enjoy the process?

17human computer interaction 2014, fjv

Page 18: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Purpose Usability Specifications

1. Establish when an interface is ‘good

enough’

2. When to stop iteration

3. Controlling document of design process

18human computer interaction 2014, fjv

Page 19: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Common Usability Factors

• Speed of operation

• Completion rate

• Error free rate

• Satisfaction rating

• Learnability

• Retainability

• Advanced feature usage

Most important Software measures

as identified/used by IBM in 1990

19human computer interaction 2014, fjv

Page 20: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Time Dimension Usability Factors

• Initial performance

• Long-term performance

• First impression

• Long-term user satisfaction

20human computer interaction 2014, fjv

Page 21: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Measuring Instrument

• Method for providing values for a particular usability factor

• Always quantitative, i.e. numerically measured

– Objective

• Observable user performance

• Often associated with a benchmark test

• Involves typical user task (normally simple and frequent)

– Subjective

• User opinion

• Usually associated with a user questionnaire

• Objective and subjective measures are of equal importance

21human computer interaction 2014, fjv

Page 22: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Important metrics from ISO 9241

Usability Effectiveness Efficiency Satisfactionobjective measures measures measures

Suitability Percentage of Time to Rating scale for the task goals achieved complete a task for satisfaction

Appropriate for Number of power Relative efficiency Rating scale fortrained users features used compared with satisfaction with

an expert user power features

Learnability Percentage of Time to learn Rating scale forfunctions learned criterion ease of learning

Error tolerance Percentage of Time spent on Rating scale for errors corrected correcting errors error handling successfully

22human computer interaction 2014, fjv

Page 23: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability Specification Process

• Defining usability through metrics

– duration metrics

– count measures

– proportion completed

– quality

• Setting and agreeing planned levels of metrics

• Analysing impact of design solutions

• Incorporating user-derived feedback

• Iterating until planned levels are achieved

• SUS questionnaire (for assignment)

23human computer interaction 2014, fjv

Page 24: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

e.g. Usability Specs DTP package

Time Task Measured Current Worst Planned Best

Initialization Benchmark #1

Time to

successful

installation

Difficult

to install90 min 30 min 20 min

Initial

performanceSet TAB # errors 3 errors 3 errors 2 errors 0 errors

Initial

performanceDelete TAB

Time on first

trial6 s 6 s 4 s 2 s

First Impression QuestionnaireAverage score

(1-5)NA 3 4.2 5

24human computer interaction 2014, fjv

Page 25: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Usability and Requirements

• Usability levels become part

– first of the requirements document

– then of the system specification

– then of the complete system documentation

– then of report on system design / implementation

25human computer interaction 2014, fjv

Page 26: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Setting Levels for Usability

• Restrict to major / critical issues

• Method: guesses agreed by a team, i.e.

– user interaction designer

– user interface software developer

– marketing person

– project manager …

– generates team commitment to usability targets

• Initial performance and first impression are

almost always appropriate

26human computer interaction 2014, fjv

Page 27: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Current & Worst Acceptable Levels

• Current Level– Present level of value to be measured

– Possible even from manual system or initial prototype

– May be related to a competitive system

• Worst Acceptable Level– Worst acceptable, not worst possible

– Eventually, if any observed value on any attribute is does not meet this level then:

the system is formally unacceptable

– Level should equal or improve current level • except for initial performance

• slower and error prone

• make an educated guess

27human computer interaction 2014, fjv

Page 28: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Planned Target & Best Possible Levels

• Planned Target Level

– The ‘what you would like’ level

– Attributes not yet at this level focus development effort

– Set higher than current level (if known)

– Match or exceed competitor’s product

• Best Possible Level

– Realistic state-of-the-art upper limit

– Indicates room for future improvement

– Assumes expert user, best design, best available

technology

28human computer interaction 2014, fjv

Page 29: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Advantages Usability Specs

• Part of the management and control mechanisms for

the iterative refinement process

– Define a quantitative end to the (potentially endless)

iterative refinement process

• Allows clear assessment of usability during iterative

prototyping cycles

• Identifies data to be collected, avoids gathering

unusable or irrelevant data

• Objectively identifies interface weaknesses which

need further design effort

29human computer interaction 2014, fjv

Page 30: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Disadvantages Usability Specifications

• Measures of specific user actions in specific

situations

• No reliable technique for setting usability

specifications; Issue of globalization

• Different tasks and user groups may need

different usability specifications

30human computer interaction 2014, fjv

Page 31: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

31human computer interaction 2014, fjv

Page 32: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

PROTOTYPING

Prototyping is common in almost every fieldof engineering design

In prototyping one has to plan to throw away

32human computer interaction 2014, fjv

Page 33: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping the User-Interface

• Purpose of prototyping

• Merits of prototyping

• Types of prototyping

• Prototyping and management

• Limitations of prototyping on its own

33human computer interaction 2014, fjv

Page 34: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

• Identifying user interface (and other)

requirements:

• almost impossible to specify in advance

• “It is not until users interact with something

concrete that their rich expertise about their

working environment will surface.”

Purpose of Prototyping

34human computer interaction 2014, fjv

Page 35: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Design is Developing Artifact

• Indeed, “Magritte” was right!

35human computer interaction 2014, fjv

Page 36: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping

• The prototyping approach provides continuous

feedback on the current design situation

• In HCI there will never be fully satisfactory design

guidelines applicable in all circumstances

• Need not be computer based or have full functionality

• Supported by good software tools

– Graphical editors, construction kits

– User Interface Management Systems (UIMS)

– Wireframes

• “Prototyping does NOT mean ‘build in haste’”

36human computer interaction 2014, fjv

Page 37: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping the User Interface

37

Build

Prototype

Test Prototype

Enhance

Design

Life Cycle

requirements

engineering

Technology

Guidelines

human computer interaction 2014, fjv

PACT

Analysis

People

Activities

Context

Technologies

Page 38: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototype Fidelity

• Prototyping is concerned with the design

process leading up to production of a final

system

• Prototypes are not the final system, merely

representations of that system: Artifact

• As the Prototyping refines, the Fidelity of the

prototype increases.

low fidelity high fidelity

start design end design

38human computer interaction 2014, fjv

Page 39: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

39

Merits of Prototyping

• Requirements capture

– Interface and functional requirements

• Reveals problems / prevents gross mistakes

• Allows evaluation and discussion

– Fostering innovative ideas (from designers and users)

• Users enjoy prototyping and feel involved

– Participatory design

• Suggests level of user support

• Results in better usability

• Reduced deadline effect

• Fewer lines of code

human computer interaction 2014, fjv

Page 40: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Fidelity in Prototyping

• Fidelity refers to the level of detail

• High fidelity:

– A prototype that looks like the final product

• Low fidelity:

– Artists renditions with many details missing

40human computer interaction 2014, fjv

Page 41: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Why Low-Fidelity Prototype ?

• Traditional methods take too long

– sketches prototype evaluate iterate

• Can simulate the prototype

– sketches evaluate iterate

– sketches act as prototypes

• designer “plays computer”

• other design team members observe & record

• Requires “Fröbel” implementation skills

– allows non-programmers to participate

41human computer interaction 2014, fjv

Page 42: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Construct Low-Fidelity Prototype

42human computer interaction 2014, fjv

Page 43: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Sketched Paper Design

43human computer interaction 2014, fjv

Page 44: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Low-Fidelity Prototyping

• Takes only a few hours

– no expensive equipment needed

• Can test multiple alternatives!!!

• Can change the design as you test

– If users are trying to use the interface in a way you

did not design/intend it

– go with what they think! Adapt!

• Allows designers & users to work together

human computer interaction 2014, fjv44

Page 45: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

45human computer interaction 2014, fjv

Page 46: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Storyboards

• Series of sketches showing how a user might

progress through a task using an interface

• Film industry

• Graphical snapshots

• Often used with scenarios, bringing more detail

• Derived from the scenario

• Focus on history of events (task-analysis)

• Help envisioning the progress of the interaction

46human computer interaction 2014, fjv

Page 47: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Example Story Board (scenario)

human computer interaction 2014, fjv47

Page 48: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Example Lo-Fi Prototype

human computer interaction 2014, fjv48

Page 49: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Example Med-Fi Prototype

human computer interaction 2014, fjv49

Includes a Scenario for use

Page 50: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping – Increasing Fidelity

human computer interaction 2014, fjv50

Page 51: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Benefits of Participatory Design

“Computer-based systems that are poorly suited to how people

actually work impose cost not only on the organisation in terms

of low productivity but also on the people who work with them.

Studies of work in computer-intensive workplaces have pointed

to a host of serious problems that can be caused by job design

that is insensitive to the nature of the work being performed, or

to the needs of human beings in an automated workplace.”

Kuhn, S. in Bringing Design to Software, 1996

51human computer interaction 2014, fjv

Page 52: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping: Participatory Design

• Involving users as full partners in design.

– Intention, Scandinavian origin (law)

• Two methods are frequently used:

– CARD: Collaborative Analysis of Requirements & Design

• Goal: design workflow

• Higher level of abstraction

– PICTIVE: Plastic Interface for Collaborative Technology

Initiatives through Video Exploration

• Goal: design screens

• Find interaction

– PICTIVE and CARD can be used together.

human computer interaction 2014, fjv52

Page 53: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

CARD

human computer interaction 2014, fjv53

Collaborative Analysis of Requirements & Design

Page 54: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

PICTIVE

54human computer interaction 2014, fjv

Page 55: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Low fidelity prototyping & PICTIVE

55

• Use pre-made interface components on paper

• Empty widgets are created and printedbuttons menu alert box

combo box

tabs

entries

list box

human computer interaction 2014, fjv

Page 56: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Working with PICTIVE

• A PICTIVE session has four parts:

– Stakeholders all introduce themselves

– Brief tutorials about areas represented in the

session (optional)

– Brainstorming of ideas for the design

– Walkthrough of the design and summary of

decisions made

– Video capture of all interactions on the “table”

56human computer interaction 2014, fjv

Page 57: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

57

Ex. Results PICTIVE/Sketching

Collections of Sreens & Screen Interaction(s), from Univ. of Manchester (2000)

human computer interaction 2014, fjv

Page 58: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

58

Ex. Results Paper Design (LoFi)

Collections of Screens & Screen Interaction(s), from Univ. of Oslo (2011)

human computer interaction 2014, fjv

Page 59: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

PICTIVE Session Example

human computer interaction 2014, fjv59

Prototype for the LOL system (Aus)

Page 60: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Computer Assisted LowFi Prototyping

60

The SILK System

Sketching Interfaces Like Krazy

The Denim System

Designing Web Sites by Sketching

Interactive Storyboarding for WWW

human computer interaction 2014, fjv

Page 61: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Designing Interfaces with SILK

• Designer sketches ideas rapidly with

electronic pad and pen

– SILK recognizes widgets

– easy editing with gestures

• Designer or end-user tests interface

– widgets behave

– specify additional behavior visually

• Automatically transforms to a “finished” UI

human computer interaction 2014, fjv61

Page 62: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Specifying Behavior

• Storyboards– series of rough sketches depicting changes in

response to end-user interaction

• Expresses many common behaviors• Widgets are linked HyperCard like

before after

Sequencing behavior between widgets

62human computer interaction 2014, fjv

Page 63: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

SILK Storyboards

• Copy sketches to storyboard window

• Draw arrows from objects to screens

Switch to run mode to test

SILK changes screens on mouse clicks

63human computer interaction 2014, fjv

Page 64: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

64human computer interaction 2014, fjv

Page 65: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

DENIM:Designing Web Sites by Sketching

• Early-phase information & navigation design

• Integrates multiple views

– site map – storyboard – page sketch

• Supports informal interaction

– sketching, pen-based interaction

• Includes special gestures for fast interaction

human computer interaction 2014, fjv65

Page 66: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Working with DENIM

66

Sketch Storyboard Run-prototype

Image from James Landay

human computer interaction 2014, fjv

Page 67: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Denim Demo

human computer interaction 2014, fjv67

Page 68: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

“Wizard of Oz”

68human computer interaction 2014, fjv

Page 69: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

“Wizard of Oz” prototyping

• User thinks having interacting with a computer, but

a developer is responding to output rather than the

system.

• Usually done early in design to understand users’

expectations (requirements)

69

>Blurb blurb>Do this>Why?

User

human computer interaction 2014, fjv

Page 70: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Example Wizard of Oz

human computer interaction 2014, fjv70

Page 71: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Early “wizard of Oz”

• Chess machine built in Hungary (Kempelen)

• It worked remarkably well …

71human computer interaction 2014, fjv

Page 72: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Wizard of Oz Prototyping

human computer interaction 2014, fjv72

Page 73: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Types of Prototyping (1)

• Low-fidelity // High-fidelity

• Vertical

– Focus on a specific element and simulate in depth

• Horizontal

– Take a broad perspective but with reduced

functionality at any point

• Full

– Complete functionality, but less performance than

final system

73human computer interaction 2014, fjv

Page 74: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

74

Granularity in Prototyping

Low-Fidelity

High-Fidelity

• Paper-based Sketching

• Paper-based Storyboard a.k.a. PICTIVE

• Computer Aided Sketches / Storyboard

• Wizard of Oz / Slide Shows / Video

• Computer based Scenario Simulation

• Computer based Horizontal Simulation

• Computer based Vertical Simulation

• Computer based Full-Functional Simulation

human computer interaction 2014, fjv

Page 75: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Types of Prototyping (2)

human computer interaction 2014, fjv75

Number of different Features

Ava

ilab

le F

un

ction

ality

Horizontal Prototype

Ve

rtic

al

Pro

toty

pe

Full System

Scenario

T0

Page 76: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping Methods (1)

76

Throw-away prototypes (rapid)

Incremental

prototypes

Evolutionary

Requirements

Animation

human computer interaction 2014, fjv

Page 77: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping Methods (2)

• Requirements Animation

• Functional requirements are demonstrated in prototype (mock-up)

• Throw-away prototyping

• Similar to requirements animation

• Prototype is not developed into the final product

• Evolutionary prototyping

• Prototype is not discarded

• Prototype used as the basis for 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

• Typical with larger projects

77human computer interaction 2014, fjv

Page 78: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Prototyping

Brainstorm different representations

Choose a representation

Rough out interface style

Task centered walkthrough and redesign

Fine tune interface, screen design

Heuristic evaluation and redesign

Usability testing and redesign

Limited field testing

Alpha/Beta tests

Low fidelity paper prototypes

Medium fidelity prototypes

High fidelity prototypes / restricted systems

Working systems

78

Early design

Late design

human computer interaction 2014, fjv

Page 79: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Comparison of Techniques

79

Technique Advantages Disadvantages

Vertical Realistic,

In depth implementation

Real user task

Limited part of UI

Horizontal Test entire UI

Fast implementation

Cannot perform real tasks

Scenario Easy and cheap to construct

Cannot perform real tasks

Limited part of UI

Wizard-of Oz Save programming time

Renders understanding

Train people as computers

Less realistic

Animation

(slides & video)Simple

System simulation

No real interaction

Little flexibility

human computer interaction 2014, fjv

Page 80: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Groups Involved in Prototyping

80

Designers End UsersEnd Users

ManagersManagersManagers

human computer interaction 2014, fjv

Page 81: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Management Issues

• Time

– takes time to developparticularly for throw-away prototypes

• Planning

– managers do not always 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

81human computer interaction 2014, fjv

Page 82: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Choosing a prototyping technique

• Cost and schedule constraints

• Proof-of-concept

• Navigation and flow

• User-driven or Facilitator-driven

• Look-and-feel of product

• Usability test

• Available facilitation/ programming skill

• What developmental stage are you in?

human computer interaction 2014, fjv82

Page 83: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Performance of a technique

Suitable for:

• quick-and-easy application?

• providing controlled study?

• qualitative analysis?

• quantitative analysis?

Requires:

• special equipment?

• special personnel?

83human computer interaction 2014, fjv

Page 84: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Limitations on just Prototyping?

• Difficult for users: no coherent conceptual model

– users’ feel system has unpredictable components

• Uneven appreciation of various user groups

– users involved with prototype development may not represent cross-section of users

– not easy to learn or intuitive for newcomers

• Lack of task analysis

– lack of breadth of task support

• Failure to fully comply with a style guide

– lack of internal and external consistency

• Lack of usability evaluation

84human computer interaction 2014, fjv

Page 85: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

Recapitulation Lecture #11

• Definition of Usability• Definition of Usability Engineering • Usability

– Specification– Levels– Measurement Instruments

• Definition of Prototyping• From Low-Fidelity to High-Fidelity• Types and Methods of Prototyping• Management Issues • Pitfalls in Prototyping

human computer interaction 2014, fjv85

Page 86: October 13th 2014 LECTURE 11 USABILITY -PROTOTYPINGliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L11.pdf · Prototype Cognetics Prototype High-Fidelity Usability testing Interaction

We have used a computer to prototype the

structural strength of our project and I am afraid

the results aren’t encouraging

86human computer interaction 2014, fjv