Web Site Analysis and Design. Ottawa E-Commerce Overview A. Rau-Chaplin0-2 Outline Part 1: Planning –What kind of site? –For what audience? Part 2: Design

Web Site Analysis

and Design

Ottawa E-Commerce Overview A. Rau-Chaplin 0-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


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


Part 1:Planning

So you want to create a web site?


Why are you building this site?

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


Sites designed to make money

• Corporations– IBM

• Small Business– Rosebridge House

• Non Profit Organizations– Canadian Red Cross

http://www.ibm.com/

http://www.rosebridgehouse.com/

http://www.redcross.ca/main.htm


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


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

https://admbws.ucis.dal.ca:8000/

http://www.ecomm.dal.ca/

http://www.ihatebillgates.com/


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


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.exe/e

– Ego ???

http://www.strategis.ic.gc.ca/

http://www.canadapost.ca/

https://commerce02.procure.com/cpc/cgi-win/cata.exe/e

https://commerce02.procure.com/cpc/cgi-win/cata.exe/e


Government On-line• The same but more…

– Diversity of audience– Language– Consistence– Fairness– Security– Accountability

• TrendsOn-line

Info

On-lineInitiation

On-lineReal-TimeProcessing


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?


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

http://www.ibm.com/

http://www.redcross.ca/main.htm

http://www.worklinkngr.com/


A Single Audience?

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


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!


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?

http://www.dell.com/

http://www.download.com/


Planning Tools

• Principles• Scenarios


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


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.


Part 2:Design

Issues and Tools


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


Types of pages

Main PageHome Page

Main Topic#1

Main Topic#2

Main Topic#n

...

Subsidiary#1a

Subsidiary#1b

•Tree Structure•Depth?•Content view


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!


Main Topic Pages

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


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

http://www.cnn.com/


On Every Page

• Content matters• Writing style matters• Structure matters• Consistence matters• Aesthetics matter

• Above all else restraint matters• Good design = simple


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


Navigation

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


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!


Navigational Tools

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


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 it’s a button!– buttons have a grammar, they repeat!

• Image maps– may not repeat– where should I click???


Navigational Tools: Text

• Excellent navigational aids• Light, fast, clear where before jump• Still requires visual structure

– Don’t 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

• Don’t do “click here for …”


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!


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


Not just coding html!


Design Process• Design

– Principles– Scenarios– Storyboard– Site map – Main pages – Page layout grid– Check lists

• Mockup/Prototype• Evaluate

– Usability Study


Example:

WillieBoySurfgea

r

Place Holder Page


Design

• Design Principles– A short listing of what it is all about

• Audience• Look• Purpose• Image…

• Scenarios


Storyboard

• Don’t 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?


Storyboard: Site Structure


Main Page


Page Layout Grid


Mock-up


What every site needs…

• Privacy statement• Company info• Search• …


Design Process• Design

– Principles– Scenarios– Storyboard– Site map – Main pages – Page layout grid– Check lists

• Mockup/Prototype• Evaluate

– Usability Studies


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


Cognitive ProcessingGoal

Intention to act

Sequence of actions

Execution of actions Perceive state of the world

Interpret perception

Evaluate interpretations

The World


Human Information Processing

Person Computer

Goals

Execute

Evaluate

Read/Scan

Output

Process


Norman’s 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



• 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 don’t read pages they scan them!– Give each action an immediate and obvious

effect– Not just visual cues, also audio …



• 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


Mappings



• 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



• 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 goal:hard to detect and fix



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!



7) Standardize– When all else fails rely on

standardization– Then it only has to be learnt once!


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


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


Part 3:Implementation

It is not magic! Demystifying HTML


HTML

• Web documents are defined by the HyperText Markup Language (HTML)

• A language of tags– <greeting>Hello</greeting>

• Derived from SGML • Fixed vocabulary• Describes the structure of a

document NOT a page layout language


HTML

• Used as a Page Layout Language!• Created in

– A text editor– WYSIWYG Editor– Via a translator from some other

format


Basic Structure of an HTML document

<HTML><HEAD> <TITLE>My first page</TITLE></HEAD>

<BODY>

A simple page with just this sentence.

Nothing Fancy.</BODY></HTML>


Headings in HTML• Headings

– <H1>, <H2>, <H3>, <H4>, <H5>, <H6>

• Example<BODY><H1>This is my main title.</H1>This text comes after the main title.<H2>The is a sub headingHere is a little old bit of text.<H2>This is another sub heading</BODY>


Lists in HTML• Type types

– Ordered Lists <OL>– Unordered List <UL>

• Example<BODY><H1>This is my main title.</H1>Three colors<UL> <LI>Yellow</LI> <LI>Blue</LI> <LI>Green</LI></UL></BODY>


Images in HTML

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

<BODY><H1>My Oldest Son.</H1><IMG SRC=“max.jpg”></BODY>


Links in HTML

<BODY><H1>My Oldest Son.</H1><IMG SRC=“max.jpg”>Max goes to <A HREF=“www.dal.ca”>Dalhousie Univ.</A>Which is in Halifax.</BODY>


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

http://www.webpagesthatsuck.com/

http://www.useit.com/alertbox/

http://www.cwru.edu/help/Help_www2.html

http://www.cwru.edu/help/Help_www2.html

Documents

Web Site Analysis and Design. Ottawa E-Commerce Overview A. Rau-Chaplin0-2 Outline Part 1: Planning –What kind of site? –For what audience? Part 2: Design