Design Theory Site Design: Navigation Page Design MultiMedia Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

Navigation in webspace is a crucial topic in web design. Hypermedia can be liberating, allowing the user to plot their own course through a body of information, or it can be disorienting, when users get lost in hyperspace. Giving users clear signposts about where they are in your site (orientation) and paying attention to structure can make a site much easier to traverse. Structure Lai and Waugh [4] conducted research on types of hypertext menu designs and their effect on search tasks. Their design featured these types of menu structures: Option 1 Option 2 Option 3   menus based solely on hierarchical structures The Home Page menu for this site is an example of a hierarchical structure. Each of the menu items is a main topic in the site, with the exception of the Table of Contents, which is an orienting device.   menus which featured a mixture of hierarchical and embedded structures (a hierarchical overview with embedded links on the pages for elaboration) Here's a link to a page which uses a mixture of hierarchical menus and embedded links: http://www.useit.com/   a system of embedded menus (which consisted entirely of contextual links embedded in text) Here's a link to an article which is composed almost completely of embedded menus: http://www.useit.com/papers/heuristic/ Lai and Waugh Conclusions: network structured documents (Options 2 & 3) could improve search accuracy, though not efficiency the search task affected the type of menu used, with hierarchical menus (Option 1) working better for straightforward tasks embedded menus (Options 2 & 3) may be used when search tasks are mostly complex and not fully known and the designers wish to encourage in-depth searching behavior" (p. 46-47) Lynch and Horton [5] also recommend a hierarchical structure since "web sites should always be organized as offshoots of a single home page." Orientation Orientation information helps the user to identify where he(she) is in the site. It is equivalent to page numbers and chapter headings in a book. Orientation information is easiest to use if it is located in the same place on every page. It is crucial in web design since users may jump into your site at any level. Lynch and Horton [5] recommend that the following items should be present on every page of a site to aid in orientation: the title the author the author's institutional affiliations the revision date links on each page which will move the user to the next or previous page of a sequence a link to the local home page Nielsen [6] suggests these ways a designer can aid their users with navigation: include a site identifier on every page make it easy to go to landmark pages such as the home page or the search page emphasize the structure of your site by making each page show which subsite it belongs to do not change the default colors for links and visited links keep underlines intact for monochrome viewers draw a sitemap or use some other orienting devices to illustrate the relationships between main areas of your site Orientation devices which can keep a user from becoming lost include: the alphabetized site index - Rosenfeld [7] graphical browsers overview diagrams web views paths trails guided tours and tabletops history lists timestamps footprints bookmarks backtracks embedded menus fisheye views roam and zoom techniques - Balasubramanian [1] Shneiderman [8] suggests four different techniques to convey a site's organization: use an executive summary which gives an overview of the site and contains links to all the major concepts adopt a hierarchical approach which links to major categories only design the home page as a detailed table of contents provide a search option as a first step A word of warning: using search engines may not be such a good idea - recent research on within-site searching found that "users were 50 percent more likely to find what they were looking for if they never hit the search button" ([2] p.1). Breadth vs Depth in Menus When designing navigation throughout a site, the research suggests that several large menus work better than a large number of menus with smaller amounts of links. Research which studies breadth vs depth in menus suggests that "breadth should be preferred over depth...when the depth goes to four or five [levels], there is a good chance of users becoming lost or disoriented ([8], p. 249). Ways of grouping menus: create groups of logically similar items form groups that cover all possibilities make sure the items are non overlapping - use familiar terminology, but ensure that items are distinct from one another Based on web research conducted by Spool [9], Instone [3] suggests: The best-rated sites coupled their navigation and content tightly. If you doubled the amount of content, the navigation pages would have doubled in size. The navigational links tended to be textual, and descriptive, so that users knew what to expect even before they jumped. Conclusions  Research indicates these guidelines: Structure Hierarchical menus are useful for straightforward searching tasks, but the additional clarification available from embedded, contextual menus will aid complex search tasks. Therefore, designing menus to be more verbose, or adding information in the form of textual indexes with clarification will help users to be more successful in finding what they are looking for. Orientation It is very important to include site information on every page of a site. It is also essential to include links to the local home page on every page to accommodate users who jump into your site. Links to other pages in a sequence are also useful. Categorization of information into menus is a very difficult process as well as one which needs careful attention. Menu items need to be unique, non-overlapping and familiar. It is better, when designing a structure, to have breadth over depth (fewer long menus as opposed to many shorter menus). Orienting devices such as textual indexes, guided tours or overview diagrams are useful to help users from becoming disoriented in a site. Navigation information is easiest to use if located in a similar location on every page of a site. This lowers cognitive load since the user knows where things are located from page to page. [1] Balasubramanian, V. (1993) A systematic approach to user interface design for a hypertext framework. [Online]. Available: http://www.isg.sfu.ca/~duchier/misc/hypertext_review/chapter4.html [2] Festa, P. (1998). Web design not what you pay for. [Online]. Available: http://www.news.com/News/Item/0,4,21150,00.html [3] Instone, K. (1997). A case for conducting user tests. [Online]. Available: http://www.webreview.com/1997/07_25/designers/07_25_97_2.shtml [4] Lai, Y, & Waugh, M. L. (1995). Effects of three different hypertextual menu designs on various information searching activities. Journal of Multimedia and Hypermedia, 4 (1), 25-52. [5] Lynch, P. & Horton, S. (1997). Web style manual, 2nd ed. Yale Center for Advanced Instructional Media. [Online]. Available: http://info.med.yale.edu/caim/manual/contents.html [6] Nielsen, J. (Nov. 1997). The tyranny of the page: Continued lack of decent navigation support in version 4 browsers. [Online]. Available: http://www.useit.com/alertbox/9711a.html [7] Rosenfeld, L. (1997). Organizing your site from A to Z. [Online]. Available: http://www.webreview.com/1997/10_03/strategists/10_03_97_4.shtml [8] Shneiderman, B. (1998). Designing the user interface: Strategies for effective human-computer interaction (3rd ed.) . Reading, MA: Addison-Wesley Publishing. [9] Spool, J. Web Site Usability: A Designer's Guide. [Online]. Available: http://world.std.com/~uieweb/bookexpt.htm Site Design:[Hypermedia Basics] [Metaphor] [Web Site Categorization] [Navigation] [Site Design Testing] Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]