web site analysis and design. ottawa e-commerce overview a. rau-chaplin0-2 outline part 1: planning...
TRANSCRIPT
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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-4
Part 1:Planning
So you want to create a web site?
Ottawa E-Commerce Overview A. Rau-Chaplin 0-5
Why are you building this site?
•To make money•To disseminate information •To stroke your ego
Ottawa E-Commerce Overview A. Rau-Chaplin 0-6
Sites designed to make money
• Corporations– IBM
• Small Business– Rosebridge House
• Non Profit Organizations– Canadian Red Cross
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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,...
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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.exe/e
– Ego ???
Ottawa E-Commerce Overview A. Rau-Chaplin 0-11
Government On-line• The same but more…
– Diversity of audience– Language– Consistence– Fairness– Security– Accountability
• TrendsOn-line
Info
On-lineInitiation
On-lineReal-TimeProcessing
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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?
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-14
A Single Audience?
• Audience for Business Sites– Current Customers– Potential Customers– Investors– Suppliers (Separate?)– Sales force (Separate?)– ???
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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?
Ottawa E-Commerce Overview A. Rau-Chaplin 0-17
Planning Tools
• Principles• Scenarios
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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.
Ottawa E-Commerce Overview A. Rau-Chaplin 0-20
Part 2:Design
Issues and Tools
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-22
Types of pages
Main PageHome Page
Main Topic#1
Main Topic#2
Main Topic#n
...
Subsidiary#1a
Subsidiary#1b
•Tree Structure•Depth?•Content view
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-24
Main Topic Pages
• All about navigation• Important topics go here• Dynamic content• Defines the sub domain!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-26
On Every Page
• Content matters• Writing style matters• Structure matters• Consistence matters• Aesthetics matter
• Above all else restraint matters• Good design = simple
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-28
Navigation
• The first screen…• Navigational tools…• Consistence !!!!!!!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-30
Navigational Tools
• Four main navigational tools– Navigational graphics– Text– Frames– Page layout
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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 it’s a button!– buttons have a grammar, they repeat!
• Image maps– may not repeat– where should I click???
Ottawa E-Commerce Overview A. Rau-Chaplin 0-32
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 …”
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-35
Not just coding html!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-36
Design Process• Design
– Principles– Scenarios– Storyboard– Site map – Main pages – Page layout grid– Check lists
• Mockup/Prototype• Evaluate
– Usability Study
Ottawa E-Commerce Overview A. Rau-Chaplin 0-37
Example:
WillieBoySurfgea
r
Place Holder Page
Ottawa E-Commerce Overview A. Rau-Chaplin 0-38
Design
• Design Principles– A short listing of what it is all about
• Audience• Look• Purpose• Image…
• Scenarios
Ottawa E-Commerce Overview A. Rau-Chaplin 0-39
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?
Ottawa E-Commerce Overview A. Rau-Chaplin 0-40
Storyboard: Site Structure
Ottawa E-Commerce Overview A. Rau-Chaplin 0-41
Main Page
Ottawa E-Commerce Overview A. Rau-Chaplin 0-42
Page Layout Grid
Ottawa E-Commerce Overview A. Rau-Chaplin 0-43
Mock-up
Ottawa E-Commerce Overview A. Rau-Chaplin 0-44
What every site needs…
• Privacy statement• Company info• Search• …
Ottawa E-Commerce Overview A. Rau-Chaplin 0-45
Design Process• Design
– Principles– Scenarios– Storyboard– Site map – Main pages – Page layout grid– Check lists
• Mockup/Prototype• Evaluate
– Usability Studies
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-47
Cognitive ProcessingGoal
Intention to act
Sequence of actions
Execution of actions Perceive state of the world
Interpret perception
Evaluate interpretations
The World
Ottawa E-Commerce Overview A. Rau-Chaplin 0-48
Human Information Processing
Person Computer
Goals
Execute
Evaluate
Read/Scan
Output
Process
Ottawa E-Commerce Overview A. Rau-Chaplin 0-49
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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-50
Norman’s 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 don’t read pages they scan them!– Give each action an immediate and obvious
effect– Not just visual cues, also audio …
Ottawa E-Commerce Overview A. Rau-Chaplin 0-51
Norman’s 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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-52
Mappings
Ottawa E-Commerce Overview A. Rau-Chaplin 0-53
Norman’s 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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-54
Norman’s 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 goal:hard to detect and fix
Ottawa E-Commerce Overview A. Rau-Chaplin 0-55
Norman’s 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!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-56
Norman’s 7 Principles for making difficult tasks simple
7) Standardize– When all else fails rely on
standardization– Then it only has to be learnt once!
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-59
Part 3:Implementation
It is not magic! Demystifying HTML
Ottawa E-Commerce Overview A. Rau-Chaplin 0-60
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
Ottawa E-Commerce Overview A. Rau-Chaplin 0-61
HTML
• Used as a Page Layout Language!• Created in
– A text editor– WYSIWYG Editor– Via a translator from some other
format
Ottawa E-Commerce Overview A. Rau-Chaplin 0-62
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>
Ottawa E-Commerce Overview A. Rau-Chaplin 0-63
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>
Ottawa E-Commerce Overview A. Rau-Chaplin 0-64
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>
Ottawa E-Commerce Overview A. Rau-Chaplin 0-65
Images in HTML
• Can embed images in html documents• Formats: .gif, .jpg• Example
<BODY><H1>My Oldest Son.</H1><IMG SRC=“max.jpg”></BODY>
Ottawa E-Commerce Overview A. Rau-Chaplin 0-66
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>
Ottawa E-Commerce Overview A. Rau-Chaplin 0-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