© Prof. Dr. Olga De Troyer, 2006 | pag. 1 Web Site Design Method WSDM Design Methods for Internet Based Information Systems Prof. Dr. O. De Troyer

© Prof. Dr. Olga De Troyer, 2006 | pag. 1

Web Site Design MethodWSDM

Design Methods for Internet Based Information Systems

Prof. Dr. O. De Troyer

© Prof Dr O. De Troyer WSDM | pag. 2

Web Engineering

• Existing Web Site Design Methods– HDM, RMM

• older methods,

– W3DT• very implementation oriented

– WBIS, RMM, OOHDM, WebML, OO-H• data oriented


The approach of WSDM

Audience-driven rather than • Data-driven• Organization-driven


Audience-driven (User-centered)

• Starting point – Needs of the different audiences

• Present the information needed by the audiences

• Structure the information in terms of the visitor’s perception

• Vocabulary is that of the target audience

Easier to design websites that are more effective and have a higher usability.

Why an audience-driven approach ?English

LocalLanguage

English

University Web Site

Information on research projects, publications, researchers.

Researcher

LocalLanguage;

Careful with university jargon

Candidate Student

General information on different programs.

Detail information on courses.

Enrolled Student

Different types of users

Different types of users have different needs


Audience-driven

• Starting point: requirements of the different users/audiences

• Later on: map requirements on available data


The approach of WSDM (2)

• Explicit Conceptual Design phase

– Different presentations/devices possible

– Design not biased by current implementation limitations (e.g. HTML)

– Conceptual Design (schema) may be available to

• the visitors/users of the web site• search engines


WSDM: Overview

Conceptual Design

Mission statementSpecification

Audience Modeling

AudienceClassification

Audience ClassCharacterization

NavigationalDesign

Task & Information Modeling

Implementation design

Site Structure Design

PresentationDesign

Data Design

Implementation

Goal

Mission Statement

Specification• purpose of web site• subject (topics) of web site

• target audience(s) of web site


WSDM: Overview

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation

Audience Modeling• Identifies, classifies and

characterize different type of users (audience classes)

• Output – Audience classes +

requirements (informally specified)


WSDM: Overview

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation

Conceptual Design• Models

– the information & functional requirements of the different audience classes

– the conceptual & navigational structure of the web site


WSDM: Overview

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation

Implementation Design

• Translate conceptual structure into pages

• Add Presentation Design

• Defines data source structure + mapping


WSDM: Overview

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation

Implementation• can be generated

(semi-) automatically from the specifications

• e.g. HTML, XML, WML, …


Mission Statement Specification

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


Mission Statement Specification

Mission StatementSpecification

Mission StatementSpecification

Mission statement:• purpose• target audience• subject


Mission Statement - Example (1)

• Purpose– Attract more students– Enhance the internal communication between students and

lecturers

• Target Audience– Potential students, students, lecturers

• Subjects– programs, courses

University example“Provide general information about the available programs to attract more students and enhance the internal communication between students and lecturers by providing detail information about programs and courses”


Mission Statement - Example (2)

• Purpose– To support the paper selection process

• Target Audience– Authors, PC-program Committee

• Subjects– papers for the conference

Conference Review System example

“To support the overall selection process (submission by authors, evaluation and selection by the Program Committee) of papers for a conference”


WSDM: Audience Modeling


Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


Audience Modeling

• Audience Class– Users similar in terms of their information- and

functional requirements.– Audience classes need not be disjoint

Audience ModelingAudience Modeling

Audience Classification


Audience Characterization


Audience Class Hierarchy


Audience Classification - Example

University exampleTarget Audience: Potential students, students,

lecturers

Audience classes• Potential Students • Enrolled Students • Lecturers

How?


Identifying Audience Classes

• Step 1:

Consider the activities of the organization related to the purpose of web site


Identifying Audience Classes step 1 -

Example

Activities– Provide Education – Perform Research– Advise Companies

Related

Not Related

Not Related

Example Purpose

– Attract more students– Enhance the internal communication between students and lecturers


Identifying Audience Classes (2)

• Step 2 :

For each activity

2.1 Identify people involved

2.2 Restrict them to target audience

2.3 Divide them into audience classes based on different information or functional requirements


Identifying Audience Classes step 2 - Example

• Requirements– Enrolled students

• detail information about programs and courses– Lecturers

• need to distribute course information• information about who is following a course

– Potential students• general information about courses and programs

Lecturers

Lecturers

Potential Students

Potential Students

Enrolled StudentsEnrolled Students

Staff MembersStaff Members

Provide Education

not part of the target audience



• Step 2 : For each activity



2.3 Divide in audience classes based on different information or functional requirements

2.4 Decompose activity if possible


Provide Regular Education

Provide DistanceEducation

Lecturers

Lecturers

Potential Distance Students

Potential Distance Students

Potential Regular Students

Potential Regular Students

Enrolled Distance Students

Enrolled Distance Students

Enrolled Regular Students

Enrolled Regular Students

Identifying Audience Classes step 2.4 - Example

• Distance Students have additional requirements– Explanation how distance education is organized– Multi media material for the courses– …


superclass

subclass

Members of superclass

Members of subclass

Audience Subclasses

• Audience subclass – The members of a subclass have all the

requirements of the members of the super class + additional requirements• The set of members of an audience subclass is a subset of the set of members of the audience superclass


PotentialStudent

Enrolled Student

EnrolledDistanceStudent

PotentialDistanceStudent

Identifying Audience Classes step 2.4 - Example

• Enrolled Distance Students are Enrolled Students but they have additional requirements

• Potential Distance Students are Potential Students but they have additional requirements – Enrolled distance student is sub-audience class of Enrolled

student – Potential distance student is sub-audience class of Potential

student


The Audience Class Hierarchy

• Top of the audience class hierarchy is always the class Visitor

• Visitor groups together all requirements common to all audience classes

• This class also represents a passer-by

University example

VisitorInformation requirementsGeneral information about the university


Visitor

LecturerPotentialStudent

Enrolled Student



The Audience Class hierarchy - university example



• Step 2 : For each activity2.1 Identify people involved2.2 Restrict them to target audience2.3 Divide in audience classes based on

different information or functional requirements

2.4 Decompose activity if possible2.5 Repeat until no new audience classes or no

further decomposition


Audience Classification - CRS Example

Conference Review System example• Purpose

– To support the paper selection process

• Target Audience– Authors, PC-program Committee


Identifying Audience Classes step 1 - CRS (1)

• Step 1: Consider the activities of the organization related to the purpose of web site

Activities Conference Review SystemPaper SubmissionAssignment of PapersEntering ReviewPaper SelectionNotification of Author

Activities Conference Review SystemPaper SubmissionAssignment of PapersEntering ReviewPaper SelectionNotification of Author



• Step 2 : For each activity2.1 Identify people involved

AuthorsAuthors

Paper Submission

PC-ChairPC-Chair

PC-MembersPC-Members

Assignment of Papers

Entering Review

ReviewersReviewers

Paper Selection

Notification of Author



• Step 2 :

For each activity



2.3 Divide them into audience classes based on different information or functional requirements



Requirements

• Authors

Information & Functional requirements: Pre-register Co-author Submit paper info and upload file Change submission (until submission deadline) Information about the author’s submissions



• PC ChairInformation & Functional requirements Create conference Update Conference information Pre-register PC Members Pre-register reviewers Indicate conflict of interest for papers Open list of submitted papers for PC Members when submission deadline

has been reached Assign papers to PC Members (based on preferred papers and preferred

tracks and subjects) Inform PC-Members about papers assigned to them Change track or topic of a submitted paper Open virtual PC meeting Mark paper as accepted, not accepted or undecided until all papers are either

accepted or not accepted



• PC Chair (2) Close virtual PC meeting All available information on the conference All available information on papers All available information on authors All available information on PC-members All available information on reviews During PC meeting: statistics about the reviews

Navigation requirements Easy navigation from an author to his papers; from a paper to its reviews;

from a review to the PC-member and reviewer; from a paper to its authors; from a review to the paper



• PC MembersInformation & Functional requirements Indicate preferences for tracks and subjects Pre-register reviewer Indicate interest in and conflict with proposed papers when list of papers is available Re-assign paper to reviewer Download papers assigned to him Submit review Change review if not final and until review deadline Advice PC chair during PC meeting List of papers Own reviews State of reviews of papers PC Member is reviewing himself, after he submitted his

own During PC meeting: all reviews and statistics Navigation requirements Easy navigation from an author to his papers; from a paper to its reviews; from a review to the

PC-member and reviewer; from a paper to its authors; from a review to the paper



• ReviewersInformation & Functional requirements Download papers assigned to him

Submit review

Change review if not final and until review deadline Own reviews


Identifying Audience Subclasses step 2 - CRS

Requirements of Reviewers is subset of requirements of PC-Members

PC-Member audience subclass of Reviewer

Reviewer

PC Member



• Step 2 : For each activity2.1 Identify people involved2.2 Restrict them to target audience2.3 Divide in audience classes based on different

information or functional requirements2.4 Decompose activity if possible2.5 Repeat until no new audience classes or no further

decomposition


The Audience Hierarchy - CRS Example

CRS example

VisitorInformation requirementsGeneral information about the conference


Visitor

Author PC Chair Reviewer

PC Member

The Audience Class hierarchy - CRS example (2)


Audience Modeling - Output



Audience Class Description• Requirements: Information Functional Usability



Audience Modeling - University Example

Audience Class Enrolled Students:• Information requirements

– Detailed information on programs, courses and of the lecturers

• Functional requirements– To be able to enroll for a course

• Usability requirements– Flexible ways to search for courses, lecturers

and programs




Audience Class Description• Requirements: Information Functional Usability

Audience Modeling - Output


• Characteristics



Audience Characterization - University Example

Audience Class Visitors:• Characteristics

– All ages, may be unfamiliar with the university and its jargon.

– Experience with WWW may vary

– Language: the local language as well as English

Need for Audience Class Variants:English Speaking and Dutch Speaking


Audience Class Variants

• Differences in usability requirements or in characteristics within one audience class

English Speaking

Dutch Speaking

Visitor


Audience Class Hierarchy - University Example

LecturerPotentialStudent

Enrolled Student



English Speaking

Dutch Speaking

Visitor


WSDM: Audience Modeling


Audience Class Description• Requirements: Information Functional Usability• Characteristics


Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


WSDM: Conceptual Design

Conceptual design• Task Modeling &

Information Modeling

The conceptual “What”

• Navigational Design

The conceptual “How”

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


Conceptual Design

• Information Modeling– For data intensive web sites– What kind of information is needed

• Functional Modeling– For application type of web sites– What functionality is needed

• Navigation Design– How to structure the information and the functionality

(conceptually)



Audience Class Enrolled Students:

• Information requirements

– Detailed information on programs, courses and of the lecturers

ER, UML ORM, OWL, RDF... Course

CourseName

Lecturer

CreditPoints

CourseCode

ExamType

Description

ProgramYear

Literature

OfOf

Of

Of

InOf

With

With

With

HavingFor

With

Required_for

with_required

with_prerequisiteprerequisite_for

teached_byTeaching

Object Chunk OC1


• Object Role Modeling (ORM)– Object Types (OT)

Object Role Model (ORM) - Notation

PersonPerson PersonPersonNameName

– Relationships composed of (two) roles

identifier

a mandatory role

withwith ofof

rolesrolesLexical Object TypeLexical Object Type

Non Lexical Object TypeNon Lexical Object Type


PersonPerson*p*p

PersonPersonNameName‘‘John’John’

withwith ofof

PersonPersonNameName‘‘John’John’

Person Person *p*p

Paper Paper {*p}{*p}

Relations between instances

PersonPersonPersonPersonNameNamewith with

*p*pofof

‘‘john’john’

ORM - Extra Notations (1)

• Referents for instances


Paper Paper !!{*p}{*p}

Paper Paper !!!!{*p}{*p}

More Instances: !!

PersonPersonPersonPersonNameName

!! ofof

PersonPersonPersonPersonNameName

!!!! ofof


• Selecting instances– One Instance: !


-+

+/-


• ? and ?? for interactive input• = for assigning values, e.g. *t = ?• ® for updating values, e.g. *t ® ?• ® Ø for removing information, e.g. *{p} ® Ø • == for testing equality of values• is to test membership of an Object Type• exist to test on the existence of an instance• NEW to generate a new OT instance• REMOVE to remove an OT instance• to add an instance to a relation• to remove an instance from a relation• to modify an relation instance• If, for each, and, or, not, union, minus, … as usual



• For each information or functional requirement do– Step1:

• Define a task for this requirement • Elaborate the task into more detail (if necessary) • Decompose the task into elementary tasks (using

ConcurTaskTree).

– Step 2: • For each elementary task make an Object Chunk that

models the information and/or functionality required by this task.


ConcurTaskTrees (CTT)

• Developed by Paterno (1997) to describe user activities in the context of HCI

• Resembles HTA but – Distinguishes 4 different categories of task

• user tasks, application tasks, interaction tasks, and abstract tasks

– Allows expressing temporal relationships among tasks

• E.g.sequential tasks; parallel tasks; …

• Easy to grasp graphical notation


CTT in WSDM

• User task are not considered

• The category of the task indicates who will be in charge of performing the task• Slightly different meaning for some of the operators to express temporal relations • An operator to express a transaction has been added• Less detail is given in the CTT


CTT: Temporal Relations

• Order independent T1 |=| T2• Choice T1 [] T2• Concurrent T1 ||| T2• Concurrent with information exchange T1 |[]| T2 • Deactivation T1 [> T2 • Enabling T1 >> T2 • Enabling with information exchange T1 []>> T2 • Suspend-resume T1 |> T2 • Iteration T* • Finite iteration T(n)• Optional [T]• Recursion• Transaction -> T <-


CRS Example 1 (1)

Task: Find information about author’s submissionsFor each paper submitted by the author either as main author or as co-author allow to give:

– Paper-id, title, abstract, main author (name) and co-authors (names), track and if available the subjects, and file (url) containing the paper.

Requirement: “Information

about the author’s submissions”

Define &Elaborate


CRS Example 1 (2)

For each paper submitted by the author either as main author or as co-author allow to give:– Paper-id, title, abstract, main author (name) and co-authors (names),

track and if available the subjects, and file (url) containing the paper.

1. Find Author’s Submissions: Give paper-id and title of all papers submitted by the author as main author or as co-author and allow the user to select a paper.2. Give Submission Info: For a selected paper give: Paper-id, title, abstract, main author (name) and co-authors (names), track and if available the subjects, and file (url) containing the paper.

Decompose


CRS Example 1 (3) - Task decomposition

Find information about author’s

submissions

Find author’ssubmissions

Give submission’sinformation

[]>>


CRS Example 1 (4)

in *a Authorout *p Paper = !

AuthorSubmissions

Paper /main

/co-author

Author

has

/is of

has

/is of

PaperIdPaper Title

*a

Object chunk for task “Find Author’s Submissions”

!

!


CRS Example 1 (5)

Date(dd/mm/yyyy)

Track(Name)

Subject(Name)

/for

of

Paper/main

/co-author

Author

has

/is of

has

/is of

has

/is of

/on

PaperIdPaper TitleAbstract

File(URL)

/of submission

/of last modification

PersonName

*p

SubmissionInfo in *p Paper

Object Chunk for task “Give Submission Info”


CRS Example 2 (1)

Task: Submit New PaperSubtasks– Register New Paper– Add co-author– Submit Paper info and upload file

Requirement: “Submit paper info and upload file”

Define &Elaborate


CRS Example (2)

1. Register New Paper The user enters the title of the paper. The system will generate and return a new paper id for this paper and assign the author as main author for this paper.

2 Add Co-authorThe user enters the name of a co-author of a given paper. The system will pre-register this co-author by generating and returning a new username and password for this author. The author will be added as co-author for the given paper.

3. Submit Paper Info and FileThe user enters the abstract, track, subjects and indicate the file that need to be uploaded. The system will automatically record the date of the submission and the date of the last modification.


CRS Example 1 (3) - Task decomposition

Submit new paper

Register new paper

Add co-author*

[]>>

|=|

[ Submit info for paper ]

Submit info & upload file


CRS Example 2 (4)

Paper

has

/is of

has

/is of

PaperIdPaper Title*t = ? *id = NEXT

*p = NEW/main Author

*a

RegisterNewPaper in *a Authorout *p Paper

+++

Chunk for task “Register New Paper”


CRS Example 2 (5)

Chunk for task “Add Co-Author”

+

+

+

+

+

+

+

+

+


CRS Example 2 (6)

Chunk for task “Submit Paper Info and File”

+

+

+

+

+

+


Example: Task Model for “Buy Items”


Linking the Information Chunks

Information Chunk C1

in *a Authorout !({*p} union {*p'}) Paper

AuthorSubmissions

Paper/main

/co-author

Author

has

/is of

has

/is of

PaperIdPaper Title

{*p}

{*p'}

*a

Business Information Model

Track(Name)

Subject(Name)

ConferenceDate

(dd/mm/yyyy)

/submission deadline of

/review deadline of

/notification deadline of

has

/is of

has

/is of

has /is of

Conference name

/for

of

Paper/main

/co-author

Author

has

/is of

has

/is of

has

/is of

/on


File(URL)

from

to

/of submission

Place(Name)

has /is of



Business Object Model

• A conceptual description of the information (business objects) available in the organization.

• May already exist.

– Then object chunks must be expressed in terms of the Business Object Model (views).

• Otherwise

– Compose Object Chunks into Business Object Model

• Can be the basis for an underlying database.


Business Information Model - CRS Example (1)

Track(Name)

Subject(Name)

ConferenceDate

(dd/mm/yyyy)

/submission deadline of

/review deadline of

/notification deadline of

has

/is of

has

/is of

has /is of

Conference name

/for

of

Paper/main

/co-author

Author

has

/is of

has

/is of

has

/is of

/on


File(URL)

from

to

/of submission

Place(Name)

has /is of




Person

Person Name

PersonId

Contact Info

Not-registrated Personhas /is of

has /is of

has /is of

Affiliation has /is ofwith

Person Role Login

has /is of

has /is of

has /is of

User Name

Password

PCChair

Author

Reviewer PCMember

for /responsible for



"EvaluationItemReview"

"PaperReviewer"

"PCMemberPaper"

"PCMemberPaper"

PCMember Paper

Accepted Paper

Rejected Paper

has conflict with

has interest in

has /is of

Interest rate[0 .. 2]

has preference

for

has preference

for

Track(Name)

Subject(Name)

/assigned to

Review

Reviewer

re-assigned to

/for/for

Evaluation Item(Name)

Comments(text)

/to author

/to PC

Rate[1..5]

/of /final recommendation

is of /has

Status[FINAL, NOT FINAL]


Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

DataDesign

Implementation

Task Modeling




Object Chunk C1

Date(dd/mm/yyyy)

Track(Name)

Subject(Name)

/for

of

Paper

has

/is of

has

/is of

has

/is of

/on

Paper TitleAbstract

File(URL)


*p

*f -> ?

*d -> TODAY

{*s} -> ??*tr -> ?

*a -> ? *t -> ?

UpdateSubmission in *p Paper


WSDM: Navigational Design

• Navigational Design Model the conceptual structure of the web site

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


Conceptual Structural Model

• Composed of: – Components

Represent units of information or functionality

– Links• Allows to connect components• Can be conditional

C a conditional linkLink exist is C is true

Component

One -to-one uni-directional link

One-to-one bi-directional link

One-to-many uni-directional link

One-to-many bi-directional link

Many-to-one uni-directional link

Many-to-one bi-directional link

Many-to-many uni-directional link

Many-to-many bi-directional link


Conceptual Structural Model

• Method– Construct a Navigation Track for each

audience class (see later)– Use structural links to define a structure

between the tracks• Tracks are linked in accordance with the Audience

Class Hierarchy

Shorthand for track


Visitor Track PC-Chair Track

Author Track

ReviewerTrack

PC-MemberTrack

Visitor

Author PC Chair Reviewer

PC Member

Composing the Conceptual Structural Model

• For each Audience Class there is a Navigation Track• The tracks are linked as in the Audience Class Hierarchy

using structural links


Conceptual Structural Model (3)

• Conditional links may be needed Visitor Track

Un-RegisteredUser Track

Registered User Track

PC-chair Track

Author Track

Fully RegisteredUser Track

Pre-RegisteredUser Track

ReviewerTrack

PC-MemberTrack

C1: visitor is not fullRegisteredC2: visitor is fullRegisteredC3: visitor is PC-ChairC4: visitor is Reviewer or p in PC-MemberC5: visitor is PC-MemberC6: visitor is PC-Author

C1

C2 C3

C4

C5

C6


Navigation Track

• A Track is a (tiny) conceptual structural model– Therefore it is composed of components and links– Forms a connected directed graph of components

• Needs to fulfill all information, functional and navigational requirements of its audience class


Navigation Track

Construction of the Navigation Track of an Audience Class

• Method– For each task in the audience class make a

Task Navigation Model• This describes how the user will be able to

perform the task (defined during Task Modeling) in the web site

• Based on the task model (CTT)


Task Navigation Model

• Task Navigation Models are defined in terms of – Components

• A component represents a step in the task• Refers to units of information or functionality (the object

chunks)

– Process Logic Links• Indicate the sequence between the steps• May be conditional • One- or bi-directional links; • One-to-one, one-to-many, many-to-one or many-to-many

links

• Suspend-resume link• Transaction



• Suspend-resume link

• Transaction

Fill ShoppingCart

Inspect Shopping Cart

Shipping Details

PaymentMethod



• Method – Define a component for each elementary task

in the task model of the task

– Use process logic links to express the workflow or process logic expressed in the task model by means of the temporal CTT relations


Task Model - Example 1

Give Submission’s

Info

Find author’ssubmission

Find information about submissions


Find information about author’s

submissions

Find author’ssubmissions

Give submission’sinformation

[]>>


Task Model - Example 2


Submit paper info and file

Submit new paper

Register new paper

Add co-author*

[]>>

|=|

[ Submit info for paper ]

Submit Paper Info & File

Add Co-

Author

Register new paper

Submit New Paper


A Navigation Track - CRS Example

Author Track

Update Paper Info and File

SubmitNew Paper

Find Submission

Info


component

Specifying the Components

• A component corresponds with an elementary task• For each elementary task an object chunk exists that expresses its functional and/or informational requirements• Therefore we connect the component with its corresponding object chunk

chunk

Elementary Task

Of

Of

Object Chunk OCx

Corresponds with

Requirements expressed by

Corresponds with


Task Model - fully specified

SubmissionInfoin *p

AuthorSubmissionsin *a, out *p

SubmissionInfo

Author’sSubmission

Find information about submissions

*p*a *p

parametersparameters



*aC

*p

*p

RegisterNewPaperin *a , out *p

CheckConflictin *p AddCo-author

in *p

MakeSubmissionin *p

Register new paper

Submit new paper

*p

C: TODAY not after Date submission deadline_of Conference

Submit Paper Info & File

Add Co-

Author



Update Paper Info and File

AddCo-author

DeleteCo-

authors

C

*p

AddCo-authorin *p

UpdateSubmissionin *p

DeleteCo-authorsin *p

C: TODAY not after Date submission deadline_of Conference

Update Paper Submission


Components

Information ComponentContact information

Contact Info OC

Information can be • described by an Object Chunk

IntroductionTXT

Introduction

• Text-, Image-, Video-Chunk, …


Components (3)

• External Component

E-valvas

Students Track


Summary Method - so far

Method to build Conceptual Structural Model1. Make task navigation model for each task using

components and process logic links

2. Make audience track for each audience class by compose task navigation models of an audience class using structural links

3. Compose audience tracks into conceptual structural model using structural links following the audience class hierarchy

4. Make audience chunk model

5. Add navigational aid links if necessary


Audience Chunk Model

• Connect the Object Chunks by means of Semantic Relationship links– Links between object chunks– Based on a semantic relationship– Used to provide navigation from one chunk to another

– Allows to model task-independent navigation• E.g. “PC-chair must always be able to easy navigate from an author

to his papers; from a paper to its reviews; from a review to the PC-member and reviewer; from a paper to its authors; from a review to the paper”


AuthorInfoPaperInfo

ReviewInfo

PC-MemberInfo

PC-Members

Semantic Relationship links


Semantic Relationship Link - detail

Person

Person Name

PersonId

Contact Info

has/is of

has/is of

has/is ofAffiliation has/is of with

Person Role Login*lhas/is ofhas/is of

has/is of

User Name

Password*pw -> ?Author*a

main/{*p}

coAuthor/{*p'}

Paper PaperIdhas/is of

Not-Registrated Person

AuthorInfo AuthorInfoin *a Authorout !({*p} union {*p'}) Paper

Track(Name) Subject(Name) Date(dd/mm/yyyy)

/forof

Paper*pp /main

/co-author

Author

has/is of

has/is of

has/is of

/on


File(URL)

/of submission


PersonName

/ofReview

/responsible forPCMember

PaperInfo in *pp Paperout !({*a'} union {*a}) Author

{*a}

{*a'}


AuthorInfo PaperInfo

ReviewInfo

PC-MemberInfo

ReviewerInfo

ConferenceDetail

UpdateConference

CreateConference

Assignments

Pre-register

Reviewers

PC-Members

Papers

PapersA/R

ChangePaperTrack

AssignPapers

IndicateConflicts

Statistics

MarkPapers

Reviews

Audience Chunk Model - overview


Navigational Aid Links

• Used to enhance the navigation in the website– Home– Landmarks– Link to site maps

• Are added on top of the other links in the conceptual structural model


Navigational Aid Links - example

PC-Chairtrack Conference

PC-Members& Reviewers

Papers

Authors

Reviews

PC-Meeting

H L

L

L

L

L

L


Summary Method

Method to build Conceptual Structural Model1. Make task navigation model for each task using

components and process logic links

2. Make audience track for each audience class by compose task navigation models of an audience class using structural links

3. Compose audience tracks into conceptual structural model using structural links following the audience class hierarchy

4. Make audience chunk model

5. Add navigational aid links if necessary


Overview so far

• Formulate the user requirements• Define a task for each user requirement• Make a Task Model for each task using CTT• Make an Object Chunk for each elementary task• Generate Task Navigational Models for the Task

Models• Define semantic relationship links between object

chunks• Structure the Task Navigational Models into

Audience Tracks• Add navigational aid links


WSDM: Conceptual Design




Object Chunk C1

Date(dd/mm/yyyy)

Track(Name)

Subject(Name)

/for

of

Paper

has

/is of

has

/is of

has

/is of

/on

Paper TitleAbstract

File(URL)


*p

*f -> ?

*d -> TODAY

{*s} -> ??*tr -> ?

*a -> ? *t -> ?


Visitor PC-Chair

Author

Reviewe

PC-Member

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


WSDM: Implementation Design

• Site Structure DesignGroups information in pages

(following the Navigation

Design)

• Presentation Design Specifies the look and feel

• Data Source Mapping Design of database, an XML DTD, RDF definitions, ...

Conceptual Design


Audience Modeling



NavigationalDesign




PresentationDesign

Data Design

Implementation


Conceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation

Style & TemplateDesign

Page Design

WSDM: Site Structure Design

• Starts from Navigation Model

• Need not to be one-to-one with Navigation Model– Package information in right-

sized chunks

• Default: Component + links on one page


Page structure Design - CRS Example

Visitor Track

Un-RegisteredUser Track

Registered User Track

Pre-Registered User Track

RegisterAs Author


WSDM: Site Structure Design




Object Chunk C1

Date(dd/mm/yyyy)

Track(Name)

Subject(Name)

/for

of

Paper

has

/is of

has

/is of

has

/is of

/on

Paper TitleAbstract

File(URL)


*p

*f -> ?

*d -> TODAY

{*s} -> ??*tr -> ?

*a -> ? *t -> ?


Visitor PC-Chair

Author

Reviewe

PC-Member

Conceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation


Page Design


Presentation Design

• ‘Look and feel’ – Using Templates

• One for each type of page

– CSS

• Page layout– Based on the templates

Conceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation


Page Design


Style & Template Design

• For designing page templates

• Style of page elementsConceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation


Page Design


Presentation Concepts

Basic presentation concepts• Grids composed of rows with cells• Cell may contain

– A multimedia element– Multimedia element defined in an object chunk– A (nested) grid

Absolute and relative height/width can be specified for– Grids– Row– Cells



• Grid may iterates over elements– E.g. Instances of ‘Person’

• Multimedia element– String/text/integer– Email– Resource– Image– Video– Audio



• Form element– Select controls

• Radiobutton• List box• Check box• Drop down box

– Input controls• Text box• Hidden text box

– Action controls• Push button



Non-basic presentation concepts• List

– Set of items separated by separator– enumerated or non-enumerated

• Table• Menu• Table of Content

– Offers in page navigation

• Bread Crumb Trail• Section

– With provision for section title, footnotes– summary



Non-basic presentation concepts (cont.)• Banner• Copyright• Graphic

– Advertisement– Figure with Caption– Icon– Logo

• Marquee– Image or string that scrolls horizontally over the screen



Behavior for the presentation concepts• Event

– E.g. On Click, On Load• Action

– E.g. Popup, scrollWhen the event occurs the action will be performed

ExamplePopup menu:

presentation concept: MenuEvent: on clickAction: popup


Templates

• To define templates, e.g.,– Homepage template– Title page template

• Template concepts:– Header– Footer– Sidebar

• Left sidebar• Right sidebar

– Content pane– Editable region (to be filled in during Page design)


Styles

• Done using e.g., CSS


Page Design

• To indicate how the information and functionality assigned to a page should be presented

• Based on a page template

• Editable regions of the template must be filled in here

Conceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation


Page Design


Page Design

• Presentation concepts can be linked with – Object chunk concepts– Navigational model concepts (e.g. Links)


Conceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation


Page Design

Database Design

• For structured data• Enhance the

maintainability• Need not be a full-fledged

database (XML DTD, RDF definitions, …)

• Business Object Model acts as the Conceptual Schema


Last Step: Implementation

Conceptual Design


Audience Modeling



NavigationalDesign

Task Modeling



Presentation Design

Data Design

Implementation


Page Design

• Choose implementation environment

•HTML, XML, ...• (relational) DBMS

• To be automated using available tools

Documents

© Prof. Dr. Olga De Troyer, 2006 | pag. 1 Web Site Design Method WSDM Design Methods for Internet Based Information Systems Prof. Dr. O. De Troyer