1 / 21

Navigation and Menus

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

lindley
Download Presentation

Navigation and Menus

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Navigation and Menus Hillary Funk

  2. Agenda • Overview of Navigation and Menus • Types of Navigation • What good navigation includes • Navigation Stress Test • Questions? • References

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

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

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

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

  7. Global: Site-Wide

  8. Global

  9. Local: Same navigation within particular section

  10. Contextual: Links to something specific

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

  12. Sitemaps Sitemaps typically provide the top few levels of the information hierarchy and works best for websites that use a hierarchy for organization.

  13. Indexes Indexes, similar to the index you find in the back of a book, present keywords or phrases alphabetically.

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

  15. Search Search 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.

  16. Breadcrumbs Breadcrumbs 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

  17. Advanced Navigation Personalization: Amazon Customization: Facebook Visualization: Tag Clouds Social Navigation: "Most Read" lists

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

  19. Navigation Stress Test • Pick a low-level page • 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?

  20. Questions?

  21. 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/

More Related