The visual hierarchy

In regards to web design the actual aesthetics of a website have very little bearing on its success. Style is superficial and becomes more subjective the heavier it is applied. The secret behind good web design lies elsewhere and today I’ll be discussing one of those areas.

Viewing a Website

A website user will make a split second reaction concerning their interest in a website. Therefore it is very wise to plan the structure of content. We must acknowledge what the user is looking for and make sure they see it. To do this we use a visual hierarchy.

At its simplest, visual hierarchy puts content in order of importance. The aim is for the most important elements to be seen first, guiding the user’s eye around the page and giving them a good understanding of all the content. If everything is designed at the same level of importance, very little is seen at all.

There are several factors that effect this order:

1. Size is the most obvious factor that effects visual hierarchy. It is generally a good idea to put the main title or introduction of a web page as the largest element. In the same respect, unimportant elements like a copyright notice should be made smaller than the average text.
2. Position – We can expect users to read left-to-right and top-to-bottom (at least in the western world) and web browsers prioritise scrolling to these areas. Visual hierarchy naturally flows in this order and it makes sense for the design of content to follow suit. Not all content on a web page is directly related, and we should position it as such to highlight relations and to define boundaries. The proximity of elements can also effect their place in the hierarchy. Surrounding something with a lot of white space will vastly increase its visibility and importance. Pushing elements close together will lower their individual visibility.
3. Consistency has a strong relation to size and position. If an element appears on every page of a website in the same area, e.g. a logo in the top-left corner, its importance in the hierarchy is magnified, and as a result its size can be smaller. A big logo may make sense on a t-shirt, but on every page of a website it quickly becomes obtrusive and cheap.
4. Colour and Contrast will catch the user’s eye and therefore promote importance where it is applied. This is perhaps one of the most versatile factors but it’s often limited by brand colours and general aesthetic taste. If accessibility for disabilities like dyslexia or partial sight must be prioritised, it is not uncommon for this to override any aesthetic choices.
5. Images, especially photos of people, are natural attractions to the eye. We can use this power to control flow and effect the hierarchy of elements surrounding an image.

Putting it all Together

I have highlighted a few examples above but there are many factors that define a websites visual hierarchy. Fine-tuning the viewing order of content is a sure bet to increase the usability and visiting length of a website. These factors can be combined to magnify importance, for example making an element bigger and bolder. However, combinations in a contradictory fashion can be confusing and destroy all existing hierarchy. For example, increasing the size of elements as you move down the page would be very confusing.

It is very difficult to get visual hierarchy correct. The only way is to question the importance of every element that goes onto a web page, and to stick to the minimum number of levels necessary to maintain order. It is often beneficial to remove content that doesn’t fit into the first few levels, as it will rarely be seen anyway.

It must be remembered that content is presented in order of importance to the website user. Users aren’t generally looking for corporate mission statements, press releases or annual reports. Deciding on the right content is another topic entirely, but hopefully now you’ll have an idea of how a website is designed around it.