1. The top left corner grabs attention first
When a visitor lands on your site, their eye paths will start from the upper-left corner, and move in a zig-zag motion from there.
According to an eye-tracking study by Eyequant, these are the areas that get the most attention.
If you have a couple of minutes spare after you’ve read this blog, check out your own website and see what you have in each of these areas.
In the top left hand corner of most websites, you’ll typically find their company logo.
If studies are showing that users look straight to the top left when they land, it makes sense to put your most important information in that zone, including:
- Logo
The more gazes your logo gets, the easier it will be for visitors to recall your brand. - Value proposition
First impressions count. Tell the user straight away why your brand is great. But remember, you only have a small window to grab their attention, so make it snappy!
If you need a helping hand, we’ve covered how to write a great value proposition in our recent blog.
Most languages around the world read left-right, but there a few important ones that use right-left scripts, such as:
- Arabic
- Aramaic
- Divehi
- Hebrew
- Kurdish
- Persian
- Urdu
This could mean making right-aligned adjustments on your site if you know you have visitors that use right-left scripts.
2. People read text in F-patterns
Most people don’t read these days. Let’s face it, we don’t have the time.
Instead, they’ll scan the content in an F-shaped pattern, which heavily favours content that appears on the left side of the screen.
Using the F-pattern technique will help you to establish a visual hierarchy and intentionally encourage visitors to focus on specific elements.
If you can successful get them to follow the path you want, they’ll be more likely to take action on your page.
Image source: UX Planet
3. The fold isn’t as important as we first thought
We already know that the top left area of your page is super important, but that doesn’t mean you should try to squeeze everything in there.
Scrolling down the page will always provide better usability rather than breaking up lengthy content for the sake of avoiding long pages that dive below the fold.
You will, however, need to guide your visitors down the page.
_dqbrf.png?fm=pjpg&auto=format){kind=tracking}
Make it obvious that your page has more to offer by including a visual cue that encourages them to scroll down.
Don’t be afraid of placing important elements below the fold. Despite what you might have heard, it’s not all bad.
To prove our point, take a look at this test by ContentVerve, which showed that moving the CTA far below the fold actually increased conversions by 304% - that’s a huge difference!
Placing content below the fold gives visitors time to read your content before they decide to take action, which brings us onto our next point.
4. Put your CTAs at the bottom of the page
After everything we’ve just discussed, putting your CTAs at the bottom of the page might seem a little counterintuitive, right?
After all, why would you put the most important audience instruction in the place they are least likely to see it?
Allow us to explain.
As we discussed earlier, in the West, we read top to bottom and left to right. And keeping this in mind can help influence intelligent button placement in your web design.
Call-to-action button places towards the bottom right of content often outperforms alternative placements.
CTA buttons should appear in places that best align with the users experience.
Ask yourself, why would you put an “order now” call to action as the first thing a user sees, when they haven’t even seen or read anything about the product yet - that makes no sense.
Take a look at the diagram below, for example.
This is the Gutenberg diagram, which describes a general pattern that eyes move through when looking at heavy content.
Here’s a brief overview of each section.
- Primary optical area
The top left area in the primary focus. It’s where eyes will automatically go to.
This is where you should place your logo and value proposition. - Strong fallow area
A follow up to the first, left portion, but not as important. It’s not a good idea to break the user’s attention here, though.
This is a chance for you to keep the user engaged. - Weak fallow area
Some would say the least important area. The user will not give much consideration to content in this area of the page.
Avoid putting important information or CTAs here, as it will be lost. - Terminal area
A chance for a break in the reading process - it’s time to to take action!
The fourth, bottom-right terminal area is the ideal spot to insert your CTA.
5. People like big, bold headlines
Big headlines often draw the eye upon the user entering the page - especially when they’re in the upper-left corner!
Here, you should present your value proposition.
Trello gets straight to the point; pitching its benefits clearly, followed by a beneficial call to action - “sign up, it’s free” - to enhance conversions.
People will typically scan headlines too, so don’t make them too long, but remember to make them bold.
If the first words engage the user, they’re likely to read on. With less than a second to grab a visitor’s attention, your first couple of words should be real attention-grabbers.
Working with a web design agency
Looking for a professional web design team to take your brand to the next level? We can help.
As a trusted digital marketing agency in Hampshire, we’d love to help bring your project to life. Contact our friendly team today.