1

User Centred Design and Low-Fidelity Prototyping

Human-computer Interaction

2

User Centered Design Design is based upon a user’s :

Abilities and real needs Context Work Tasks

Golden rule of interface design KNOW THE USER

3

User Centered Design A UCD is based on understanding the domain

of work or play in which people are engaged and in which they interact with computers, and programming computers to facilitate human action….

4

User Centered Design Three assumptions:

The result of a good design is satisfied customer

The process of design is collaboration between designers and customers: the design evolves and adapts to their changing concerns

The customer and designer are in constant communication during the entire process

5

User Centered Design This participatory design has some problems:

Intuitions wrong Interview not precise Designers can not know the user sufficiently well to

answer all issues that come up during the design.

Solution: Designers should have access to pool of

representative users: End users, not their managers.

6

Methods for involving the user User : uses system after deployment Tester: tests system after development,

before deployment Informant: help during development

( interview, observations…) Design partner : equal partner.

7

Prototyping

8

Why Do We Prototype? Get feedback on our design faster (which

saves money)

Fix problems before code is written

9

Fidelity in Prototyping Fidelity refers to the level of detail High fidelity?

prototypes look like the final product Low fidelity?

Interfaces with many details missing

1010

Types of low-fi Prototypes

Paper “Low fidelity prototyping”Often surprisingly effectiveExperimenter plays the computer

Implemented PrototypeVisual Basic PowerPointWeb tools (even for non-web UIs)

HtmlScripting

11

Paper prototyping Main idea:

Sketch out prototypes of the interface on paper Potential users “walk through” task scenarios using the

paper interface A designer “plays computer” Change the design on-the-fly if helpful

Widely practiced in industry Sounds silly at first, but is surprisingly effective Helps people work together on the design

12

The Materials Large, heavy, white paper (11 x 17) 5x8 in. index cards Post-it notes Tape, stick glue, correction tape Pens & markers (many colors & sizes) Transparencies (including colored) Colorforms (toy stores) Scissors, X-acto knives, etc.

13

14

Constructing the Model

Set a deadline don’t think too long - build it!

Draw a window frame on large paper Put different screen regions on cards

anything that moves, changes, appears/disappears Ready response for any user action

e.g., have those pull-down menus already made Use photocopier to make many versions

15

Preparing for a Test

Select your participants understand background of intended users use a questionnaire don’t use friends or family

Prepare scenarios that are typical of the product during actual use

16

Conducting a Test

Three or Four testers (preferable) greeter : puts users at ease & gets data, gets forms

filled, assure confidentiality….. facilitator : only team member who speaks

gives instructions & encourages thoughts, opinions computer: knows application logic & controls it

always simulates the response, w/o explanation observer(s) : take notes & recommendations

Typical session is approximately 1 hour (preparing, testing, debriefing)

17

Evaluating Results Create a written report on findings

gives agenda for meeting on design changes

Make changes & iterate

18

Advantages of Low-fi Prototyping Takes only a few hours

no expensive equipment needed

Can test multiple alternatives Can change the design as you test Allows designers to work together

19

Example of paper prototyping

We will use the rule we underlined in constructing the model (Use photocopier to make many versions)

20Telebears example: Welcome, Registration time

21

Telebears example: Welcome, Not Registration time

22Telebears example: Task 3: Plan Schedule

23Telebears example: Task 2: Switching discussion sections

24Telebears example: Task 4: Adding a course

25

Designing a content pageUsing low-fi techniques Card sorting

Idea from Peter Merholtz

26

Designing a content pageUsing low-fi techniques Start with a page with all the features you

might want Cut it up into pieces Have people arrange the components

27

Card sorting

28

29

Low-fi Storyboards Where do storyboards come from?

Film & animation

Give you a “script” of important events leave out the details concentrate on the important interactions

30

31

Site map:

33

Sketch example:

34

Implemented prototypes

35

Wizard of Oz Technique Faking the interaction.

The term is from the film “The Wizard of OZ” “the man behind the curtain”

Main idea: The participant interacts with a computer interface as

usual Instead of the program writing back, a person writes back

pretending to be the computer

Very useful for assessing hard-to-implement features Speech & handwriting recognition interface design

36

pen-based interaction

37

DENIM: Designing Web Sites by Sketching

An Informal Tool For Early Stage Web Site and UI Design (you can download it from http://dub.washington.edu/denim/)

Integrates multiple views site map – storyboard – page

sketch

Supports informal interaction sketching, pen-based

interaction

38

DENIM example:

39

Designing Interfaces with Denim1) Designer sketches ideas rapidly with

electronic pad and pen recognizes widgets easy editing with gestures

2) Designer or end-user tests interface widgets behave specify additional behavior visually

3) Automatically transforms to a “finished” UI

40

Specifying Behaviors

Storyboards series of rough sketches depicting changes in

response to end-user interaction Expresses many common behaviors

before after

Sequencing behavior between widgets

41

Denim Storyboards Copy sketches to storyboard window Draw arrows from objects to screens

Switch to run mode to testDenim changes screens on mouse clicks

43

The SILK System Integrate pen-based and electronic sketching Support whole design cycle

44

The SILK System unlike a paper sketch, this electronic sketch is

interactive and can easily be annotated and modified using editing gestures.

SILK allows the designer to extend the interactivity of the recognized widgets using storyboards

45

SILK interface

46

SILK Vs. DENIM There are several key differences between

DENIM and SILK: DENIM supports more views of the design (e.g.

site map) than SILK and integrates those views through zooming.

SILK recognizes widgets that are sketched by the designer. DENIM does not (yet).

47

Prototyping Assignment: Create a storyboard for a login page Create a sketch for an plane ticket booking

page. (use paper prototypes, no softwares)