Designing a site (2/4)Conceptual Design – 1h

Lazar’s Development LifecycleDefine the mission &

target users

Collect user

requirements Create andModify

Conceptual design

Create and modify physical design

Perform usability testing

Implement and market the website

Evaluate and improve the website

Conceptual Design

• Navigation, Information Architecture

• Page Design

• Designing for Multiple Browsers (?)

Navigation, Information Architecture (1/2)

• Organizational Structure of the Home Page– Topic grouping– Audience splitting– Metaphors

• Amazon.com

• Information Architecture– Tree structure: broad and shallow vs narrow and deep– Three clicks and you’re in– Chunking information: 7±2

Navigation, Information Architecture (2/2)

• Navigation– Where, Oh Where, Oh Where– Topical sections – Path Analysis

• Multiple routes

– Technology– Screen layout

Lost in Hyperspace?

• Where am I?

• How did I get here?

• What can I do here?

• Where can I get to?

• How do I go there?

• What have I seen so far?

• Where else is there for me to see?

Page Design (1/2)

• Technical Considerations– Download– Plug-ins– Animation– Feature creep

• Design Considerations– Information overload– Backgrounds– Colour palettes– Text

• Styles

Page Design (2/2)

• Content Considerations– Quality

• Layout considerations– Positioning– Resizing/Scaling

Design Challenges• Designing for Accessibility

– Legislation– Web Accessibility Initiative

• The Browser Challenge– Explorer v Netscape v Opera etc.– Define a baseline specification or create alternatives ?– Currently much less of an issue with the dominance of Internet

Explorer• But what does Firefox introduce?

– Older incompatibility problems e.g. <object> vs <embed>, scripting languages, layers.

• Standardization– Markup languages get stricter (html xhtml xml)– de facto standards vs W3C

• Need for Testing– Early & Often

Requirements Specification

• Mission Statement– Aims of Application

• Target User Analysis

• Contents

• Screen Layout Guidelines

• Navigation Guidelines

• Technical Requirements

Navigation Maps

• Linear

• Hierarchical

• Non-linear

• Composite

Linear

Hierarchical

Non-linear

Composite

History2

Team4

Simulation5

Equipment3

In-Out Structure

Museum Exhibits 6

Home Page1

Storyboarding• A storyboard starts as a diagram.• It is a design, not a screen-shot• Shows where blocks of content go• Shows where local and global links are grouped• Labelled to show the result of clicking on links and multimedia• Label OFF the diagram! (Draw lines linking label to feature).• Labels tell what the multimedia does.• First draft drawn in schematic form by hand or drawing package

(e.g. MS Word, PowerPoint, Dreamweaver). • Later may become a detailed design using collage and better

drawing tools• Show a few possible solutions to client – who will invariably want to

make changes!• Coded only after design and approval

Vertical Navigation System

Horizontal Navigation Bar

Vertical and Horizontal

Example: A storyboard for a web home page

Storyboards

Detailed Storyboard