1. 1 CSE 3345 User interface design A software engineering perspective Chapter 2: Prototyping and Iterative Design

2. 2 Prototyping and Iterative Design A prototype … –is an abstraction of the final product. An abstraction is a simplification of reality. –models the essential features of the final product. –Is used to elicit feedback from users to determine if the correct system is being built (what the users actually need, not what the developers think the users need) Iterative design … –is a software development technique –consists of a series of software builds each of which produces a more sophisticated prototype than the previous build. The last build produces the final product.

3. 3 Why Is Usability is Hard to Achieve? Usability is overlooked in many undergraduate CS curriculums. –There is more emphasis on coding than designing. Developers treat the user interface as an afterthought, something to be dealt with only after the rest of the system has been completed. Developers think they are smarter than users when judging usability. –They avoid getting usability feedback from users early in the development cycle. It is too expensive to make major usability changes towards the end of the development process!

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

5. 5 The Classical Approach - Iterative Design Third law of usability: The more effort developers have spent making a prototype, the less they are willing to replace it even if it has flaws. A new prototype is produced at the end of each iteration. Each prototype is used to elicit feedback from users to determine if the correct system is being built (what the users actually need, not what the developers think the users need)

6. 6 Case Study: A Hotel System A new prototype is produced at the end of each

7. 7 Fig 2.2 Hotel system Task list Book guest Checkin Checkout Change room Record services Breakfast list Breakfasts 23/9 RoomBuffetIn room 111 122 1311 15...

8. 8 Fig 2.3A Hotel system prototype

9. 9 (Fig 2.3A Cont.)

10. 10 Fig 2.3B Defect list for hotel system mockup

11. 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:

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

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