Let’s talk about Visual Hierarchy in website design
Visual hierarchy is one of the most important features in effective web design. Why? Because it defines which information we want to serve to the user first.
According to the theory of Attractiveness Bias, about which you can read in my article —Understanding Attractiveness Bias, a website must be attractive and well organised to successfully communicate. The thing is, a lot of websites are heavy-context, and people are too lazy to go through it. If there is a big chunk of text, the chances are that 99% of people won’t even bother to read it, and this is because we are visual thinkers, not data processors. That is why, being a designer is such an important job — we must process this chunk of information, and serve it to the public in a more appealing form.
To understand better how people see things you need to know that they are not “equal opportunity see-ers”. In other words, we don’t process information evenly, but seek for “visual relationships”. Let me explain it in the following example:
If someone would ask you what do you see here, the chances are your answer is “one big black circle and one small red circle” instead of “two circles”. This is what looking for visual relationship means. Someone who see this image doesn’t just look at similarities but differences instead, and depending on these differences we can give objects a unique meaning.
Let’s try something more complex:
The image above almost forces us to use classification in terms of relationship and similarity. It is similarities and differences that shape how we see content. Moreover, it is a difference in scale telling us which elements are more important. That is something similar to visual language — everyone understands that if something is larger, it must be closer, which means — more important. Variations in colours, at the other hand, may suggest that some of these objects hold a unique personality and features and this can be expanded with the colours theory, in which every colour responds to different feelings.
Let me give an example of hierarchy used in the very first created website:
Ask yourself a question, what do you see here first? The first thing I see is the big headline “World Wide Web”, the next thing I see are highlighted, blue words such as “hypermedia”, “executive summary” and so on… Just looking at the headline and the highlighted text I am able to say what the website is about and if it is something I was looking for. As I said before, people are rather lazy when it comes to data processing, and each of the second counts when looking for the right information. Therefore the hierarchy is so important. Only by using colour and size, I am able to quickly communicate what my website is about, without losing someone’s precious time.
They are few tricks to create a successful hierarchy, and one of them is SIZE. As explained on the examples with circles, the bigger object is, the more important it is. However, you need to remember to correlate size with the importance in a design. Let’s have a look on the example below:
In this case, the first thing I can see is the huge header and image of a feet. Only by looking at these two factors, I understand what the website is about and this is due to the fact, that the designer emphasised the most important information by the size.
Another trick would be COLOUR, which works as organisational and personality tool. Bold, contrasting and warmer elements will catch attention, while cold colours will give us more time to focus. Colours are a powerful tool and are very important to the website as each of them gives it a unique personality. Have a look at this simple colour meaning palette:
Different colours can not only be used to reflect the website’s personality but emphasise particular messages, for example, call to actions on the example below:
ALIGNMENT creates order between elements. This particular trick is important as it not only creates a contrast between elements but also displays them in places where users look first. A good example is a navigation bar, which is always on the top, as this is the place users are looking first. Alignment can also evoke interest and suggest a particular element over another. For example, the Samsung website uses alignment to display their offers on the top of the website:
That means the first thing they want us to see is new offers and promotions.
Conclusion
People keen for a visual organisation, and with the birth of the internet and websites, we have been bombarded with plenty of unnecessary and crap information (we still are). That is why we got so hyper-sensitive to visual hierarchy. We are afraid to lose time on crapy/unrelated content, and we don’t want to read all of it just to find out it was not relevant. That is why we want websites to tell us up the front what they are about. We briefly scan them looking for keywords communicating relevant content, and to find these keywords designers must know how to use the hierarchy.
