Visual Hierarchy (VH) is the design principle that outlines the order in which a user of any given website interacts with and processes information on a page. By manipulating elements of a website to have a clearer hierarchy and designing a site effectively around this principle, designers can influence the importance that users perceive information across the website to have. You can guide your user’s eyes around through your website, focusing on CTAs and integral pieces of information.
The 8 elements of Visual Hierarchy are:
- Positioning
- Size
- Colour
- Contrast
- Alignment
- Repetition
- Proximity
- Texture
Positioning
As a standard, the top-down rule applies to most websites. The most important information is listed first, followed by the second most important piece of information, usually followed by body copy. The way in which humans read websites, both in left-to-right reading cultures and in right-to-left reading cultures has been studied relatively intensely in recent history. Typically, text heavy websites are read in an “F” pattern, and lighter, more image based sites are read in an “E” pattern.
Adjusting the positioning of the crucial elements of your website to sit in and around the hot spots on your website ensures that essential messaging and information isn’t being scanned over and ignored by users. Planning your website design around functionality as well as aesthetics is fundamental to the success and usability of your site.
Size
This might seem like a given, but it’s worth thinking about and considering when designing your website. Larger elements demand more attention – and they get it. Adjusting scale and size of different elements of a website is one of the techniques that can override the top-down rule of positioning.
Using the below example, even though the most important piece of information is listed second, the top copy is actually read last.
By manipulating the size of elements and information, you change the way that users interact with your website and ultimately make for a more engaging experience for your users whilst still communicating the message you’re looking to get across.
Colour
Colour plays a huge part in any website. From branding, to calls to action, the colour that is used throughout a website can make or break the experience that users have with your website. The psychology of colour goes beyond blue encouraging calm and red inciting a sense of urgency.
Colour can be used to sign-post to your users where you want them to look and to guide them through your site in the intended order. Bright, bold colours stand out from muted, dull tones. Emphasising primary information in a brighter or contrasting colour than the surrounding information immediately draws in the attention of the user.
Additionally, if your website has multiple, equally important themes running throughout your copy, using contrasting colours for contrasting themes, can help visually communicate to a user which elements relate to which theme. For example, writing all copy relating to Topic A in orange, and all copy relating to Topic B in blue helps users to identify which pieces of information are relevant to their query, even when scanning the page.
Contrast
Applying brand guidelines to a website is absolutely key when it comes to brand recognition and consistency across your marketing. However, using complementary opposites to your brand norms pushes elements higher up on the visual hierarchy. For example, if your brand guidelines stipulate that a sans serif font is to be used throughout headers and body copy such as helvetica, use a complementary font like FF Tisa for those pop-out pieces of information that you really want to push over and above anything else on the screen at that time.
A perfect example of this is magazine covers. Each article title is just as important as the other, each fighting for your attention as much as the other. Now, in a website this is not a desirable response from users, but the premise still stands. The brand is still very clear through the use of colouring, size and positioning. However, the key pieces of information garner equal amounts of your attention.
Image source: https://dribbble.com/shots/5779894-Magazinecover1
Alignment
A clean, seamless flow of information is key to web design in order to make absorbing and reading your content as comfortable an experience as possible for your users. However, “standing out from the crowd” is not to fall by the wayside. Placing key information in the side lines or even changing the angle at which that information is displayed makes that information “pop”. Use this in conjunction with colour and size as well and there’s no way that element will go unnoticed.
Repetition
Humans learn by basic repetition. This is a fact that’s adored by advertising agencies far and wide. It’s the reason we remember strap lines (I’m lovin’ it!. Hotel? Trivago. etc.) which makes our brains automatically associate sounds, colours and even smells to different brands. Repeating a key idea consistently throughout your website cements that message in the mind of your users.
This repetition is great for running promotions, deals and it’s great for CTAs. Combining repetition with colour, scale, alignment, contrast and positioning makes your CTA unavoidable. However, be careful to use small changes from each VH element instead of going overboard on the CTA design. Keep it tasteful and not too intrusive or distracting from the main purpose and content of your website.
Proximity
Proximity is a major player in communicating through design. Placing two elements close together (but not so close together that it becomes a hindrance to mobile users), demonstrates that the two are connected and relate to one another. In the same vein, using white space to separate two CTAs that aren’t related prevents your customers from confusing the purpose of two competing components of your site.
Texture
Despite it being heavily ingrained in western culture to read left-to-right, the texture of visuals and graphics can be adjusted to guide the reader through the information provided in a different way. Giving users an alternative reading experience encourages them to interact with your website further and makes your site more memorable. Further interaction with a site increases conversions and ultimately leaves your users with a more positive impression of your site and therefore your company.
Using the example below, the first sample is predominantly using spacing and size to guide the reader from the top down. Naturally the reader reads “Sports” first and “badminton” second. In the second sample, “badminton” has been emphasised using a black block to bring texture to the graphic. The two elements of the visual are now fighting for the viewer’s attention and it isn’t clear which component holds the dominant message. Finally, in the third sample, texture has been used in a similar way to magazine covers.
The title text has been obscured by background graphics. This diminishes the importance of “sports” and draws the viewer’s attention to “badminton”. The graphic is balanced in such a way that the title still holds authority, whilst allowing the secondary graphic to take centre stage.
Image source: https://www.smashingmagazine.com/2013/02/creating-visual-hierarchies-typography/
When it comes down to it…
Designing a website is no small feat, and to quote Wham!, if you’re gonna do it, do it right. By paying attention to Visual Hierarchy principles throughout the process of designing your website, you can guide users through your website in the intended order. You can make key pieces of information dominate a page, or make the journey through your website that bit more interesting by using the principles to interrupt reading patterns.
Considering VHs is a critical part of the web design process, so no matter whether you’re hiring an expert agency like Yellowball or if you’re building a website yourself, make sure you’ve got the right people on the job for it.
