Navigational Structures
Let's look now at some of the standard navigational structures of web
pages. As the name suggests, a site's navigational structure describes the
paths of navigation through the site. When thinking about these
structures, keep in mind that while some sites consist of only a single
page, most "real" web sites consist of many pages. And, in most
of the web sites of more than just a few pages, you will see a combination
of several of these structures.
Linear and Circular
- Follows pre-defined path
- Links to NEXT and PREV
- Examples: Slide Show, Tour or Presentation
Hub and Spoke
- Central navigation hub with many links
- Other pages only have 1 "back" link, hence no navigation overhead
- Example: CS110 syllabus page links to each lecture page
Clique
- Every page connects to every other page
- No special "navigation" page
- Quickest to get around in, but every page must have all N links on it
- Adequate for small sites but unwieldy for larger
sites
- Example: the top level of the CS110 site
Rooted Tree
- The structure is "self-similar". It has a root web page that has subtrees
as its branches. And, each subtree is a root with subtrees.
- Very modular, conceptually clear
- Separate subareas aren't connected
- Works well for big sites
- Examples: Yahoo!, parts of CS110 site (assignments, project, administration)
Network or Graph
- Interconnections on a somewhat ad hoc basis
- A page might be connected to a number of other pages (based on logical content of pages on site)
- Can be too random; hard for visitors to understand
- Almost necessary for a large site
- Examples: Wellesley College Web Site
Project Considerations
Your project should consist of 8-10 pages. If you already haven't done
so, you should begin discussing with your partner now how
your web pages are linked to make navigation easy and logical for
visitors. In the project design phase you are required to describe the
interconnection of all the pages on your site and provide a brief
discussion about the site's navigation structure using the terminology
learned today.
© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified:
Friday, 26-Jan-2007 11:05:40 EST
