Basic WebNavigation
Navigation:Getting the user from A to(where you want them to) B.
Role of navigation…   For users:                      1. Find stuff they want                      2. Get an overview of w...
Choosing a navigation style• Why the navigation is there (its role)• Who will be using it• Where they want to go• What YOU...
The Structural-Browser Model• The Family-Tree model• Creates a clear hierarchy of content• Collection of links advance the...
Horizontal Navigation
Horizontal Navigation     • Conserves the most amount of     • Location most familiar for users,       screen space       ...
Horizontal Navigation
Vertical Navigation
Vertical Navigation  • Good for sites with a lot of    main navigation items  • Supports multiple types of    secondary na...
Vertical Navigation
Secondary Navigation
Secondary Navigation    • Common location for displaying     • Don’t rely on more then 2 levels      B-level pages        ...
Utility Navigation
Utility Navigation  • Assistant pages                      • Shopping Cart/User login info  • Pages that don’t fit into a ...
Footer Links
Footer Links  • Provides a place for important    information away from other content  • Acts as a visual “End” to your pa...
Breadcrumb Trails
Breadcrumb Trails   • Convenient for users                  • Don’t use when you don’t need to   • Reduces clicks to retur...
Search Boxes
Search Boxes  • Not every website needs a search box  • The box must be clearly visible, quickly    recognizable and easy ...
Pagination Navigation
Pagination Navigation  • Provide large clickable areas  • Identify the current page  • Space out page links  • Provide Pre...
The Golden     1. Don’t make the user thinkRules of WebNavigation.
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.    3. Focus their attention
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.    3. Focus their attenti...
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.    3. Focus their attenti...
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.    3. Focus their attenti...
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.    3. Focus their attenti...
The Golden     1. Don’t make the user thinkRules of Web   2. Don’t test user patienceNavigation.    3. Focus their attenti...
Upcoming SlideShare
Loading in...5
×

Web Navigation Presentation

979

Published on

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

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
979
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Navigation Presentation

  1. 1. Basic WebNavigation
  2. 2. Navigation:Getting the user from A to(where you want them to) B.
  3. 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. 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. 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. 6. Horizontal Navigation
  7. 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. 8. Horizontal Navigation
  9. 9. Vertical Navigation
  10. 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. 11. Vertical Navigation
  12. 12. Secondary Navigation
  13. 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. 14. Utility Navigation
  15. 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. 16. Footer Links
  17. 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. 18. Breadcrumb Trails
  19. 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. 20. Search Boxes
  21. 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. 22. Pagination Navigation
  23. 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. 24. The Golden 1. Don’t make the user thinkRules of WebNavigation.
  25. 25. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation.
  26. 26. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation. 3. Focus their attention
  27. 27. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation. 3. Focus their attention 4. Organize your content
  28. 28. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions
  29. 29. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for Simplicity
  30. 30. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for Simplicity 7. Embrace whitespace
  31. 31. The Golden 1. Don’t make the user thinkRules of Web 2. Don’t test user patienceNavigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for simplicity 7. Embrace whitespace 8. Don’t assume
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×