3. Design (continued).

3.3 Site Structure, Navigation and Style.

So far, this methodology has guided you to the creation of a thematic map of your content - a conceptual structure that represents a clear and useful way of thinking about the subject of your site. Although the structure of the site will probably closely reflect this map, strictly speaking we have not yet decided what the structure of the site will be. After all, a topic on our map may be split over several pages, or several topics may appear on a single page. Also, we don't yet have a navigation model. Although the way of thinking about the content that is reflected in our map is likely to be the basis of our navigation model, we might decide to use some metaphor or other piece of visual rhetoric which hasn't been part of our design thinking so far. Nor do we have any ideas yet about the details of our site's visual style. We have been working at the level of ideas. Of course, we may have thought about these things, but no official decisions have yet been made.

Some questions that must be addressed at this stage include:

• How can the content be mapped onto a practical web site structure?
• What navigation model and mechanisms can give access to this structure?
• Does the navigation design enable users to move around easily?
• Is the content organised such that users can easily find what they need?
• What visual style and design elements best suits the content?
• What visual style might appeal to my audience?
• Is there a consistent look throughout the site?

3.3.1 Finalising Site Structure.

In finalising a site structure, go through the following activities:

• Revisit the principal communication objectives set out in the early stages of web design and, in the light of the content which we have collected, consider whether they can reasonably be met with a web-based communication strategy. The web hasn't displaced the book or the film, and there is no point forcing something into web form if there is a better medium available to get our message across. Are we trying to achieve something which is best done via another medium? Revise objectives if necessary.
• Perform an audit of the collected content, and assign it to the various media available for web communication: text, image, video, sound, etc. Consider any transformations and selections which must be made for effective web communication, e.g. precis of text, selection and cropping of images, editing out brief extracts of video or sound.
• Are the indentified dynamic and interactive parts of our content suitable for implementation and distribution on the web? Again, transform or select until the material is suitable.
• With the aid of the conceptual model developed in the previous web development stage, begin to partition the transformed content into possible pages. In the case of a large web, this will be a hierarchical process whereby areas of content will first be identified with groups of pages (areas of the web site), and then more detailed breakdowns will be made. The above step will be performed against the background of an evolving navigational model, also derived from the conceptual model, which is dealt with below. For both our tentative partitioning and navigation model we will be able to construct prototypes so that we can test our judgements, this will occur at the next major phase of our methodology.
• This breakdown process can be considered to have terminated when we have a set of pages, and for each page we have specified the functional content (text, images, video, sound, other media types). We will not yet have determined the layout and any auxiliary graphic design which will be used to blend the content into the identity or navigational scheme of the site. From the parallel development of the navigational scheme we will know all of the links between the pages.

Developing this finalised site structure from your thematic map of the content is the well-known process of storyboarding. Aim to produce both a high-level and low-level storyboard. As you are developing your high-level storyboard, concentrate on getting areas of content into your frames and drawing the paths between frames. The detailed look and feel isn't important in this initial stage. When you have your overall structure right, and your content mapped into a navigable web, then you can drop down to a low-level storyboard and start to specify more of the screen layout. Go through this process and keep all of your sketches, they will help in the production of your overall assignment documentation.

3.3.2 Navigation Structure

The creation of an effective navigation structure may involve the use of the many techniques developed in the study of HCI (human-computer interaction), and adapted specifically for the web under the banner of 'web usability'. These are complex areas of study to which it is not possible to do justice here, so we will restrict ourselves to a few pointers (see the green zone to follow them up):

• A key technique for designing an interface is 'task analysis' - looking at how people most naturally perform the information retrieval / content comprehension tasks associated with the content of your web. This may be a study of how they currently perform these tasks, or of how they most easily learn to perform these tasks.
• As well as a narrow focus on retrieving specific items of content, it is also appropriate to study how content is used when it is obtained ... the form in which it is most useful, and the most frequently used items. This kind of study has a more 'social' orientation, looking at the rounded context of use of a web site. Usability guidelines based on these broader contexts have been developed.
• There has been extensive research into the best ways of structuring and delivering on-line help, and these may also be relevant.

Much of HCI/usability research has been conducted around conventional 'structured information' applications; the use of 'rich media' changes the rules of the game somewhat - broader comprehension processes and ways of interacting with content are involved. The background material for this kind of study has to be gleaned from film studies, visual and aural cultural studies, the psychology of music and art, etc. (Some background reading is provided in the green zone).

For a set of practical, simple guidelines in developing a navigation model (although some of this detail is more pertinent to the specifics of page design) here is some advice from IBM's 'Ease of Use' site:

Use labels that clearly indicate the function of links. Use labels that accurately describe the destination and/or resulting action of links. Avoid using meaningless labels such as "Go" or "Click Here." Instead, enable users to scan and quickly identify links they want to take. Vision impaired users scan for links using screen readers. For this feature to be useful, however, link labels must make sense on their own, or out of context.

Provide feedback that tells users where they are in your site. Provide visual feedback that responds when users make a selection, and remains dominant until they make a new selection. Good feedback in the design of links includes visual and possibly audio changes that occur in stages.

Use navigation elements consistently. Once users see a link, they expect when they see it again it will look the same, be in the same location, and function the same. If it has changed, users may be forced to relearn the button, which will delay their completion of tasks.

Provide persistent links to the home page and to high-level site categories. Provide links to the homepage and high-level site categories on every page of your site. These persistent links enable users to easily navigate from one area of the site to another. Feature these links either in the masthead or in a left-side navigation bar because these are the areas users expect to find them.

Ensure that image maps are accessible to vision-impaired users. In general, use client-side rather than server-side image maps, and provide alt text for each hot spot. For client-side maps, HTML code defines the clickable regions of the image and the destination of links. The processing of the image map occurs on the client's system. Client-side maps provide better accessibility since they can be used with alt text. They also load and process more quickly because they require less communication with the server.

For server-side maps, the server defines the clickable regions of the image and the destination of links. They are useful for maintaining maps with links that change frequently, but screen readers for the blind cannot extract any descriptive information about server-side maps. If you must use a server-side image map because the image and its links will change frequently, provide HTML text links below or near image map that repeat the links that appear in the map.

Include a "skip to main content" link at the top of each page. At the top of each page, include an invisible "skip to main content" link that allows vision-impaired users with screen readers to avoid listening to navigation links, such as those in the top banner, that repeat on every page. This link can be invisible to sighted users by using a tiny image that is the same color as the background with alt text = "skip to main content." The link should take users to the top of the content section of the page. For instance, in these guidelines, it takes users to the heading above the first guideline on the page.

The ability to skip navigation items is particularly useful on sites that use a top banner and left-side navigation bar. On these sites, a link to the main content can save users substantial time. It also eliminates monotony and provides greater control over the interface.

Test the navigation design. To determine whether users can find information easily, test your navigation design as soon as possible. You do not necessarily need all the links to be active or all the pictures to be in place, but you will need the significant navigation mechanisms to be working and some of the content to be placed. Ask representative users to find particular information. In your testing, answer the following questions:

• Do users know how to find the information they need?
• Does your navigation design connect all related information in a sequence that makes sense to users?
• Do users know where they are in the site structure?
• Do users know how to return to points they visited previously?
• Are there any unnecessary links that clutter the navigation design?

Develop a navigation model that integrates the above advice with a strong - I hesitate to say metaphor - motif that will give the user a unified image of your site. Make sure that your navigation model makes sense in terms of accessing the storyboard structure you have developed, and then give it a well-designed graphical/textual form. Make sure that there is enough 'screen real estate' (as the US web design text books say) in the frames of your storyboard to hold your navigation design. Produce a final, well-drawn version of your storyboard.

3.3.3 Design Style.

There are two sides to getting a design style right. A creative side, that involves a knowledge of graphic design, colour design for the screen, typography, etc. There is also a disciplined side, that involves making sure that your ideas are deployed consistently throughout your web, and that all the various media that you use harmonise together. Unless you are very experienced, it helps to base your design style on established graphical or web designs, or uses a style taken from a guiding work of art (which could be a painting or set of paintings, or a photo essay, or a film, etc.).

Here is a checklist of things to think about:

• The overall visual elements and styles of your application - a set of overall guiding ideas and examples of other work you are following.
• The overall auditory elements and styles of your application - sound needs to be design too.
• The overall text elements and written portions of your application - always neglected by students, but a good, consistent writing style is very important.
• Ideas about animation and video styles - don't just assume that movement will be interesting, look to the cinema for examples of good animation and video.
• Do all of the above work together as an ensemble? Or do your chosen styles from different media clash? Try and draw them from related artistic and design traditions.

You will probably have been thinking about these issues as you developed your storyboards. Document your stylistic/aesthetic thinking and acknowledge any inspirational sources that were important to you.