Skip .site Map
The layout and design of a website plays a central role in its success. You might have a great product or service and strong copy to promote it. But poor layout and design will frustrate and confuse your visitors, prompting them to leave your site within minutes or even straight away – one look and they're gone!
This is understandable. They're busy. What's more, reading from a monitor screen is not nearly as relaxing as reading a newspaper in an armchair.
So you need to make it easy to access the information you offer. The best way to do this is to use layout and design to highlight the most important aspects of your site. That way they can choose what readers want to find out about and generally navigate your site without getting lost and confused
Much as it is tempting to show off your creative prowess as an innovative designer, unless the readers are comfortable, and the layout meets their expectations, the site has failed to work.
A basic understanding of how the eye/brain works is helpful when planning the layout of your pages. People tend to scan web pages (and magazines and sales letters) to weigh up whether they want to read them in full or not.
Studies show that when scanning a web page the human eye moves in a ‘Z ’ shaped pattern. The eye starts its journey in the upper left hand corner of the page, moving horizontally until it reaches the upper right hand corner. From there, it descends diagonally towards the lower left hand corner. When it gets to the middle point of this diagonal descent (the centre of the page), the eye will take one of two possible routes:
1. It will continue to the lower left hand corner, then sweep horizontally across the page to the lower right hand corner. Once at this final destination, the brain processes everything that the eyes have seen – and decides whether or not to read the information in full.
2. Or the eye will cut diagonally down to the lower right hand corner - without paying attention to anything in the lower left hand corner. Then when the eye reaches the lower right hand corner, the brain processes what the eye has seen.
This design works very well for information sites. It is the standard layout for magazines, which most readers will be familiar and confident with.
The important aspects of your site (newsletter subscription box, navigation buttons, etc) can be placed strategically along the ‘Z ’ pattern. You can put your site navigation both in the left hand column and in the header bar.
Use this as a template for all the pages on your website and your visitors will never lose their way. This layout also looks good at different screen resolutions, so there won't be a problem if any of your visitors are using a monitor with a 640x480 resolution.
The downside of this layout is it is very popular – so you'll have difficulty making your pages look unique.
There's also a temptation to clutter the navigation column – to throw in all your special offers or best snippets of information. This tends to confuse readers and is best avoided.
This is an ideal layout if you've got a lot of information to display. The added column on the right allows you to display your special offers or customer testimonials all the time, without cluttering the left hand column, which is usually used for navigation.
You can make the most of the ‘Z ’ pattern by strategically placing important information near the top of the right hand column.
A sub-headline advertising a discount on a specific product or service would work well here. And, like the first example, you can put navigation controls in both the left-hand column and in the header.
The main pitfall of this layout is the temptation to cram so much information into your page that visitors are overwhelmed. A lot of websites do this and lose visitors.
This design doesn't work that well on monitors with a 640x480 resolution – the centre column can become too narrow.
A lot of Internet marketers use this layout for their online sales letters. In fact, that's a reason to avoid it!
Often their letters are lengthy and the reader has to scroll a long way to read the full message. If suitably impressed, they can then hit the ‘order now ’ button at the end of the letter.
This style of web page is very linear, but is very effective for selling one product (like, say, an eBook or an item of software). Because there are no visual distractions, the prospect (potential customer) is able to focus on the sales message and weigh up whether to buy or not.
Everything they need to know is there and presented in a logical, step-by-step fashion - with no links and visual gimmicks vying for attention. Tests done by the top Internet marketers show that online sales letters work best on their own page without clutter.
Navigation is very limited in this page layout. Site links can go in the header bar or at the end of the page. But these sites rarely have more than two pages – the second page being the Order Form.
The main drawback of this layout, however, is it lacks visual appeal – which means there's a temptation to include large graphics and use garishly bright colours. But this simply serves to make the pages look amateurish.
Any questions or comments about web layout and design, contact
tel 01235 60 30 22
fax 0870 4580564
