THE PSYCHOLOGY OF WEB DESIGN - LAYOUT

In the business of web design, if a site is to fulfill the client's purpose, it must appeal to the site's visitors, and keep them around long enough to either buy a product, or make contact.

On the web, there are no apparent limits to page layout, so why would page elements in professional sites all seem the same? One phrase I have heard used is 'cookie-cutter looking.'

As with the use of color to make a point, layout is just as important for very basic psychological reasons; humans have thousands of years of visual experience, and so have come to expect things to be in certain places within their field of view.

This history has also dictated that with any visual medium, people expect to see things with a certain flow, naturally left to right and top to bottom. When developing a site, this has to be carefully planned for.

A study was conducted in 2001 by M. L. Bernard, in which 346 people were given an 8'x7' grid, and asked to signify where they would expect to see common web objects, such as logo, navigation, help button, etc.

Over 90% of participants expected site navigation on the left hand side of the page.

This is why most sites follow this formula.

Other, more recent surveys have shown that horizontal navigation at the top and bottom of sites is also acceptable for web users. All research has shown that the optimal layout for a web page is an upside down L shape. This is why all professionally designed sites follow this pattern.

When the design is created, the flow is of utmost importance, as it will lead the viewer's eye toward the information they need to see without them having to over-analyze or search through the page. This is where creativity has to be mixed with conformity if the end result is to be successful in getting the viewers attention.

If the site is an e-commerce site, this conformity is even more crucial. If, for example, the 'view shopping cart' button is a cleverly designed yellow box at the very bottom right of the page, almost nobody will find it and the site will lose customers. Things like, 'View Cart' and the 'Customer Account' should be at the top right of the page.

What if elements are put in an unexpected place just to be original?

The site owner seriously risks losing visitors, especially those who are impatient or are inexperienced web users.

One very big problem, mostly with smaller business sites, is where the designer tries to show more artistic flair to be different and make the site stand out. For example, they put the navigation on the right hand side, under the word NAV, which when clicked, dramatically springs forth a menu.

This approach only works if all the viewers have an artistic mentality like the designer. This is useless if the site is for a financial advisor or something more mainstream.

The major layout rule is to keep things easily scannable.

Rather than having 20 paragraphs on a page, merge that down to 2 paragraphs, written concisely, giving the main elements pertaining to that pages subject.

White space is good!

Some sites fill every available screen millimeter with text, color and images. Most web users are in a hurry, trying to find the information that fills their requirements. This in mind, things need to be spaced out so the content can be scanned over quickly. This is also essential when it comes to visitors from search engines. If they cannot find the content relating to their search query within a few seconds, they will close you out, and move on to the next result.

Sites that use colored (especially dark) backgrounds with
odd colored text are much less scannable by the human
eye than those using dark text on a white background.

In closing, one very important point has nothing to do with the human eye, but refers to our good old friends the search engines. A search engine that uses a robot to scan a site has programmed it to expect certain things in certain places. If something is not where is it expected to be, or is in the wrong format, the robot will simply not see it.

This will severely limit your placement on the searches.