web site design & management class 7 march 12, 2003

Web Site Design & ManagementClass 7

March 12, 2003

Pam Scanlon2

Web Site Design & Management Class 7

Agenda

• Homework – hand in

• Absentee policy

• Go over Chapter 4 homework

• Individual attention/help your fellow student

• In class assignment

Chapter 4

Planning Site Navigation

Pam Scanlon4

Principles of Web Design Chapter 4

Objectives

• Create usable navigation

• Build text-based navigation

• Link with a text navigation bar

• Add contextual linking

• Use graphics for navigation and linking

Pam Scanlon5

Principles of Web Design Chapter 4

Creating Usable Navigation

Provide enough location information to let the user answer the following navigation questions:

• Where am I? • Where can I go? • How do I get there?• How do I get back to where I started?• You should ask these questions EVERY time!

Pam Scanlon6

Principles of Web Design Chapter 4

Creating Usable NavigationTo answer these questions, provide the following information:

• Let users know what page they are on, and what type of content they are viewing

• Let users know where they are in relation to the rest of the site

Pam Scanlon7

Principles of Web Design Chapter 4

Creating Usable Navigation

• Provide consistent, easy-to-understand links• Provide alternatives to the browser’s Back

button that lets users return to their starting point– What are some of these alternatives?

Pam Scanlon8

Principles of Web Design Chapter 4

Pam Scanlon9

Principles of Web Design Chapter 4

Pam Scanlon10

Principles of Web Design Chapter 4

Limit Information Overload

• Create manageable information segments• Control page length• Use hypertext to connect facts, relationships,

and concepts

Pam Scanlon11

Principles of Web Design Chapter 4

Using Text-Based Navigation

• Text-based linking is often the most effective way to provide navigation on your site

• It can work in both text-only and graphical browsers

• Always provide a text-based set of links as an alternate means of navigation

Pam Scanlon12

Principles of Web Design Chapter 4

Sample Text Navigation

• To main pages (home, table of contents, index)

• To the top of each chapter• Within the table of contents page to chapter

descriptions• From table of contents page to specific topics

within each chapter

The following screens demonstrate a variety of text-based navigation options:

Pam Scanlon13

Principles of Web Design Chapter 4

Sample Text Navigation

• Between the previous and next chapter • Within chapter pages to each topic• To related information by using contextual

links

The following screens demonstrate a variety of text-based navigation options:

Pam Scanlon14

Principles of Web Design Chapter 4

Pam Scanlon15

Principles of Web Design Chapter 4

Pam Scanlon16

Review of formatting tags<div> vs. <p>

• <p> puts a double line break in

• <div> is handy if you are using styles

• See the following web pages for more info

• http://www.webdevelopersnotes.com/tutorials/html/12.php3

• The mighty <div> tag from webmonkey

Pam Scanlon17

The Paragraph Tag

Pam Scanlon18

The <p> paragraph tag </p>

• A two sided tag (not everyone uses it that way, but it is mandatory for this class that you do. It is good practice.)

• Gives you a double “carriage return” in between paragraphs

• If you want only a single return, use the <br></br> break tag.

• What attributes can a <P> tag have?

Pam Scanlon19

Principles of Web Design Chapter 4

Pam Scanlon20

Principles of Web Design Chapter 4

Pam Scanlon21

Principles of Web Design Chapter 4

Pam Scanlon22

Principles of Web Design Chapter 4

Pam Scanlon23

Principles of Web Design Chapter 4

Pam Scanlon24

Principles of Web Design Chapter 4

Pam Scanlon25

Principles of Web Design Chapter 4

Pam Scanlon26

Principles of Web Design Chapter 4

Pam Scanlon27

Principles of Web Design Chapter 4

Pam Scanlon28

Principles of Web Design Chapter 4

Pam Scanlon29

Principles of Web Design Chapter 4

Pam Scanlon30

Principles of Web Design Chapter 4

Graphics for Navigation• Standardize your navigation graphics• Provide predictable navigation cues for the

user • Repeat graphics to minimize download time• Use consistent placement and design of

navigation graphics to reassure the user• Use easily understandable graphics

Pam Scanlon31

Principles of Web Design Chapter 4

Pam Scanlon32

Principles of Web Design Chapter 4

Pam Scanlon33

Principles of Web Design Chapter 4

Pam Scanlon34

Principles of Web Design Chapter 4

Pam Scanlon35

Principles of Web Design Chapter 4

Pam Scanlon36

Principles of Web Design Chapter 4

Pam Scanlon37

Principles of Web Design Chapter 4

Pam Scanlon38

Principles of Web Design Chapter 4

Pam Scanlon39

Principles of Web Design Chapter 4

Summary• Work from the user's point of view. Think about

where users want to go within your site, and make it easy for them to get there.

• Add plenty of links so it's easy to get around your site. Link to fragments as well as whole pages. Make it easy to get back to your navigation options.

• In addition to providing links, make sure you provide plenty of location cues to let the user know where they are

Pam Scanlon40

Principles of Web Design Chapter 4

Summary• Do you have to use graphics for linking?

Rethink the objectives of your site and determine whether text will do as well. Every additional graphic adds to download time.

• Don't forget to provide ALT values to your <img> tags to provide alternate navigation options for the user