So your below-the-fold designs aren’t a lost cause – still, of that 74%, just 17% of it is spent looking at the second screenful of content. So above the fold still reigns supreme!
After all, 38% of visitors will leave a page if they find content or layout unattractive.
Or better yet, place contact information on the homepage with plenty of white space to offset the text.
The overall effect is a clean page that doesn’t overwhelm the reader and makes it obvious which elements are supposed to capture your attention.
How Does Visual Hierarchy Work?
But it’s not as simple as making every vital bit of info a flashy red colour – if you try to emphasise too many elements, nothing will end up standing out, and viewers will click out of your page for fear of developing a migraine.
Having a simple logo colour scheme can lead to excellent brand awareness.
For example, over 90% of the global population recognise Coca-Cola’s clean, red logo!
It’s natural to put the most critical design elements at the top of a page – and this is even more important on the web, where more than half of users’ viewing time is spent “above the fold,” or on the part of the screen that’s visible without scrolling.
When it comes to logo design, it’s best to keep things simple – 95% of top brands only use one or two colours in their logo designs.
Implementing visual hierarchy on a web page can be as simple as creating a left-hand sidebar menu or upping the font size on text headers – but it pays to have a few wider-reaching plans in place.
Why Does Visual Hierarchy Work?
In one test, a company found that turning its CTAs into buttons created a 45% increase in clicks, while another company saw a 26% increase in clicks by adding an arrow icon to its CTA buttons.
When arranging the elements of a composition, designers can use the space around the content to draw attention to particular elements think of a single element on a blank page or to send an entirely separate visual message, such as the hidden “arrow” found within the famous FedEx logo.
The F-Pattern
Nice contrasting colours are also a big help, and when in doubt, buttons are usually the way to go – in one study, button CTAs drew a clicks-to-open rate that was 33.29% higher than the rate for in-text CTAs.
Squarespace always uses negative space well:
54% of global users prefer personal experiences over generic ones, and these days, we have the technology to provide that for website visitors.
Visual hierarchy is how you arrange design elements on a page will show viewers their order of importance.
Feeling Boxed In?
The visual hierarchy gives us many useful design principles to work from, whether it’s the infamous F-pattern or merely the idea that the most critical elements belong at the top of a page.
This is an excellent tool if you want users to read more than just the headlines.
The short answer is: because our brains usually scan content in a few distinct patterns.
Now we know some of the theories behind visual hierarchy. But how can you put this strategy into practice?
Larger or bolded introductory paragraphs
The key to effective visual hierarchy is in that second word: hierarchy.
One of the most striking patterns is the F-shaped reading pattern, which eye-tracking technology has shown to be a widely popular pattern for both desktop and mobile viewing.
Bolded paragraph copy
Design is all about giving users what they want – and if you can provide a digital experience that’s more bespoke to each viewer, it’ll pay off!
Selective images
It’s fun to switch up colours when you’re first finding your style, but don’t forget that consistency is still vital in the long run.
[embedded content]
85% of people claim that colour has a significant influence on what they buy – even just disrupting your typical colour scheme can have a massive impact on performance.
How Can I Use Visual Hierarchy to My Advantage?
In one test, when users encountered a story with a boldface introductory paragraph, 95% viewed all or part of it.
Visual hierarchy is ultimately a user-focused design technique – you want to give your viewers the most intuitive experience possible.
In this pattern, users first read in a horizontal movement across the upper part of the page.
Think About Space
One study has found that colours boost brand recognition by 80%, so developing a colour scheme you like and sticking to it will pay off in terms of identity and awareness.
In other words, visual hierarchy is the strategy that will help you show people where to find what they need on a page.
The F pattern is a product of most web users scan pages instead of thoroughly reading them. And there are plenty of less rigid ways to use this knowledge to your advantage, such as:
Consistent presentation of a brand has also been seen to increase revenue by 33%.
We also know that if possible, it’s good practice to keep the entire navigation bar above the fold so that the majority of visitors will know what’s on your website.
Think About Placement
The good news is, the website content doesn’t get ignored just because it’s below the fold – in total, 74% of viewing time is spent in the first two screenfuls of content (up to 2160px).
Notice how there’s plenty of white space in this layout, making the heading and image stand out so much more.
Calls to action are a crucial part of digital marketing, but not every CTA is the same.
An estimated 86% of consumers experience banner blindness (in other words, they either consciously or subconsciously ignore anything resembling a banner ad).
It pays to make sure your website design plays to these predicted behaviours, at least on some level: 95% of users in one survey agreed with the statement that “good user experience just makes sense,” and intentional user experience has the potential to raise conversion rates by up to 400%!
Be Intentional with Colours
Negative space is an excellent, less-is-more tool to help viewers quickly identify a web page’s focal point.
They then move down the page a little and read in a second, shorter horizontal pattern that forms the F’s lower bar.
You’ll also want to keep any body copy above the fold as spare as you can.
But be selective with your hue: the search engine Bing ended up making an extra million just by changing the shade of its blue (Bing used #0044CC, in case you were wondering)!
Visual cues like loud colours and large headings play a huge role in deciding what the eye is drawn to first – and second, and third.
Personalisation can involve using geolocation to offer language and currency conversions for foreign customers (also known as localisation) to use cookies to track customers’ personal preferences.
Author Bio: Maura Monaghan is a writer at Website Builder Expert, a resource dedicated to helping users get started online no matter their experience level. Her favourite topics to cover include web hosting and content marketing, and she believes that everyone is capable of creating their own stunning website.
Phrases like “About Us” and “Shop” are good examples.
Some of this information can even get specific to each user…
If a web page is littered with generic images that aren’t contributing to your message, then you run the risk of viewers ignoring those, too.
Use Best Practices as a Guide
One case study has shown a company achieving an 11% increase in clicks to their checkout page just by testing colour variations.
When it comes to logo placement, the F-pattern wins out again: users are 89% more likely to remember logos shown in the top-left position than logos placed on the right.
Finally, users will scan the page’s left side in a vertical movement, forming the F’s stem.
But we can use this knowledge to our advantage without letting predetermined patterns make all of the creative decisions!
Just as the F-pattern can be a helpful guide, design trends and best practices are tried-and-tested templates that you can use to ensure good UX (don’t be afraid to colour outside the lines once in a while!).
Don’t worry – eye-tracking software and letter-shaped patterns can serve as helpful guides in website design, but ultimately, it’s up to the designer to call the shots.
It’s no secret that bright, upbeat colours help positively catch a reader’s eye.
Logos
With this in mind, we’ve identified a few methods you can try out for yourself.
But the actual contents of the menu are also important.
By now, we know that people expect to see a navigation bar towards the top left of a page.
Why Visual Hierarchy Matters in Web Design
That said, you should use visual hierarchy as an informative but flexible guide – don’t let it box you in creatively!
Visme
Not sure which colour to start experimenting with? Blue is always a great option since 57% of users see it as the colour of success.
CTAs
Like F and others, patterns are where the eye goes when designers have made no effort to direct the eye.
Think of this as your roadmap to getting started!
This means that designers can position important content in a way that ensures it will likely be the first thing that meets the eye.
Anticipate What Users Want to See
Lastly, it always helps to think about what information the user wants to see and make sure that it is easy to find.
Crowded design is the most common mistake small businesses make when designing a website – this is another example of the dangers of emphasising too many elements at once, to the point where nothing stands out.
You’ll want to stay away from long page titles that don’t fit the navigation bar’s width – if a page title is very long, try to abbreviate it when it goes on the menu.
Here are the most critical elements that you’ll want to get right:
Utilise Personalisation
Since the average online reader has an attention span of 15 seconds, it’s crucial first to emphasise the essential information.
UX design is all about removing friction and enhancing usability for a product, and paying attention to visual hierarchy is a key way to do this. (xd.adobe.com)
Just make sure to be really selective about your bolding – remember that nothing will actually stand out if you try to emphasise everything.
If you know how to identify which page elements are the most – and the least – significant, you can begin the design process with a ranking order in mind that you want your viewers to be able to recognise.
By similar logic, if there are small pieces of body copy that you feel are particularly important, then don’t be afraid to bold them for scanners!
The Wrap-Up
This means you’ll want to be intentional with the headlines and images you place above the fold – make sure they tell users exactly what the page is about.
Of course, what benefits the users also helps the business owner: 93% of companies have seen a boost in conversions after using personalisation.
Instead, you can utilise negative space or the blank areas between different elements on a page.
You can make your CTAs stand out on a page by positioning it far apart from the other copy on the page so that the CTA doesn’t get grouped with other visual elements. It’s up to the designer to decide what makes sense (and what looks great) at the end of the day.
We can’t all be multi-billion-dollar ketchup connoisseurs, but why not start by experimenting with the colours of your CTAs?
