Web Site Design & Management Class 7 March 12, 2003

Pam Scanlon 2 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 Scanlon 4 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 Scanlon 5 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 Scanlon 6 Principles of Web Design Chapter 4 Creating Usable Navigation To 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 Scanlon 7 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 Scanlon 8 Principles of Web Design Chapter 4

Pam Scanlon 9 Principles of Web Design Chapter 4

Pam Scanlon 10 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 Scanlon 11 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 Scanlon 12 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 Scanlon 13 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 Scanlon 14 Principles of Web Design Chapter 4

Pam Scanlon 15 Principles of Web Design Chapter 4

Pam Scanlon 16 Review of formatting tags vs. puts a double line break in is handy if you are using styles See the following web pages for more info ls/html/12.php3http:// ls/html/12.php3 The mighty tag from webmonkey

Pam Scanlon 17 The Paragraph Tag

Pam Scanlon 18 The paragraph tag 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 break tag. What attributes can a tag have?

Pam Scanlon 19 Principles of Web Design Chapter 4

Pam Scanlon 20 Principles of Web Design Chapter 4

Pam Scanlon 21 Principles of Web Design Chapter 4

Pam Scanlon 22 Principles of Web Design Chapter 4

Pam Scanlon 23 Principles of Web Design Chapter 4

Pam Scanlon 24 Principles of Web Design Chapter 4

Pam Scanlon 25 Principles of Web Design Chapter 4

Pam Scanlon 26 Principles of Web Design Chapter 4

Pam Scanlon 27 Principles of Web Design Chapter 4

Pam Scanlon 28 Principles of Web Design Chapter 4

Pam Scanlon 29 Principles of Web Design Chapter 4

Pam Scanlon 30 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 Scanlon 31 Principles of Web Design Chapter 4

Pam Scanlon 32 Principles of Web Design Chapter 4

Pam Scanlon 33 Principles of Web Design Chapter 4

Pam Scanlon 34 Principles of Web Design Chapter 4

Pam Scanlon 35 Principles of Web Design Chapter 4

Pam Scanlon 36 Principles of Web Design Chapter 4

Pam Scanlon 37 Principles of Web Design Chapter 4

Pam Scanlon 38 Principles of Web Design Chapter 4

Pam Scanlon 39 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 Scanlon 40 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 tags to provide alternate navigation options for the user