Visual Hierarchy

Visual hierarchy is a way of visually influencing the order in which visitor perceives and absorbs the information. On a website, visual hierarchy is used to drive the visitor from one step to the other in a logical progression that facilitates the visitor conversion.

The most frequent ways to establish visual hierarchy between the elements of a website (value proposition, copy, calls to action and images) is by using either size, shapes, colors or layers. For example, placing elements in different sizes immediately establishes visual hierarchy and the visitor's attention naturally flows from the largest to the smallest element.

This can be exploited to influence decision process of the visitor by placing value proposition in a visually larger element, copy in smaller one and the call to action in yet smaller. The visitor would perceive the call to action first, followed by copy and finally, when their motivation is at the highest level, call to action. The same can be achieved by using visual layers. Visual hierarchy is an efficient method to decrease distraction from important elements of the page.

Finally, visual hierarchy can be used to keep user's attention on certain products over others, such as the more expensive line over the cheaper one.