User Interface Design

1
User Interface Design 2. Prototyping and
iterative design
2
Fig 2.1 The development process
Analysis
Traditional systems development
Design
Experts? Guidelines?
Program
Test
Usability test? Scaring results ! Too late to
correct
Operation
3
Fig 2.2 Hotel system
Task list Book guest Checkin Checkout Change
room Record services Breakfast list
Breakfasts 23/9 Room Buffet In
room 11 1 12 2 13 1 1 15 . . .
4
Fig 2.3A Hotel system prototype made in 42
hours
5
(Fig 2.3A Cont.)
6
Fig 2.3B Defect list for hotel system mockup
7
Fig 2.3C Hit-rate of Hotel System evaluation
Heuristic evaluation
7 false problems
21 predicted problems
8 likely, but not observed
6 hits
20 observed problems
14 missed problems
8
Fig 2.4 Various prototypes
Tool-drawn mockup 30-60 min
Hand-drawn mockup 15-30 min
Which is best for Finding problems? Correct
problems? Input to program? Get more funding?
Third law of usability More effort used -gt Less
redesign
Functional prototype 2-8 hours
Screen prototype 1-4 hours
9
(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
10
10. Extra A functional prototype - the stay
screen
Web-based. Clumsy functions
Tab-sheets to gain space
11
11. Extra A functional prototype - room
allocation
12
12. Extra A commercial reception system
13
(Fig 2.5) Does usability pay?

• Benefits
• Faster learning
• Faster work
• Fewer errors
• Less demand for hot-line
• Better motivation less stress
• More users
• Wider work areas
• Let the customer do the work

• Costs
• 5 10 more?
• No ! 10-20 less

• Accelerator effect
• Mockup, usability test and revise the 8 key
  screens
• Then design the rest, test less carefully
• Why? Users learn from the 8 screens and designers
  learn from the users