3231 Software Engineering

hurriedtinkleΤεχνίτη Νοημοσύνη και Ρομποτική

15 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

53 εμφανίσεις

3231 Software Engineering


By Germaine Cheung

Hong Kong Computer Institute


Lecture 12


Chapter 19


Design Modeling for WebApps




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.

Mapping User Objectives

o
b
j
e
c
t
i
v
e

#
1
o
b
j
e
c
t
i
v
e

#
2
o
b
j
e
c
t
i
v
e

#
3
o
b
j
e
c
t
i
v
e

#
4
o
b
j
e
c
t
i
v
e

#
5
o
b
j
e
c
t
i
v
e

#
n
L
i
s
t

o
f

u
s
e
r

o
b
j
e
c
t
i
v
e
s
Home page text copy
graphic
graphic,
logo,
and company name
Navigation
menu
Menu bar
major functions
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.

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.

Content Design

Develops a design representation for content objects


For WebApps, a content object is more closely aligned
with a data object for conventional software

Represents the mechanisms required to instantiate their
relationships to one another.


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

Design of Content Objects

P
r
o
d
u
c
t
C
o
m
p
o
n
e
n
t
p
a
r
t
N
u
m
b
e
r

p
a
r
t
N
a
m
e

p
a
r
t
T
y
p
e

d
e
s
c
r
i
p
t
i
o
n

p
r
i
c
e
c
r
e
a
t
e
N
e
w
I
t
e
m
(
)

d
i
s
p
l
a
y
D
e
s
c
r
i
p
t
i
o
n
(
)

d
i
s
p
l
a
y

T
e
c
h
S
p
e
c

S
e
n
s
o
r
C
a
m
e
r
a
C
o
n
t
r
o
l
P
a
n
e
l
S
o
f
t
F
e
a
t
u
r
e
C
o
m
p
D
e
s
c
r
i
p
t
i
o
n
P
h
o
t
o
g
r
a
p
h
h
o
r
i
z
o
n
t
a
l

d
i
m
e
n
s
i
o
n

v
e
r
t
i
c
a
l

d
i
m
e
n
s
i
o
n

b
o
r
d
e
r

s
t
y
l
e
S
c
h
e
m
a
t
i
c
h
o
r
i
z
o
n
t
a
l

d
i
m
e
n
s
i
o
n

v
e
r
t
i
c
a
l

d
i
m
e
n
s
i
o
n

b
o
r
d
e
r

s
t
y
l
e
V
i
d
e
o
h
o
r
i
z
o
n
t
a
l

d
i
m
e
n
s
i
o
n

v
e
r
t
i
c
a
l

d
i
m
e
n
s
i
o
n

b
o
r
d
e
r

s
t
y
l
e

a
u
d
i
o

v
o
l
u
m
e
T
e
c
h
D
e
s
c
r
i
p
t
i
o
n
t
e
x
t

c
o
l
o
r

f
o
n
t

s
t
y
l
e

f
o
n
t

s
i
z
e

l
i
n
e

s
p
a
c
i
n
g

t
e
x
t

i
m
a
g
e

s
i
z
e

b
a
c
k
g
r
o
u
n
d

c
o
l
o
r
M
a
r
k
e
t
i
n
g
D
e
s
c
r
i
p
t
i
o
n
t
e
x
t

c
o
l
o
r

f
o
n
t

s
t
y
l
e

f
o
n
t

s
i
z
e

l
i
n
e

s
p
a
c
i
n
g

t
e
x
t

i
m
a
g
e

s
i
z
e

b
a
c
k
g
r
o
u
n
d

c
o
l
o
r
i
s

p
a
r
t

o
f
1
1
1
1
.
.
*
0
.
.
1
0
.
.
1
1
1
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.

Content Architecture

Hierarchical

structure

Grid

structure

Linear

structure

Network

structure

MVC Architecture

The
model
contains all application specific content and
processing logic, including


all content objects


access to external data/information sources,


all processing functionality that are application specific


The
view

contains all interface specific functions and enables


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.

MVC Architecture

b
r
o
w
s
e
r
c
l
i
e
n
t
c
o
n
t
r
o
l
l
e
r
m
a
n
a
g
e
s

u
s
e
r

r
e
q
u
e
s
t
s

s
e
l
e
c
t
s

m
o
d
e
l

b
e
h
a
v
i
o
r

s
e
l
e
c
t
s

v
i
e
w

r
e
s
p
o
n
s
e
v
i
e
w
p
r
e
p
a
r
e
s

d
a
t
a

f
r
o
m

m
o
d
e
l

r
e
q
u
e
s
t

u
p
d
a
t
e
s

f
r
o
m

m
o
d
e
l

p
r
e
s
e
n
t
s

v
i
e
w

s
e
l
e
c
t
e
d

b
y




c
o
n
t
r
o
l
l
e
r
m
o
d
e
l
e
n
c
a
p
s
u
l
a
t
e
s

f
u
n
c
t
i
o
n
a
l
i
t
y

e
n
c
a
p
s
u
l
a
t
e
s

c
o
n
t
e
n
t

o
b
j
e
c
t
s

i
n
c
o
r
p
o
r
a
t
e
s

a
l
l

w
e
b
A
p
p

s
t
a
t
e
s

s
e
r
v
e
r
e
x
t
e
r
n
a
l

d
a
t
a
b
e
h
a
v
i
o
r

r
e
q
u
e
s
t

(
s
t
a
t
e

c
h
a
n
g
e
)
d
a
t
a

f
r
o
m

m
o
d
e
l
u
p
d
a
t
e

r
e
q
u
e
s
t
v
i
e
w

s
e
l
e
c
t
i
o
n
u
s
e
r

r
e
q
u
e
s
t

o
r

d
a
t
a
H
T
M
L

d
a
t
a
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


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

NN
1

NN
2

NN
4

NN
3

link
13

link
12

link
34

link
24

NSU

Creating an NSU

<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

s
e
l
e
c
t

R
o
o
m
R
o
o
m
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

r
e
c
o
m
m
e
n
d

c
o
m
p
o
n
e
n
t
(
s
)
P
r
o
d
u
c
t
C
o
m
p
o
n
e
n
t
B
i
l
l
O
f
M
a
t
e
r
i
a
l
s
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

v
i
e
w

B
i
l
l
O
f
M
a
t
e
r
i
a
l
s
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

s
h
o
w

d
e
s
c
r
i
p
t
i
o
n
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

r
e
t
u
r
n

t
o

R
o
o
m
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

r
e
q
u
e
s
t

a
l
t
e
r
n
a
t
i
v
e
p
h
o
t
o
g
r
a
p
h
s
c
h
e
m
a
t
i
c
v
i
d
e
o
M
a
r
k
e
t
i
n
g
D
e
s
c
r
i
p
t
i
o
n
t
e
c
h
D
e
s
c
r
i
p
t
i
o
n
C
o
m
p
D
e
s
c
r
i
p
t
i
o
n
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

p
u
r
c
h
a
s
e

P
r
o
d
u
c
t
C
o
m
p
o
n
e
n
t
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

s
h
o
w

P
r
o
d
u
c
t
C
o
m
p
o
n
e
n
t
<
<
n
a
v
i
g
a
t
i
o
n

l
i
n
k
>
>

p
u
r
c
h
a
s
e

P
r
o
d
u
c
t
C
o
m
p
o
n
e
n
t
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.

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.

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.
_

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.

Patterns Repositories

Hypermedia Design Patterns Repositor
y



http://www.designpattern.lu.unisi.ch/

InteractionPatterns by TomErickson


http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html

Web Design Patterns by Martijn vanWelie


http://www.welie.com/patterns/

Improving Web Information Systems with Navigational Patterns


http://www8.org/w8
-
papers/5b
-
hypertext
-
media/improving/improving.html

An HTML 2.0 Pattern Language


http://www.anamorph.com/docs/patterns/default.html

Common Ground
-

A Pattern Language for HCI Design


http://www.mit.edu/~jtidwell/interaction_patterns.html

Patterns for Personal Web Sites


http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html

Indexing Pattern Language


http://www.cs.brown.edu/~rms/InformationStructures/Indexing/Overview.html


OOHDM

Object
-
Oriented Hypermedia Design
Method

(OOHDM)

w
o
r
k

p
r
o
d
u
c
t
s
d
e
s
i
g
n

m
e
c
h
a
n
i
s
m
s
d
e
s
i
g
n

c
o
n
c
e
r
n
s
C
l
a
s
s
e
s
,

s
u
b
-
s
y
s
t
e
m
s
,

r
e
l
a
t
i
o
n
s
h
i
p
s
,

a
t
t
r
i
b
u
t
e
s
C
l
a
s
s
i
f
i
c
a
t
i
o
n
,

c
o
m
p
o
s
i
t
i
o
n
,

a
g
g
r
e
g
a
t
i
o
n
,

g
e
n
e
r
a
l
i
z
a
t
i
o
n

s
p
e
c
i
a
l
i
z
a
t
i
o
n
M
o
d
e
l
i
n
g

s
e
m
a
n
t
i
c
s

o
f

t
h
e

a
p
p
l
i
c
a
t
i
o
n

d
o
m
a
i
n
c
o
n
c
e
p
t
u
a
l

d
e
s
i
g
n
n
a
v
i
g
a
t
i
o
n
a
l

d
e
s
i
g
n
a
b
s
t
r
a
c
t

i
n
t
e
r
f
a
c
e

d
e
s
i
g
n
i
m
p
l
e
m
e
n
t
a
t
i
o
n
N
o
d
e
s
,

l
i
n
k
s
,

a
c
c
e
s
s

s
t
r
u
c
t
u
r
e
s
,

n
a
v
i
g
a
t
i
o
n
a
l

c
o
n
t
e
x
t
s
,

n
a
v
i
g
a
t
i
o
n
a
l

t
r
a
n
s
f
o
r
m
a
t
i
o
n
s
M
a
p
p
i
n
g

b
e
t
w
e
e
n

c
o
n
c
e
p
t
u
a
l

a
n
d

n
a
v
i
g
a
t
i
o
n

o
b
j
e
c
t
s
T
a
k
e
s

i
n
t
o

a
c
c
o
u
n
t

u
s
e
r

p
r
o
f
i
l
e

a
n
d

t
a
s
k
.

E
m
p
h
a
s
i
s

o
n

c
o
g
n
i
t
i
v
e

a
s
p
e
c
t
s
.
A
b
s
t
r
a
c
t

i
n
t
e
r
f
a
c
e

o
b
j
e
c
t
s
,

r
e
s
p
o
n
s
e
s

t
o

e
x
t
e
r
n
a
l

e
v
e
n
t
s
,
t
r
a
n
s
f
o
r
m
a
t
i
o
n
s
M
a
p
p
i
n
g

b
e
t
w
e
e
n

n
a
v
i
g
a
t
i
o
n

a
n
d

p
e
r
c
e
p
t
i
b
l
e

o
b
j
e
c
t
s
M
o
d
e
l
i
n
g

p
e
r
c
e
p
t
i
b
l
e

o
b
j
e
c
t
s
,

i
m
p
l
e
m
e
n
t
i
n
g

c
h
o
s
e
n

m
e
t
a
p
h
o
r
s
.

D
e
s
c
r
i
b
e

i
n
t
e
r
f
a
c
e

f
o
r

n
a
v
i
g
a
t
i
o
n
a
l

o
b
j
e
c
t
s
e
x
e
c
u
t
a
b
l
e

W
e
b
A
p
p
R
e
s
o
u
r
c
e

p
r
o
v
i
d
e
d

b
y

t
a
r
g
e
t

e
n
v
i
r
o
n
m
e
n
t
C
o
r
r
e
c
t
n
e
s
s
;

A
p
p
l
i
c
a
t
i
o
n
p
e
r
f
o
r
m
a
n
c
e
;

c
o
m
p
l
e
t
e
n
e
s
s
Conceptual Schema

B
i
l
l
O
f
M
a
t
e
r
i
a
l
s
i
d
e
n
t
i
f
i
e
r

B
o
M
L
i
s
t

n
u
m
b
e
r
I
t
e
m
s

p
r
i
c
e
T
o
t
a
l

a
d
d
E
n
t
r
y
(
)

d
e
l
e
t
e
E
n
t
r
y
(
)

e
d
i
t
E
n
t
r
y
(
)

n
a
m
e
(
)

c
o
m
p
u
t
e
P
r
i
c
e
(
)

B
o
M
I
t
e
m
q
u
a
n
t
i
t
y

p
a
r
t
N
u
m
b
e
r

p
a
r
t
N
a
m
e

p
a
r
t
T
y
p
e

p
r
i
c
e
a
d
d
t
o
L
i
s
t
(
)

d
e
l
e
t
e
f
r
o
m
L
i
s
t
(
)

g
e
t
N
e
x
t
L
i
s
t
E
n
t
r
y
(
)

P
r
o
d
u
c
t
C
o
m
p
o
n
e
n
t
p
a
r
t
N
u
m
b
e
r

p
a
r
t
N
a
m
e

p
a
r
t
T
y
p
e

d
e
s
c
r
i
p
t
i
o
n

p
r
i
c
e
c
r
e
a
t
e
N
e
w
I
t
e
m
(
)

g
e
t
D
e
s
c
r
i
p
t
i
o
n
(
)

g
e
t
T
e
c
h
S
p
e
c

S
e
n
s
o
r
C
a
m
e
r
a
C
o
n
t
r
o
l
P
a
n
e
l
S
o
f
t
F
e
a
t
u
r
e
c
u
s
t
o
m
e
r

s
e
l
e
c
t
s

c
o
m
p
o
n
e
n
t
O
r
d
e
r
o
r
d
e
r
N
u
m
b
e
r

c
u
s
t
o
m
e
r
I
n
f
o

b
i
l
l
O
f
M
a
t
e
r
i
a
l
s

s
h
i
p
p
i
n
g
I
n
f
o

b
i
l
l
i
n
g
I
n
f
o

R
o
o
m
r
o
o
m
N
a
m
e

d
i
m
e
n
s
i
o
n
s

e
x
t
e
r
i
o
r
W
i
n
d
o
w
s

e
x
t
e
r
i
o
r
D
o
o
r
s

c
o
m
p
o
n
e
n
t

r
e
c
o
m
m
e
n
d
a
t
i
o
n

r
e
q
u
e
s
t
e
d
c
u
s
t
o
m
e
r

r
e
q
u
e
s
t
s

p
u
r
c
h
a
s
e
c
u
s
t
o
m
e
r
c
o
n
t
i
n
u
e
s
c
o
m
p
o
n
e
n
t

s
e
l
e
c
t
i
o
n
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?

The End