Lecture 7a: Site Structure
What You Will Learn Today
- List navigation questions users ask and provide possible
- List and explain goals of navigation design.
- Select and design an appropriate web site navigation structure.
- Use hyperlinks and common navigation elements
- Logically name and structure site
files and directories.
- Maintain the site navigation.
|Where am I?
||Site, section, subsection, page.
|Where can I go?
||Other pages in the site or other sites.
| How do I get there?
||Navigation elements on the page lead the user to other pages.
|Where have I been?
||Visited and unvisited pages.
| How do I get back to where I was?
||Navigation elements and browser features return the user to a page..
Goals of Navigation Design
- Easy to understand: a simple, organized, familiar scheme resembling other
- 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
- 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
- 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.
||Users follow a straight path through the pages, like a book. Previous and Next links
are on each page.
||Users follow a series of lessons or tasks. Each lesson or task has a linear path.
||A tree structure. This is the most common navigation structure, especially for large
||Each page is linked to every other page; usually used in a relatively small group
||A hierarchical site with local webs within each topic area.
||Users search, sort, browse, and select items from a database.
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.
- 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
- A location path provides a link to the home page and shows the current location
and depth in the hierarchy.
- A list of pages in the same section (sibling pages) can also provide context.
- 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
- 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
Other Navigation Elements
- Links, images, image maps, buttons, pull-down menus and plain text can all be used
- 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
- Browser navigation features include visited and unvisited links, Back/Forward,
Navigation Element Design
- Navigation elements should be consistently located and named and easy to
- Forward/Back and Previous/Next should also indicate the title of the page linked
- 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.
- The home page should provide an overview of the site including structure
- 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
- 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
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
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.
- 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
- 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