Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition

4-2 Objectives Create usable navigation Build text-based navigation Add contextual linking Summarize text-based navigation Use graphics for navigation and linking

Principles of Web Design, 4th Edition4-3 Creating Usable Navigation

Principles of Web Design, 4th Edition4-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?

Principles of Web Design, 4th Edition4-5 Creating Usable Navigation (continued) 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

Principles of Web Design, 4th Edition4-6 Creating Usable Navigation (continued) Provide consistent, easy-to-understand links Provide an alternative to the browser’s Back button that lets users return to their starting point

Principles of Web Design, 4th Edition4-7

Principles of Web Design, 4th Edition4-8

Principles of Web Design, 4th Edition4-9 Limiting Information Overload Create manageable information segments Control page length Use hypertext to connect facts, relationships, and concepts

Principles of Web Design, 4th Edition4-10 Building Text-Based Navigation

Principles of Web Design, 4th Edition4-11 Building 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

Principles of Web Design, 4th Edition4-12 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:

Principles of Web Design, 4th Edition4-13 Sample Text Navigation (continued) –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 (continued):

Principles of Web Design, 4th Edition4-14

Principles of Web Design, 4th Edition4-15

Principles of Web Design, 4th Edition4-16 Linking with a Text Navigation Bar The Table of Contents page must link to the other main pages of the Web site, allowing users to go directly to the pages they want Achieve this by adding a simple text- based navigation bar

Principles of Web Design, 4th Edition4-17

Principles of Web Design, 4th Edition4-18 Linking to Individual Files The Table of Contents page needs links to the individual chapter files in the Web site

Principles of Web Design, 4th Edition4-19

Principles of Web Design, 4th Edition4-20 Adding Internal Linking Add a “back to top” link that lets users return to the top of the page from many points within the file

Principles of Web Design, 4th Edition4-21

Principles of Web Design, 4th Edition4-22

Principles of Web Design, 4th Edition4-23 Adding an Internal Navigation Bar You can use additional fragment identifiers in the table of contents to add more user-focused navigation choices

Principles of Web Design, 4th Edition4-24

Principles of Web Design, 4th Edition4-25

Principles of Web Design, 4th Edition4-26 Linking to External Document Fragments You can let users jump from the table of contents to the exact topic they want within each chapter This requires adding code to both the Table of Contents page and each individual chapter page

Principles of Web Design, 4th Edition4-27

Principles of Web Design, 4th Edition4-28 Adding Page Turners You can enhance the functions of the navigation bar in the chapter pages by adding page-turner links Page turners let you move either to the previous or next page in the collection

Principles of Web Design, 4th Edition4-29

Principles of Web Design, 4th Edition4-30

Principles of Web Design, 4th Edition4-31

Principles of Web Design, 4th Edition4-32 Adding Contextual Linking

Principles of Web Design, 4th Edition4-33 Adding Contextual Linking Contextual links allow users to jump to related ideas or cross-references by clicking the word or item that interests them These are links that you can embed directly in the flow of your content by choosing the key terms and concepts you anticipate your users will want to follow

Principles of Web Design, 4th Edition4-34

Principles of Web Design, 4th Edition4-35 Using Graphics for Navigation and Linking

Principles of Web Design, 4th Edition4-36 Using Graphics for Navigation and Linking 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

Principles of Web Design, 4th Edition4-37

Principles of Web Design, 4th Edition4-38 Using Icons for Navigation One of the main problems with icons—not everyone agrees on their meaning Especially with a worldwide audience, you never can be sure exactly how your audience will interpret your iconic graphics This is why so many Web sites choose text- based links

Principles of Web Design, 4th Edition4-39

Principles of Web Design, 4th Edition4-40

Principles of Web Design, 4th Edition4-41

Principles of Web Design, 4th Edition4-42

Principles of Web Design, 4th Edition4-43 Using the alt Attribute Provide alternate text-based links in addition to graphical links Do this by including an alt attribute in the tag of the HTML code for the graphic

Principles of Web Design, 4th Edition4-44

Principles of Web Design, 4th Edition4-45

Principles of Web Design, 4th Edition4-46

Principles of Web Design, 4th Edition4-47 Summary Work from the users’ 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

Principles of Web Design, 4th Edition4-48 Summary (continued) 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