The following chapter is about the User Experience Audit Checklist which is part of the full Website Audit Checklist definitive guide.
User experience or UX as you often hear…
What’s that in English?
It’s the experience a user has when they go through your website.
And of course…
…you want it to be a good one!
To deliver a good user experience you need to define the type of audience(s) you are targeting and make sure your website delivers the best experience for them.
A UX audit can be a long process depending on the complexity and size of the website and the budget you have available.
Your audit may consist of:
- Chatting with with the business to understand the business objectives
- User journey mapping – understanding the user objectives by chatting to the business to figure out the type of personas they are targeting and what they want them to achieve.
- Surveying the audience
- Doing a heuristic review i.e. going through the website and noting issues based on experience
- Heat map and scroll map – looking at where people are focusing their attention and where they are scrolling to on the pages
- User monitoring – monitoring a user navigating through your website on desktop and mobile to see how easy/difficult it is to complete the actions.
“Whether you are looking to improve your conversion rate or just make your user interface as straightforward to use as possible, the number one thing you can do is get to know your audience better. Don’t assume you understand their needs. Dig a little deeper by looking at how they behave and their context, not just what they say.”
Paul Boag, Customer Experience Specialist
Looking at the numbers/analytics behind the scenes.
Quantitative research is the methodology which researchers use to test theories about people’s attitudes and behaviors based on numerical and statistical evidence. Researchers sample a large number of users (e.g., through surveys) to indirectly obtain measurable, bias-free data about users in relevant situationsInteraction Design Foundation
Now, let’s go through the different categories you need to analyse as part of the UX audit.
Google recently moved to mobile first indexing which means it looks to the mobile version of your website as the most important version (not desktop). When you’re checking usability all tests should be performed on mobile and desktop. Ignore mobile at your peril!!!
Visual Design & Visual Hierarchy
The visual elements you display on the page are an important part of the overall website design while the hierarchy lays out your content in order of importance.
People skim through websites.
Your design and visual hierarchy will get people to stop in their tracks and pay attention to content and information that is more important to your business.
There are many things that can help with visual hierarchy:
- Size – For example, a heading in a large font that is going to stand out more.
- Colour – A colour can attract or detract attention. I remember asking a friend of mine why they used a colour which looked bad on the website. He said he purposely used this colour to make that element stand out.
- Alignment – Imagine if there were 5 apples in a row but one was further forward than the others. This is the one that would stand out.
- Repetition – If you use the same style for certain elements people will think they are related.
- Proximity – close items may be considered related.
- Space – having white/negative space around something helps it stand out.
Design has gone from a nice-to-have that will make things look better, to a crucial element that drives user engagement and, therefore, profit.
Fabricio Teixeira, The Design Collective
Is the design suitable to the brand?
Ryanair provides low cost flights around Europe and have been extremely successful. When you go to their website you don’t think of ‘luxury’ and that’s not what they want you to think.
Here’s a perfect example from today:
There’s no way I’d put a big banner across my home page like this but it’s totally in line with what their brand is about.
So you need to decide if the design matches with the brand and who you are targeting.
This is based on the industry you are in, the design of competitor websites, who you are targeting and what the brand is about.
What is the quality of the imagery/video?
This also depends on your brand but typically you will want high quality imagery that supports the story on the page and good video with high quality sound.
At times businesses can get away with their own imagery/video but having someone professional create this content can help a lot.
Website imagery not only helps to draw the eye and lead visitors to where you want them to focus on your website, but it can also help to build trust in your capacity as a guide or sherpa who can help us to solve a problem or achieve a goal. Images of you or your team speaking, helping clients or getting results can help us to immediately connect with who you are and how your team can guide us. When you add video, testimonials and case studies to the mix, your website will attract and convert much more effectively.
Donna Moritz, Socially Sorted
A professional will understand storytelling and will capture all the right moments. They will also understand the importance of your brand.
If part of your brand is that you are friendly and fun then this should come across in images and video also.
Of course you want to make sure that the imagery looks good on mobile.
How often have you seen an image cut off on a mobile device and not handled correctly?
Does the site feel fast and is it responsive to user actions?
In the technology/performance section of this guide we outline what to test for in relation to speed.
One of the most important factors is the perception of speed and that can be done through the ‘Speed index’.
This checks the speed to draw elements on the screen at various stages of loading.
Imagine this scenario.
Website 1 loads in 2 seconds but you don’t see anything on the screen until 1.5 seconds have passed.
Website 2 loads in 2 seconds but after 100ms you start to see parts of the website displayed and it gradually shows more.
Our experience is better with website 2 because we’re not as frustrated.
… for more details see the technology/performance section.
Is negative space used correctly?
Positive space is the subject of interest and negative space is all the space surrounding this.
Negative space is also referred to as blank space or white space.
When you put content and elements too close to each other it makes the page feel cluttered.
It also makes it harder for people to read the content and to know they have moved from one section to another.
Remember… people are skimming through your content so you need to get them to stop scrolling and you need to make them feel it will be easy to consume content.
Here’s a notoriously bad example:
If you look at the above screenshot, you’ll quickly notice how cluttered the page looks. It’s obvious that there’s no breathing room between different elements on the page and this makes it really hard for users to focus on one particular thing.
A messy, cluttered page like this is the fastest way to lose potential customers.
Here’s a good example from the HubSpot website:
The above screenshot shows part of the HubSpot’s page that promotes their CRM tool and it’s a perfect example of how you can leverage white space to balance design elements and guide the attention of users without overwhelming them.
We are inclined to hit people with too much content. Keep it short and simple like Convertkit. You can always provide expanded details of the content at a later stage to avoid overwhelming people.
Now, let’s look at an example of how whitespace is used in logo design.
NBC used to have a logo that showed a Peacock. When their logo evolved they still wanted to have the Peacock as part of it but they made it more subtle.
You can see that the Peacock figure is formed in the white space!
Are the pages laid out in a way that will encourage the actions you want users to take?
Visual hierarchy is helping website visitors figure out where to look when they scroll through a page. When done well, it also makes it easy for them to take the action you want them to take.
For example, content and items at the top of the visual hierarchy (e.g. your hero section) must be most important to your company and most relevant for website visitors.
Do calls to action clearly stand out on the page?
A call to action (CTA) is a button or a hyperlinked text that drives website visitors towards action you want them to take.
Primary CTA – This is your focus, you really want visitors to do this.
Secondary CTA – If they don’t do what you really want them to do (e.g. buy now) quite often it’s worthwhile giving them an alternative.
A good guideline to use is to make sure the text in the call to action button completes the following sentence (not always suitable):
I want to….
Buy now, read more, sign up etc.
Just make sure that the most important CTAs on your website clearly stand out.
Here’s an example on the home page of Square, a company that provides tools to help run small businesses:
The primary call to action is ‘Get started’ which clearly stands out more than the secondary call to action ‘view all solutions’.
They want visitors to get started immediately but if they are not ready yet and need to read more information they have a second option to ‘view all solutions’.
See calls to action in the image below.
- Color is used to help calls to action stand out
- There is space around calls to action
- They are in a position that people normally expect to find CTAs
- They don’t complete the sentence ‘I want to’ but it’s pretty obvious what they are for.
Check out our conversion checklist which contains more information about calls to action.
Is there a complimentary colour palette that works well with the brand?
Colour is an important part to visual design.
If you see red you think danger, excitement.
If you see blue you think safety.
So your colours need to match your brand!
When you choose a colour palette it should include primary and complementary colours that you’ll use consistently going forward.
Here’s an example of complimentary website colours generated using the AI tool colormind.
Is there consistency to the design?
There are times when you purposely make the design inconsistent but that is intentional (e.g. when my friend used colours that really stood out).
But mostly you want consistency. For example:
- Alignment – If you left align your text don’t center align any elements.
- Image quality – If you have 10 great images and 1 really blurry image you’ve lost!
- Colours – decide on your colour palette and stick to it.
- Layouts – you might have several layouts but you use them in different places.
- Design elements – Designers often put nice design elements on the page, in the background etc. but if you’ve started this then you need to make the style consistent.
- Typography – Decide on your fonts/styles and stick to them.
Are there tactics to stop people scrolling?
We skim through content and stop at what’s interesting and/or stands out.
In a research from Sumome they analyzed 650,000 website visits and found that the average reader would read only 25% of content.
So we need to understand how people read and how to stop them as they scroll quickly through your page.
- A heading is important because good copy will attract attention.
- A good image can definitely stop a visitor’s scroll
- A section designed differently from a previous section can get people to pause rather than continue to scroll thinking this is one long page about the same thing.
- Short sentences are easier to read than longer ones.
And what about reading patterns?
Reading patterns are about how your website visitors read your content.
Two common reading patterns that you can optimize your design for are the Z-shaped path and the F-shaped path (F for fast!).
The Z shaped design is typically used when you don’t have text heavy sections on your website e.g. minimalist design.
We expect people to start on the left and glance over to the right and then move down to the left again and then right.
You will often see a continuous Z pattern as you scroll through pages.
People are moving quickly through your site so you need to have ways to stop them.
F shape is typically more suitable for text heavy websites.
People move down the left hand side of the page and move back and forth to the right.
A blog for example is generally text heavy.
Following common reading patterns in your design will help you create a visual hierarchy that leads your users straight to the content you want them to see and in the right order.
Information Architecture & Navigation
Information architecture is typically mapped out before a new website is designed and is concerned with how the information is accessed and presented on the website.
The user interface is how this visually appears and the information architecture is describing how it should function.
Navigation is an important part of information architecture because it’s used to help users navigate around the website.
Are there too many choices?
When you map out your personas you may find that you have a lot of different categories you want to target.
But if you target them all on the homepage that may give people too many options to choose from.
The longer it takes to respond the more likely the person will move onto something else.
3 is a good rule of thumb if you are giving people options.
If you target 5 different categories of people then maybe you target 3 on the home page but in the menu you have pages for all 5.
The ones that generate the most revenue of course!!
Is the navigation logical and easy to access?
You need to put a lot of thought into the site navigation.
You need to think about it from the user perspective but also from an SEO perspective.
Your top level menus are the most important areas and your submenus are related to the top level menus but they’re less important.
Gloomaps is a good tool for mapping out your menus.
Typically, the main navigation is placed across the top of the screen or is displayed as a ‘hamburger’ menu on a mobile device.
This is a hamburger menu:
Here are some common best practices for website navigation:
- Menu navigation across the top with ‘hamburger’ menu restricted to mobile only.
- Max 7 to 10 main menu items.
- Avoid having vertical navigation in most situations – on some pages it makes sense to have vertical navigation but this is quite rare.
- Try to have one main navigation on the home page. If you want to have a sub navigation with items such as contact/about make sure it doesn’t stand out on the page to the same level as your main navigation.
- Limit the number of items in the dropdown menus. Too many options are confusing for users and make for a bad user experience on mobile.
Is there a user friendly 404 page?
You’d be surprised how often someone lands on a 404 (page not found) page on your website. You want to display a professional page and give people options for what to do next.
Can a user search the website?
No matter how good your navigation is a quicker way of finding something is often through search.
So you need to provide an alternative to just using the menus.
Small sites usually don’t need a search bar, but if you have a complex site structure with hundreds of pages (e.g. an ecommerce shop, a news site, etc.) then you need to give users the option to search exactly what they’re looking for.
There is a site search parameter in Google analytics that you should enable. When this is enabled (depending on the setup of your search) you will be able to see everything someone enters in the search box.
Is it clear what people should do next?
On every page on your website it should be clear what you want visitors to do next. We tend to focus a lot on calls to action on the homepage but most people arrive on our site on other pages so it’s important to have CTAs on internal pages, too. For example – buy, download, enquire etc.
We think about what’s next in the users journey and make sure this is catered for on the page.
Is it clear to visitors where they are on the site?
As the visitor scrolls through the website they need to clearly see where they are and how they can move back to where they want to go.
Breadcrumbs are a good way of showing website visitors exactly where they are.
Steps in a booking process is also a good way of showing users where they are and how they’re progressing through the process.
Is it just as user friendly on a mobile device?
In the first half of 2020, mobile devices generated 52 percent of global website traffic.
And it’s been like that for a few years now.
That’s why you need to make sure you’re delivering great experience to people accessing your website from their mobile devices.
Here’s what you need to pay attention to.
Is your website responsive so it adjusts the layout to smaller screen sizes? This is incredibly important for a good mobile experience.
Is it easy for mobile users to click on the buttons and CTAs? Best practice for mobile UX is to make clickable elements big enough and positioned in the screen center so they’re easy to spot and click on.
Do you have mobile friendly navigation? Good navigation ensures that users can easily get to the most important content on your site.
You need to make navigation easily accessible but also make sure it doesn’t take up too much space. This is why most designers go for a hamburger menu despite all the debates around its usability.
Are your forms easy to fill out on mobile? Look, nobody likes forms.
And if it’s important for your business that people input their information instead of click-to-call for example, then you need to make this painfully easy for them.
Ever tried to fill out a long form on a smartphone? Not the best experience!
Make sure you ask for minimum information and, whatever you do, don’t create forms that keep removing the data if a user forgot to enter something.
You have to check UX on real mobile devices!
Brian Dean, Backlinko
Interaction design is all about enabling frictionless interaction between your website visitors and the website UI.
It is goal-driven and focuses on helping visitors do what they came to do on your website as smoothly as possible.
Are forms easy to complete?
Your website visitors are not going to have a good experience if you have long forms with poor layout.
If you make forms difficult to complete, most people will just give up.
We’re looking for:
Well designed, easy to complete forms.
You need to do what you can to make it easy for visitors. For example, having a calendar dropdown instead of asking them to type in the date.
Are progress indicators used?
When website visitors take actions that take time to process or require multiple steps to complete, you need to show them their progress using a progress indicator.
This is a great way to avoid any confusion or risk users abandoning the action before they accomplish their goal. Simply show them what has been done and what still needs to be completed.
Are website visitors ever stuck, i.e. what’s next?
When they land on a 404 page do you give good directions of what to do next?
If they perform a search and there are no results, what do you do to help them find what they want?
If their browser crashes during payment do they get a follow up email with details?
Is there help a text when needed?
A user fills out a form and they make a mistake but they’re told how to resolve this error.
A user views a pricing page for a product and it shows a bulleted list of items but there’s also help text so they can read an expanded version.
How do website users navigate through the website?
Watching how users navigate and interact with the website is going to tell a lot about your website.
You can use a tool such as Hotjar which is excellent for this.
Typography and Readability
Typography is about how letters appear on your webpage on different sized screens.
When you think of typography you need to think of:
- Typeface – Arial and Times New Roman are a type face. This is a category of a font.
- Font – A font is what size and property the typeface is. For example, Arial bold 16 says that for the typeface (Arial) it’s going to be bold and the size is going to be 16.
- Line spacing – what is the spacing between one line and the next?
- Length – how wide will sentences be in different parts of the website? We typically make our blog layout narrow so it makes it appear less daunting to read.
- Letter shapes – shape can help with readability and how it looks.
Does the typography suit the brand?
Typography is a big part of a brand identity.
The right typography that matches your brand personality and style will help you consistently communicate the right message to your target audience.
Like colours, different fonts evoke different emotions and affect how your customers view your brand.
So, make sure you choose those that truly reflect what your brand is about.
Ideally, your chosen brand font is unique, in-line with your brand, memorable, and easy to read on all platforms.
Is it readable across all devices?
For example, desktop, mobile, ipad? You want it to work well across many different devices.
What happens behind the scenes?
To see how effective our design is we also need to look behind the scenes at our analytics.
Check out our Traffic audit checklist.
Mobile only tests
Mobile is a very important part to usability and all tests outlined above should also be verified on mobile. Here are some mobile specific ones:
Do popups on mobile impact the website visitor in a negative way?
Quite often popups that work well on desktop are not correctly implemented on mobile so they need to be disabled.
Any issues with tap targets on mobile?
These are areas on a web page that a user can interact with. On mobile it can be more difficult to select various elements so it’s worth testing there.
Is it easy to contact the company?
If I’m booking a Hotel room and I want to do it quick I will probably just ring the Hotel rather than type everything into a form while I’m driving!
You need to make it easy for users to click to call.
Or contact the business using a simple form…
Accessibility is an important part to of user experience on your website and we have this covered in our accessibility audit checklist.
Ecommerce Specific Testing
The following is a checklist of ensuring that products are found and displayed in the correct way. This affects usability but also affects conversion:
- Are there high quality images/video?
- Are there multiple images of each product?
- Is it easy to apply category type filters?
- Is availability made clear?
- Are alternatives offered when there is no availability?
- Can you swipe right on mobile with multiple images?
- Is it easy to delete products from the cart?
- Is it easy to add to cart and can you see the number of items in the cart as you scroll around the website?
- When an unregistered user exits and returns are the products still in the cart? (for at least a couple of days).