Download - Web Navigation Presentation
![Page 1: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/1.jpg)
Basic WebNavigation
![Page 2: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/2.jpg)
Navigation: Getting the user from A to (where you want them to) B.
![Page 3: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/3.jpg)
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
Role of navigation…
![Page 4: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/4.jpg)
• 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)
Choosing a navigation style
![Page 5: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/5.jpg)
The Structural-Browser Model
• The Family-Tree model
• Creates a clear hierarchy of content
• Collection of links advance the user to other pages
![Page 6: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/6.jpg)
Horizontal Navigation
![Page 7: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/7.jpg)
Horizontal Navigation
• Conserves the most amount of
screen space
• Makes for using drop downs for
secondary navigation
• Location most familiar for users,
we read left to right
• Does have a limit in terms of
length of navigation item
![Page 8: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/8.jpg)
Horizontal Navigation
![Page 9: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/9.jpg)
Vertical Navigation
![Page 10: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/10.jpg)
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
![Page 11: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/11.jpg)
Vertical Navigation
![Page 12: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/12.jpg)
Secondary Navigation
![Page 13: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/13.jpg)
Secondary Navigation
• Common location for displaying
B-level pages
• Moves out of the way when not
active to conserver screen space
• Don’t rely on more then 2 levels
of pop-out/drop down menus
• Design enough contrast with the
information below so the user
can clearly read the text
![Page 14: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/14.jpg)
Utility Navigation
![Page 15: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/15.jpg)
Utility Navigation
• Assistant pages
• Pages that don’t fit into a single
logical category
• Location/Language selectors
• Shopping Cart/User login info
• Pages that you want displayed on
every page
![Page 16: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/16.jpg)
Footer Links
![Page 17: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/17.jpg)
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
![Page 18: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/18.jpg)
Breadcrumb Trails
![Page 19: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/19.jpg)
Breadcrumb Trails
• Convenient for users
• Reduces clicks to return to higher- level pages
• Doesn’t usually hog screen space
• Don’t use when you don’t need to
• Don’t use as primary navigation
• Don’t use when pages have multiple categories
![Page 20: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/20.jpg)
Search Boxes
![Page 21: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/21.jpg)
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
![Page 22: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/22.jpg)
Pagination Navigation
![Page 23: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/23.jpg)
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
![Page 24: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/24.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
![Page 25: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/25.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
![Page 26: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/26.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
3. Focus their attention
![Page 27: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/27.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
3. Focus their attention
4. Organize your content
![Page 28: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/28.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
3. Focus their attention
4. Organize your content
5. Use natural descriptions
![Page 29: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/29.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for Simplicity
![Page 30: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/30.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for Simplicity
7. Embrace whitespace
![Page 31: Web Navigation Presentation](https://reader033.vdocuments.net/reader033/viewer/2022051613/54c812334a7959994b8b4642/html5/thumbnails/31.jpg)
The Golden Rules of WebNavigation.
1. Don’t make the user think
2. Don’t test user patience
3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for simplicity
7. Embrace whitespace
8. Don’t assume