Software Engineering: A Practitioner’s Approach, 6/e
Chapter 19
Design Modeling for WebApps
copyright © 1996, 2001, 2005
R.S. Pressman & Associates, Inc.
For University Use Only
May be reproduced ONLY for student use at the university level
when used in conjunction with Software Engineering: A Practitioner's Approach.
Any other reproduction or use is expressly prohibited.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
1
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
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
2
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
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
3
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?
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
4
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?
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
5
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
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
6
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 user’s 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 endusers
Compatibility

With all appropriate environments and configurations
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
7
WebE Design Pyramid
user
Interface
design
Aesthetic design
Content design
Navigation design
Architecture design
Component design
technology
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
8
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.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
9
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.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
10
Interface Design Principles-I





Anticipation—A WebApp should be designed so that it anticipates the use’s
next move.
Communication—The interface should communicate the status of any
activity initiated by the user
Consistency—The use of navigation controls, menus, icons, and aesthetics
(e.g., color, shape, layout)
Controlled autonomy—The 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.
Efficiency—The design of the WebApp and its interface should optimize the
user’s work efficiency, not the efficiency of the Web engineer who designs
and builds it or the client-server environment that executes it.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
11
Interface Design Principles-II





Focus—The WebApp interface (and the content it presents) should stay focused on
the user task(s) at hand.
Fitt’s Law—“The time to acquire a target is a function of the distance to and size of
the target.”
Human interface objects—A vast library of reusable human interface objects has
been developed for WebApps.
Latency reduction—The 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.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
12
Interface Design Principles-III




Maintain work product integrity—A 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.
Readability—All information presented through the interface should be readable by
young and old.
Track state—When 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 navigation—A well-designed WebApp interface provides “the illusion that
users are in the same place, with the work brought to them.”
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
13
Interface Design Workflow-I






Review information contained in the analysis model and refine
as required.
Develop a rough sketch of the WebApp interface layout.
Map user objectives into specific interface actions.
Define a set of user tasks that are associated with each action.
Storyboard screen images for each interface action.
Refine interface layout and storyboards using input from
aesthetic design.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
14
Mapping User Objectives
Menu bar
major functions
List of user object ives
graphic, logo, and company name
object ive #1
object ive #2
object ive #3
object ive #4
object ive #5
graphic
object ive #n
Home page text copy
Navigation
menu
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
15
Interface Design Workflow-II





Identify user interface objects that are required to
implement the interface.
Develop a procedural representation of the user’s
interaction with the interface.
Develop a behavioral representation of the interface.
Describe the interface layout for each state.
Refine and review the interface design model.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
16
Aesthetic Design






Don’t 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.
Don’t extend your real estate with the scrolling bar.
Consider resolution and browser window size when
designing layout.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
17
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 content-specific
information and implementation-specific attributes that are
specified as part of design
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
18
Design of Content Objects
ProductComponent
partNumber
partName
partType
description
price
is part of
1
1
createNewItem ( )
displayDescription ( )
display TechSpec
Sensor
Camera
ControlPanel
CompDescript ion
SoftFeature
1
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
horizont al dimension
vert ical dimension
border st yle
horizont al dimension
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
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
19
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.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
20
Content Architecture
Linear
structure
Network
structure
Grid
structure
Hierarchical
structure
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
21
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.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
22
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
m o 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
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
23
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)

NSU—“a set of information and related navigation structures that
collaborate in the fulfillment of a subset of related user
requirements”
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
24
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
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
25
Creating an NSU
<<navigat ion link>>
request alt ernat ive
<<navigat ion link>>
recommend component ( s)
<<navigat ion link>>
select Room
Product Component
<<navigat ion link>>
show Product Component
Room
<<navigat ion link>>
ret urn t o Room
<<navigat ion link>>
view BillOf Mat erials
<<navigat ion link>>
show descript ion
<<navigat ion link>>
purchase Product Component
BillOf Mat erials
CompDescript ion
<<navigat ion link>>
purchase Product Component
Market ingDescript ion
phot ograph
t echDescript ion
video
schemat ic
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
26
Navigation Syntax



Individual navigation link—text-based links, icons, buttons and
switches, and graphical metaphors..
Horizontal navigation bar—lists 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.
Tabs—a 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 maps—provide an all-inclusive tab of contents for navigation to
all content objects and functionality contained within the WebApp.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
27
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 WebApp’s business domain
provide sophisticated database query and access
establish data interfaces with external corporate systems.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
28
Hypermedia Design Patterns-I


Architectural patterns.

assist in the design of content and WebApp architecture

many architectural patterns are available (e.g., Java Blueprints
at java.sun.com/blueprints/)
Component construction patterns.


recommend methods for combining WebApp components (e.g.,
content objects, functions) into composite components.
Navigation patterns.

assist in the design of NSUs, navigation links and the overall
navigation flow of the WebApp. _
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
29
Hypermedia Design Patterns-II

Presentation patterns




how to organize user interface control functions for better usability
how to show the relationship between a interface action and the content objects
it affects
how to establish effective content hierarchies, and many others.
Behavior/user interaction patterns




how the interface informs the user of the consequences of a specific action
how a user expands content based on usage context and user desires
how to best describe the destination that is implied by a link
how to inform the user about the status of an on-going interaction, and others.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
30
Patterns Repositories

Hypermedia Design Patterns Repository


InteractionPatterns by TomErickson


http://www.mit.edu/~jtidwell/interaction_patterns.html
Patterns for Personal Web Sites


http://www.anamorph.com/docs/patterns/default.html
Common Ground - A Pattern Language for HCI Design


http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html
An HTML 2.0 Pattern Language


http://www.welie.com/patterns/
Improving Web Information Systems with Navigational Patterns


http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html
Web Design Patterns by Martijn vanWelie


http://www.designpattern.lu.unisi.ch/
http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html
Indexing Pattern Language

http://www.cs.brown.edu/~rms/InformationStructures/Indexing/Overview.html
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
31
OOHDM

Object-Oriented Hypermedia Design Method (OOHDM)
w o r k p r o 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 m e ch an ism s aggregation,
generalization
specialization
d e sig n co n ce r n s
Modeling semantics
of the application
domain
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
32
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
orderNumber
customerInfo
billOfMaterials
shippingInfo
billingInfo
cust omer
request s purchase
quantity
partNumber
partName
partType
price
addtoList ( )
deletefromList ( )
getNextListEntry ( )
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
33
Design Metrics






Does the user interface promote usability?
Are the aesthetics of the WebApp appropriate for the application
domain and pleasing to the user?
Is the content designed in a manner that imparts the most
information with the least effort?
Is navigation efficient and straightforward?
Has the WebApp architecture been designed to accommodate the
special goals and objectives of WebApp users, the structure of
content and functionality, and the flow of navigation required to use
the system effectively?
Are components designed in a manner that reduces procedural
complexity and enhances the correctness, reliability and
performance?
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided
with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005
34