navigation and menus
DESCRIPTION
Navigation and Menus. Hillary Funk. Agenda. Overview of Navigation and Menus Types of Navigation What good navigation includes Navigation Stress Test Questions? References. What is Navigation?. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/1.jpg)
Navigation and Menus
Hillary Funk
![Page 2: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/2.jpg)
Agenda Overview of Navigation and Menus Types of Navigation What good navigation includes Navigation Stress Test Questions? References
![Page 3: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/3.jpg)
What is Navigation?
Navigation is the process of monitoring and controlling the movement of a craft or vehicle from one place to another.
Web navigation refers to the process of traversing a network of web resources, and the user interface that is used to do so. A central theme in web design is the development of a web navigation interface that maximizes usability.
from Wikipedia
![Page 4: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/4.jpg)
What are Menus?"A menu is defined as a set of options [labels] displayed on the screen, where the selection and execution of one (or more) of the options results in a change in the state of the interface."
from Behaviour & Information Technology
The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site.
from Smashing Magazine
![Page 5: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/5.jpg)
Common Menu Labels Main, Main Page, Home Page Search, Find Site Map, Contents, Index Contact, Contact Us About, About Us Help, FAQ News, News & Events
![Page 6: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/6.jpg)
Types of Navigation
Global Local Contextual
Can also be thought of in “tiers”.
Embedded navigation systems are part of most sites you visit. They must work together to help users navigate the site.
![Page 7: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/7.jpg)
Global: Site-Wide
![Page 8: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/8.jpg)
Global
![Page 9: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/9.jpg)
Local: Same navigation within particular section
![Page 10: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/10.jpg)
Contextual: Links to something specific
![Page 11: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/11.jpg)
Other tools that help the user navigate
Sitemaps Indexes Guides Search Breadcrumbs
Supplemental Navigation Systems that are external to the basic hierarchy of a website.
![Page 12: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/12.jpg)
SitemapsSitemaps typically provide the top few levels of the information hierarchy and works best for websites that use a hierarchy for organization.
![Page 13: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/13.jpg)
IndexesIndexes, similar to the index you find in the back of a book, present keywords or phrases alphabetically.
![Page 14: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/14.jpg)
Guides
Take on many forms, including guided tours, tutorials, and micro-portals focused around a specific audience, topic, or task. Guides are always a supplement to existing navigation.
Examples: Facebook, Build your Vehicle widgets
![Page 15: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/15.jpg)
SearchSearch puts users in the driver's seat allowing them to use their own terms to find what they are looking for. But it can also cause problems because everyone uses different words for the same thing.
![Page 16: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/16.jpg)
BreadcrumbsBreadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.
from Wikipedia
![Page 17: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/17.jpg)
Advanced NavigationPersonalization: Amazon
Customization: Facebook
Visualization: Tag Clouds
Social Navigation: "Most Read" lists
![Page 18: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/18.jpg)
What good navigation includes Easy to use Intuitive Users should be able to know where they are within the site at
all times Aid users in finding the information they seek as quickly as
possible
![Page 19: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/19.jpg)
Navigation Stress Test1. Pick a low-level page2. Answer these questions:
What is this page about? What site is this? What are the major sections of this site? What major section is this page in? What is up one level from here? How do I get to the home page of this site? How do I get to the top of this section of the site? How might you get to this page from the site’s home page?
![Page 20: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/20.jpg)
Questions?
![Page 21: Navigation and Menus](https://reader036.vdocuments.mx/reader036/viewer/2022062410/56815e5e550346895dccd6eb/html5/thumbnails/21.jpg)
References Information Architecture for the World Wide Web
Seeking information online: the influence of menu type, navigation path complexity and spatial ability on information gathering tasks from Behaviour & Information Technology
www.wikipedia.org
instone.org/navstress
http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/