Web ProgrammingWeb Programming

MethodsMethods

What we are going to do…What we are going to do…

►Why methods?Why methods?►Traditional method examplesTraditional method examples►WSDMWSDM►ConclusionConclusion

MethodsMethods

►Why use one?Why use one?

MethodsMethods

►What it coversWhat it covers Possibly all stagesPossibly all stages

►FeasibilityFeasibility►AnalysisAnalysis►DesignDesign►ImplementationImplementation►TestingTesting

Maybe just some of themMaybe just some of them►Just designJust design

MethodsMethods

►The one you do….The one you do….►A method must cover front end design, flow A method must cover front end design, flow

and database design (as a minimum)and database design (as a minimum)

Where are we with web Where are we with web application design methods?application design methods?

It’s a relatively new area, most significant work only It’s a relatively new area, most significant work only emerged from 1993 onwardsemerged from 1993 onwards

Very much in the infancy stagesVery much in the infancy stages No one solid method has emergedNo one solid method has emerged Few approaches have been rigorously testedFew approaches have been rigorously tested Is this a problem?Is this a problem? We have most methods and technique components We have most methods and technique components

we need in existence for a web method, in almost all we need in existence for a web method, in almost all cases though they have just not been integrated cases though they have just not been integrated

So, currently we need to work around the issue by So, currently we need to work around the issue by forming ‘hybrid’ methods that share and borrow forming ‘hybrid’ methods that share and borrow techniquestechniques

Non Web MethodsNon Web Methods

►SSADM?SSADM?►SSM?SSM?►UML?UML?►(Look in Avison / Fitzgerald)(Look in Avison / Fitzgerald)►Suitability for the web?Suitability for the web?

What is SSADM?What is SSADM?

► SSADM (Structured Systems Analysis and Design SSADM (Structured Systems Analysis and Design Methodology) Methodology)

► used in the analysis and design stages of systems used in the analysis and design stages of systems development. SSADM does not cover Strategic development. SSADM does not cover Strategic Information Planning (SITP) issues or the construction, Information Planning (SITP) issues or the construction, testing and implementation of software.testing and implementation of software.

► "SSADM has been used by the government in computing "SSADM has been used by the government in computing since its launch in 1981. It was commissioned by the since its launch in 1981. It was commissioned by the CCTA (Central Computing and Telecommunications CCTA (Central Computing and Telecommunications Agency) Agency)

► SSADM is an open standard, i.e. it is freely available for SSADM is an open standard, i.e. it is freely available for use in industry and many companies offer support, use in industry and many companies offer support, training and Case tools for it.training and Case tools for it.

Why is SSADM Used?Why is SSADM Used?

►Within government departments SSADM Within government departments SSADM has to be used? External contractors has to be used? External contractors producing software for the government also producing software for the government also have to use SSADM?have to use SSADM?

►SSADM is used by other companies SSADM is used by other companies because they expect the use of a disciplined because they expect the use of a disciplined ‘engineering approach will eventually ‘engineering approach will eventually improve the quality of the systems they improve the quality of the systems they produce. produce.

How is SSADM Structured?How is SSADM Structured?► It has seven stages numbered 0 to 6It has seven stages numbered 0 to 6

Feasibility Feasibility ►It is technically possible and the benefits of the It is technically possible and the benefits of the

information system will outweigh the costinformation system will outweigh the cost Requirements analysisRequirements analysis

►Investigation of current environment Investigation of current environment Requirements SpecificationRequirements Specification

►Definition of requirementsDefinition of requirements Logical System SpecificationLogical System Specification

►Technical system options and logical designTechnical system options and logical design Physical designPhysical design

►Prepare for physical designPrepare for physical design►Create physical data designCreate physical data design►Create function component implementation mapCreate function component implementation map►And so on And so on

What is SSM?What is SSM?

►Soft system MethodologySoft system Methodology Developed as a response to hard systems and Developed as a response to hard systems and

it’s failure to address messy situations.it’s failure to address messy situations.

►Organise our thinking systemically but Organise our thinking systemically but recognising that the perceived is recognising that the perceived is problematicproblematic

Seven stagesSeven stages

1.1. The problem situation unstructured .The problem situation unstructured . The first two stages are concerned with finding out The first two stages are concerned with finding out

about the problem situation from as many people in about the problem situation from as many people in that situation as possiblethat situation as possible

2.2. Problem situation expressedProblem situation expressed Expressed in a formal way a method of doing this is to Expressed in a formal way a method of doing this is to

draw a rich picture of the situation. The rich picture is draw a rich picture of the situation. The rich picture is used as an aid in discussion between the problem used as an aid in discussion between the problem solver and the problem owner.solver and the problem owner.

3:Root definition of relevant 3:Root definition of relevant systemsystem

► several different relevant systems should be explored to several different relevant systems should be explored to see which is the most useful.see which is the most useful.

At this stage that debate is most important. The At this stage that debate is most important. The problem owner and problem solver decide which view problem owner and problem solver decide which view to focus on, that is how to describe their relevant to focus on, that is how to describe their relevant system.system.

► After constructing a rich picture a root definition is After constructing a rich picture a root definition is developed for the relevant system. The root definition is a developed for the relevant system. The root definition is a concise, tightly constructed description of a human concise, tightly constructed description of a human activity system which states what the system is activity system which states what the system is (Checkland,1981).(Checkland,1981).

► Using a CATWOE checklist technique the root definition Using a CATWOE checklist technique the root definition is created.is created.

CATWOECATWOE

►Clients -people affected by the systemClients -people affected by the system►Actors -people who are part of the systemActors -people who are part of the system►Transformation -the process done by Transformation -the process done by

systemsystem►Worldview -describes the systemWorldview -describes the system►Owners -people who affect/kill the systemOwners -people who affect/kill the system►Environment -influences the systemEnvironment -influences the system

4: Building Conceptual 4: Building Conceptual modelsmodels

►When satisfied that the root definition is well When satisfied that the root definition is well formed a conceptual model can be formed a conceptual model can be developeddeveloped

►A conceptual model is a diagram of the A conceptual model is a diagram of the activates showing what the system will do activates showing what the system will do as described by the root definitionas described by the root definition

5: Comparing conceptual 5: Comparing conceptual models with reality models with reality

►Comparison of the problem situation Comparison of the problem situation analysed in stage 2 through rich pictures analysed in stage 2 through rich pictures alongside the conceptual models created in alongside the conceptual models created in stage 4stage 4

►Debate about possible changes should lead Debate about possible changes should lead to set of recommendations regarding to set of recommendations regarding change in order to help the problem change in order to help the problem

6: 6: Assessing feasible and desirable changes Assessing feasible and desirable changes

►Concerns an analysis of proposed Concerns an analysis of proposed changes from stage 5 so to draw up changes from stage 5 so to draw up proposals for those changes proposals for those changes

7:Action to improve problem situation7:Action to improve problem situation

►Final stage about recommending Final stage about recommending action to help the problem situationaction to help the problem situation

►This type of methodology helps This type of methodology helps understand the problem situation understand the problem situation rather than a scheme for solving a rather than a scheme for solving a particular problem. particular problem.

Methodology Stage Methodology Stage ComparisonComparison

SSADMSSADM JSDJSD ETHICSETHICS SSMSSM

StrategyStrategy SomeSome YesYes

FeasibilityFeasibility YesYes SomeSome SomeSome

AnalysisAnalysis YesYes SomeSome YesYes YesYes

Logical Logical DesignDesign

YesYes YesYes YesYes

Physical Physical DesignDesign

YesYes YesYes SomeSome

ProgrammingProgramming YesYes

TestingTesting SomeSome

ImplementatiImplementationon

SomeSome LittleLittle

EvaluationEvaluation LittleLittle

MaintenanceMaintenanceAdapted from: Avison and FitzgeraldInformation Systems Development: Methodologies, Techniques and Tools, 3rd edn., 2003, Page 568.

Web Methodology DisciplinesWeb Methodology Disciplines

Web Engineering

Hypertext

InformationEngineering

RequirementsEngineering

System Analysisand Design

Multimedia

Human-ComputerInteraction

Testing

Project Management

SoftwareEngineering

Modellingand Simulation

from: Murugesan et al, Web Engineering: A New Discipline for Development of Web-Based Systems, in“Web Engineering: Managing Diversity and Complexity of Web Application Development, 2001. Page 8

WSDM (pronounced Wisdom)WSDM (pronounced Wisdom)

Web Site Design Method (WSDM)Web Site Design Method (WSDM)

► Has a focus on designing kiosk web-sitesHas a focus on designing kiosk web-sites► Systems with many user types / walk up and useSystems with many user types / walk up and use► Follows a ‘user centred’ focus rather than ‘data centred’ Follows a ‘user centred’ focus rather than ‘data centred’

(information) approach(information) approach► To do so need to identify different types of user e.g. To do so need to identify different types of user e.g.

student, prospective student, lecturer, etc. student, prospective student, lecturer, etc. ► Then produce a site that is sensitive to the given user typesThen produce a site that is sensitive to the given user types► May result in different pages or paths being provided in a May result in different pages or paths being provided in a

site for each type of usersite for each type of user► Starts to lay the foundations for the principles of localization Starts to lay the foundations for the principles of localization

and internationalizationand internationalization

© Prof. Dr. Olga De Troyer 2002

WSDM: Conceptual DesignMission statement:

• purpose• target audience• subject

Audience Class Description• Requirements: Information Functional Usability• Characteristics

Audience Class Hierarchy

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)

/of last modification

*p

*f -> ?

*d -> TODAY

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

*a -> ? *t -> ?

UpdateSubmission in *p Paper

VisitorPC-Chair

Author

Reviewe

PC-Member

Conceptual Design

Mission statementSpecification

Audience Modeling

AudienceClassification

Audience ClassCharacterization

NavigationalDesign

Task Modeling

Implementation design

PageDesign

PresentationDesign

DataDesign

Implementation

► Phase: Mission StatementPhase: Mission Statement► PurposePurpose► SubjectSubject► Target audienceTarget audience

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

from: “The Conference Review System with WSDM”, Troyer, Olga De and Casteleyn, from: “The Conference Review System with WSDM”, Troyer, Olga De and Casteleyn, Sven (2001)Sven (2001)

Web Site Design Method (WSDM)Web Site Design Method (WSDM)

Web Site Design Method (WSDM)Web Site Design Method (WSDM)► Phases and steps:Phases and steps:

Phase: Audience modellingPhase: Audience modelling

- All users have specific information wants and needs, we - All users have specific information wants and needs, we need to know these and design for themneed to know these and design for them

Step1: Audience classificationStep1: Audience classification

- We need at this point to identify activities within the website - We need at this point to identify activities within the website and the relationship a given user type has with these and the relationship a given user type has with these

- Identify users and classify them into specific “user classes” - Identify users and classify them into specific “user classes” (e.g. lecturer, or student etc.).(e.g. lecturer, or student etc.).

- All user classes exist under a wider overall and complete - All user classes exist under a wider overall and complete set of given users set of given users

Web Site Design Method (WSDM)Web Site Design Method (WSDM)Step 2: Audience class characterisationStep 2: Audience class characterisation

- Further user classes analysis- Further user classes analysis

- Identify specific information requirements, the - Identify specific information requirements, the

“ “conceptual what” that the user class wantsconceptual what” that the user class wants

- May diverge on actual information presentation, - May diverge on actual information presentation,

e.g. salesman and car buyer have different e.g. salesman and car buyer have different

requirements for advertising informationrequirements for advertising information

- Analyze characteristics of user class, the - Analyze characteristics of user class, the

“ “conceptual who”, e.g. levels of experience, conceptual who”, e.g. levels of experience,

frequency of use, motivation, & language etc.frequency of use, motivation, & language etc.

Web Site Design Method (WSDM)Web Site Design Method (WSDM)Phase: Conceptual designPhase: Conceptual design

Step 1: Task modelingStep 1: Task modeling

- We formally describe information requirements for - We formally describe information requirements for the different user classesthe different user classes

- Done via Object Role Model (ORM), Entity - Done via Object Role Model (ORM), Entity Relationship Model (ERM), etc. – gives a view of Relationship Model (ERM), etc. – gives a view of information required in the systeminformation required in the system

Customer AccountHas For a

Web Site Design Method Web Site Design Method (WSDM)(WSDM)

Step 1: Task modeling (cont.)Step 1: Task modeling (cont.)► Also need to think about the functionalityAlso need to think about the functionality► Expand on functional requirements set out in Audience Expand on functional requirements set out in Audience

Class Characterisation and model it using, for instance Class Characterisation and model it using, for instance Hierarchical Task Analysis (HTA) or perhaps an Entity Hierarchical Task Analysis (HTA) or perhaps an Entity Life History (ELH) diagramLife History (ELH) diagram

ENTITY X

A B C D

E F G H*

Web Site Design Method (WSDM)Web Site Design Method (WSDM)Step 2: Navigational designStep 2: Navigational design► Construct a conceptual navigation modelConstruct a conceptual navigation model► It consists of a number of navigation tracks – one for It consists of a number of navigation tracks – one for

each audience classeach audience class► Association of information chunks – Information as Association of information chunks – Information as

componentscomponents► Association of functional chunks – Functions as Association of functional chunks – Functions as

componentscomponents

© Prof. Dr. Olga De Troyer 2002

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

Web Site Design Method (WSDM)Web Site Design Method (WSDM)

► Phase: Implementation designPhase: Implementation design► Page designPage design► Presentation designPresentation design► Data designData design► Phase: ImplementationPhase: Implementation► Produces the end product of a web-siteProduces the end product of a web-site

© Prof. Dr. Olga De Troyer 2002

WSDM: Conceptual DesignMission statement:

• purpose• target audience• subject

Audience Class Description• Requirements: Information Functional Usability• Characteristics

Audience Class Hierarchy

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)

/of last modification

*p

*f -> ?

*d -> TODAY

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

*a -> ? *t -> ?

UpdateSubmission in *p Paper

VisitorPC-Chair

Author

Reviewe

PC-Member

Conceptual Design

Mission statementSpecification

Audience Modeling

AudienceClassification

Audience ClassCharacterization

NavigationalDesign

Task Modeling

Implementation design

PageDesign

PresentationDesign

DataDesign

Implementation

StoryboardsStoryboards• Simple paper based techniqueSimple paper based technique• Basically pictures and text to roughly illustrate the make up / Basically pictures and text to roughly illustrate the make up /

appearance of a screenappearance of a screen• Not intended to be totally accurate, Not intended to be totally accurate, • Limited on interaction, but Limited on interaction, but

shows screen sequences shows screen sequences • Each screen is accompanied Each screen is accompanied

by text to describe the scene, by text to describe the scene,

user interaction and any user interaction and any

dynamic media (e.g. sound)dynamic media (e.g. sound)

shown on a timelineshown on a timeline

ConclusionConclusion

MethodsMethods

►General problems to overcome…General problems to overcome… Favourite methodologyFavourite methodology Used to justify a pre-defined solutionUsed to justify a pre-defined solution

►Power of the analyst vs power of the Power of the analyst vs power of the person/organisation purchasing the systemperson/organisation purchasing the system

Methodologies attempt to formalise Methodologies attempt to formalise messy human based systemsmessy human based systems

MethodsMethods

►Why use one? – some reasons…Why use one? – some reasons… Documentation – transparency, Documentation – transparency,

communicationcommunication Standardisation – of approach, across Standardisation – of approach, across

groupsgroups Modelling – tools, techniques for Modelling – tools, techniques for

representationrepresentation Evaluation – validation, verificationEvaluation – validation, verification

Assignment?Assignment?

On-Line BankOn-Line Bank

►WISDMWISDM Mission StatementMission Statement Audience ClassesAudience Classes Audience CharacterisationAudience Characterisation

For the tutorial…For the tutorial…

►Think about…(in WSDM terms)Think about…(in WSDM terms) Task ModellingTask Modelling

►Information requirements of your audienceInformation requirements of your audience►Functional requirements of your audienceFunctional requirements of your audience

Navigation Design (for each audience class)Navigation Design (for each audience class)►Read: Read: http://http://

wsdm.vub.ac.be/Download/Papers/WISDOM/WSDMPaperwsdm.vub.ac.be/Download/Papers/WISDOM/WSDMPaper.PDF.PDF

►Familiarise/re-familiarise yourself with Familiarise/re-familiarise yourself with ERM’s and ELH’s/HTA’sERM’s and ELH’s/HTA’s