Design Process for Web Applications

1. Design Process for Web Applications Authors :Lorna Uden Source : IEEE MultiMedia , vol. 9, no. 4, 2002, pp. 47-55 Speaker :Li-Ya Liao Adviser : Ku-Yaw Chang

2. Outline • Introduction • Requirements analysis • User interface design • Case study : e-commerce application • Discussion

3. Introduction • Web-based application development • Lack • Engineering approach • Effectively carry out hypermedia • Web engineering • Systematic development • Maintenance of hypermedia applications

4. Introduction • Develop useful applications • High usability • Reduced user learning time • Reduced user error rates • High productivity • Object-oriented user interface(OOUI) • Achieve high usability

5. Outline • Introduction • Requirements analysis • User interface design • Case study : e-commerce application • Discussion

6. Requirements analysis • understanding and Determining user needs • Interviews • Observation • System analysis • Functional requirements • User requirements

7. Requirements analysis • Determine functional requirements • User、task and environment • Applied Cognitive Task Analysis(ACTA) • Structured interview procedure • Easily execute without training or experience • Three interview methods • Task diagram interview • Knowledge audit • Simulation interview

8. Requirements analysis • Task diagram interview • Broad overview of the task • Three to six subtasks

9. Requirements analysis • Knowledge audit • Surveys the required expertise • Simulation interview • Paper-and-pencil exercise

10. Outline • Introduction • Requirements analysis • User interface design • Case study : e-commerce application • Discussion

11. User interface design • OOUI design models • Meet user requirements • Increase usability • Users need not know the computer programs • Web interface design • Three models • User’s conceptual model • Designer’s model • Programmer’s model

12. Outline • Introduction • Requirements analysis • User interface design • Case study : e-commerce application • Discussion

13. Case study : e-commerce application • Build a usable and effective Web interface • User’s conceptual model • Skills、motivation、tasksand expectations • User requirementsanalysis、task analysis and usability testing • Usersmust participate all development

14. Case study : e-commerce application • User and task analysis • User analysis • Experience • Frequency • Nature • Computer experience and skills

15. Case study : e-commerce application • Task analysis • Three steps of the ACTA interview techniques • Task diagram interview • Knowledge audit • Simulation interview

16. Case study : e-commerce application • Task diagram interview

17. Case study : e-commerce application • Knowledge audit

18. Case study : e-commerce application • Simulation interview

19. Case study : e-commerce application • Constructing a designer’s model • Achieve high usability • Designer’s model must match the user’s conceptual model • Four steps constitute this construction process • Design the user object model • Design the navigational structure • Design object views • Create detailed task descriptions

20. The designer’s model

21. Case study : e-commerce application • Create detailed task description

22. Case study : e-commerce application • State diagram

23. Case study : e-commerce application • Programmer’s model • Requires an environment • Operating system (windows 98) • programming tools (Dreamweaver) • system services (Java Scripts) • Consistent style • Shorter learningtimes • Fewer user errors

24. Case study : e-commerce application

25. Outline • Introduction • Requirements analysis • User interface design • Case study : e-commerce application • Discussion

26. Discussion • Using ACTA compared to other methods • Provide a well-structured methodology • Analyzing cognitive tasks • Enable designers to build applications • Match the conceptual models • Using OOUI • High usability

27. The End