How To Improve Your Design and Usability
The design of your site can impact the conversion rate you get through your website.
With overly designed sites, the core message or information may be missed by your site visitors because it’s not in the right places, and design has become more important than usability.
But what makes a good website?
The best websites are simple. They look great but have the right elements and information in the right places. They are easy to navigate and have the right calls to action where they should be.
Have you ever been on a website where you didn’t notice the design; it was just easy to use? No questions asked. That’s Good UX design and copywriting.
But you notice the badly designed sites. It’s normally confusing and hard to navigate, and you end up talking to your phone or laptop, but not in a nice way 🙂
Let’s make our visitor’s lives easier.
This page will cover some of the most common web design UX (User Experience) issues I see when viewing sites.
I’ll give you some examples of it done well and badly.
These are universal principles that can be applied to all sites.
Once you understand the basics, you can objectively review your site and see where it can be improved. You’ll also easily spot bad design.
Making changes to your site’s design.
These changes will be easy to make using a theme and page-building tool like Elementor.
In the example videos, I’ll be using Elementor. You must speak to your developer if your site is not built in Elementor. I’m not going to teach responsive coding or other theme tools.
Common Terms
- UX = User Experience
- CTA = Call to Action
- Nav = Navigation
UX Design Basics
- Simplicity: The power of minimalism and how it enhances user engagement.
- Consistency: How maintaining consistency across design elements fosters familiarity.
- Clarity: The role of clarity in guiding users and reducing cognitive load.
- Accessibility: Ensuring that design is inclusive and caters to all users.
- Hierarchy: The art of organising elements to prioritise user actions.
Putting it All Together
Below, you will find detailed information on each key area of Good UX design.
In the video below, we cover these with a live walk-through and detailed explanation all in one video.
Review Your Site Design
Watch the video below, where I walk you through what makes a website user-friendly and well-designed.
You can use this as a guide to assess your website and then adjust accordingly.
Sites Used In This Video:
1. Important elements are above the fold.
Nowadays, most people work on laptops or mobile devices, which means your main navigation, headline, and call to action should all be easy to see without scrolling.
You must immediately give them the key information for the page they land on. They should be able to access the page’s main content quickly and easily to determine if they have landed in the right place.
Massive images with no clear USP or information are a waste of space and take up a lot of real estate. Plus, they load a massive image file, slowing your pages’ load speed.
Bad Example
Good Example
2. Mobile, Mobile Mobile
In the videos, we address both desktop and mobile platforms.
It’s essential not to overlook the design and usability of your site on mobile devices. Mobile traffic can easily account for 50% or more of your total visitors, and in some industries, it may reach as high as 80% or even 90%.
Ideally, you should consider your website as two separate experiences when it comes to design (though this doesn’t mean you need a completely separate mobile site). The key is to ensure your site is mobile-responsive.
Similar to desktops, there are fundamental best practices to follow for mobile. These include:
– How navigation is organized and functions
– How calls to action are displayed
– Site speed on mobile devices
Keeping things simple and clean is crucial for mobile users. Common mistakes I notice on mobile versions of websites include cluttered headers, overly complex navigation, and font sizes that are either too large or too small.
Mobile View Review
Be sure to watch the video below to learn about best practices for mobile phones and evaluate your website accordingly.
3. Simplify your navigation
A crowded navigation bar jam-packed with every page on your site can confuse your users.
Too many choices mean people usually make no choice.
You want to highlight the key services you want to sell and move everything focused on something other than your products and services to the footer or less prominent navigation.
A streamlined nav will help users identify what you do quickly and easily.
For example, these pages could be your terms and conditions, privacy policy, or blog.
Ideally, you want your site’s main pages within 5-6 navigational headings. With fewer items, you can make your headings bigger, more prominent, and easier to identify with your users.
Bad Example
Good Example
As you can see from the two examples, the second version is much easier to process quickly and complements the header design.
Review Your Site Navigation
Simplifying your website navigation is crucial for enhancing user experience and keeping visitors engaged. By streamlining the menu options and organising content logically, you make it easier for users to find what they’re looking for.
This not only reduces frustration but also encourages deeper exploration of your site. Incorporating clear labels and minimising the number of clicks needed to access essential pages can significantly improve usability. Ultimately, a well-structured navigation system helps guide users seamlessly through your content, leading to increased satisfaction and higher conversion rates.
4. Design for the natural eye movement
Our eye is naturally trained to move from left to right in a z-pattern. So when we first look at a site, we go to the logo and scan left across the navigation.
Down to the left and right again.
Getting all the key parts of your page within this Z pattern is crucial. These include logo, navigation, CTA, main header and subheader, and image or video. In the two examples below, you’ll see how all of the key information about the page fits within this Z pattern.
Apply this approach to other pages, not just your homepage.
Here is an example on a different page where we're not using a 2 column header
5. Colours & Fonts
The use of colour on your site can make or break your site design.
Getting the colour tine right is crucial; colour can have a physiological impact. If you want to learn more about the psychology of colour, read this article.
You also need to represent your brand colours to consistently maintain your online presence and any other branded offline materials.
Your site should have four core colours.
- Primary (Main Headers)
- Secondary (Secondary Headers)
- Text (Body Copy)
These form the Primary colours of your site and will be used 90% of the time.
Mainly in your fonts and headings
- Contrast (CTA)
Use colour contrasts to draw the eye to the main areas you want people to notice.
CTA’s will use the contrast colour to stand out.
A simple trick to use on your website is to blur your eyes when looking at your page and see if your CTA stands out.
Can I only use four colours on my website?
No, you can use other colours to help highlight the key areas of the site. These can be variations of your primary colours, tints, opacity variations, or gradients. But essentially, you’ll still be using your core colours.
Use your brand guide to help you.
Other colours can be used, but these should be subtle and used in specific areas or pages to highlight a different service, such as a background section.
Consistency is key
When it comes to your site colours and fonts – consistency is key.
Ensure the same fonts and colours are used in your headings, copy and CTA’s from page to page, and your site will instantly look more professional.
6. Calls to action (CTA's)
Review Your Calls To Action
Reviewing your calls to action (CTAs) on your website is crucial because they serve as the primary drivers for user engagement and conversion.
Well-crafted CTAs can effectively guide visitors toward taking desired actions, whether it’s signing up for a newsletter, making a purchase, or requesting more information. Regularly evaluating and optimizing your CTAs ensures they resonate with your audience, align with your marketing goals, and reflect any changes in your offerings.
By doing so, you can improve user experience, increase conversion rates, and ultimately enhance the effectiveness of your website as a tool for generating leads and closing sales.
Calls to action are a key element of your site if you want people to take action, whether that’s booking a call, filling out a form, purchasing a product or calling your office.
If they are interested in your service or product, you need to tell them what they need to do.
Primary (Transactional)
This is what we call our Primary CTA. The main action we want people to take
Make them different colours to other content and buttons so they draw the eye. (Contrasting)
So, where do we add our calls to action?
Let’s look at a few examples from one of our client’s sites GSA Marketing
1. In the header
Always have a call to action in the top right corner. This comes back to our natural eye movement. From left to right, this will tell the client the primary action you want them to take.
2. Inside Your Page Content
Include them more than once; if you only have one in the header and the user scrolls down, they won’t see them again.
But dont be too aggressive – 3-4 throughout a page will be fine.
3. Inside Your Page Content (How It Works Section)
I recommend a how it works section for a service page, this helps explain the process the client will go through and what they can expect.
Secondary CTA (Lead Generator)
Not everyone will be ready to buy from you now. This is why offering something potential customers would find valuable is crucial. By giving this away in exchange for an email address, you start a relationship and give them an insight into your expertise, which will help you move them along in your sales process.
Examples of lead generators
- Free PDF Download
- Free Video Course
- Free In Person Event
- Free Product
- Discount codes
- Free copy of your book
- Free Webinar
- Free Software Trial
Below are a few examples of lead generators and how you can work them into your site content.
On page full section.
Inside your blog content
In the sidebar of your blog content
7. Images
Images can help your users to recognise what your business does quicker and subconsciously build trust.
Here are a few rules for using images on your site.
Make Them Relevant
Relevant images of what you do or your products and services can help users identify they are in the right place.
Sell dog food – show a dog with or eating the food.
If you are a coaching business, images of you working with people or people in a group setting help highlight this.
If you’re a landscape gardener, before and after pics, nice gardens
Kitchen makeovers, same thing etc etc
Real Vs Stock Images
Having your images is always better.
Nowadays, getting a photographer to take images of your team in the business doing what you do can be very affordable. You could even do it with your camera; they’re that good now.
But this isn’t always possible, so stock imagery can be used. The quality and diversity of stock images have massively improved, so finding images that look less staged and cheesy should be easier.
Here are a few places to get stock imagery
- Pexels
- Adobe Stock
- Big Stock
Happy People
Real people looking happy or content has been proven to boost conversions.
Directing Images
Also, images directing people to key areas can help you to convert more.
8. Video
Video is a powerful tool. It’s engaging and can tell a story quicker and easier than reading text. With today’s attention spans waning, video is a great way to inform visitors about your service or products without reading through lots of copy.
They are also a great way to build trust and credibility with visitors.
Intro video
A simple video with a member of the team explaining the service
Intro video combined with client testimonials
Video Backgrounds
Videos, especially when used as background elements or large background videos, can significantly enhance the visual aesthetics of your website. They add a sense of motion, depth, and interactivity that can make your site visually remarkable and memorable.
These can be used without sound, but they help quickly show what your business offers and that you are a real business.
A few Examples of how background videos could be used.
- The cleaning company shows the team cleaning, branding, and customer interaction.
- Travel companies show clips of their travellers enjoying inspirational trips.
- Event company – Showing highlights from the popular events
Action Steps
Book a free website audit where we’ll look at your site design and offer guidance on how to make it easier to navigate and areas of the design you can improve
IMPROVEMENT SERVICES FOR WATCHING THIS SERIES
Copy & Content
In this step, we'll look at how the content on your website can impact the conversions you get and what you can do to make your site more engaging and likely to convert.
