A poorly designed website will severely affect your bounce rate. Fact. First impressions are made in under 5 seconds. That’s all we’ve got to lure visitors in, engage them, and send a clear message about what we want them to do. That’s where visual hierarchy comes in. This is the order in which the human eye views each element of your website. Or, to put it another way, the method of placing the various elements of a webpage to delineate their importance. This is your chance to influence user choices and guide them through your website using your preferred route.
We explore five different approaches to achieving effective visual hierarchy on your recruitment website.
1. Scanning patterns
This relates to the way humans scan text and images. We all read from top to bottom and most cultures read from left to right. When we start to look at a website page we tend to scan first to check whether it is of interest or is relevant. We do this predominantly in one of two patterns – ‘F’ shaped and ‘Z’ shaped.
F Pattern
F-patterned scanning occurs when a visitor looks at text-based pages such as a blog. The reader scans in a vertical line to the left of the page, from top to bottom, in order to see if any subheadings or initial sentences catch their eye. If they do, they continue to scan in a horizontal line to the right, creating an F or E shape. This is why it is essential to begin paragraphs and bullet points with snappy keywords and think carefully about titles and subheadings. It’s also why breaking up large blocks of text with interesting images or graphics is a good idea in order to maintain interest as the eye scans downwards.
Z Pattern
Z-patterned scanning tends to occur on pages with scant text, where images dominate, particularly the homepage. The eye is drawn to the top left and scans right, partly due to normal reading mode and partly because that space is generally home to a menu bar. The eye then scans diagonally down to take in the image and across the bottom of the page where there is often content. Again, this can guide the placement of important information. A logo at the top left, a call to action button top right, images or a slider in the centre, important information along the bottom and another call to action bottom right. This sort of placement can keep the eyes following the Z pattern.
2. Colour and space
There has been a huge amount of research carried out on the influence colour can have on the brain. This could be an emotional response, as a signalling function, or as a way to focus the eyes. On a website, colour can be used to draw the eye to important areas. For example, bright pops of colour against a more subdued block colour can be used for important buttons. Colour will also act to both separate elements on a page and signify that they are connected. It is also important to consider the use of white space, both to focus attention on other elements and to give the reader’s eyes a rest.
3. Size
It’s a cliche but it’s true when it comes to website design – size matters. To put it simply, the biggest text or design element will catch the eye first. You can use this to your advantage when it comes to the visual hierarchy by enlarging the elements you want users to see and/or act upon first and then creating a clear flow to guide the eye in the order you want it to travel in.
4. Typography
Any publications you come across will feature differing font types, sometimes as simple as a larger, bold font for a headline to set it apart from the body text. Different typography denotes order of importance and separates sections. In web design, typography can be used creatively to organise flow and signify importance. Different font types, colours, sizes and even direction can set a particular tone and help with branding as well as indicating which parts of the text are more important and should therefore be read as priority.
5. Layout
To grid or not to grid, that is the designer’s question. The majority of web design is composed through a grid and most take the form of a modular grid with three vertical and three horizontal crossing lines using the rule of thirds, effectively separating the design into nine sections. Focal points are placed on the points where the lines meet – your design sweet spots. Emphasis can be created by placing key design elements off-centre.
Sometimes the best way to grab attention is to do something unexpected which is why some designers prefer to ignore the grid completely, seemly randomly placing design elements across the page. However, as with all aspects of design, there is nothing random about it. You may group elements into boxes to maintain structure, use layering, or add whitespace to emphasise the focus point.
Before you begin to think about the design of your website you must firstly prioritise the goals of each page. What do you want users to see first? Where do you want them to continue their journey? What is the ultimate aim? Once that is done, you can use visual hierarchy to organise the design elements in the order you want them to attract attention. Keep it visually pleasing and exercise creativity but don’t forget to always consider the user journey.
