1CPSC 481

User Centered Design and Prototyping

Why user-centered design is important

Prototyping

User centered design Prototyping methods

The 3D Tractus—design example

System Centered Design

What can I easily build on this platform?What can I create from the available tools?What do I as a programmer find interesting?

User Centered System Design

Design is based upon a user’s– abilities and real needs – context– work– tasks– need for usable and useful product

Golden rule of interface design: Know The User

User Centered System Design

... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers…

From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison Wesley

Denning and Dargan, 1996

Assumptions

– The result of a good design is a satisfied customer

– The process of design is a 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

6CPSC 481

Notes:Assignment 1 due: Friday October 14th 2005, 5PM.No class on Monday, Oct. 10th (Thanks Giving)Midterm: Monday, Nov. 7th, in class (SB142), 2:00-2:50pmToday: Continuing User Centered Design and Prototyping, Required readings: Prototyping. (Extract) from Nielsen, J. (1993)

In Usability Engineering Low vs. high fidelity prototyping debate.

Rudd, J., Stern, K. and Isensee, S. (1996) Interactions.

Prototyping for tiny fingers. Rettig, M. (1994) Communications of the ACM, 37(4), ACM Press

CPSC 481 7

Know your user

1. Know your user2. You are not your user

Participatory Design:

Participatory Design

Problem– Designers’ intuitions can be wrong– interviews etc not precise– designer cannot know the user sufficiently well to answer all

issues that come up during the design

The user is just like me

Solution– designers should have access to representative users

• END users, not their managers or union reps!

Participatory Design

Users are 1st class members in the design process– active collaborators vs passive participants

Users are considered subject matter experts – know all about the design work context

Iterative process– all design stages subject to revision

Participatory Design

Up side– users are excellent at reacting to suggested system designs

• designs must be concrete and visible

– users bring in important “folk” knowledge of work context• knowledge may be otherwise inaccessible to design team

Down side– hard to get a good pool of end users

• expensive, reluctant ...

– users are not expert designers• don’t expect them to come up with design ideas from scratch

– the user is not always right• don’t expect them to always know what they want

Methods for involving the user

At the very least, talk to users– surprising how many designers don’t!

Contextual interviews + site visits– interview users in their workplace, as they are doing their job– discover user’s culture, requirements, expectations,…

Methods for involving the user

Explain designs– describe what you’re going to do– get input at all design stages

• all designs subject to revision (don’t fall in love with your design)

Important to have visuals and/or demos– people react far differently with verbal explanations– this is why prototypes are critical

Design: getting ideas:

“To get good ideas…Get lots of ideas”

Sketching and Prototyping

Sketches / low / medium / high fidelity prototypes– as investment in design increases, changes are

becoming more painful to implement.– as investment in design increases, so does the

formality of the criteria whereby concepts are reviewed or accepted.

Sketches

Sketching vs Prototyping

Sketches– Invite– Suggest– Explore– Question– Propose– Provoke

Prototype– Attend– Describe– Refine– Answer– Test– Resolve

From Design for the Wild, Bill Buxton (in press) with permission

Sketching and Prototyping

Early design

Late design

Brainstorm different representations

Choose a representation

Rough out interface style

Sketches & low fidelity paper prototypes (LO-FI)

Task centered walkthrough and redesign

Fine tune interface, screen design

Heuristic evaluation and redesign

Usability testing and redesign

Medium fidelity prototypes

Limited field testing

Alpha/Beta tests

High fidelity prototypes

Working systems

Sketches & Low Fidelity Prototypes

Paper mock-up of the interface look, feel, functionality

– quick and cheap to prepare and modify

Purpose– brainstorm competing representations– bring out user reactions– bring out user modifications / suggestions

Sketches

– drawing of the outward appearance of the intended system– crudity means people concentrate on high level concepts– but hard to envision a dialog’s progression

Computer Telephone

Last Name:

First Name:

Phone:

Place Call Help

Back to Cheap Shop…

The attributes of sketches

Quick – to make

Timely – provided when needed

Disposable – investment in the concept, not

the execution

Plentiful – they make sense in a collection

or series of ideas

Clear vocabulary – rendering & style indicates it’s a

sketch, not an implementation

Constrained resolution– doesn’t restrain concept

exploration

Consistency with state– refinement of rendering matches

the actual state of development of the concept

Suggest & explore rather than confirm

– value lies in suggesting and provoking what could be

– sketches are the medium to conversation and interaction

Storyboarding

– a series of key frames as sketches• originally from film; used to get the idea of a scene• snapshots of the interface at particular points in the interaction

– users can evaluate quickly the direction the interface is heading

Excerpts from Disney’s Robin Hood storyboard

note how each scene in this storyboard is annotated

25CPSC 481

Notes:Assignment 1 due: Friday October 14th 2005, 5PM.Assignment 2 will be out this Friday.Midterm: Monday, Nov. 7th, in class (SB142), 2:00-2:50pmPast lectures and required readings are all online.CPSC 599.17 info…Last lecture: participatory design, climbing the prototypes evolutionary ladder.Today: Finishing User Centered Design and Prototyping.

Looking for something different to do?

Icuiti V920

Autonomous Humanoid (Robosapien hack)

FrameworkCPSC 503 winter project course, 4th year CPSC only.

NSERC Summer research, Undergraduate Student Research Awards (USRA), ~6K$/four months, any year, any Department.

Workstation at ilab

Interested? Please drop me a line.

Sketches and storyboarding

Scan the stroller ->

Change the color ->

Place the order ->

Initial screen

Scan the shirt ->

Touch previous item ->

Delete that item->

Alternatepath…

Storyboarding

Spotlight: an interactive foam core and paper sketch/storyboard Credit: Dept Industrial Design, University of Washington

Tutorials and manuals

– What are they?• written in advance of the system implementation• serves as an interface specification for programmers

• Tutorial for step by step description of an interaction–an interface storyboard “walk-through” with directions

• Manual for reference of key concepts–in-depth technical description of the different parts of the system–a list of features–Often less visual

– Does this work?• Users can read and provide feedback on:

–interface,–functionality,–match to task.

• Act as design tools

Tutorials

Star Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/

Tutorials

Star Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/

Tutorials

Star Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/

Manuals

“The Sims” is the property of Maxis: http://thesims.ea.com/

Manuals

“The Sims” is the property of Maxis: http://thesims.ea.com/

Manuals

“The Sims” is the property of Maxis: http://thesims.ea.com/

Pictive plastic interface for collaborative technology initiatives through video

explorationMuller, CHI 1991

Designing with office supplies– multiple layers of sticky notes and plastic overlays– different sized stickies represent icons, menus, windows etc.

interaction demonstrated by manipulating notes– new interfaces built on the fly

session videotaped for later analysis– usually end up with mess of paper and plastic!

Pictive, here’s how it can look like…

The Developer’s Dilemma(Hix & Hartson)

“…You cannot evaluate an interaction design until after it is built; but after building changes to the design are difficult…”

The two dimensions of prototyping

Vertical prototype

Scenario

Horizontal prototype

Full interface

Vertical prototype

Scenario

Horizontal prototype

Full interface

Nielsen, J . (1993) Usability Engineering, p93-101, Academic Press.

Different Features Functionality

Nielsen Usability Engineering 1993

Limiting prototype functionalityvertical prototypes

– includes in-depth functionality for only a few selected features– specific design ideas can be tested in depth

horizontal prototypes– the entire surface interface with no underlying functionality– a simulation; no real work can be performed

scenario– scripts of particular fixed uses of the system; no deviation allowed

Vertical prototype

Scenario

Horizontal prototype

Full interface

Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press.

Different Features

Functio

nalit

y

Integrating prototypes and products

1. throw-away– prototype only serves to reveal user reaction– creating prototype must be rapid, otherwise too expensive

2. incremental– product built as separate components (modules)– each component prototyped & tested, then added to the final

system

3. evolutionary– prototype altered to incorporate design changes– eventually becomes the final product

47CPSC 481

Notes:Assignment 1 due today @5pm!!Assignment 2 out, due on Monday October 31th 2005, @5PMMidterm: Monday, Nov. 7th, in class (SB142), 2:00-2:50pmToday: Finishing User Centered Design and Prototyping. Monday: starting Evaluating Interfaces with Users.

Assignment 2

Qualitative evaluationwith users

Assignment 2 Overview

This assignment is a hands-on exercise on qualitative evaluation. Its purpose is to give you practical experience conducting a usability study. Methods used in this study include the conceptual model discovery, silent observation, think-aloud, constructive interaction, questionnaires and interviews. Because of the economy of these methods (they are easy to understand and quick to apply) you can easily use them to your future work.

In terms of this assignment, your group is to take the perspective of consultants that are working for a company that has been commissioned to evaluate a system, in this case the Air Canada website. You can use your classmates or even your friends as test participants when applying the various methodologies although you should try to get as wide a variety of test participants as possible.

Deliverables

Your group will deliver a substantial technical report written to the (imaginary) vice-president of the company (your TA) that commissioned the study. It must include your observations, the findings, the major problems detected, and some design recommendations. The appendix to your report will briefly contrast the methods used, recommending which ones should be adapted in future study.

Included Handouts

1. Assignment overview

2. Assignment description and details

3. System and example tasks for the usability study (Air Canada web site)

4. Grading Sheet

5. Tips on questionnaire design

6. Apple’s Discussion of guidelines for user observation.

Back to user centered design:Designing with the userIntegrating prototypes and products

1. throw-away

2. incremental

3. evolutionary

Throw-Away Approach To Prototyping

The prototype is only used to get feedbackThe prototype is built, tested and then discarded

System

Lessons learned

Incremental Approach To Prototyping

Build the system as separate modules/componentsEach module is designed, prototyped and completed separately before being added to the final system

System

System

System

Evolutionary Approach To Prototyping

Change the entire prototype itself in order to incorporate changes

Eventually the reworked prototype becomes the final system

System

Medium Fidelity Prototypes“With a computer”Many different types

– from simple computer drawn images to partially working systems

May take longer to generate and change than low-fiBenefits

– Seems more like the completed detailed system, provides a clearer idea of how it works

– May allow user testing (not true for all medium fidelity prototypes).

Pitfalls– User’s reactions are usually “in the small”

• Blinds people to major representational flaws because of a tendency to focus on more minor details

– Users more reluctant to challenge/change the design itself• Designs are too “pretty”, developers’ egos…

– Management may think its real!

Medium FidelityPainting/drawing packages

draw each storyboard scene on computer– very thin horizontal prototype (across features, no functionality)– does not capture the interaction “feel”

Control panel for pump 2

coolant flow 45 %

retardant 20%

speed 100%

Control panel for pump 2

coolant flow 0 %

retardant 20%

speed 100%

DANGER!

next drawing

Shut Down Shut Down

(for shut down condition)

Control panel for pump 2

coolant flow 45 %

retardant 20%

speed 100%

Shut Down

Medium FidelityScripted simulations

create storyboard with media tools on a computer– scene transition activated by simple user inputs– a simple vertical prototype– Can use PowerPoint…

user given a very tight script/task to follow– appears to behave as a real system– script deviations blow the simulation

Control panel for pump 2

coolant flow 0 %

retardant 20%

speed 100%

DANGER!

Shut Down

Medium Fidelity Interface builders

– Tools for letting a designer layout the common widgets

– Construct mode• Change attributes of objects

– Test mode:• Objects behave as they would under real situations

– Excellent for showing look and feel• A broader horizontal prototype• But constrained to widget library

– Vertical functionality added selectively• Through programming

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

Wizard of Oz

A method of testing a system that does not exist– the listening typewriter, IBM 1984

Dear Henry

What the user sees

SpeechComputer

From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard of Oz

A method of testing a system that does not exist– the listening typewriter, IBM 1984

What the user sees The wizard

SpeechComputer

Dear Henry

Dear Henry

From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard Of Oz: Examples

IBM: a listening typewriter using continuous speech recognition– Secretary trained to:

• Understand key words as “commands”• Types 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!But Wizard of Oz allows Interface evaluation

Wizard of Oz

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!”

good for:– adding simulated and complex vertical functionality– testing futuristic ideas

User Centered Design and PrototypingWhat you now know

User centered + participatory design– based upon a user’s real needs, tasks, and work context– bring end-user in as a first class citizen into the design process

Prototyping– allows users to react to the design and suggest changes – sketching / low-fidelity vs medium-fidelity

Prototyping methods – vertical, horizontal and scenario prototyping– sketches, storyboarding, pictive– throw-away, incremental and evolutionary prototyping

approaches– scripted simulations, Wizard of Oz