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

Outline Introduction Requirements analysis User interface design Case study : e-commerce application Discussion 2009/10/151

Introduction Web-based application development Lack Engineering approach Effectively carry out hypermedia Web engineering Systematic development Maintenance of hypermedia applications 2009/10/152

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/153 Introduction

Outline Introduction Requirements analysis User interface design Case study : e-commerce application Discussion 2009/10/154

Requirements analysis understanding and Determining user needs Interviews Observation System analysis Functional requirements User requirements 2009/10/155

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/156 Requirements analysis

Task diagram interview Broad overview of the task Three to six subtasks 2009/10/157 Requirements analysis

Knowledge audit Surveys the required expertise Simulation interview Paper-and-pencil exercise 2009/10/158 Requirements analysis

Outline Introduction Requirements analysis User interface design Case study : e-commerce application Discussion 2009/10/159

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/1510

Outline Introduction Requirements analysis User interface design Case study : e-commerce application Discussion 2009/10/1511

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/1512

User and task analysis User analysis Experience Frequency Nature Computer experience and skills 2009/10/1513 Case study : e-commerce application

Task analysis Three steps of the ACTA interview techniques Task diagram interview Knowledge audit Simulation interview 2009/10/1514 Case study : e-commerce application

Task diagram interview 2009/10/1515 Case study : e-commerce application

Knowledge audit 2009/10/1516 Case study : e-commerce application

Simulation interview 2009/10/1517 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 2009/10/1518 Case study : e-commerce application

2009/10/1519 The designer’s model

Create detailed task description 2009/10/1520 Case study : e-commerce application

State diagram 2009/10/1521 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 learning times Fewer user errors 2009/10/1522 Case study : e-commerce application

2009/10/1523 Case study : e-commerce application

Outline Introduction Requirements analysis User interface design Case study : e-commerce application Discussion 2009/10/1524

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/1525

The End 2009/10/1526