Computer interface design

Chapter 2

Prototyping and iterative design

Dr. Ghassan Abu Samhadana

 The development process
Traditional systems development projects go through a number of
phases:
•Analysis phase :Team analyses the user´s and customer´s demands
and consider various kinds of solution.
•Design phaes : Team plans the software part to be developed
•Program phase: The team programs the new software parts
•Test phase : team tries out the program on the computer, correct
error and try to put it into operation
Iterative systems : One does not complete one phase before starting on the next.
•Early detected errors are redone
•May take many iterations
•In a good program, most error are easy to correct
•Difficult error should be prevented through carefull analysis and design
Fig 2.1 The development process

Analysis
Traditional systems
Design development
Experts?
Guidelines? Program

Usability test? Test

Scaring results !
Too late to correct
Operation

Study users Analysis HCI classic:

and tasks
iterative design
Design prototype

Usability test Program

 Usability problems
Traditional appraoch
• Developers do not know the users and their tasks ( They know computers )
• Even usability specialits are bad to predict usability problems early ( even if they understand the user better than
developers ).
• Finding but not be able to remove them (system almost finished)
• Too late to remove some critical problems.

Classical approach
• Study users and their tasks as part of analysis
• Make a prototype early in the design phase. Review it with an expert.
• Usability test the prototype with typical users ,correct the prototype to remove usability problems.
• Test again and again until the results is satisfactory.
Case study : Hotel system

What the system

should do

Task list
Book guest Breakfasts 23/9
Check-in Room Buffet In room
Checkout 11 1
Change room 12 2
Record services 13 1 1
Breakfast list 15
...
 Usability requirements

• Target : small hotels

• Users : temporary staff (students , no training)

• Short time instruction.

Goal : temporary staff should be able to handle basic tasks

on their own.
Fig 2.3A Hotel system prototype
(Fig 2.3A Cont.)
Defect list
Task1 :
23rd of october , andrew Bunting arrives. He says there would be 2 rooms
waiting for him . Hecannot remember his booking number or stay number. He
lives in … and will stay 3 nights.

Task 2:
Rodger A .Haynes phones to make a reservation of a single room from tomorrow
and four nights. He lives in …., he is not too sure of the area code

Novice B and M : 2 secretaries with Microsoft Word experiences

 Fig 2.3B Defect list for hotel system mockup
ID Defects in Find Guest/Stay window Novice B Novice M Receptionist Heur.
eval.
D1 The Stay concept is not understood by Medium Guesses Hit
ordinary users problem immediately
D2 Doesn't notice the Find button Task Medium Hit
failure problem.
D3 When you select a certain date, why Minor Hit
does the list show earlier dates too? problem
D4 Not visible whether the guests have Annoying Hit
been checked in or not
D5 How do you open the stay window from Medium Task Medium Hit
the Find guest/stay window? problem failure problem
D6 Tries Enter to search, but it opens a Medium
Stay window. Then tries F2
D7 Doesn't see that the guest is on the list Annoying Annoying
already.
D8 Doesn't understand why the list Medium
becomes empty (made a spelling error) problem
D9 Believes the task is complete when she Task failure
sees the guest on the list.
D10 Doesn't understand that the Stay screen Task failure Task
must be opened. failure
D11 Fills in all search criteria, believing they Minor Task
are data fields. problem failure
 Fig 2.3C Hit-rate of Hotel System evaluation

The usability test reveals 20 usability defects :

• Only 6 (or 7 )were predicted by the specialists

• Heuristic evaluation predicts 15 more not found in the usability
test. Developpers judged that 8 of them were likely to occur

Heuristic evaluation:
7 false problems
21 predicted
problems 8 likely, but not observed

6 hits
20 observed
problems 14 missed problems
Kinds of prototypes

•Hand-drawn mock up : Designer draw the screens by hand using paper and

pencil. User enters data by writting in the fields with the pencil

•Tool-drawn mock up : Designer draws the screen on the computer using the

same tool that will be used in the final product

•Screen prototype : screen shown on the computer , but with little

functionality(buttons , menus do nothing)

•Functional prototype : similar to screen prototypes , but buttons , menus points

actually do something.
Fig 2.4 Various prototypes

Hand-drawn Tool-drawn
mockup: mockup:
15-30 min 30-60 min

Which prototype
is the best?

Screen Functional
prototype: prototype:
1-4 hours 2-8 hours
(Fig 2.4 Cont.)
Full contents of a mockup
 Empty screens for copying
 Screens with realistic data
 Screens to be filled in by user
 Menus, lists, dialog boxes
 Error messages
 Help texts
 Notes about what functions do
Handling a system
with 100 screens?
Accelerator effect:
If the central screens are good,
the rest are okay
almost automatically