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


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


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


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


Pam Scanlon9


Pam Scanlon10


Limit Information Overload

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

and concepts

Pam Scanlon11


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


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


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


Pam Scanlon15


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

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



http://hotwired.lycos.com/webmonkey/97/19/index2a.html?tw=authoring

http://hotwired.lycos.com/webmonkey/97/19/index2a.html?tw=authoring

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


Pam Scanlon20


Pam Scanlon21


Pam Scanlon22


Pam Scanlon23


Pam Scanlon24


Pam Scanlon25


Pam Scanlon26


Pam Scanlon27


Pam Scanlon28


Pam Scanlon29


Pam Scanlon30


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


Pam Scanlon32


Pam Scanlon33


Pam Scanlon34


Pam Scanlon35


Pam Scanlon36


Pam Scanlon37


Pam Scanlon38


Pam Scanlon39


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


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

Documents

Web Site Design & Management Class 7 March 12, 2003