Visual Hierarchy in Web Design: What is it and Why is it Key to Online Success? (Part One)
We may all be adults here, but how many of us still love looking at a good children’s book? They are vibrant, easy to follow, and the language is exciting. Text is set within and around images which aid the reading but we never become confused as to the order in which we read the text.
Have you ever finished a children’s book and felt frustrated, disenchanted, or disappointed? Almost definitely not. Have you ever left a website that way? Our bet is absolutely yes. We’ve touched on what makes a good children’s book, and the same can be said for your website. As a web design agency, we like to think we’re pretty knowledgeable on what makes a great website, and what makes your users tick. Captivating words, images, and easy navigation; it all comes under Visual Hierarchy. Since it is so crucial to building a beautiful and successful website, we want to tell you some of the basics here.
Visual Hierarchy and the Human Mind
We are sometimes rather simple creatures who like to be told what to do. Following rules is drummed into us from our beginnings and we carry it throughout adulthood. Visual hierarchy communicates the “rules” of a website. In essence, it communicates with the user, visually, where they should look next and how they can find what they’re looking for. Throw a load of colours, huge blocks of text, and too many images at your users and they will become confused, annoyed, and will likely leave your website. By creating visual hierarchy, a skilled web designer will not only keep your users happy, but will see that you make a happy return on investment with an ever-increasing conversion rate.
Sizing Up for Web Design Success
Take a look at these circles:
Of course the circles don’t give us any information. This isn’t art and there are no hidden meanings, however the order in which we view the circles tells us something really interesting about how our minds work. Looking for patterns is an inherent human trait. Look at the circles again and notice how we naturally view largest to smallest. Now relate that information to your website and that is how your users will interpret the information you offer. The size of text is a visual guide and you need to apply it well in order to create a positive user experience.
Keeping Colour in Check with Web Design
Colour has a duo-function; it can be used to help organise a page as in visual hierarchy and simultaneously create a website personality and brand image. A difference in colour will attract attention and can be used to highlight a different section of information, or an action as in a hover function (where a button or piece of text changes colour to indicate that the user should perform an action). A colour contrast can also help out your users. Let’s have a look at the following examples:
The similarities: they both have a lot of colour
The differences: one inspires vomit and headaches, the other brings joy and hours of entertainment to millions
We probably don’t need to tell you which attributes belong to which website. In spite of the many colours on Netflix due to the series’ promotional images, we can easily make our way through the page, which has been clearly sectioned by white writing against a black background. The second website, we have no words…
Helpful Visual Hierarchy
As you’ll have seen in the title, this is part one of our visual hierarchy feature – since an information overload goes entirely against what visual hierarchy is all about! Next week we will a look at the remaining aspects of visual hierarchy and why they are essential to your online success.
If you are now looking at your existing website and wondering how it can be improved with helpful visual hierarchy and happy users, Christian Michaels is here to help. Maybe you’re making your first move on the online platform, in which case, you can rest assured that your website will be in safe hands with us. For a free consultation, get in touch with the team.