Website design 104

Mapping the website structure

As rewarding as it can be to start seeing results in a web browser, there is no point whatsoever in creating a site if the end result simply doesn't work for the user. This stage is one of the most important in the web design process and essential to a sites usability. Usability is often talked about when discussing site design but too often neglected when put into practice. Jacob Nielsen is the webs foremost authority on website usability. His website can be found at www.useit.com.

The aim here is to provide an easy to use, succinct path for your site visitors to follow. You want them to access content using the fewest possible mouse clicks - no more than three clicks in fact. This is known as the 'three click rule' which states that any page within a site should be no more than three clicks from the home page. While this rule is not set in stone it should always be kept in mind and will ultimately lead to a successful navigation structure.

Let's say that in our example above we have established that the majority of site visitors will be looking to 1) find the best food for their pet 2) order the food and 3) find information on best feeding practices. A small minority of visitors will be looking for corporate information such as share price and company history. In this case the homepage of your site might contain a small amount of general information, one main entry point into the pet food area and one less prominent option to company information. Best practice is to include contact information (or at least a link to contact information) on every page.

Having gone through the process of discovering and prioritising the sites objectives you should now be able to map the structure of the site with no difficulty at all. If possible use a product such as Microsoft Visio to flow chart the site, starting at the home page, flowing down through your areas of primary importance (pet foods for example) into your areas of secondary importance (pet food choices such as cat or dog food) and through to your areas of specific interest (food for long haired black and white siberian tabby cats). If you don't have access to flow charting software resort to a pencil equipped with eraser (because you will probably need to correct things) and paper (either large sheets or A4 and sticky tape because you will probably be surprised at how complex the flow chart for even a relatively simple website can be).

Try to map the site as comprehensively as possible so if, for example, you want visitors to have access to a contact page from a product information page this is illustrated in your flow chart. This will help later when creating your pages as you will have a visual representation of precisely which links need to be included on your page.

If you find you have areas of mass duplication, for example your organisation sells hundreds or even thousands of different products, group these under a common criteria (foods/cat foods for example) with relevant links branching off from there.

Tip 3: Create a site structure flow chart.

At this stage in the website design process, you should have established the content of the site, prioritised the content based on visitor need and have a visual map of the site structure. The good news is that the hardest part is now complete. The next step is to construct or oversee the construction of the site itself. Web design is still a relatively new business but there is enough information and established ground rules available to ensure an appealing end result if you stick to the basic rules that follow.

Next: Pre Website Design Summary

Mighty Media are a full service multimedia company and have employed an in-house team of website designers since 1997. Our practical, marketing oriented approach to website design has resulted in numerous site launches that succeed in driving qualified, targetted leads to our client's businesses.

Mighty Media is regarded as one of the premier Buckinghamshire website design agencies with a track record in corporate communications that forms the underlying foundation of their work.

Established for over 25 years, Mighty Media began making TV commercials and later diversified into the corporate video production sector working with household names such as Procter & Gamble, Mars, Nationwide Building Society and other familiar names. With a strong background in internal and external communications Mighty Media progressed into new media production. Mighty Media now specialise in CD-Rom design and production, e-learning solutions, intranet design, extranet design, video production and website design.

Based in Bourne End on the border of Buckinghamshire and Berkshire Mighty Media now provide website design and online marketing services to businesses from all over the UK.

• Amersham, Ascott, Ashendon and Aylesbury
• Beaconsfield, Bellingdon, Bourne End, Buckingham and Burnham
• Chalfont, Chesham, Chorleywood, Cliveden, Cookham and Cores End
• Denham and Desborough
• Flackwell Heath and Furlong
• Gerrards Cross
• Hambleden, Hazlemere and High Wycombe
• Iver
• Lane End
• Marlow and Milton Keynes
• Primrose Hill and Princes Risborough
• Slough, Stoke Mandeville, Stoke Poges and Stokenchurch
• Taplow
• Wooburn and Wycombe

• Bedfordshire, Berkshire and Buckinghamshire
• Cambridgeshire, Cheshire, Cornwall and Cumberland
• Derbyshire, Devon, Dorset and Durham
• Essex
• Gloucestershire
• Hampshire, Herefordshire, Hertfordshire and Huntingdonshire
• Kent
• Lancashire, Leicestershire and Lincolnshire
• Middlesex
• Norfolk, Northamptonshire, Northumberland and Nottinghamshire
• Oxfordshire
• Rutland
• Shropshire, Somerset, Staffordshire, Suffolk, Surrey and Sussex
• Warwickshire, Westmorland, Wiltshire and Worcestershire
• Yorkshire