Education

Chapter 4Planning Site Navigation : 

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

Objectives : 

Principles of Web Design, Third Edition 2 Objectives Create usable navigation Build text-based navigation Link with a text navigation bar Add contextual linking Use graphics for navigation and linking

Creating Usable Navigation : 

Principles of Web Design, Third Edition 3 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?

Creating Usable Navigation : 

Principles of Web Design, Third Edition 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

Creating Usable Navigation : 

Principles of Web Design, Third Edition 5 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

Slide 6: 

Principles of Web Design, Third Edition 6

Slide 7: 

Principles of Web Design, Third Edition 7

Limiting Information Overload : 

Principles of Web Design, Third Edition 8 Limiting Information Overload Create manageable information segments Control page length Use hypertext to connect facts, relationships, and concepts

Building Text-Based Navigation : 

Principles of Web Design, Third Edition 9 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

Sample Text Navigation : 

Principles of Web Design, Third Edition 10 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:

Sample Text Navigation : 

Principles of Web Design, Third Edition 11 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:

Slide 12: 

Principles of Web Design, Third Edition 12

Slide 13: 

Principles of Web Design, Third Edition 13

Slide 14: 

Principles of Web Design, Third Edition 14

Slide 15: 

Principles of Web Design, Third Edition 15

Slide 16: 

Principles of Web Design, Third Edition 16

Slide 17: 

Principles of Web Design, Third Edition 17

Slide 18: 

Principles of Web Design, Third Edition 18

Slide 19: 

Principles of Web Design, Third Edition 19

Slide 20: 

Principles of Web Design, Third Edition 20

Slide 21: 

Principles of Web Design, Third Edition 21

Slide 22: 

Principles of Web Design, Third Edition 22

Slide 23: 

Principles of Web Design, Third Edition 23

Slide 24: 

Principles of Web Design, Third Edition 24

Using Graphics for Navigation and Linking : 

Principles of Web Design, Third Edition 25 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

Slide 26: 

Principles of Web Design, Third Edition 26

Slide 27: 

Principles of Web Design, Third Edition 27

Slide 28: 

Principles of Web Design, Third Edition 28

Slide 29: 

Principles of Web Design, Third Edition 29

Slide 30: 

Principles of Web Design, Third Edition 30

Slide 31: 

Principles of Web Design, Third Edition 31

Slide 32: 

Principles of Web Design, Third Edition 32

Slide 33: 

Principles of Web Design, Third Edition 33

Summary : 

Principles of Web Design, Third Edition 34 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

Summary : 

Principles of Web Design, Third Edition 35 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