Grids in web design
Visual hierarchy and user guidance
A visual hierarchy is a method of working with how users naturally scan the information presented to them. In the case of a small list of items, a user would read it top to bottom and quickly be able to find the item they required. However, as the amount of information increases, the challenge of helping a user find the information they want, and that you want them to see increases. In the case of an ecommerce site, the objective is the successful completion of a transaction.
Gutenberg Diagram
In the 1950s, typographer Edmund Arnold developed the concept of the Gutenberg Diagram to illustrate how people process information presented to them. The diagram is based upon how western readers process text, starting at the primary optical area of the top left and reading until the terminal area of the bottom right is reached (Lidwell, Holden and Butler, 2010).
Figure 2.1: The aggregated results of an eye tracking experiment. The results show that users scan a web page in an F pattern (Nielsen, 2006).
According to eye tracking studies, users adopt an âFâ shaped pattern, similar to the Gutenberg Diagram, for scanning a web page (Nielsen, 2006). Users start at the top left of the view port and scan right and down from there. An additional observation from the eye tracking study is that as the user scans away from the top left start position, the amount of attention the average user gives the page starts to diminish. It is therefore important that the primary optical area in the top left, and the strong fallow area of the top right is reserved for the most important elements in the visual hierarchy.
Shopping
If a user intentionally visits an ecommerce site, it can be assumed that they are already interested in making a purchase. However, the site now needs to cater for the different types of purchaser who might be at different stages of the shopping experience. Shoppers can be categorised in many different ways. However, for the purposes of this essay, I will focus on following two categories:
-
The need-based shopper: A person that knows exactly what product they want, and who desires only to complete the transaction (Hunter, 2013). They need to be able to find the product effectively and complete the purchase without encountering unnecessary obstacles.
-
The impulse shopper: A person that has visited the site with no particular purchase in mind, but wants to browse the site and see what is available (Hunter, 2013).
Figure 2.2: A computer for sale on the Argos website (Argos, 2013).
Figure 2.2 is an example of a visual hierarchy in use on the Argos ecommerce site. The main search box is located at the top of the screen, with the main navigation directly underneath it. Both elements are also offset to the left, which is in line with how users process a web page. The principal of the Gutenberg diagram has also been applied to the product information container. All the main image of the product is displayed in the primary top left of the container. As the shopper scans right, they are first guided to the special offers that apply to this product and then down to the product details. From there the user is guided to the purchase options, which are towards the bottom right of the container.
The visual hierarchy used on this site creates a system that is suited to the need-based shopper. It takes the shopper through all the information they might need, which enables them to make an informed purchase. Allowing the purchaser to become better informed about the product, instead of pushing for the sale earlier in the hierarchy, contributes to a feeling of well-being. However, the call to action must still be obvious enough for those who wish to skip ahead. Creating space around the purchase button is a way of using layout to distinguish it from the rest of the page.
Figure 2.3: The Amazon website (Amazon, 2013).
In figure 2.3 above, it can be seen that the search box is still at the top and offset to the left. However, Amazon has decided to put the list of departments in a drop down menu, giving the list of departments less visual prominence than main content. This layout is an attempt to entice shoppers to scroll down the page and view more products. The vertical rhythm of the page also provides Amazon with two rows above the fold within which to display different products groups.
This style of visual hierarchy is more suited to an impulse shopper as the subtle differences in the layout is more conducive to browsing products. The trade off however, is that the page can look over complicated and crowded when compared to other sites.