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

Outline

Introduction Requirements analysis User interface design Case study : e-commerce application Discussion

2009/10/15 2

Introduction

Web-based application development Lack

Engineering approach Effectively carry out hypermedia

Web engineering Systematic development Maintenance of hypermedia applications

2009/10/15 3

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

Outline

Introduction Requirements analysis User interface design Case study : e-commerce application Discussion

2009/10/15 5

Requirements analysis

understanding and Determining user needs Interviews Observation System analysis

Functional requirements User requirements

2009/10/15 6

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

Task diagram interview Broad overview of the task

Three to six subtasks

2009/10/15 8

Requirements analysis

Knowledge audit Surveys the required expertise

Simulation interview Paper-and-pencil exercise

2009/10/15 9

Requirements analysis

Outline

Introduction Requirements analysis User interface design Case study : e-commerce application Discussion

2009/10/15 10

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

Outline

Introduction Requirements analysis User interface design Case study : e-commerce application Discussion

2009/10/15 12

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

User and task analysis User analysis

Experience Frequency Nature Computer experience and skills

2009/10/15 14

Case study : e-commerce application

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

Task diagram interview

2009/10/15 16

Case study : e-commerce application

Knowledge audit

2009/10/15 17

Case study : e-commerce application

Simulation interview

2009/10/15 18

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/15 19

Case study : e-commerce application

2009/10/15 20The designer’s model

Create detailed task description

2009/10/15 21

Case study : e-commerce application

State diagram

2009/10/15 22

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/15 23

Case study : e-commerce application

2009/10/15 24

Case study : e-commerce application

Outline

Introduction Requirements analysis User interface design Case study : e-commerce application Discussion

2009/10/15 25

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

The End

2009/10/15 27