MRKT10028 Web Marketing,

Fall 2009
Week #5
Web Site Development, Pt
2

Web Site Design Guidelines

The _user_ ultimately dictates the optimal design for a

web site

They want quality

They expect instant gratification

Pages should load in less than 7 seconds!

They dont read, they scan

Using a modified Z or F pattern

Heatmaps from eye
tracking results of 3
different types of web
pages (an about us
page; a product page;
a search results page)

MRKT10028 Web Marketing, Fall 2009

Web Site Design Guidelines

They dont work their way through information
sequentially; they choose the first thing that
might lead them to information they are
looking for

How people look at content - Eyetracking (video):

http://www.etre.com/usability/eyetracking/showme/

They use their intuition (muddle through)

Vs. the logic you build into your navigation system
They want to be in control

MRKT10028 Web Marketing, Fall 2009

Dont Waste Their Time

Make it intuitive and obvious

What is your site about and where are
things they need to find?

Users have limited patience

Dont make them learn how to use the site
Dont make them log in or fill out forms
until after they see what you have to offer

MRKT10028 Web Marketing, Fall 2009

Focus Their Attention and Hold It

The human eye is non-linear

It recognizes patterns, edges, motion use
grid layouts, bold text/headings, animation
to catch their attention

Let them see what is available

Clear, consistently placed navigation
Repetitive elements such as logos, colours
Use CRAP (Consistency, Repetition,
Alignment, Proximity) throughout the site

MRKT10028 Web Marketing, Fall 2009

Good Writing & Simplicity Count

Good, succinct writing is essential

Get to the point!
Use plain language (simple words, phrases)

Give users an objective reason to use your product or

service; avoid over the top sales language

Create a scannable layout

Short paragraphs, bulleted lists, appropriate

headings, grid layout

K.I.S.S. (Keep It Short Simple)

Layout and language should be designed for the
average consumer (not the technical whiz or
advanced user)

MRKT10028 Web Marketing, Fall 2009

White Space and Visible Language

Use white space to divide content and

develop a hierarchy (top down structure) for
information

*Visible Language is what a user sees on

the screen. To make it effective:
Organize: provide the user with a clear and
consistent conceptual structure.

Consistency, screen layout, relationships and

navigability are important concepts of organization.

The same conventions and rules should be applied to
all elements.

(contd next slide)

MRKT10028 Web Marketing, Fall 2009

Visible Language (contd)

Economize: do the most with the least
amount of cues and visual elements.

Consider simplicity, clarity, distinctiveness, and

emphasis.

Simplicity: include only the elements that are

most important for communication.

Clarity: all components should be designed so
their meaning is not ambiguous.
Distinctiveness: the important properties of the
necessary elements should be distinguishable.
Emphasis: the most important elements should be
easily perceived.
(contd next slide)
MRKT10028 Web Marketing, Fall 2009

Visible Language (contd)

Communicate match the presentation to
the capabilities of the user.

The user interface must keep in balance

legibility, readability, typography, symbolism,

multiple views, and color or texture in order to
communicate successfully.
Use a maximum of three typefaces in a
maximum of three point sizes and a maximum of
18 words or 50-80 characters per line of text.

MRKT10028 Web Marketing, Fall 2009

Convention Works

Users expect certain elements to work the

same on various sites
E.g., Search allows you to find stuff; RSS allows
you to subscribe/access syndicated news feeds;
Add to Cart puts an item you want to buy into
your Shopping Cart, etc.

Do something different only if you KNOW it

is a better way
Remember that users do not want / expect to have
to learn how to use your site!!!!

MRKT10028 Web Marketing, Fall 2009

10

TETO - Test Early, Test Often

Testing involves both usability and

functionality testing
Can people find what they are looking for,
where they expect to find it?
Is the site accessible and easy to use?
Does it work?

Testing is an interactive process

Test it, fix it, test it again
You are NEVER finished testing!!!!!

MRKT10028 Web Marketing, Fall 2009

11

GUI Graphical User Interface

The actual colours, layout, fonts, etc. used on

a web site can seriously impact its usability
For a more in depth overview of how the
elements of visible language (Organize, Economize,
Communincate) relate to the visual design, read
the article on Designing Effective User Interfaces
online at
http://web.cs.wpi.edu/~matt/courses/cs563/talks/sm
artin/int_design.html

Also highly recommended are articles by

Jakob Nielsen at www.useit.com

MRKT10028 Web Marketing, Fall 2009

12

Summary

The needs of the user ultimately drives the design of the site

They want to be in control

Make your site design obvious and intuitive

Recognize viewing patterns (modified F, scanning, motion
and typography that catches the users attention)

Use CRAP guidelines

Good writing is essential

White space is good; simplicity is a must
Use visible language rules (Organize, Economize,
Communicate) to create your user interface
Stick to conventions that users expect
Test early, test often

MRKT10028 Web Marketing, Fall 2009

13

Homework (before Fridays lab)

Read the three required readings on the LearningPlan

There is no quiz this Friday
Revisit the content for the RapidsTransit web site
Lab on Friday is mandatory attendance
We will finalize the home page for the RapidsTransit web site
We will create a master (template) page for use in creating
tier 1 and 2 pages
We will (time permitting) begin to add content to some tier 1
pages

You get 5 marks for showing up and completing the follow me tutorial
Note that we will continue with this web site build for the rest of the course.

If you dont attend any of these labs, you must catch up with (and obtain
working files from) another student. The instructor will NOT provide files to
students who do not attend class (nor will class time be wasted while people
try to catch up get the files BEFORE you arrive in the lab)

MRKT10028 Web Marketing, Fall 2009

14