Section: 0.3: Website Structure
Organising your pages into site sections
To help your visitors locate what they came to find we now need to arrange your pages logically into various sections and then into sub-sections. This will enable us to present a clearly defined structure that follows a logical order and is easy to use. Click the link below to display the new improved page list.
As you can see the website structure is starting to take some shape, it is no longer just a long list of potential pages. Some pages have been combined and others organised into a logical order of primary sections and sub-sections. We can now use the website structure as the building blocks for our next task, preparing a graphical website map.
Graphical website map or site diagram
Whatever the size of your website its always a good idea to develop a graphical website map. A website map is a set of simple diagrams that describes the information architecture and the interaction of pages on your site. A website map is a valuable tool for clients and web designers alike as it helps define the sites structure in a visual context.
Fig: 0.1. Example of a very simple website map.
Apply a user-led approach
Its a good idea to initially draw up your website map with pencil and paper. When creating the map always apply a user-led approach; try to anticipate what the user wants and then layout the page structure in an easy to follow way. Use arrows or lines to show how the pages will be hyper-linked together. It's also a good idea at this stage to give each page a title; the title must reflect the content of the particular page. This is important as titles are often read by assistive technologies like screen reading software and search engines (like Google) use them to index your site.
The website map helped to arrange, link and associate the individual pages that make up your website. We have now done enough groundwork to move on to the next phase, creating an easy to use navigation system.
Site navigation
Navigation often consists of a set of graphical buttons or interactive text links. Its important to locate the primary navigation and any other important information above the fold making sure it's clearly displayed. See fig 0.2. As a rule of thumb, the primary links should not exceed seven. Sub navigation links are often seen just below the primary navigation or placed in the sidebar.
Fig: 0.2. Above The Fold: The section of a web page that is visible without scrolling.
It's also essential that the navigation system is consistent and arranged in a similar layout throughout your site. A consistent navigation system will enable your visitors to find your products or services efficiently and works best when it's clearly defined, grabs attention and attracts the users eye.
Naming your navigation links
When it comes to naming your individual sections try to trim them down to one or two words. For example imagine a set of primary navigation links like this:
Perhaps, the titles are a bit long; it might be better if they were written in a more concise way, i.e
Next: Website Content.