1. Chapter 4 Planning Site Navigation

2. Objectives Understand navigation principles
Principles of Web Design
Chapter 4
Objectives
Understand navigation principles
Build navigation schemes that meet the user’s needs
Provide location information
use hypertext linking creatively
Use graphics for navigation and linking

3. Creating Usable Navigation
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?

4. Creating Usable Navigation
Principles of Web Design
Chapter 4
Creating Usable Navigation
To answer these questions, provide the following information:
Let the user know what page they are on, and what type of content they are viewing.
Let the user know where they are in relation to the rest of the site.

5. Creating Usable Navigation
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

6. Principles of Web Design
Chapter 4

7. Limit Information Overload
Principles of Web Design
Chapter 4
Limit Information Overload
Create manageable information segments
Control page length
Use hypertext to connect facts, relationships and concepts

8. Principles of Web Design
Chapter 4

9. Using Text-Based Navigation
Principles of Web Design
Chapter 4
Using Text-Based Navigation
Text-based linking often is 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

10. Principles of Web Design
Chapter 4

11. Sample Text Navigation
Principles of Web Design
Chapter 4
Sample Text Navigation
The following screens demonstrate a variety of text-based navigation options:
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 topic within each chapter

12. Sample Text Navigation
Principles of Web Design
Chapter 4
Sample Text Navigation
The following screens demonstrate a variety of text-based navigation options:
Between previous and next chapters
Within chapter pages to each topic
To related information by using contextual links

13. Principles of Web Design
Chapter 4

14. Principles of Web Design
Chapter 4

15. Principles of Web Design
Chapter 4

16. Principles of Web Design
Chapter 4

17. Principles of Web Design
Chapter 4

18. Principles of Web Design
Chapter 4

19. Principles of Web Design
Chapter 4

20. Principles of Web Design
Chapter 4

21. Principles of Web Design
Chapter 4

22. Principles of Web Design
Chapter 4

23. Principles of Web Design
Chapter 4

24. Principles of Web Design
Chapter 4

25. Principles of Web Design
Chapter 4

26. Principles of Web Design
Chapter 4

27. Graphics for Navigation
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

28. Principles of Web Design
Chapter 4

29. Principles of Web Design
Chapter 4

30. Principles of Web Design
Chapter 4

31. Principles of Web Design
Chapter 4

32. Principles of Web Design
Chapter 4

33. Principles of Web Design
Chapter 4

34. Principles of Web Design
Chapter 4

35. Principles of Web Design
Chapter 4

36. Principles of Web Design
Chapter 4

37. Principles of Web Design
Chapter 4

38. 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.

39. 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.