Faculty of Computing Engineering and

Technology

Web Methodology

Web Methodologies

Faculty of Computing Engineering and

Technology

What we are going to do…

Web Design Methodology

WSDM - Methods in General

EXAMPLE - Storyboard

Web Methodologies

Faculty of Computing Engineering and

Technology

Client

Requirements

Design

Prototype

Implement

Web Methodologies

IntroductionWeb Design Methodology

Faculty of Computing Engineering and

Technology

Web Design Methodology

Define the client's goals

Create a project plan

Deliverables (documents and prototypes)

Timing

Quote

Gain approval of the client

Web Methodologies

- Client

Faculty of Computing Engineering and

Technology

Define audience Who is the web page for?

Define the problem

What information will be required by the end users?What information does the client want to display?What information does the client not want to display?

Interview end users & client staff

Web Design Methodology

Web Methodologies

Requirements

Faculty of Computing Engineering and

Technology

Categories

Obtain content from client

Create Conceptual design and layout

Produce maps Produce paper prototypes

Finalize Content

Web Design Methodology

Web Methodologies

Design

Faculty of Computing Engineering and

Technology

Implement

Refine textual content

Obtain new/Modified requirements

Perform user testing

Test/Debug

Make any changes

Looping back to Stage 1 (Client)

Repeating

Web Design Methodology Prototype

Faculty of Computing Engineering and

Technology

Place page(s) on to a server

Market the pages

Web Design Methodology Implement

Faculty of Computing Engineering and

Technology

Web Site Design Method (WSDM)

WSDM WSDM pronounced pronounced “Wisdom” “Wisdom”

Faculty of Computing Engineering and

Technology

- What it covers Feasibility Analysis Design Implementation Testing

Web Site Design Method (WSDM)

Faculty of Computing Engineering and

Technology

User modelling

User classification

User class description

Conceptual design

Object modelling

Navigational design

Implementation

Implementation design

ImplementationWebsite

WSDM Overview

Faculty of Computing Engineering and

Technology

Phase 1. User modeling

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

Step 1.1. User classification

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

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

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

WSDM Phases and Steps

Faculty of Computing Engineering and

Technology

Step 1.2. User class description - Further user classes analysis

- Identify specific information requirements, the “conceptual what” that the user class wants

- May diverge on actual information presentation, e.g. salesman and car buyer have different requirements for advertising information

- Analyze characteristics of user class, the “conceptual who”, e.g. levels of experience, frequency of use, motivation, & language etc.

- If different characteristics emerge, perspectives result

WSDM Phases and Steps

Faculty of Computing Engineering and

Technology

Phase 2. Conceptual design

Step 2.1. Object modeling

- We formally describe information requirements for the different user classes and their perspectives

- Done via User Object Models (UOM), gives a view of information required in the system

WSDM Phases and Steps

Specification

ModelEngineTrimNumber of doorsExtras available

Advertising media

LeafletFull brochure CD-ROMFurther request

Has For a

Faculty of Computing Engineering and

Technology

Step 2.2. Navigational design

Construct a conceptual navigation model

It consists of a number of navigation tracks that describe how different users navigate through the site

Each perspective (POM model) has its own navigation track

WSDM Phases and Steps

Faculty of Computing Engineering and

Technology

Phase 3. Implementation

Step 3.1. Implementation design.

Design the look and feel, based on conceptual design

Uses standard guidelines, from HCI, multimedia etc. to create the interface for the website

Step 3.2. Actual implementation

Produces the end product of a web-site

Considers database storage

WSDM Phases and Steps

Faculty of Computing Engineering and

Technology

What is storyboarding?

Prototyping tools provide a means of quickly developing the front end of an application in order to seek user approval for it

A storyboard is a form of pre-prototyping – it allows the designer to provide the user with a visual image of what the front end will look like in order to seek user approval prior to prototype development.

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

How are storyboards used?

Storyboards can give an idea of the look and feel of an application

A good method is to start with a very basic storyboard and gradually add features gaining approval at each stage.

The success of this plan would depend on the extent of the co-operation of the user

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

Features shown by storyboards Screen Layout

Colours

Features which provide Impact

Navigational features

Features which provide continuity

Multimedia Content

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

1. Screen Layout

The layout of each screen should be defined with boxes

Each box should be annotated to give the user an idea of what the contents will be..eg. text, graphics etc.

WSDM Example - Storyboard

Index

Title Bar

Graphics

NavigationBar

Text

Faculty of Computing Engineering and

Technology

2. Colour

Which colours are used

Where

Why - Colours can have a meaning

– Red - danger / warmth

– Green – normality

– Blue – cold

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

3. Features which provide Impact Special Effects

Which effects

Why

Variation on a theme

Light and shade

Dull/bright

Textures

Use of Metaphor

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

4. Features which provide continuity

Which features Running headers Colour Font Screen Layout Graphics Sound

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

5. Navigational features

Type Linear/non-linear Hot word/area, Menu

button, arrow Positioning on screens Icons/wording to be used Colour Size

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

6. Multimedia Content

What is included Multimedia type and description

Where it is included positioning

How it is included Any special style/effects eg. rotating, blinking

When Always there Available on selection Background

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

Advantages of storyboards

Can be paper based

Application independent

Little or no skills required !

Apart from the ability to think and design

WSDM Example - Storyboard

Faculty of Computing Engineering and

Technology

Simple paper based technique Basically pictures and text to

roughly illustrate the make up / appearance of a screen

Not intended to be totally accurate,

Limited on interaction, but shows screen sequences

Each screen is accompanied by text to describe the scene, user interaction and any dynamic media (e.g. sound) shown on a timeline

WSDM Example - Storyboard