Design of Hypermedia Applications

1
Design of Hypermedia Applications

• CSE4461 Hypermedia and Multimedia Technology
• York University, Winter 2007

Fanis Tsandilas Feb 1, 2007
2
Interaction Design Process
Identify User Needs and Establish Requirements
Develop Alternative Designs
Build Interactive Versions of the Designs
(Prototypes)
Evaluate Prototypes
final product
3
User-Centered Design

1. Identify user needs establish requirements

1. Evaluate

Users

1. Develop alternative designs

1. Build prototypes

4
Waterfall Process Model
Requirements
Design
Implementation
Testing
Maintenance
5
Waterfall Process Model
Requirements
Design
Implementation
Testing
Maintenance
6
OOHDM Methodology (Schwabe et al.)

• Requirements Gathering
• stakeholders, scenarios, use cases
• Conceptual Design
• conceptual schema, domain classes and
  relationships
• Navigational Design
• nodes, links, indexes, guided tours
• Abstract Interface Design
• interface classes (buttons, text fields)
• Implementation

7
RMM Methodology (Isakowitz et al.)
8
Components of Web Design
Information Design
Navigation Design
Graphic Design
(from James Landays lecture notes)
9
Web Design Process
Jesse James Garret - The Elements of Use
Experiencehttp//jjg.net/elements/pdf/elements.pd
f
10
Design Practices

• Scenarios
• Site maps
• Storyboards
• Page schematics
• Page mockups

11
Scenarios

• Bob visits the home page of the web site to
  find news about music events happening this week.
  He has never used the site before so he

12
Site Maps
1. home
2. login
5. create account
3. forget pass
7. news page(new user)
8. news page(old user)
4. mail pass to user
news home page
13
Storyboards
(from James Landays lecture notes)
14
Page Schematics
(from D. Vogels lecture notes)
15
Mockups
16
Prototyping
Initial Design
Low fidelity prototype
Evaluation
Refined Design
High fidelity prototype
Evaluation