Chapter - 13 - Web App Design PDF

Chapter 13
WebApp Design
Slide Set to accompany
Software Engineering: A Practitioners Approach, 7/e

by Roger S. Pressman
Slides copyright 1996, 2001, 2005, 2009 by Roger S. Pressman
For non-profit educational use only

May be reproduced ONLY for student use at the university level when used in conjunction
with Software Engineering: A Practitioner's Approach, 7/e. Any other reproduction or use is
prohibited without the express written permission of the author.
All copyright information MUST appear if these slides are posted on a website for student
use.
These slides are designed to accompany Software Engineering: A Practitioners Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.
Design & WebApps

There are essentially two basic approaches to
design: the artistic ideal of expressing yourself
and the engineering ideal of solving a problem
for a customer.
Jakob Nielsen
When should we emphasize WebApp design?
when content and function are complex

when the size of the WebApp encompasses
hundreds of content objects, functions, and analysis
classes
when the success of the WebApp will have a direct
impact on the success of the business
Design & WebApp Quality
Security
Availability
the measure of the percentage of time that a

WebApp is available for use
Scalability
Rebuff external attacks

Exclude unauthorized access
Ensure the privacy of users/customers
Can the WebApp and the systems with which it is

interfaced handle significant variation in user or
transaction volume
Time to Market
Quality Dimensions for End-Users
Time
Structural
How much has a Web site changed since the last upgrade?
How do you highlight the parts that have changed?
How well do all of the parts of the Web site hold together.
Are all links inside and outside the Web site working?
Do all of the images work?
Are there parts of the Web site that are not connected?
Content
Does the content of critical pages match what is supposed to be

there?
Do key phrases exist continually in highly-changeable pages?
Do critical pages maintain quality content from version to version?
What about dynamically generated HTML pages?
Quality Dimensions for End-Users
Accuracy and Consistency
Response Time and Latency
Are today's copies of the pages downloaded the same as

yesterday's? Close enough?
Is the data presented accurate enough? How do you know?
Does the Web site server respond to a browser request
within certain parameters?
In an E-commerce context, how is the end to end response
time after a SUBMIT?
Are there parts of a site that are so slow the user declines to
continue working on it?
Performance
Is the Browser-Web-Web site-Web-Browser connection quick

enough?
How does the performance vary by time of day, by load and
usage?
Is performance adequate for E-commerce applications?
WebApp Design Goals
Consistency
Content should be constructed consistently

Graphic design (aesthetics) should present a
consistent look across all parts of the WebApp
Architectural design should establish templates that
lead to a consistent hypermedia structure
Interface design should define consistent modes of
interaction, navigation and content display
Navigation mechanisms should be used consistently
across all WebApp elements
WebApp Design Goals
Identity
Robustness
designed in a manner that is intuitive and predictable
Visual appeal
The user expects robust content and functions that are

relevant to the users needs
Navigability
Establish an identity that is appropriate for the business

purpose
the look and feel of content, interface layout, color

coordination, the balance of text, graphics and other media,
navigation mechanisms must appeal to end-users
Compatibility
With all appropriate environments and configurations
WebE Design Pyramid

user
Interface
design
Aesthetic design
Content design
Navigation design
Architecture design
Component design
technology
WebApp Interface Design
Where am I? The interface should
What can I do now? The interface should always help the user
understand his current options
provide an indication of the WebApp that has been accessed

inform the user of her location in the content hierarchy.
what functions are available?

what links are live?
what content is relevant?
Where have I been, where am I going? The interface must

facilitate navigation.
Provide a map (implemented in a way that is easy to understand)

of where the user has been and what paths may be taken to move
elsewhere within the WebApp.
Effective WebApp Interfaces
Bruce Tognozzi [TOG01] suggests
Effective interfaces are visually apparent and

forgiving, instilling in their users a sense of control.
Users quickly see the breadth of their options, grasp
how to achieve their goals, and do their work.
Effective interfaces do not concern the user with the
inner workings of the system. Work is carefully and
continuously saved, with full option for the user to
undo any activity at any time.
Effective applications and services perform a
maximum of work, while requiring a minimum of
information from users.
10
Interface Design Principles-I
AnticipationA WebApp should be designed so that it

anticipates the uses next move.
CommunicationThe interface should communicate the status
of any activity initiated by the user
ConsistencyThe use of navigation controls, menus, icons,
and aesthetics (e.g., color, shape, layout)
Controlled autonomyThe interface should facilitate user
movement throughout the WebApp, but it should do so in a
manner that enforces navigation conventions that have been
established for the application.
EfficiencyThe design of the WebApp and its interface should
optimize the users work efficiency, not the efficiency of the
Web engineer who designs and builds it or the client-server
environment that executes it.
11
Interface Design Principles-II
FocusThe WebApp interface (and the content it presents) should

stay focused on the user task(s) at hand.
Fitts LawThe time to acquire a target is a function of the distance to
and size of the target.
Human interface objectsA vast library of reusable human interface
objects has been developed for WebApps.
Latency reductionThe WebApp should use multi-tasking in a way
that lets the user proceed with work as if the operation has been
completed.
Learnability A WebApp interface should be designed to minimize
learning time, and once learned, to minimize relearning required when
the WebApp is revisited.
12
Interface Design Principles-III
Maintain work product integrityA work product (e.g., a form

completed by the user, a user specified list) must be automatically
saved so that it will not be lost if an error occurs.
ReadabilityAll information presented through the interface should be
readable by young and old.
Track stateWhen appropriate, the state of the user interaction should
be tracked and stored so that a user can logoff and return later to pick
up where she left off.
Visible navigationA well-designed WebApp interface provides the
illusion that users are in the same place, with the work brought to
them.
13
Aesthetic Design
Dont be afraid of white space.

Emphasize content.
Organize layout elements from top-left to
bottom right.
Group navigation, content, and function
geographically within the page.
Dont extend your real estate with the scrolling
bar.
Consider resolution and browser window size
when designing layout.
14
Content Design
Develops a design representation for content objects
Represents the mechanisms required to instantiate their

relationships to one another.
For WebApps, a content object is more closely aligned with

a data object for conventional software
analogous to the relationship between analysis classes and

design components described in Chapter 11
A content object has attributes that include contentspecific information and implementation-specific
attributes that are specified as part of design
15
Design of Content Objects

ProductComponent
partNumber
partName
partType
description
price
is part of
createNewItem ( )
displayDescription ( )
display TechSpec
Sensor
Camera
ControlPanel
CompDescript ion
SoftFeature
1
Market ingDescript ion
t ext color
f ont st yle
f ont size
line spacing
t ext image size
background color
1..*
0..1
0..1
Phot ograph
Schemat ic
Video
horizont al dimension
vert ical dimension
border st yle
vert ical dimension
border st yle
vert ical dimension
border st yle
audio volume
1
TechDescript ion
t ext color
f ont st yle
f ont size
line spacing
t ext image size
background color
16
Architecture Design
Content architecture focuses on the manner in which content objects

(or composite objects such as Web pages) are structured for
presentation and navigation.
The term information architecture is also used to connote structures that

lead to better organization, labeling, navigation, and searching of content
objects.
WebApp architecture addresses the manner in which the application is

structured to manage user interaction, handle internal processing
tasks, effect navigation, and present content.
Architecture design is conducted in parallel with interface design,
aesthetic design and content design.
17
Content Architecture
Linear
structure
Network
structure
Grid
structure
Hierarchical
structure
18
MVC Architecture
The model contains all application specific content and processing

logic, including
The view contains all interface specific functions and enables
all content objects

access to external data/information sources,
all processing functionality that are application specific
the presentation of content and processing logic
access to external data/information sources,
all processing functionality required by the end-user.
The controller manages access to the model and the view and
coordinates the flow of data between them.
19
MVC Architecture
co n t ro ller
manages user request s
select s model behav ior
select s v iew response
behav ior request

( st at e change)
user request
or dat a
browser
v iew select ion
mo d el
encapsulat es funct ionalit y
encapsulat es cont ent object s
incorporat es all webApp st at es
client
dat a from model
HTML dat a
view
updat e request
ext ernal dat a
prepares dat a from model

request updat es from model
present s v iew select ed by
cont roller
serv er
20
Navigation Design
Begins with a consideration of the user

hierarchy and related use-cases
Each actor may use the WebApp somewhat

differently and therefore have different navigation
requirements
As each user interacts with the WebApp, she

encounters a series of navigation semantic
units (NSUs)
NSUa set of information and related navigation

structures that collaborate in the fulfillment of a
subset of related user requirements
21
Navigation Semantic Units
Navigation semantic unit
Ways of navigation (WoN)represents the best navigation

way or path for users with certain profiles to achieve their
desired goal or sub-goal. Composed of
Navigation nodes (NN) connected by Navigation links
link12
NN2
NN1
link24
NN4
link13
NN3
NSU
link34
22
Creating an NSU
<<navigat ion link>>
request alt ernat ive

recommend component (s)
select Room
Product Component
show Product Component
Room

ret urn t o Room
view BillOf Mat erials

show descript ion
purchase Product Component
BillOf Mat erials

CompDescript ion
purchase Product Component
Market ingDescript ion

phot ograph
t echDescript ion
video
schemat ic
23
Navigation Syntax
Individual navigation linktext-based links, icons,

buttons and switches, and graphical metaphors..
Horizontal navigation barlists major content or
functional categories in a bar containing appropriate
links. In general, between 4 and 7 categories are listed.
Vertical navigation column
lists major content or functional categories

lists virtually all major content objects within the WebApp.
Tabsa metaphor that is nothing more than a variation

of the navigation bar or column, representing content or
functional categories as tab sheets that are selected
when a link is required.
Site mapsprovide an all-inclusive tab of contents for
navigation to all content objects and functionality
contained within the WebApp.
24
Component-Level Design
WebApp components implement the following

functionality
perform localized processing to generate content and

navigation capability in a dynamic fashion
provide computation or data processing capability
that are appropriate for the WebApps business
domain
provide sophisticated database query and access
establish data interfaces with external corporate
systems.
25
OOHDM
Object-Oriented Hypermedia Design Method (OOHDM)
wo r k p ro d u ct s
concept ual design
nav igat ional design
abst ract int erface

design
implement at ion
Classes, sub-systems,
relationships, attributes
Nodes, links, access

structures, navigational
contexts, navigational
transformations
Abstract interface
objects, responses to
external events,
transformations
executable
WebApp
Mapping between
conceptual and
navigation objects
Mapping between
navigation and
perceptible objects
Resource
provided by
target
environment
Takes into account user

profile and task.
Emphasis on cognitive
aspects.
Modeling perceptible
objects, implementing
chosen metaphors.
Describe interface for
navigational objects
Correctness;
Application
performance;
completeness
Classification,
composition,
d e sig n me ch an isms aggregation,
generalization
specialization
d e sig n co n ce rn s
Modeling semantics
of the application
domain
26
Navigational Design for

OOHDM
Navigational design identifies a set of objects that are derived

from the classes defined in conceptual design.
A series of navigational classes or nodes are defined to
encapsulate these objects.
In addition, design patterns for navigational design may be
used as the design is developed.
OOHDM uses a predefined set of navigation classesnodes,
links, anchors, and access structures
OOHDM structures the navigation space by grouping
navigation objects into sets called contexts
A context includes a description of the local navigation
structure, restriction imposed on the access of content objects,
and methods (operations) required to effect access of content
objects.
27
Abstract Interface Design

and Implementation
The abstract interface design action specifies

the interface objects that the user sees as
WebApp interaction occurs.
A formal model of interface objects, called an
abstract data view (ADV), is used to represent
the relationship between interface objects and
navigation objects, and the behavioral
characteristics of interface objects.
28
The ADV model defines a static layout [Sch98b] that

represents the interface metaphor and includes a
representation of navigation objects within the interface
and the specification of the interface objects (e.g.,
menus, buttons, icons) that assist in navigation and
interaction.
In addition, the ADV model contains behavioral
component (similar to the UML state diagram) that
indicates how external events trigger navigation and
which interfac transformations occur when the user
interacts with the application [Sch01a].
29
The OOHDM implementation activity

represents a design iteration that is specific to
the environment in which the WebApp will
operate.
Classes, navigation, and the interface are each
characterized in a manner that can be
constructed for the client-server environment,
operating systems, support software,
programming languages, and other
environmental characteristics that are relevant
to the problem.
30
Conceptual Schema
cust omer select s component
ProductComponent
component recommendat ion

request ed
partNumber
partName
partType
description
price
BillOfMaterials
identifier
BoMList
numberItems
priceTotal
createNewItem ( )
getDescription ( )
getTechSpec
Room
roomName
dimensions
exteriorWindows
exteriorDoors
Sensor
Camera
ControlPanel
addEntry ( )
deleteEntry ( )
editEntry ( )
name( )
computePrice ( )
SoftFeature
BoMItem
cust omercont inues

component select ion
Order
cust omer
request s purchase
orderNumber
customerInfo
billOfMaterials
shippingInfo
billingInfo
quantity
partNumber
partName
partType
price
addtoList ( )
deletefromList ( )
getNextListEntry ( )
31

Chapter - 13 - Web App Design PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapter - 13 - Web App Design PDF

Transféré par

Droits d'auteur :

Formats disponibles

Chapter 13

Software Engineering: A Practitioners Approach, 7/e

For non-profit educational use only

Design & WebApps

When should we emphasize WebApp design?

when content and function are complex

Design & WebApp Quality

the measure of the percentage of time that a

Rebuff external attacks

Can the WebApp and the systems with which it is

Quality Dimensions for End-Users

Does the content of critical pages match what is supposed to be

Quality Dimensions for End-Users

Accuracy and Consistency

Response Time and Latency

Are today's copies of the pages downloaded the same as

Is the Browser-Web-Web site-Web-Browser connection quick

WebApp Design Goals

Content should be constructed consistently

WebApp Design Goals

designed in a manner that is intuitive and predictable

The user expects robust content and functions that are

Establish an identity that is appropriate for the business

the look and feel of content, interface layout, color

With all appropriate environments and configurations

WebE Design Pyramid

WebApp Interface Design

Where am I? The interface should

provide an indication of the WebApp that has been accessed

what functions are available?

Where have I been, where am I going? The interface must

Provide a map (implemented in a way that is easy to understand)

Effective WebApp Interfaces

Bruce Tognozzi [TOG01] suggests

Effective interfaces are visually apparent and

Interface Design Principles-I

AnticipationA WebApp should be designed so that it

Interface Design Principles-II

FocusThe WebApp interface (and the content it presents) should

Interface Design Principles-III

Maintain work product integrityA work product (e.g., a form

Dont be afraid of white space.

Develops a design representation for content objects

Represents the mechanisms required to instantiate their

For WebApps, a content object is more closely aligned with

analogous to the relationship between analysis classes and

Design of Content Objects

Content architecture focuses on the manner in which content objects

The term information architecture is also used to connote structures that

WebApp architecture addresses the manner in which the application is

The model contains all application specific content and processing

The view contains all interface specific functions and enables

all content objects

behav ior request

v iew select ion

ext ernal dat a

prepares dat a from model

Begins with a consideration of the user

Each actor may use the WebApp somewhat

As each user interacts with the WebApp, she

NSUa set of information and related navigation

Navigation Semantic Units

Navigation semantic unit