Creating Structure
Site Maps
Site maps are visual representations of a web site structure. The web site for the Division of Adminstration and Finance at California State University, Long Beach resembles the organizational chart.
It helps the design team understand where content should go. The site map lays out a standard framework for developing the entire site. Once the team understands the standards for construction, the site can be expanded or edited with the site map as the model.
Task Flow
A task flow diagram shows the potential paths of travel a user can take through a web site.
Basic elements of a site map and task flow include:
Page
- Pages should have labels and numbers. The numbers reflect the order of travel through a certain task.
Pagestack
-
Pagestacks are pages that are all similar in content. The user does not leave the context of the pagestack. An example of a pagestack would be the group of gallery thumbnail images below. When the user clicks a thumbnail she can navigate from the resulting page to the next or previous page without leaving the context of the gallery. To exit the gallery and return to the index page (the page you are reading now) the user closes the pagestack.
Decision Point
- The Decision Point icon is used to show a point at which the user may chose between one option or another.
Connectors and Arrows
- Connectors and arrows show direction of movement through a site. For example a link from the home page to the About Us page would use a line and arrow.
- Connectors with and crossbar through them indicate that movement backwards is not possible. An instance of that would be if the user changed a setting that in turn changed the home page. The home page as the user knew it when he entered the site would no longer be available from the path he just followed.
Conditions
- Conditions are dependant on an action or event and are indicated by a dotted line. A dotted line can be used as the border on a page, or as a box around a whole section of pages.