You may have heard it before (or not), but it's a pretty important aspect of web design. Back in the early 90s and 2000s, websites were still relatively new, and web designers were learning how to make good websites.

And like anything, we learn over time through trial and error what works and what doesn't. Thus, the term 'User experience' (or UX for short) was born.

But, what exactly IS user experience? What does it mean? And why is it essential for my website, you might be asking yourself? Well, I'm glad you asked; let's get into it.

What is user experience?

User experience is a person's overall experience in using something, such as a product. How pleasant it is to use it. A website in this context is seen to the end-user as a product. So we look at all kinds of things to do with a good website experience. How easy it is to read, use, understand and navigate their way around. It's their interaction with your website, and the ultimate goal is to make it as pleasant as possible.

There are dozens of factors that can help give your website visitors a better user experience, so we'll dive into a few of them to help get your mindset in the zone.

White space

Imagine opening a book and being met with wall to wall of text. No spaces, just a massive block of text covering every page. That would be incredibly difficult to discern sub-topics in among all of that, wouldn't it?

Or looking at a group photo of 100 people trying to find that one person you know in the picture. An effort is required to spot them.

The same principle applies here. And not just for text, but for any element on a page. Photos, icons, video, text, shapes, groups of elements. The more white space we give the user, the less crowded it is, and the easier it is to discern to the eye.

Keep it simple

There's something powerful about keeping something simple. And it makes for a much more pleasant experience for the user. Why? Because it's easier to understand.

Not overwhelming the user with too many options or overly complex content reduces the likelihood of the user being confused, just giving up, or leaving the website altogether.

And simplicity can be applied in any number of ways. Simple navigation, simple page layouts, simple presentation of product information, the list goes on.

Call to action

A call to action is a clear and straight-to-the-point prompt that tells the user what you want them to do. But not only that, but it also helps the user quickly find the most important thing on the page.

For example, a hairdresser's website might have a large button with a good-sized font saying "Book an appointment." This tells the user that they can make bookings online, and they don't have to go hunting for it because it's in a clear and prominent spot on the page.

You also have to consider that some users might visit your website not knowing what you want them to do (and having a clear goal for a website is a must). So by having a clear call to action, it makes for a better user experience.

Be consistent

Things become more manageable when we see patterns. Predictability can be an ally. For example, if you have the same navigation at the top of your page, no matter what page you are on, it makes it a breeze for the user to navigate around the site. Why? Because they come to expect, it to be there.

But it's not just navigation bars that can be consistent: page layouts, headings, and body text at a particular font style and size, the same colour palette, even the amount of spacing between specific elements on a page can bring a sense of harmony.

Websites that keep changing fonts and sizes, entirely different colours on every new page, inconsistent patterns, and layouts can seem disjointed, confusing and throw a website visitor off. The result may mean it takes the user longer to find their way around, consume content or even understand what's essential on the page.

Your target audience

Present content that is relevant and useful to your intended audience and keep out the irrelevant.

For example, suppose you own a fire safety business that ensures that large companies have adequate training for their employees. In that case, there's no point in including content that has to do with fire safety in your own home.

Be helpful, be relevant. Speak their language. Otherwise, you risk diluting good content, making it harder to find and the page overall becoming less interesting.

Make a clear distinction between elements

Making things super clear for website visitors when they browse your website is a bonus. For example, making headings a larger, bolder font and in a different colour than the body text can help them discern a title heading and what is not.

Or it might be making forms and buttons clear for what they are by ensuring the shape and colour make them unmistakable. Even where labels and words are concerned, it should be concise and clear what it's saying it is. Such as "add to cart" or "make a booking" —that sort of thing.

By ensuring a user immediately knows what something is, it removes the confusion, frustration, and guesswork out of interacting with your website. If they have to guess or work out what something is or where it is, it makes for a poor user experience.

Be concise

You'll want to get to the point with what you are trying to convey to your website visitor. Time is precious, and so is real estate on your page. The longer and more indirect you are, the harder it'll be for the user to understand what you are trying to say, or the key point you're trying to drive home will be lost on them.

Be engaging with your content

You want users to have a positive experience with your brand when they visit your website, so having engaging content is essential. Ask yourself, what are they there for? What will your website visitors be looking for? What sort of content will they stick around for?

How you talk to your users, how you present information to them also counts. You want content that's going to help guide them throughout the site and help them understand.

Be varied in your content too. Does your audience respond well to video? What about audio? Do pictures and diagrams work better for them? Or perhaps tiny little micro-interactions using animations?

Also, be mindful and sparing how much content is presented to them; remember, sometimes it's better to be selective with what you share and how much of it, rather than bombarding them with information overload.

Have a responsive design

An absolute must-have if you are looking at getting a website. Responsive design means the website can dynamically re-size and re-order its content to fit any device, be it mobile, tablet, or desktop computer, proportionally so that it's easy to read and use for a website user.

Before responsive web design, when smartphones first showed up on the market, websites would appear as their desktop format, only shrunk right down to an iddy biddy size, making it impossible to navigate or read anything.

Having a responsive web design makes for an excellent user experience.

Website speed matters

There is nothing worse than looking for information on a website and the website pages taking a painfully long time to load. Or worse, it loads, but half the images and content fails to load because the page timed out.

Google has made this a factor when determining whether to rank a website higher or lower, with faster loading websites being preferred.

There can be several factors that can affect a website's speed to load.

Where you host can make a difference, as there are web hosting companies with excellent web servers and web hosting companies with not-so-good web servers. Scoping out the reviews of a web hosting company is always a wise move, with particular focus on what anyone happens to say about website speed.

Having images with large file sizes can make a difference too. If you have images that are all a good megabyte (MB) or more in size each, rather than being much smaller in kilobytes (megabytes is more than kilobytes or KB for short), it will take longer for the site to load those pictures.

Add several images to a single page, and they all add up. For this reason, always make sure your images are compressed. Compressing an image can reduce the size of that file without losing the quality of the image in any noticeable way.

JavaScript, a particular programming language, can also slow a site down if not handled correctly. Your web designer can help you reduce the impact this has on your website. There's also a known technique to web designers and web developers called minifying code, which helps crunch the code down, helping shave a bit of time off the total loading time of a website page).

Is it easy to scan the page?

As crazy as it sounds, a website visitor can overlook a lot of stuff simply by scanning a page very quickly. And that happens a lot. So ask yourself, if you want to make it easy for users to spot information piece by piece, does your website achieve that?

The best way to accomplish this is by providing clear headings with clear messages. You may even decide to use a little bit of imagery to help highlight different areas of the site where there is vital information. They might not see the headline, but if the picture captures their eye, it might be enough to have them stop and take time to read if it's what they're after.

Have a clear hierarchy

Having some form of visual hierarchy can dramatically reduce the amount of time a user spends looking for information. It can help draw their attention to things and help guide their eye through a page.

Visual hierarchy could mean one element on a page is slightly larger than another, giving it the appearance of having slightly more importance. Or the colour of one element might be more dominant than another colour, making it stand out more than the others. Call to action buttons that try to draw the user's eye often use this technique.

How things are placed and grouped on a page can also give the appearance of hierarchy.

Let's Recap

We don't always consciously think about things like the user experience, as much of it is subconscious when we look at websites. But if you spend the time to get these things right, the user, without realising it, will have a much better user experience on your website and ideally get more out of your site as a result.

So lets recap on what we have learned:

Use whitespace
Keep it simple
Use call to action
Be consistent in your design
Consider your target audience
Make a clear distinction between elements
Be concise
Have engaging content
Have a responsive website
Ensure your webpages load fast
Ensure it's easy to scan the web pages
Have clear hierarchy

12 user experience guidelines for websites

Table of contents