User Centred Design and Prototype

Dr. Ann Nosseir Chapter 6 Stone et al Chapter 10 Benyon et al

by A.Nosseir

System Centred Design

by A.Nosseir

System Centered Design

What can be built easily on this platform? What can I create from the available tools? What do I as a programmer find interesting to work on?

by A.Nosseir

System Centered Design

Design is based upon a users
abilities and real needs context work tasks

Golden rule of interface design:

Know The User

by A.Nosseir

System Centered Design

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.
Three 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, and the process produces a specification as an important byproduct The customer and designer are in constant communication during the entire process
by A.Nosseir

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

Denning and Dargan, 1996

Participatory Design
Problem

intuitions 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 pool of representative users
END users, not their managers or union reps!
by A.Nosseir

Participatory Design
Users become first class members in the design process
active collaborators vs passive participants

Users considered important matter

know all about the work context

Iterative process
all design stages subject to revision

by A.Nosseir

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

greater buy-in for the system often results

Down side
hard to get a good pool of end users expensive, reluctance users are not expert designers: dont expect them to

come up with design ideas from scratch the user is not always right: dont expect them to know what they want
by A.Nosseir

Methods for Involving the User

At the very least, talk to users
surprising how many designers dont!

Interviews
used to discover users culture, requirements, expectations, etc. contextual inquiry:
interview users in their workplace, as they are doing their job

by A.Nosseir

Methods for Involving the User

Explain designs
describe what youre going to do get input at all design stages
all designs subject to revision

important to have visuals and/or demos

people react far differently with verbal explanations

by A.Nosseir

Prototyping Early design

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 Medium fidelity prototypes/ High
fidelity prototypes

Low fidelity paper prototypes

High fidelity prototypes / restricted systems

by A.Nosseir

Late design

Working systems

Purposes of Prototyping: Why Bother Trying Out Your Ideas?

Check feasibility of ideas with users Check usefulness of the application Allow users to contribute Allow users to test ideas Validate requirements Negotiate requirements

by A.Nosseir

Low Fidelity Prototypes (Lo-fi)

Paper-based prototypes
a paper mock-up of the interface look, feel, functionality quick and cheap to prepare and modify

Purpose
brainstorm competing representations elicit user reactions elicit user modifications /

by A.Nosseir

Low fit- prototypes

It is paper based
Sketching Screen Mock-ups Storyboards
Figure 6.2 initial high level of UI

by A.Nosseir

Sketching
What they (users) want Requirement gathering Crystallizing ideas

Figure 6.2 initial high level of UI

by A.Nosseir

Low fidelity prototypes

Sketches
drawing of the outward appearance of the intended system crudity means people concentrate on high level concepts but hard to envision a dialogs progression Computer Telephone
Last Name: First Name: Phone: Place Call Help by A.Nosseir

Sketching

Figure 10.1 Sketch of rolodex interface metaphor in HIC project (Rolodex is a registered trade name, but we use the term in this book to indicate the concept rather than the product). by A.Nosseir

Sketching

Figure 10.2 Sketches of possible visualizations.

by A.Nosseir

Low Fidelity Prototypes

Storyboarding
a series of key frames
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

by A.Nosseir

Storyboarding

Figure 10.4 Sketched storyboard for the HIC.

by A.Nosseir

Storyboard of a Computer Based Telephone

Computer Telephone Last Name: First Name: Phone: Place Call Help Help-> Help Screen You can enter either the person's name or their number. Then hit the place button to call them Return Computer Telephone Call by name-> Last Name: Greenberg First Name: Phone: Place Call Help Establishing connection->

Computer Telephone Dialling.... Last Name: Greenberg First Name: Cancel Phone: Place Call Help

Computer Telephone Call Connected connected... Last Name: Greenberg First Name: Hang up Phone: Place Call Help Call completed...

by A.Nosseir

Low Fidelity Prototypes

Screen Mock-ups
Flipcharts Whiteboards Overhead transparencies Colour pens Shapes to represent widgets (buttons and menus)

by A.Nosseir

Low Fidelity Prototypes

Screen Mock-ups Pictive plastic interface for collaborative technology initiatives through video exploration design is multiple layers of sticky notes and plastic overlays
different sized stickies represent icons, menus, windows etc.

interaction demonstrated by manipulating notes

contents changed quickly by user/designer with pen and note repositioning

session is videotaped for later analysis

usually end up with mess of paper and plastic!

by A.Nosseir

Low fidelity prototypes

Screen Mock-ups -Pictive
can create pre-made interface components on paper eg, these empty widgets were created in visual basic and buttons printed out:
combo box men u entries

alert box

list box

tabs

by A.Nosseir

Screen Mock-ups

Figure 11.2 Paper prototype of a messaging screen for a home communications centre.
by A.Nosseir

Advantages and Disadvantages

Advantages
Cheap to produce Evaluate design ideas and alternatives Develop rapid and iterative development Facilitate communication between users, stakeholders and designers Show the look and the fell of the layout of screens
by A.Nosseir

Advantages and Disadvantages

Disadvantages
Ability to check error is limited Specification does not have enough details for programmer Human facilitator is needed to show how UI works Paper may seem less compelling Useful to generate requirements but thrown away once requirements have been established
by A.Nosseir

Medium / High Fidelity Prototypes

Prototyping with a computer
simulate or animate some but not all features of the intended system
engaging for end users

Purpose
provides a sophisticated but limited scenario to the user to try out provides a development path (from crude screens to functional system) can test more fine design issues
by A.Nosseir

Medium / High Fidelity Prototypes Danger

users reactions are usually in the small blinds people to major representational faults users reluctant to challenge / change the design itself designs are too pretty, egos management may think its real!
by A.Nosseir

Approaches to Limiting Prototype Functionality

Vertical prototypes

S c e n a r io
H o r iz o n t a l p r o t o t y p e

V e rt ic a l p ro t o ty p e F u ll S y s t e m

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

Horizontal prototypes
surface layers includes the entire user 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 by A.Nosseir

Approaches to Integrating Prototypes and Product:

throw-away (rapid)
prototype only serves to elicit user reaction creating prototype must be rapid, otherwise too expensive

Incremental
product built as separate components (modules) each component prototyped and tested, then added to the final system

evolutionary
prototype altered to incorporate design changes eventually becomes the final product
by A.Nosseir

Medium / High Fidelity Prototypes

Painting/drawing packages
draw each storyboard scene on computer neater/easier (?) to change on the fly than paper a very thin horizontal prototype does not capture the interaction feel
Control panel for pump 2 Control panel for pump 2

DANGER!
coolant flow 22 % retardant 22 % speed 222 % next drawing (for shut down condition) Shut Down coolant flow 2 % retardant 22 % speed 222 %

Shut Down

by A.Nosseir

Medium / High Fidelity Prototypes

Scripted simulations and slide shows
encode the storyboard on the computer
created with media tools scene transition activated by simple user inputs a simple horizontal and vertical prototype

user given a very tight script/task to follow

appears to behave as a real system but script deviations blows the simulation

by A.Nosseir

Medium / High Fidelity Prototypes

Control panel for pump 2

Control panel for pump 2

DANGER!
coolant flow 45 % retardant 20% speed 100% Shut Down next drawing (on mouse press over button) Shut Down coolant flow 0 % retardant 20% speed 100%

by A.Nosseir

Medium / High Fidelity Prototypes

Computer Telephone Help Screen Computer Telephone You can enter either the Last Name: Greenberg person's name or their Connected Dialling.... Last Name: Greenberg First Name: hit the number. Then First Name: Phone:button to call them Hang up Cancel place Phone: Place Call Place Call Return Help Help

HelpType name and place call by A.Nosseir

Medium / High Fidelity Prototypes

Interface builders
tools for letting a designer lay out 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
by A.Nosseir

Medium / High Fidelity Prototypes

Wizard of Oz

A method of testing a system that does not exist

the voice editor, by IBM (1984)

The Wizard
by A.Nosseir

What the user sees

Medium / High Fidelity Prototypes: Wizard of Oz

human simulates the systems intelligence and interacts with user uses real or mock interface
Pay no attention to the man behind the curtain!

user uses computer as expected

by A.Nosseir

Medium / High Fidelity Prototypes: Wizard of Oz

wizard (sometimes hidden):
interprets subjects input according to an algorithm has computer/screen behave in appropriate manner

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

by A.Nosseir

Wizard of Oz Examples
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
by A.Nosseir

Wizard of Oz Examples
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!

by A.Nosseir

Summary
User centered design design is based upon a users real needs, tasks, and work context Participatory design brings end-user in as a first class citizen into the design process Prototyping allows users to react to the design and suggest changes low-fidelity prototypes best for brainstorming and choosing representations Hi-fidelity prototypes best for fine-tuning the design

by A.Nosseir