1. Slides for User interface design A software engineering perspective Soren Lauesen 2. Prototyping and iterative design August 2006 © 2005, Pearson Education retains the copyright to the slides, but allows restricted copying for teaching purposes only. It is a condition that the source and copyright notice is preserved on all the material.

2. 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

3. Fig 2.1 The development process Analysis Operation Design Program Test Experts? Guidelines? Usability test? Scaring results ! Too late to correct Traditional systems development Design prototype Program Usability test Study users and tasks Analysis HCI classic: iterative design

4. 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.

5. Case study : Hotel system Task list Book guest Check-in Checkout Change room Record services Breakfast list Breakfasts 23/9 RoomBuffetIn room 111 122 1311 15... What the system should do

6. 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. Usability requirements

7. Fig 2.3A Hotel system prototype

8. (Fig 2.3A Cont.)

9. 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

10. Fig 2.3B Defect list for hotel system mockup

11. Fig 2.3C Hit-rate of Hotel System evaluation 20 observed problems 21 predicted problems 7 false problems 14 missed problems 6 hits 8 likely, but not observed Heuristic 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

12. 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.

13. Fig 2.4 Various prototypes Hand-drawn mockup: Functional prototype: Tool-drawn mockup: Screen prototype: 15-30 min 30-60 min 1-4 hours 2-8 hours Which prototype is the best?

14. 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? (Fig 2.4 Cont.) Accelerator effect: If the central screens are good, the rest are okay almost automatically