Developing your site's information architecture
Information architecture (IA) or site structure is the foundation for great web design. Usability is the prime consideration in the creation of a site's IA. If funds are available in your area, it would be worthwhile conducting usability testing to find out whether your current site is easily navigable. If not, we have some web usability information available. Developing the IA is the first thing you should do when designing a site. Steps in developing your IA are
- Define goals and strategy
- what is the purpose of your site? - Identify your users/target audience
- who do you want to reach (target audience)?
- what information do they want (user needs)? - Define site structure and
navigation
- how do you create a structure that will meet user needs?
- how many layers (levels) should the site structure have?
- what is the total number of pages? - Review possible site content
- what copy and graphics are available?
- what needs to be created?
- who will create additional content?
Site structure
The way your site is structured is crucial to users finding information. Websites are typically structured like a tree. Starting from the home page, they branch out in sections and subsections.
How to develop your site structure
- Gather information. Gather as much as you can even if it's more than you need. What isn't necessary can be discarded later
- Sort/organise the information. Most website information is sorted by hierarchy, moving from a general overview (the home page) down through specific categories or sections. Segments (chunks) of information should be ranked in importance and organised by the logical interrelations among units
- Find a balance that communicates your goals. Make sure that all information is equally balanced. Weigh sections against each other. Sift through the information to make sure it is consistent with the site's goals and prune accordingly. If one section appears to have more information than others, divide this into subsections.
Try to avoid too many layers of index (contents) pages as this will confuse the user. The site diagram below illustrates the possible layout of indexes on a smallish website. There is one top (level 1) heading and 7 submenu (level 2) headings.
Further information regarding site structure
Information architecture and the corporate web
In the process of determining your information architecture, look very thoroughly at the University corporate website to get an idea of how you might structure your own information. Avoid duplicating information on your own pages; instead link directly to the relevant page outside your area.
A typical School format
A suggested IA for a typical school website may look something like this
| Banner with School name in left hand corner
Graphic with grid at right hand corner |
| Standard toolbar |
| Standard site wide navigation links |
| About (the School) Prospective students Current students Research Staff News and events Contact the School |
Header 1
Body text/image
|
| Standard footer |
Whatever your area within UniSA, some or most of these links will need to be included in your site's IA for the user to find crucial information easily. If in doubt about your structure, search for ideas by visiting websites of other universities with a similar service. As a new user on another site, you will quickly find out what works and what doesn't.
Contact information
The footer for the new templates has a Contact UniSA link. Areas within UniSA can put a contact link on the navigation menu. This should be more specific than 'Contact us', perhaps instead 'Contact the School' or 'Contact the Research Centre' to avoid confusion.
Navigation
Users will find your site easier to navigate if it has
- consistent page layout
- consistent positioning of navigation elements (icons, text) and banner graphics
- consistent terminology, particularly between the title of a link and the title of the page the link connects to
- a logical tab (keyboard) order through links to increase accessibility
No matter where the navigation is located, it should appear in the same place on all the site's pages, to avoid confusing the user.
Navigation and the new corporate web
The templates use a left hand page navigation menu. Other navigation features of the templates include the UniSA icon in the banner, the grey toolbar and five pillars (headings). These features always appear in the same place on the webpage.
The menu editor navigation tool creates the left menu representing your site's information architecture. The left menu template (leftmenu.asp) shows the navigation menu in the left side of the webpage on the browser. For accessibility purposes, the templates enable the user to navigate in a logical order using the keyboard as well as a mouse pointing device. See Building your navigation menu for the 'hands on' of how to construct your site's navigation.