Lecture 7a: Site Structure and Navigation

What You Will Learn Today

1. List navigation questions users ask and provide possible answers.
2. List and explain goals of navigation design.
3. Select and design an appropriate web site navigation structure.
4. Use hyperlinks and common navigation elements and pages.
5. Logically name and structure site files and directories.
6. Maintain the site navigation.

Navigation Questions

Goals of Navigation Design

• Easy to understand: a simple, organized, familiar scheme resembling other web sites
• Easy to use: fast and simple access to information the user wants (usability/accessibility)
  • Provide multiple redundant paths to information (more than one way to get there).
• Relevant: organized from the user's perspective; options the user is likely to be looking for
  • Avoid information overload: too much information; too many options; unrelated information
• Easy to maintain: not prone to broken links and incorrect, outdated content
• LCD rule: Design for the Lowest Common Denominator.
  • Maximize accessibility for all users and maintainability on all platforms.

Navigation Structures

Which structure would you use for an international corporation? An educational site? An on-line shop? Web-based e-mail?

Navigation Structure Design

• Navigation structure of customer-focused sites should resemble the user's view of the content.
  • Only internal sites should resemble the structure of the organization.
  • Hierarchical navigation that resembles the directory structure is useful.
• Do not make navigation hierarchy too deep.
  • Better to put more items on each menu than have many submenus.
  • All pages should be at most a few clicks from the home page.
  • Frequently accessed pages and features should be more easily accessible.
• Sketch several possible navigation structures for your site.
  • Analyze and sketch the navigation schemes of other similar sites to get ideas.
  • List advantages and disadvantages of each possibility.
  • Choose the navigation design that best meets site goals and user needs.

Where Am I?

• Every page should identify its site, section and page title.
  • Use both the title tag and a text or graphic banner near the top of the page.
  • The organization name and logo should appear on each page, usually in the upper left corner.
• A location path provides a link to the home page and shows the current location and depth in the hierarchy.
  • You are here: Home > Section > Subsection > Document
• A list of pages in the same section (sibling pages) can also provide context.

Hypertext Links

• Structural links point to pages in the the site structure or hierarchy.
  • e.g. Home, Contents, Index, Search, Previous, Next, Top, Up
• Embedded or contextual links in the body of the content itself allow the user to quickly jump to related information.
  • Within a hypertext glossary or encyclopedia article, link to all terms that are defined and explained elsewhere.
  • Use contextual links freely to allow and encourage non-linear, non-hierarchical browsing.
  • Link text should describe the content of the linked pages. Avoid click here.
• Associative links point to pages that are similar to the current page.
  • e.g. Related Links, See Also
• Provide a link to the home page on every page.
  • Not all users arrive at a site through the home page, and it is easy to get lost.
• Do not link to the current page, since the user might be confused and think the link is to a different page.
  • There should be no Home button/link on the home page.
  • Within-page links cause confusion and should be used sparingly.
• Visited and unvisited links should be clearly distinguishable e.g. through link colors.

Other Navigation Elements

• Links, images, image maps, buttons, pull-down menus and plain text can all be used for navigation.
• A navigation bar is a group of navigation elements. It can be vertical or horizontal, textual or graphical.
• A navigation frame is a window within a page used to separate navigation from content.
• Browser navigation features include visited and unvisited links, Back/Forward, Bookmarks, History.

Navigation Element Design

• Navigation elements should be consistently located and named and easy to understand.
  • Forward/Back and Previous/Next should also indicate the title of the page linked to.
• On most pages, navigation should be secondary to the content and not take up too much space.
  • Exceptions include navigation pages like the home page and section main pages.
• Keep navigational graphics simple.
  • Use alt text and/or redundant text links for accessibility.
  • Avoid 3D metaphors like a city map to show shops.
• Rollover text and link titles can be used to explain a link.
  • Rollover text should not replace the URL in the status bar.
• Pull-down menus can be used to save space.
  • But they are less usable than a list of links. They hide the options and do not show visited options.

Navigation Pages

• The home page should provide an overview of the site including structure and function.
  • The home page is often named default.html or index.html.
  • Servers can be configured to use one of these pages if only the domain and directory are specified.
• A site outline or table of contents uses indentation to show the hierarchy of a site and works well even for large sites.
• A site map is more general than a site outline and can use graphics to better show the structure of a non-hierarchical site.
• A search box or page helps users search for pages containing keywords.
• An index helps users search for topics alphabetically from A to Z.
• Do not add a splash screen page before the home page. It just slows down the user.

File and Directory Naming

• Users sometimes navigate by typing URLs.
• Names of files and directories should be short, simple, logical, English words, easy to guess and remember.
• Avoid file and directory names longer than 8 characters. Avoid extensions longer than 3 characters.
• Avoid using uppercase letters, spaces and special characters in file and directory names.

File Location and Directory Structure

• Use directories to group large numbers of related files.
  • Do not make subdirectories too deep. One or two levels is enough for most small sites (under 1000 pages).
  • If many images are used on more than one page, put them in a separate shared image directory. Avoid redundant copies.
• Use relative links if your site may be moved to any server (e.g. local hard disk, Intranet or Internet)
  • But absolute links will work even if the user saves the page.

Navigation Maintenance

• Plan the file and directory structure to be scaleable and flexible so it can grow and change with the site.
• Minimize renaming and moving files and directories.
  • It breaks internal and external links, bookmarks and user expectations.
  • If you must move a page or site, put a page in the old place with a link indicating where it has moved.
  • Servers can be configured to automatically redirect old URLs to new URLs.
• Avoid under construction pages. Don't release a partly finished page or site.
• Frequently check for broken links manually and with link checking software.
• A what's new page directs users to new content and can serve as a record of changes.
• Provide an indication of the date when each page was last modified.
  • Remember to update this date, or automate it using a scripting language.

To Do After Class

• Your web site project proposal and lab 6 are due Friday. Project 3 and lab 7 are due next Friday.
• References: Nielsen Ch. 4, Sklar Unit C, D