CP303 Interaction Design
Structure and Navigation



 So far…
 

You have done an initial requirements capture exercise (D1), analysed comparable sites (D2), created personas (D3), defined key task scenarios (D4) and sketched a user object model (D5).

This week and next are really the beginning of the design phase, as opposed to the analysis stage.

The aim is to work out the content for the site and map it into the pages you intend to create (D6 & D7)
 

 Site structure and content
 

What information content does the user need at what level of detail?  Use terminology familiar to the user.
Interview users to establish the users’ terminology and how they categorise information (your user object model is the place to look for this information).

A simple and effective tool for thinking about site structure is the humble index card. Produce a card (or post it note) for each anticipated type of content for the site and use card sorting techniques to design an appropriate structure. You can do this on your own, but asking a user to help out will give you confidence that you've got it right.

Once you know what content will appear on your site, you are in a position to map the content to the site's structure, i.e. decide which content appears where on the site. Will each piece of content need a separate page or are some so closely linked thematically or otherwise that you can present them together. Where do you stand on in-page links? will you present a large amount of content on a single page, with an interactive contents list for access, or will separate pages be a better bet?
You will want to structure your information so that it is meaningful to the user.  The structure should make sense in the user's world, and will often differ from the structure used internally by the data provider. Thinking imaginatively and sensitively about these differences is what will distinguish your site from those produced by designers who simply reproduce the organisation's departmental structure or job structure in their design.
 
 

 Support navigation and access
 

Show users where they are. This can be understood at various levels. For instance, you may want to think of a way of having a menu visible from each page, with the current page highlighted in some way. Or you may be thinking bigger and be concerned with letting the user know where they are in terms of the Web - perhaps via using a running header, a corporate logo or putting the page's url in the text. Few people do this, but it's very useful for those of us who print out Web pages and then forget where they came from… Remember any page could be the first page for users reaching the site from a search engine

Use a consistent page layout. This allows your users to concentrate on content rather than working out new interface objects for each page, and also ads to the sense of place you are trying to create.

Keep ergonomic effort to a minimum
You can do this by being consistent in laying out your interaction objects, trying to make sure users can get to useful information in no more than four clicks and in minimising the need to scroll while navigating. This last is one of Jakob Nielsen's greatest bugbears. What's your opinion? You should also provide links to contents, map, index and home on each page, so that the user isn't forever climbing up and down your hierarchy,
Include navigational buttons at both the top and bottom of the page (unless you use a permanent navigation bar at the side of the page, of course).

Tell users what to expect
You have space - don't feel obliged to use concise one or two word navigation titles, which can be obscure. Spoil yourself - add an explanatory word or two. The easiest to navigate pages have a high density of self-explanatory text links. Use meaningful URLs and page titles, so that bookmarks will make sense.
You may also want to distinguish between a contents list for a page, links to other pages, and links to other sites. You could always open a new window for off-site pages, though. Don't put off-site links at top of your pages - your users will leave and never see what you had to offer.
Give sizes of files that can be downloaded, and distinguish downloads form straightforward links to other pages.
Highlight important links, perhaps by grouping them towards the top of the list or column and separating them from less commonly used links, e.g. contact us, help and so on.

More on designing content, structure and navigation:
 

You may also find points to inspire you in Nielsen's Ten Good Deeds in Web Design article. For mistakes to avoid see his 1996 (and return visit) and 1999 Alert boxes.

The Web Builder pages on navigation , information architecture and general site design. All very good, like the rest of the site.

Fascinating discussion of planning and mapping complex Web sites

Very interesting excerpt from the excellent Philip and Alex's Guide to Web Publishing.



To CP303 Home page