Where do the most important objects have to be on the web page?

People accept the objects on the web-page in order of priority. The sixth rule of web-design said “Design puts information in order”. First of all they skip header, left and right margins because they know there is unimportant information (logotypes, ads etc). People start look through the page from the left top side of the layout central part and continue to the right bottom. We have to put the most important objects in this area. For example, what do people expect to see fist on the toy’s online shop? They want to see how the toy looks like. So the right solution is to put in the left top part an image of it. Where we have to put a button “Buy!”? It has to be in the right bottom because people will buy only after looking through all the information.

Human’s peripheral vision is also very important. People don’t watch there but they really see and unconsciously know what there are. Left and right margins are some kind of backgrounds for main information. What we need to show for our customers on these backgrounds? It depends of the website purpose. If it is on-line shop we need to show that this ware is not alone and we have other ones. 

Where do the most important objects have to be on the web page


Here are a lot of mistakes. The picture of the toy is in the middle of the page and very small. The price is small also. The name of ware is the most remarkable object on this page.  Here is no "Buy" button on the first screen. The left column is very heavy and doesn't seem like background but the right is empty.

Small image in a middle of web-page is a common problem of modern e-shops. We have to see a price and a button to click on the first screen. But the right column is ok here.

Here is a disorder. Big menu buttons are too heavy for header. People can't skip them. The picture is in right place but the toy's name to the right has to be smaller. "Add to card" button is too small to attract customers attention. The left column is full of unuseful links.


We can meet disorder in web design not only on pages of rural e-shops but even on http://www.ebay.com/ The price is too small and button is obscured.

Other popular web-site has some problems with order. The price is too small to find. The button "Add to card" is on the margin in the right column. It is a place for background not for the most important object of the e-shop's page.

This web-site design has too many objects in the most important part of the page. These objects are menu items that need to be organized and structured. Other objects stay in proper positions. There is nice drawing in the left top of the page. It will be better to put it lower into the left middle background because the beautiful drawing can affect customers.

This web-site has good decoration but bad design. Gray menus with big black logo are very good. The price is in wrong place too far from the picture. We can see wrong background with word "ACHTUNG" (de. Warning!). If I am going to buy a toy I don't want to feel confused because of warnings. There is no "buy" button on first screen.

On Swedish web-site http://cdon.se/ everything is in right place. The logo and menu are in the header dead area, big enough photo is situated in the top right part of central column. The red price (179 kr) is next thing people will look at. The button "buy!" is under the price so web master put it there because he don't want people to read details of this ware. We can also see other goods in right column.

toy ishop design

There is a good order of objects in the central part of http://www.flipkart.com/. The picture is bigger than in previous example. The button "Buy now" is in the left bottom after details and price. But we can see empty right column.


This web-page has right order and very lovely prominent button "Add to Card". I really like the way they hide a koala price in the top right part of the central part. We can see only the toy and the button, but the price is on the background. This trick is dangerous enough because many customers are looking for the price on the second step after watching on the picture. There is a picture variation on the left background. People can ignore this three pictures but they unconsciously know that shop take care about customers and made pictures of the ware for them.
Menu, "Read product description" were put in wrong place because people don't expect to watch this first.

Here are everything in right place except "Dress me" button that has to be before "Add to basket".

So, we have seen that there are a lot of mistakes in ordering of web-page object. My advices are:
1) Think about customers desire.
2) Put objects in importance range from the left top of the page central part to the right bottom of it.
3) Highlight important objects with size and colours
4) Use margins as affective background

No comments:

Post a Comment