Internal company presentation on identifying the basic types of web navigation.

1. Basic Web
Navigation

2. Navigation:
Getting the user from A to
(where you want them to) B.

3. Role of navigation… For users:
1. Find stuff they want
2. Get an overview of what’s
on the site
3. See where they are
4. See where they can go
For site owners:
1. Drive people to action points
2. Cross-sell services or highlight
additional information
3. Show what is/isn’t available
4. Be found on Google

4. Choosing a navigation style
• Why the navigation is there (its role)
• Who will be using it
• Where they want to go
• What YOU want them to do
• How you will manage it (CMS etc)

5. The Structural-Browser Model
• The Family-Tree model
• Creates a clear hierarchy of content
• Collection of links advance the user to other pages

6. Horizontal Navigation

7. Horizontal Navigation
• Conserves the most amount of • Location most familiar for users,
screen space we read left to right
• Makes for using drop downs for • Does have a limit in terms of
secondary navigation length of navigation item

8. Horizontal Navigation

9. Vertical Navigation

10. Vertical Navigation
• Good for sites with a lot of
main navigation items
• Supports multiple types of
secondary navigation
• Can act as a page design
element
• Normally takes up more space
then horizontal navigation

11. Vertical Navigation

12. Secondary Navigation

13. Secondary Navigation
• Common location for displaying • Don’t rely on more then 2 levels
B-level pages of pop-out/drop down menus
• Moves out of the way when not • Design enough contrast with the
active to conserver screen space information below so the user
can clearly read the text

14. Utility Navigation

15. Utility Navigation
• Assistant pages • Shopping Cart/User login info
• Pages that don’t fit into a single • Pages that you want displayed on
logical category every page
• Location/Language selectors

16. Footer Links

17. Footer Links
• Provides a place for important
information away from other content
• Acts as a visual “End” to your page
• Allows users to access pages without
scrolling back to the top
• Can be styled as multiple columns

18. Breadcrumb Trails

19. Breadcrumb Trails
• Convenient for users • Don’t use when you don’t need to
• Reduces clicks to return to higher- • Don’t use as primary navigation
level pages
• Don’t use when pages have multiple
• Doesn’t usually hog screen space categories

20. Search Boxes

21. Search Boxes
• Not every website needs a search box
• The box must be clearly visible, quickly
recognizable and easy to use
• A search box should be a box.
• A search box should be simple
• Don’t make the input field too short
• Don’t making the submit button
too small

22. Pagination Navigation

23. Pagination Navigation
• Provide large clickable areas
• Identify the current page
• Space out page links
• Provide Previous and Next links
• Use First and Last links
• Put First and Last links on the outside
• Give the user a sense of volume

24. The Golden 1. Don’t make the user think
Rules of Web
Navigation.

25. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation.

26. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation. 3. Focus their attention

27. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation. 3. Focus their attention
4. Organize your content

28. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation. 3. Focus their attention
4. Organize your content
5. Use natural descriptions

29. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation. 3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for Simplicity

30. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation. 3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for Simplicity
7. Embrace whitespace

31. The Golden 1. Don’t make the user think
Rules of Web 2. Don’t test user patience
Navigation. 3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for simplicity
7. Embrace whitespace
8. Don’t assume