How to avoid common user experience mistakes on your website

Due to the somewhat tumultuous events that 2020 has bestowed upon us, there has never been a better time for aspiring entrepreneurs to take charge and launch their own online business. Even traditional brick-and-mortar stores have realised the importance of creating a strong online presence. We may not have control over a large aspect of what is happening regarding lock-downs, social distancing, and how consumers are choosing to shop, but we can adapt and go where the majority of the people are. Online.

With tools such as Squarespace, WordPress, Wix, and Webflow, you're able to launch your own website in a matter of hours. This is wonderful. But these tools come with a downside — non-professionals, and some professionals, are making this once sacred place a landfill of badly designed pages.

Websites should tell a story and give the reader, with your guidance, the option to decide their own flow

I am not here to shame you or dictate that a 'real professional' should be the only one blessed enough to have the right to populate the internet with websites. Sometimes the best option is in fact to build it yourself. What I am here to do is give you some simple advice to make sure that your website abides by certain rules so that it provides a better user experience for your audience.


Typography

Typography is one of the most important aspects of any website. If you get it wrong, you'll create an uncomfortable reading experience for your audience. The last thing you want is for them to leave your website because of this. Here are some very simple industry standards that can be implemented.

Keep lines of text to specific lengths

Line length refers to the number of characters that exist in a single line of text before it wraps to the next line. Although your text size and font choice play an important role in determining the length of your text, the standard line of body text should be between 45 and 75 characters (including punctuation and spaces).

Keep an appropriate space between lines

Line-height refers to the spacing between the lines of text. Again, the size of your text and choice of font plays an important role in determining what this should be. However, a good rule of thumb to follow is that it's 150% of the font size. For example, if your font size is 16px, the line-height should be 24px.

With shorter lengths of text (e.g. your headings) and larger font sizes, you can opt for a narrower line-height, whilst uppercased text should have a narrow line-height that's close to 110%.

Keep a large enough font size

The default font size set by browsers is 16px and most people don't override this value. With the endless number of fonts now available, don't be scared to experiment with larger text sizes.

The easiest way to discover whether your audience will be comfortable reading your chosen text size is to copy a paragraph from a Wikipedia page. Change it to the font type and size of your choice and see whether you're comfortable reading it. If you're able to easily read it without straining your eyes, your audience will be able to also.

Keep enough contrast between the text and background

It should go without saying that there needs to be contrast between the text and the background it sits on. But it seems that this rule is broken too often that it deserves repetition, repetition, and even more repetition. When there isn't enough contrast between the text and that background, it causes a strain on the reader's eyes, making it more difficult for them to read.

Unfortunately, it's not as easy as having one light colour and one dark colour, as the hue and saturation make a big difference. Set your content in the font, size, and colour of your choice and then read it as your audience would. Again, if you find it comfortable to read, they will too.

It's important to remember that your audience will be viewing your website on a range of devices, so ensure it's easy to read on both a desktop screen and mobile device.

Content structure

How your content is structured and organised on your website is something that needs to be considered in depth. If your audience can't find what they're looking for or find it difficult to navigate through, they will quickly go elsewhere.

Start with your content, then create a sitemap

Don't confuse the sitemap I'm referring to with an XML sitemap. This is an entirely different thing.

When building your website, start by creating your content first, then decide how to organise this later. The last thing you want is to organise your website into sections, work hard to create some beautifully written content, then realise there isn't enough space to contain it.

Once you've created your content, look at how it can be grouped together and what individual sections end up appearing. You can then decide whether these sections deserve to be standalone pages or whether you can group different sections together on one page.

Understand the hierarchy of your content

Whilst navigating your website, it's important to pull your audience's eyes to the most important aspects first. It's not always about which text is larger than others. For example, just because a heading has a larger font than the body text, it doesn't mean that it's more important.

You have a short amount of time to grab your audience's attention and most importantly, to keep it. Understand what the different elements are that you want your user to focus on first. Then ensure that it stands out enough to hook them in and leave them wanting more.

Understand what users want from your website

The print medium tends to have a simple user journey; left to right, shift down, and repeat.

If you've ever read a Choose Your Own Adventure book, you'll have experienced how the book guides you along a story but, ultimately, you decide the journey you take. It's no different with a website. It should tell a story and with your guidance, give the reader the option to decide their flow.

Work to understand the reason your audience is visiting your website and what information they want to leave with. List the main reasons why somebody would come to your website. Is it simply for contact information? Do they want to see the work you've done to gauge whether you are a good fit for them? Are they looking for your latest products? Are they there to receive validation of your reputation after a recommendation from a friend?

With a clear list of key reasons, ensure your website makes it as easy as possible for them to achieve their goals.

Some additional points

The below points are still important, but can be summarised quite easily.

  • White space: Don't be afraid of it. A website has infinite space and giving your readers room to enjoy your content is a gift;
  • Stock photography: I don't expect everyone to hire a photographer and have images produced for their website. But it's easy to find free stock imagery that works well. You're telling a story and changing the cast in each image looks obvious. It's sometimes better to leave empty space than have unsuitable stock photography for the sake of adding images;
  • Adding value: Does your website add value for your audience? They've landed on your website for a reason. If they don't gain anything from it, why does it exist?
  • Uncontrollable elements: People like control. Doing the work for them may seem generous but more often than not, they don't like it. Automatic carousels, especially with text within them, means that a user doesn't decide how long they can focus on a single slide. You've made that decision for them.
  • Other people's opinions: It's easy for people to give their opinions on your website. The problem is that you don't know why they are giving those opinions or how valuable those opinions are. Did you guide their opinion with your comments? Are they using your website in the same way your audience would use it? Do they have a fundamental knowledge of professional design and typography? Before giving it to your friends, family, and posting it on user testing websites, try to understand whether the responses will actually give you any value.

These rules are only a subset of what it takes to build a valuable and beautiful website for your business and audience. It takes years of learning and experience to accurately convert the requirements of a business into a layout that works.

Hopefully you've taken some value away from this article, whether it's for your attempt at creating your own website or for when you're working with a professional.