Web Methodology

1
Web Methodology
2
What we are going to do

• Web Design Methodology
• WSDM - Methods in General
• EXAMPLE - Storyboard

3
Introduction
Web Design Methodology

• Client
• Requirements
• Design
• Prototype
• Implement

4
Web Design Methodology
- Client

• Define the client's goals
• Create a project plan
• Deliverables (documents and prototypes)
• Timing
• Quote
• Gain approval of the client

5
Requirements
Web Design Methodology

• 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

6
Design
Web Design Methodology

• Categories
• Obtain content from client
• Create Conceptual design and layout
• Produce maps
• Produce paper prototypes
• Finalize Content

7
Prototype
Web Design Methodology

• Implement
• Refine textual content
• Obtain new/Modified requirements
• Perform user testing
• Test/Debug
• Make any changes
• Looping back to Stage 1 (Client)
• Repeating

8
Implement
Web Design Methodology

• Place page(s) on to a server
• Market the pages

9
Web Site Design Method (WSDM)

• WSDM pronounced Wisdom

10
Web Site Design Method (WSDM)

• - What it covers
• Feasibility
• Analysis
• Design
• Implementation
• Testing

11
WSDM Overview
Website
12
WSDM Phases and Steps

• 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

13
WSDM Phases and Steps

• 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

14
WSDM Phases and Steps

• 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

15
WSDM Phases and Steps

• 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

16
WSDM Phases and Steps

• Phase 3. Implementation
• Step 3.1. Implementation design.Design the look
  and feel, based on conceptual designUses
  standard guidelines, from HCI, multimedia etc. to
  create the interface for the website
• Step 3.2. Actual implementationProduces the end
  product of a web-siteConsiders database storage

17
WSDM Example - Storyboard

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

18
How are storyboards used?
WSDM Example - Storyboard

• 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

19
Features shown by storyboards
WSDM Example - Storyboard

• Screen Layout
• Colours
• Features which provide Impact
• Navigational features
• Features which provide continuity
• Multimedia Content

20
1. Screen Layout
WSDM Example - Storyboard
Navigation Bar
Title Bar

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

Graphics
Index
Text
21
WSDM Example - Storyboard
2. Colour

• Which colours are used
• Where
• Why - Colours can have a meaning
• Red - danger / warmth
• Green normality
• Blue cold

22
3. Features which provide Impact
WSDM Example - Storyboard

• Special Effects
• Which effects
• Why
• Variation on a theme
• Light and shade
• Dull/bright
• Textures
• Use of Metaphor

23
4. Features which provide continuity
WSDM Example - Storyboard

• Which features
• Running headers
• Colour
• Font
• Screen Layout
• Graphics
• Sound

24
5. Navigational features
WSDM Example - Storyboard

• Type
• Linear/non-linear
• Hot word/area, Menu button, arrow
• Positioning on screens
• Icons/wording to be used
• Colour
• Size

25
6. Multimedia Content
WSDM Example - Storyboard

• 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

26
Advantages of storyboards
WSDM Example - Storyboard

• Can be paper based
• Application independent
• Little or no skills required !
• Apart from the ability to think and design

27
WSDM Example - Storyboard

• 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