21 UX tips & statistics for a better website experience

Written by Fraser McCulloch.

Implementing these user focused changes to your website could make an improvement to your click through rate, bounce rate, conversion rate and revenue.

Key Highlights

  • 88% of online consumers are less likely to return to a site after a bad experience.
  • ROI in UX design is $100 dollars for every $1 invested
  • 46% of B2B buyers said lack of messaging annoyed or caused them to leave a website
  • 86% of buyers want to see products and services on website home page
  • 73% of digital agency websites don’t use CTA buttons
  • Page title with brackets, parenthesis or number have 22% to 38% higher CTR
  • 74% of viewing time spent in first 2 screenfuls
  • 57% of viewing time spent above the fold
  • 20% – 35% of users don’t scroll page first 10% of page
  • 79% of users scan new web pages
  • 124% usability improvement using bullet points
  • Personalised Calls to Action Perform 202% Better Than Basic CTAs
  • Bounce Rate increase 32% if page load time increases from 1 to 3 seconds
  • 80% of time spent looking at left side of screen

88% of online consumers are less likely to return to a site after a bad experience.

This quote comes from a 10 year old study.

I’ve hunted high and low and that study doesn’t exist online anymore.

What is the study methodology and is this insight still relevant today ?

Action you can take

  1. Go to Google Analytics
  2. Select Audience
  3. Select Behaviour
  4. Select New vs Returning
  5. Look at the Returning Visitor percentage value
  • Only 8% return to my website
  • 14% return to an e-commerce client site
  • 8.3% return to a recruitment client site

A low returning visitor value does not mean customers are less likely to return; it could mean you do little proactive marketing in other channels.

ROI in UX design is $100 dollars for every $1 invested

A 2016 study found that the more a company invested in and focused on design, the more sales they saw and the higher their customer retention and customer engagement was.

They put UX design and the user at the core of their business.

Action you can take

Keep reading the rest of these statistics and action points which were created to help you improve the experience of your website.

46% of B2B buyers said lack of messaging annoyed or caused them to leave a website

Buyers have little patience and this study found a lack of messaging ie: can’t tell what a company does, annoyed or caused them to leave a website.

No contact information is another major reason for annoyance or leaving the website.

Action you can take

On my home page the headline is a benefit.

To write the body copy I use a simple copywriting formula:

  • Business Type – search audience marketer
  • Provides – my services are click forecasts, content plans, seo etc
  • For – I provide these services for agencies and marketers
  • Benefit – the benefit of my services is increased search traffic

86% of buyers want to see products and services on website home page

Buyers were asked “once you’re on the home page what information do you want to see?”

86% of buyers wanted to see products and services on the home page.

Action you can take

If you purchase and install the Generate Blocks add on, within the template library there are content, hover and info box templates you can easily add to your home page.

  • Click Add a Block
  • Click Template Library
  • Choose your preferred block
  • Customise the content to match your key services

73% of digital agency websites don’t use CTA buttons

I did my own study and found 73% of 1000 digital agency websites don’t have a call to action button such as a phone number, chat button or get in touch link on the mobile version of their website.

Action you can take

It’s really easy to add a phone number or link to a contact page by customising the top bar widget within GeneratePress.

  • Select Appearance
  • Customise
  • Widgets
  • Top bar
  • Add a Widget
  • Select text
  • In the text tab, copy and paste this and change to your phone number
Call us on <a href="tel:01610000000">0161 000 0000</a>

Alternatively create a header element and add a call to action such as these ones on a small laundry website.

Here’s sample code to add to a header element; change the url and text before the closing a tag.

<h1>
	{{post_title}}
</h1>
<div class="page-hero-buttons">
<a href="/contact/" class="button">Contact us</a>
<a href="/link/" class="button">Second CTA</a>
  </div>

Page title with brackets, parenthesis or number have 22% to 38% higher CTR

Hubspot found that using brackets in a headline increased click through rate by 38%.

Mentioning a photo in a headline increased click through rate by 37%.

And including the word “who” in a headline increased click through rate by 22%

Action you can take

Using brackets, photos and the word “who” on a page or article will depend on the article itself.

Go to the relevant article or page and add brackets in the page title.

If you are using an SEO plugin such as Yoast add the brackets as per below.

74% of viewing time spent in first 2 screenfuls

Nielsen Norman Group studied 120 people and 130,000 eye movements on a 1920 x 1080 desktop screen.

They found 74% of viewing time is spent in the first 2 screenfuls; that’s a depth of around 2160 pixels.

Action you can take

Ensure the most important elements are contained in the first 2060 pixels of your page.

  • Your logo
  • Your navigation
  • Your services
  • The title of your page or article
  • The first sentence containing a benefit
  • A call to action
  • A written summary of the page

57% of viewing time spent above the fold

In the same study, 57% of viewing time was spent above the fold; irrespective of screen size.

Action you can take

As mentioned above you need to fit a lot of key elements above the fold.

Therefore it is vital your designers and developers build your website to ensure the key foundations are above the fold.

Ensure writers and content editors put the key page information in the first screenful; above the fold.

Google recommend adding a benefit above the fold

In the Google UX Playbooks they show example mobile web pages that have added a benefit statement in the above the fold of the browser.

Action you can take

In the example below, I used the very first sentence to explains the benefits of this page.

BLUF – 20% – 35% of users don’t scroll page first 10% of page

In a small study of 515 visitors to 3 of my web pages (using Hotjar) I discovered I lose 20% to 35% of my visitors in the first 10% of my pages.

On this mobile page I lost 36% of users in the first 1500 pixels.

Such findings are in alignment with the Nielsen Norman Group findings above.

Action you can take

You can take a number of actions:

  1. Write a benefit statement in the first sentence.
  2. Use a table of content to show links to content further down the page
  3. Add a call to action near the top of the content
  4. Use the inverse pyramid technique to find the summary of page at the top.
  5. Use links to other pages within the first 1500 pixels

Use Table of Content with jump to links to show key sections

People use more eye gazes (and thus reading time) at the top of the page to understand how the page is organised. 

Once they do so, they tend to focus very efficiently only on the information relevant to the task at hand.

Therefore a table of content can present users with relevant information.

Action you can take

There are a number of WordPress plugins offering a table of content feature.

Install the plugin, customise the settings and add the shortcode after the first few sentences of the page.

Use Sub Headings for 79% of users who scan new web pages

People rarely read a web page word by word; they scan the page looking for words and sentences.

Using sub headers will highlight key information for users scanning the page.

Action you can take

Don’t write your draft copy directly within your CMS; use Google Docs or a content optimisation tool such as Frase.

This will help you form a good habit of writing with structure; then copy and paste into your CMS and complete your web page content.

Use Back to Top links if page longer than 4 screens

Neilson Norman recommends you use a back to top button for pages that are longer than 4 screens.

Or use a persistent back to the top button in the lower right side of the page.

Action you can take

To add a back to top on a page, all you need to do is add an html block and copy and paste the following code.

<p><a href="#top">Back To Top</a></p>

Consider body font size larger than 16 pixels

You want the body font size on your phone, when held at a distance, to be as readable as text in a book.

The author recommends a body font size larger than 16 pixels; I use 20 pixels for body text on my website and in email marketing campaigns.

Action you can take

This is the easiest task to action.

  • Select Appearance
  • Customise
  • Typography
  • Body
  • Change the font to 20 pixels

Optimal line length for body text is 50-60 characters

If a line of text is too long the reader’s eyes will have a hard time focusing on the text.

The optimal line length for body text is 50 to 60 characters.

Action you can take

I changed my content width from 1100 pixels to 768 pixels because the content area was creating long lines of text.

To change the content width within GeneratePress follow these steps:

  • Appearance
  • Elements
  • Add New Element
  • Layout – Create
  • Content No Sidebars
  • Select the content tab
  • Use a content width such as 768 pixels
  • Under display result select all the pages & posts this layout applies to
  • Publish

Ideally a paragraph should be 8 to 11 words per line

There is no ideal paragraph since all browsers vary in size but Buffer suggests 8 to 11 words per line.

I decided to count the first 46 paragraphs of this web page on an iPhone 7 Plus and found 16 words per line was the average.

Action you can take

There’s no simple solution as this involves writers, designer and developers.

  • Give your writers a brief and explicitly state how copy should be laid out.
  • Teach your designers or content writers about paragraphs and spacing.
  • Involve your web developers who can style headings and paragraphs in their stylesheet to achieve the ideal paragraph size.

124% usability improvement using bullet points

In this study, using bullet points to a writing style improved usability by 124%

Bullet points can summarise important information, break up a long series of paragraphs and facilitate users who scan content.

Action you can take

As you format your page and see the opportunity to summarise key points or benefit use bullet formatting in the Gutenberg editor.

Personalised Calls to Action Perform 202% Better Than Basic CTAs

In a study of 330,000 CTAs (call to action) Hubspot looked at basic CTAs eg: the same for every visitor and smart, personalised CTAs.

And CTAs perform better when appearing as buttons rather than images.

Action you can take

I use a premium plugin called Content Upgrades that enables you to personalise the offer you make on a per page basis.

There are other premium solutions such as RightMessage, which are platform agnostic, that provide higher levels of CTA personalisation.

Bounce Rate increase 32% if page load time increases from 1 to 3 seconds

It doesn’t take a genius to figure out people don’t like waiting for slow pages to load but these facts from Google back up that insight.

Action you can take

There are numerous WordPress plugins to help load pages faster.

However, choose a theme such as GeneratePress which is built with speed in mind.

80% of time spent looking at left side of screen

Users spend 80% of time viewing the left side of the screen and 20% viewing the right side of the screen.

This applies across all device sizes.

Action you can take

  • Use conventional top and left hand navigation formats
  • Content placed higher and to the left will get more attention
  • Keep secondary content on the right

From the heatmap below, you can see all the concentration is on the top and left of this page with a fixed left navigation.

Conclusions

I hope these UX insights and tips are useful; go and implement the easiest ones first and you start seeing some positive improvements.