design process for web applications
DESCRIPTION
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. Outline. Introduction Requirements analysis User interface design Case study : e-commerce application Discussion. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/1.jpg)
Design Process for Web Applications
Authors :Lorna Uden
Source : IEEE MultiMedia , vol. 9, no. 4, 2002, pp. 47-55
Speaker :Li-Ya LiaoAdviser : Ku-Yaw Chang
![Page 2: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/2.jpg)
Outline
Introduction Requirements analysis User interface design Case study : e-commerce application Discussion
2009/10/15 2
![Page 3: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/3.jpg)
Introduction
Web-based application development Lack
Engineering approach Effectively carry out hypermedia
Web engineering Systematic development Maintenance of hypermedia applications
2009/10/15 3
![Page 4: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/4.jpg)
Develop useful applications High usability
Reduced user learning time Reduced user error rates High productivity
Object-oriented user interface(OOUI) Achieve high usability
2009/10/15 4
Introduction
![Page 5: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/5.jpg)
Outline
Introduction Requirements analysis User interface design Case study : e-commerce application Discussion
2009/10/15 5
![Page 6: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/6.jpg)
Requirements analysis
understanding and Determining user needs Interviews Observation System analysis
Functional requirements User requirements
2009/10/15 6
![Page 7: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/7.jpg)
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
2009/10/15 7
Requirements analysis
![Page 8: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/8.jpg)
Task diagram interview Broad overview of the task
Three to six subtasks
2009/10/15 8
Requirements analysis
![Page 9: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/9.jpg)
Knowledge audit Surveys the required expertise
Simulation interview Paper-and-pencil exercise
2009/10/15 9
Requirements analysis
![Page 10: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/10.jpg)
Outline
Introduction Requirements analysis User interface design Case study : e-commerce application Discussion
2009/10/15 10
![Page 11: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/11.jpg)
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
2009/10/15 11
![Page 12: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/12.jpg)
Outline
Introduction Requirements analysis User interface design Case study : e-commerce application Discussion
2009/10/15 12
![Page 13: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/13.jpg)
Case study : e-commerce application
Build a usable and effective Web interface User’s conceptual model
Skills 、 motivation 、 tasks and expectations User requirements analysis 、 task
analysis and usability testing Users must participate all development
2009/10/15 13
![Page 14: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/14.jpg)
User and task analysis User analysis
Experience Frequency Nature Computer experience and skills
2009/10/15 14
Case study : e-commerce application
![Page 15: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/15.jpg)
Task analysis Three steps of the ACTA interview techniques
Task diagram interview Knowledge audit Simulation interview
2009/10/15 15
Case study : e-commerce application
![Page 16: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/16.jpg)
Task diagram interview
2009/10/15 16
Case study : e-commerce application
![Page 17: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/17.jpg)
Knowledge audit
2009/10/15 17
Case study : e-commerce application
![Page 18: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/18.jpg)
Simulation interview
2009/10/15 18
Case study : e-commerce application
![Page 19: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/19.jpg)
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
2009/10/15 19
Case study : e-commerce application
![Page 20: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/20.jpg)
2009/10/15 20The designer’s model
![Page 21: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/21.jpg)
Create detailed task description
2009/10/15 21
Case study : e-commerce application
![Page 22: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/22.jpg)
State diagram
2009/10/15 22
Case study : e-commerce application
![Page 23: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/23.jpg)
Programmer’s model Requires an environment
Operating system (windows 98) programming tools (Dreamweaver) system services (Java Scripts)
Consistent style Shorter learning times Fewer user errors
2009/10/15 23
Case study : e-commerce application
![Page 24: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/24.jpg)
2009/10/15 24
Case study : e-commerce application
![Page 25: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/25.jpg)
Outline
Introduction Requirements analysis User interface design Case study : e-commerce application Discussion
2009/10/15 25
![Page 26: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/26.jpg)
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
2009/10/15 26
![Page 27: Design Process for Web Applications](https://reader035.vdocuments.site/reader035/viewer/2022062803/568146d2550346895db4096b/html5/thumbnails/27.jpg)
The End
2009/10/15 27