Web Site Analysis and Design

1
Web Site Analysis and Design
2
Outline

• Part 1 Planning
• What kind of site?
• For what audience?
• Part 2 Design
• Issues
• Tools
• Part 2 Implementation
• HTML
• Putting a site on-line

3
Goals for this Module

• Understand web sites as structured objects
• Enough knowledge to be dangerous Being a good
  client
• It is not magic! Demystifying HTML
• Enough skills to post your assignments

4
Part 1Planning

• So you want to create a web site?

5
Why are you building this site?

• To make money
• To disseminate information
• To stroke your ego

6
Sites designed to make money

• Corporations
• IBM
• Small Business
• Rosebridge House
• Non Profit Organizations
• Canadian Red Cross

7
Sites designed to make money Common Qualities

• It is not about art
• It is not about ego
• It can and should be about information
• Its mostly about money

8
Sites designed to disseminate information or
opinions

• Corporate intranets
• Banner
• Educational institutions
• Dalhousie E-commerce Program
• E-zines
• Birds of a feather sites
• health sites, fan clubs, political, social,
  religious,...

9
Sites designed to disseminate information Common
Qualities

• It is not about art
• It is not about ego (for info sites)
• Its often about ego (for opinion sites)
• Its mostly about information
• Its generally not about money

10
Questions

• Where do Government sites fit in?
• Information
• www.strategis.ic.gc.ca
• Money Making
• www.canadapost.ca
• https//commerce02.procure.com/cpc/cgi-win/cata.ex
  e/e
• Ego ???

11
Government On-line

• The same but more
• Diversity of audience
• Language
• Consistence
• Fairness
• Security
• Accountability
• Trends

On-line Real-Time Processing
On-line Initiation
On-line Info
12
Other Questions

• What other categories of sites can you think of?
• What does a user expect of a money making site?
• What does a user expect of an informational site?
• How should the category affect the sites design?

13
Who is your target audience?

• Why is it important?
• What kinds of issues does it effect?
• Who is the audience for
• IBM
• Canadian Red Cross
• Worklink

14
A Single Audience?

• Audience for Business Sites
• Current Customers
• Potential Customers
• Investors
• Suppliers (Separate?)
• Sales force (Separate?)
• ???

15
Scenarios

• Audience for Business Sites Current Customers
• Provide all critical info about your products and
  services
• Order verification
• Placing new orders
• ...
• What tasks? What scenarios? Make a list!

16
Audience

• Who are they?
• Separate then into subgroups based on
• Level of interest
• How they arrived
• Multiple entry points??
• Examples dell,(W7PXM), download.com
• How are they expected to search for what they
  want?

17
Planning Tools

• Principles
• Scenarios

18
Principles

• A short listing of what it is all about
• Audience
• Look
• Purpose
• Image
• An aid in making future decisions
• A language for communication between player

19
Scenarios

• Role-playing
• The players
• Their Task
• A story, not a sequence of commands
• Customer oriented
• Mixed granularity
• How many scenarios?
• Enough to cover the main audience with typical
  motivation.

20
Part 2Design

• Issues and Tools

21
Outline

• Part 1 Planning
• What kind of site?
• For what audience?
• Part 2 Design
• The home page
• Navigation
• Using Storyboards, site maps, page layout grids
• Part 3 Implementation

22
Types of pages
Main Page Home Page
Main Topic 1
Main Topic 2
Main Topic n
...

• Tree Structure
• Depth?
• Content view

Subsidiary 1a
Subsidiary 1b
23
Home Page

• The sites purpose
• what, when, who, where and why
• What kind of content is contained in the site?
• How to find the content?
• Am I the target audience?
• Put the most important content up front!

24
Main Topic Pages

• All about navigation
• Important topics go here
• Dynamic content
• Defines the sub domain!

25
Subsidiary Pages

• Subsets of the main topic page
• You are now two levels down!
• Make clear where the user is
• Make clear when on the site and off
• User may arrive here first!
• Example
• CNN News

26
On Every Page

• Content matters
• Writing style matters
• Structure matters
• Consistence matters
• Aesthetics matter
• Above all else restraint matters
• Good design simple

27
Outline

• Part 1
• What kind of site?
• For what audience?
• Analysis of Tuns Press
• Part 2 Design
• The home page
• Navigation
• Using Storyboards, site maps, page layout grids
• Part 3 Implementation

28
Navigation

• The first screen
• Navigational tools
• Consistence !!!!!!!

29
The first screen

• Grab them now!
• The back button is only a click away!
• Display important information prominently
• You establish navigational aids here
• You establish expectations here
• Not just navigation, content too
• Not necessarily only one first screen!

30
Navigational Tools

• Four main navigational tools
• Navigational graphics
• Text
• Frames
• Page layout

31
Navigational tools graphics

• Buttons
• any graphic that is a link
• tell them where they are going BEFORE they get
  there
• a button should look like its a button!
• buttons have a grammar, they repeat!
• Image maps
• may not repeat
• where should I click???

32
Navigational Tools Text

• Excellent navigational aids
• Light, fast, clear where before jump
• Still requires visual structure
• Dont do paragraphs of links!
• Even if you have image links you still should
  have corresponding text ones
• Loads first, even if page stopped loading
• Use clear concise language, people scan pages
• Dont do click here for

33
Consistence

• Good design is about taking a small number of
  ideas and pushing them through all aspects of a
  design
• It is everything!
• Remember its about communications!

34
Consistence in Navigation

• Consistent look
• Size, shape, color,
• Consistent position
• Top, left side, bottom
• Consistent operation
• Two buttons with the same label go to the same
  logical place

35
Not just coding html!
36
Design Process

• Design
• Principles
• Scenarios
• Storyboard
• Site map
• Main pages
• Page layout grid
• Check lists
• Mockup/Prototype
• Evaluate
• Usability Study

37
ExampleWillieBoySurfgear
Place Holder Page
38
Design

• Design Principles
• A short listing of what it is all about
• Audience
• Look
• Purpose
• Image
• Scenarios

39
Storyboard

• Dont code before you think!
• PLAN, PLAN, PLAN
• What is the structure of the site to be?
• What are main topic pages?
• What is the main navigation form?

40
Storyboard Site Structure
41
Main Page
42
Page Layout Grid
43
Mock-up
44
What every site needs

• Privacy statement
• Company info
• Search

45
Design Process

• Design
• Principles
• Scenarios
• Storyboard
• Site map
• Main pages
• Page layout grid
• Check lists
• Mockup/Prototype
• Evaluate
• Usability Studies

46
Usability

• Wear the rubber meets the road
• Buying on the web?
• 60-80 of transactions pend
• The web page model
• From browsing to processing
• 80 of software in interface
• The heart of customer centric design
• The Science/Art of usability

47
Cognitive Processing
Goal
Evaluate interpretations
Intention to act
Sequence of actions
Interpret perception
Execution of actions
Perceive state of the world
The World
48
Human Information Processing
Computer
Person
Execute
Read/Scan
Process
Goals
Interface
Output
Evaluate
49
Normans 7 Principles for making difficult tasks
simple

• 1) Use knowledge in the world and the head
• Example letters on a keyboard vs. knowledge of
  touch typist
• Reminding is ok!
• The limits of short term memory 7 ? 2
• 2) Simplify the structure of tasks
• The shape of the decision tree
• Wide vs. deep structure
• Wide Select an ice cream flavor
• Deep Complete a multi-step transaction

50
Normans 7 Principles for making difficult tasks
simple

• 3) Make things visible and give feedback
• How many times have you been on a page and sat
  their wondering what you are meant to do next?
• Get the visual hierarchy right
• Think about relative size, color, shape,
  placement
• People dont read pages they scan them!
• Give each action an immediate and obvious effect
• Not just visual cues, also audio

51
Normans 7 Principles for making difficult tasks
simple

• 4) Get the mappings right
• Mapping relationship between two things
  (normally object controller)
• Use Natural mappings that take advantage of
  physical analogies and cultural standards

52
Mappings
53
Normans 7 Principles for making difficult tasks
simple

• 5) Exploit the power of constraints
• Constraints can make design easier Lego
• Physical constraints
• Example The slider moves only up or down
• Semantic constraints
• Rely on meaning of situation to control set of
  possible actions
• Example Red on a balance sheet
• Cultural Constraints (Conventions)
• Left to right vs. right to left
• Logical Constraints
• Check all steps on a process

54
Normans 7 Principles for making difficult tasks
simple

• 6) Design for errors
• People make errors!
• Human language provides for automatic error
  correction machines rely do!
• Slips vs. mistakes
• Slips result from automatic behavior
• Typically right goal wrong action easy
• Mistakes result from conscious deliberation
• Maybe wrong goalhard to detect and fix

55
Normans 7 Principles for making difficult tasks
simple

• 6) Design for errors cont
• What is a designer to do?
• Understand the causes
• Allow for undo
• Make it easier to discover the errors that do
  occur
• Errors are often a users approximation of a
  solution. Help them get there!

56
Normans 7 Principles for making difficult tasks
simple

• 7) Standardize
• When all else fails rely on standardization
• Then it only has to be learnt once!

57
Usability Testing

• Formative testing during design
• Aim Improve the interface
• Fixed tasks
• Speaking aloud protocol
• Post session questionnaire
• Small number of subject 5-12
• Fantastic potential for improvements

58
Exercise

• Pick a site and deconstruct it
• Outline the following
• Type of site?
• Principles
• Possible list of Scenarios
• Basic Site map
• Basic Page layout grid

59
Part 3Implementation

• It is not magic! Demystifying HTML

60
HTML

• Web documents are defined by the HyperText Markup
  Language (HTML)
• A language of tags
• ltgreetinggtHellolt/greetinggt
• Derived from SGML
• Fixed vocabulary
• Describes the structure of a document NOT a page
  layout language

61
HTML

• Used as a Page Layout Language!
• Created in
• A text editor
• WYSIWYG Editor
• Via a translator from some other format

62
Basic Structure of an HTML document
ltHTMLgtltHEADgt ltTITLEgtMy first
pagelt/TITLEgtlt/HEADgt ltBODYgt A simple page with
just this sentence. Nothing Fancy.lt/BODYgtlt/HTMLgt
63
Headings in HTML

• Headings
• ltH1gt, ltH2gt, ltH3gt, ltH4gt, ltH5gt, ltH6gt
• Example

ltBODYgt ltH1gtThis is my main title.lt/H1gt This text
comes after the main title. ltH2gtThe is a sub
heading Here is a little old bit of
text. ltH2gtThis is another sub heading lt/BODYgt
64
Lists in HTML

• Type types
• Ordered Lists ltOLgt
• Unordered List ltULgt
• Example

ltBODYgt ltH1gtThis is my main title.lt/H1gt Three
colors ltULgt ltLIgtYellowlt/LIgt ltLIgtBluelt/LIgt
ltLIgtGreenlt/LIgt lt/ULgt lt/BODYgt
65
Images in HTML

• Can embed images in html documents
• Formats .gif, .jpg
• Example

ltBODYgt ltH1gtMy Oldest Son.lt/H1gt ltIMG
SRCmax.jpggt lt/BODYgt
66
Links in HTML
ltBODYgt ltH1gtMy Oldest Son.lt/H1gt ltIMG
SRCmax.jpggt Max goes to ltA HREFwww.dal.cagtD
alhousie Univ.lt/Agt Which is in Halifax. lt/BODYgt
67
Sources

• Web Pages that Suck by Vincent Flanders Michael
  Willis
• See www.webpagesthatsuck.com
• The Design of Everyday Things by Donald A.
  Norman, 1988
• Jakob Nielsen Alertbox at www.useit.com/alertbox/
• Html Guides www.cwru.edu/help/Help_www2.html