Lesson 8: Navigation

Overview  The manner in which you display your web site’s navigation is crucial to its overall usability.  Users need a clear path to the information that they seek.  This path should minimize both the time and complexity of locating relevant information.  Metaphors, navigation bars, and text links are among the features that facilitate navigation.

Metaphors  Using visual metaphors may assist you in organizing navigation options.  For example, a hotel may arrange its content options around the image of an actual check-in desk.  However, if a visual metaphor does not suit your web site, do not attempt to use one.  Weak metaphors are unlikely to assist users in navigation. Example of a site metaphor.

Navigation Bars  Given the proliferation of navigation bars across software programs and operating systems, using a navigation bar on your site presents the user with a familiar tool.  Horizontal navigation bars can logically organize content and occupy very little screen space  They can be expanded through drop- down menus that further help the user orient the site.  Vertical navigation bars offer the same benefits, but consume horizontal space that could be instead used for body text. Ebay.com & FoxNews.com Examples of vertical and horizontal navigation bars.

Text Links  Text links may use words, phrases, or sentences to direct a user to another section or page of the site.  Text links may appear almost anywhere on a site, including:  Side bars  Embedded within body text  As “breadcrumbs” tracing the user’s path  Headings  Progress bars  Expandable outlines drudgereport.com Text links are used throughout the web site to direct users to relevant content. amazon.com A progress bar allows users to move through search results at varied intervals. newegg.com Breadcrumbs present users with the path they have taken to reach a page.

Alternative Solutions If a user cannot find relevant information by using a navigation bar, text link, or icon (see Lesson 9), some alternative navigation techniques include: Site Maps  Allow users to understand the scope and structure of the site  Can be presented in both graphical and text forms Indexes  Like indexes found in books, site indexes provide users with an alphabetical listing of the site’s topics neu.edu A site index provides an alphabetical listing of the site’s topics.

Alternative Solutions Table of Contents  Similar to a site map, a table of contents provides users with a list of site topics  The topics are ordered by the user’s anticipated path through the site and grouped by hierarchical relationships apple.com A site map allows users to see how content is organized. plcs.net A table of contents orders the site’s topics in a logical manner.

Alternative Solutions Search  If your site is very large, a search function will allow users to quickly find what they are looking for  However, search functions are not entirely foolproof  Users may search for terms that are either too broad or too restricted  As a result, avoid making a search function your central navigation method sephora.com Example of a simple search box. priceline.com Example of a parametic search.