Web Design Guidelines by Scott Grissom

1

Designing for the Web

Web site design

Web page design

Web usability

Web Design Guidelines by Scott Grissom

2

Your Goal

Create a web site that is:

useful

compelling

attractive

easy to use

satisfying

Web Design Guidelines by Scott Grissom

3

Web Development Team

Content provider

Information architect

Graphic designer

Writer / editor

Programmer

Project Manager

Usability Expert

Web Design Guidelines by Scott Grissom

4

Mission Statement

What are you creating and why?

Who will use it?

What will they want to do?

How will you know if your site is successful?

Web Design Guidelines by Scott Grissom

5

Site Design

Content

Organization

Navigation system

Web Design Guidelines by Scott Grissom

6

Content

What do your visitors want?

What information do you want to provide?

What do similar organizations provide?

What do you already have?

What do you need to create?

Web Design Guidelines by Scott Grissom

7

Activity #1

Develop a mission statement

one sentence

must contain audience, purpose, and content

Develop an initial inventory of content

on your own

Web Design Guidelines by Scott Grissom

8

Organization Schemes

White pages

Yellow pages

Supermarket

Your computer

Web Design Guidelines by Scott Grissom

9

Hierarchy

no more than seven categories

three clicks and you are there

Home Page

Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 7Topic 6

1 3 4 5 62 7

Web Design Guidelines by Scott Grissom

10

Navigation System

How do I get home?

Where am I?

Where else can I go?

Web Design Guidelines by Scott Grissom

11

Examples

across the top

down the left side

Web Design Guidelines by Scott Grissom

12

Additional Navigation

Site map

overall view

Index

alphabetical list of terms

Search facility

requires special expertise

Web Design Guidelines by Scott Grissom

13

Labels are important

Strive to make labels clear & concise

Be consistent

Follow convention Home / Main

Search / Find

Contact Us

About Us

Help / FAQ

News / What’s New

Web Design Guidelines by Scott Grissom

14

Activity #2

refrigerator

socks

living room

dictionary

milk

bureau

kitchen

bookshelf

bedroom

a live elephant

Web Design Guidelines by Scott Grissom

15

Web Page Design

KISS

Web Design Guidelines by Scott Grissom

16

Home Page

What can I do at this site?

No scrolling should be necessary!

Attractive

This is your first impression

Web Design Guidelines by Scott Grissom

17

Web Writing

remember visitors only scan

keep it short

at least 50% of normal text

use headings

use bullet lists

put conclusion first

Web Design Guidelines by Scott Grissom

18

Common Page Guidelines

dark text on light background

limit visitor scrolling

limit use of images

limit use of animations

Web Design Guidelines by Scott Grissom

19

Be Aware of Browser Features

Back button

do not provide your own

Colored links

do not change default

Bookmarks

provide meaningful title

Web Design Guidelines by Scott Grissom

20

Proofread

errors will kill the professional appearance of your site

use a spell checker

use a grammar checker?

ask someone else to check grammar

Web Design Guidelines by Scott Grissom

21

Web Usability Measures

What are some indications of ‘user friendly’?

Ease of learning

Improved user performance

Low user error rate

User satisfaction

Web Design Guidelines by Scott Grissom

22

Web Design Guidelines

Know the user

Involve the user during design

Design a navigation system

Where am I?

How can I get home?

Where else can I go?

Web Design Guidelines by Scott Grissom

23

Usability Evaluation Strategies

Checklist

User testing

Usability inspection

bring in a usability expert

Web Design Guidelines by Scott Grissom

24

Usability Checklist

Are all links correct?

Is there a link to home on every page?

Is navigation consistent on every page?

Does each page have an appropriate title?

Did I proofread all content?

Create user profiles

can they do what they will likely want to do?

Web Design Guidelines by Scott Grissom

25

User Testing

Identify appropriate users

Select appropriate tasks

Watch, listen, but don’t talk!

Ask volunteers to complete a survey

Web Design Guidelines by Scott Grissom

26

A Typical Survey

Strive for unbiased questions

Use a rating scale 1-5

Finding the information was:difficult 1 2 3 4 5 easy

Appearance of the site was:ugly 1 2 3 4 5 beautiful

Overall, the site was:really sucky 1 2 3 4 5 excellent

Web Design Guidelines by Scott Grissom

27

Some Sample Sites

Let’s take a look at some of your favorite sites….

Web Design Guidelines by Scott Grissom

28

Activity #3

Go to a competitors site

Kick the tires and look for usability problems

What do you like?

What do you think will cause problems?

What do you hate?

Web Design Guidelines by Scott Grissom

29

Additional Resources

Usable Web the mother of all sites

http://www.usableweb.com/

Yale Web Style Guide http://info.med.yale.edu/caim/manual/contents.ht

ml

Link Checking Software

Xenu's Link Sleuth - freeware http://home.snafu.de/tilman/xenulink.html

Web Design Guidelines by Scott Grissom

30

Summary (1)

Web site design start with a mission statement

plan and organize the site

design a navigation system

Web page design be concise

be consistent

proofread

Web Design Guidelines by Scott Grissom

31

Summary (2)

Web usability

you are NOT the typical visitor

find out what problems the typical visitor has with your site

Web Usability Evaluation

discover usability problems BEFORE it is too late