How your website’s design can help create a phenomenal user experience that’s good for SEO

LAST UPDATED: JULY 2019

When you create a new website, one of the big dilemmas is whether to prioritise the design, the content or the SEO.

Beautiful web design gets visitors to read your content. In turn, great content supports your SEO efforts but, without SEO, no-one is going to see the beautiful design or read what you have to say.

It’s the ultimate ‘chicken and egg’ situation.

Ultimately, a truly phenomenal user experience – which is what every website should offer – is a perfect trio of design, content and SEO, all developed in partnership.

In this blog, it’s your web design that I want to concentrate on. It’s a crucial part of your on-page SEO.

Website design matters – here’s why!

The majority of website visitors skim read rather than viewing content in-depth.

Great website design can help people to navigate their way through your content, drawing them in and encouraging them to stay on the site.

As well as providing a pleasurable user experience, your web design can encourage social shares, citations, keep your bounce rate low and your average time spent on site high. These are all positive indicators to Google that your site is worth staying on because it provides customer-focused content.

So, how can you use elements of your website’s design to create a phenomenal user experience (and boost your SEO efforts too)?

I’ve put together some easy-to-action ideas.

 

1. Use images and graphics (and help Google understand them)

Did you know that visitors take just three to five seconds to decide whether or not to stay on a website? This is known as the ‘blink test’.

Because you only have this short space of time to grab attention, it’s important to make a strong, positive visual impact. Large, unique images and other graphic elements can help you do this because they show what a web page is about at a glance.

Unfortunately, Google can’t see images when it indexes content.

However, there are steps you can take to make your visual content accessible to search engines and visually impaired users.

I’ve written an article packed full of advice about optimising the non-text elements of your website.

Alt tags, captions and Schema markup are just three ideas that will help your website look beautiful while still being crawlable.

2. Use the header to its full potential

We know from eye-tracking research that there are certain points on the screen – both desktop and mobile – where people tend to look first.

The header is one of these points. In fact, it’s arguably the most important piece of real estate on any web page. This is why lots of websites use large carousel or slider images in the header to promote the website’s most important messages or pages.

When creating your header, go for a headline that clearly spells out what the page is about. Aim for unique images and graphic elements that reflect the page content too.

There are some great examples of impactful, effective headers in this article on the Design Your Way blog.

Here’s just one example from a property website:

As we can see, the header shows us with a single image that we’re on a property site. The headline tells visitors this is the place to ‘Find your next home today’, which reflects the search that would have brought them to the site.

Within the header, we have the opportunity to search their property database by location. The main navigation is clear with the ‘Contact us’ and ‘Search properties’ calls to action standing out from everything else on the screen.

In addition, the prominent placement of a five-star review, headed by the single word ‘Exemplary’, gives immediate social proof (see below) that the site will deliver what it promises.

As a visitor, we have access to all of this information at a glance.

3. Plan which elements of your website design will sit above or below the ‘fold’

You might have been advised before that the most important elements of a web page should sit ‘above the fold’.

What does this mean?

The concept of a ‘fold’ dates back to the earliest printed newspapers, which were folded for display purposes. Newspaper editors would want to put the most compelling headlines, pictures and stories on the section above the fold that people would see on the newsstands. Get this right and sales went through the roof.

This concept has carried over to web pages, only now when we talk about ‘above the fold’, we mean content that you can see on the screen without scrolling down.

In reality, the above/below the fold division is more fluid than it once was. Faster load speeds and our willingness to scroll down web pages, especially on mobile devices, mean that you don’t need to cram all of your most crucial information above the fold.

Despite this softening of the divide, you might still want to place certain elements near the top of the page:

• The main navigation menu
• A call to action, especially if people who are visiting the web page are on the verge of buying (see point 4 below)
• A strong headline (see above)
• An overview of what an article is about (this carries over from newspaper articles, which often summarise a story in the first paragraph)

When people can see what they’re looking for at a glance, they are more likely to read deeper into your website, again communicating important signals about the content to Google.

4. Create clear calls to action (CTA) that stand out

The call to action is a phrase that ‘calls’ the reader to do something specific straight away.

This could be booking an appointment, downloading an ebook, signing up to a course. The idea is to tell your audience what you want them to do next rather than letting them drift away from your site.

Every web page should have a call to action.

Getting a call to action to work isn’t just about the wording. Even the most compelling CTA can get lost on a web page if the design is weak.

The colour, shape or position of a CTA, for example, can influence whether people notice it and click on it.

Recent research highlights the following pointers for designing the placement of your call to action:

• Always consider the AIDA (Attention – Interest – Desire – Action) before inserting any CTA into your page
• Place a CTA above the fold if you’ve created a short page or ‘mini experience’ that provides all the information your visitors need to make a decision without having to scroll down
• Place a CTA below the fold if you’ve created a story that your visitors feel invested in and will want to follow all the way to the bottom
• It’s fine to place the CTA below the fold so long as you use directional cues, such as downward pointing arrows, to lead visitors to it
• Mobile users prefer to do less scrolling, though only if you’ve provided all the relevant details they need in the decision-making process up top
• Always A/B test your CTA to see what works best for your audience

There are some fantastic call to action examples over on the HubSpot blog.

Netflix gives us a great example:

The red, central call to action stands out against the almost-black background. The ‘Try 30 days free’ message echoes the ‘Free for 30 days’ text in green. The design is so simple that the call to action or the option to sign-in on the top right of the screen immediately draw your eye to them.

5. Break up the content

There’s some debate about whether people read web pages following a Z-shape (i.e. top left to top right then bottom left to bottom right – this is called the Gutenberg Diagram) or in an E- or F-shape.

What we know for sure is that the design of a web page can influence visitor habits. Create enough visual interest and you’ve got a much better chance of people reading your content.

These simple design tips can massively improve the user experience:

• Use short paragraphs and vary sentence lengths – people don’t want to read big blocks of text
• Include your most important points in the first two paragraphs on the page
• Use headings and sub-headings to break up the content and highlight your key points for skim readers
• Start your headings and sub-headings with the words that carry the most information – if someone only read the first two or three words of a heading, would it still tell them what that section of the page is about?
• Visually group small amounts of related content – e.g. surround sections with a border or use a different background
• Bold important words and phrases
• Use bullet points or numbered lists
• Ditch generic link phrases like ‘Click here’ or ‘Read more’ and go for descriptive links instead (I’ve used descriptive links throughout this article to give you some examples)

6. Add trust signals

When we talk about ‘trust signals’, we mean design elements that show new visitors that your business/content is trustworthy. As well as improving the user experience, Google values signs of your expertise, authority and trustworthiness (EAT).

Trust signals strip away the barriers that stop people buying.

For example, someone who’s worried about the security of their payment details will be reassured by the HTTPS certificate on your domain. Someone who’s looking for a specialist product or service will appreciate reading customer testimonials. Media mentions tell people that you’re viewed as an expert in your field.

Clear and strategically positioned trust signals are an important part of successful web design. Could you add any of the following to your website?

• Reviews and testimonials
• Social shares (see below)
• Case studies
• Easy-to-find contact details/contact form
• Customer logos
• ‘As featured in’ media mentions
• Logos from governing/accrediting bodies
• Money-back guarantee
• Multiple payment methods
• HTTPS

7. Social sharing

We mentioned social sharing briefly above. Part of providing a phenomenal user experience is making it easy for people to share content with their networks.

A Facebook like button, Twitter follow button or a Pinterest pin can all give subtle messages that encourage social sharing.

Also, icons like those shown above are a subtle way of showing that other people like what you say. This acts as a vote of confidence in your content for new visitors.

8. Other web design elements

Above all, your website design should make it easy to scan the content and identify the most important information on the page.

Your website should also load quickly. Page speed is another ranking factor that could lose you traffic via Google and cause you to have a high bounce rate away from your site. Therefore, the design needs to work well and load quickly.

Make sure you keep an eye on page load speeds and the usability of your web pages. Companies often think they have to reinvent the wheel to create a great user experience but this isn’t the case. Your visitors will appreciate a website that’s logical, clear and simple in its approach. These features make for the best user experience.

Do you want to be found by the very people looking for your services?

We’ve put together a handy checklist of SEO basics to help you increase your visibility in Google.

These SEO basics will help the search engines to index your website and users to find what they’re looking for.

Simply click the link for your checklist >> Send me my free SEO basics checklist now!

If you found this post helpful, we’d love it if you could share it – thank you