How to avoid common user experience mistakes on your website

I absolutely love the internet. With all of its informative resources, ease of social interaction, entertaining media, as well as all the weirdness and experimentation that it brings. It is a platform that people have truly pushed to the limits and managed to do some incredible things.

The array of options and opportunities is what led me to where I am now. At the age of 17, instead of sitting for my A-Levels I started experimenting with building things for the internet. In these 13 years, I've seen the internet change, sometimes for the better, other times, unfortunately, for the worse.

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

Today it is so easy to create your own website. With tools such as Squarespace, WordPress, Wix, and Webflow, anyone can launch their own website in a matter of hours. This is wonderful. No longer are new businesses reliant on “Web Masters” to design, build, and maintain their websites for exorbitant prices. But these tools come with a downside — non-professionals, and some professionals, are making this once sacred place a landfill of badly designed pages.

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

Most of the websites that you'll encounter are heavily text based. Typography is one of the most important aspects of any website. Get it wrong and you'll create an uncomfortable reading experience for your audience, potentially causing them to leave the website. But don't worry, there 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. When lines are too wide (i.e. have too many characters) it makes it difficult for the reader to quickly find the next line. When lines are too narrow (i.e have too few characters) it breaks the comfortable flow of text and can cause reading to be done in quick bursts at a non-uniform pace.

Although text size and font choice play an important role, it is agreed that the standard 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 lines of text. When blocks of letters were manually laid out for printing, this was called "leading" because the would add pieces of lead between the lines.

When lines are too close together, similar to lines that are too long, it makes it difficult for the reader to quickly find the next line. When lines are too far from each other it removes the visual grouping that shows the relation between a set of lines. The importance of adequate, but not too much, space between lines is to ease the effort for your audience to read your text.

Although text size and font choice also play an important role, a good standard for body text is 150% of the font size (e.g. if the font size is 16px then the line-height should be 24px). With shorter lengths of text (e.g. in headings) a narrower line-height can be used. Larger font-sizes also allow for narrower line-heights and uppercased text should have a very narrow line-height (close to 110%).

Keep a large enough font size

Browsers set the default font size to 16px. This has become an unofficial size for body text and why an 8px base is the standard for most grids and layouts. It was a great font size when there were a limited number of fonts to choose from and screen resolutions were mostly 900px by 600px. However, this value is increasingly becoming more obsolete. Today there are an endless number of available fonts and an equal number of different screen resolutions.

It's not easy to recommend a standard size. One important test is to copy text from a resource that is not yours, such as a Wikipedia article about goats, and set it in a font and size of your choosing, read the text out and assess it for yourself. Was it easy to read?

The reason to not use your own text is that you're accustomed to your own content. It's important to read something that is new to you and something that won't get you caught up in the context.

One other note, don't be afraid of large text!

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 and repetition and repetition. When there isn't enough contrast between the text and that background it makes it more difficult to find the edges between what is a letter and what is not. This causes strain on the reader's eyes.

It's not simply a matter of having one as a light colour and one as a dark colour, the hue and saturation make a big difference.

As with font size, there is no formula for this, although many online resources will have you believe that. The best test is to set your content in the font, size, and colour of your choosing and read it out. Read it as any of your audience would. If you find it comfortable, that's great.

Typography closing notes

Keep in mind that your audience are going to visit your website on a range of devices. It's great to have your website content set in the most optimal way for desktop screens, but if your audience are going to visit it from a smartphone while outside, which is a likely scenario, then this should also be catered for.

Typography is one of the most important aspects of your website. It is the vehicle for your important content.

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 it then they will quickly go somewhere else.

Start with your content, not a sitemap

A remnant from the late 90's is the sitemap. Let's not confuse the sitemap I'm referring to with an XML sitemap. This sitemap is a description of the pages on a website and how they relate to each other. It usually comes in the form of a tree starting with the homepage.

It is common practice to start structuring the content for your website by creating a sitemap. You get out a piece of paper, jot down, homepage, about, contact us, services. Under services you include the list of your services. Great, you now have a sitemap. Although the effort is appreciated, it is rarely of any use.

When you start with a sitemap, you end up with trying to fit content into the neatly organised pages that you've defined. Which sometimes results in sections being shoehorned into others because they don't quite fit into others.

Forget about the sitemap. Start by preparing your content in freeform. Get your thoughts out. What do you want to say about your business? What do you want people to know about your business? What story do you want to tell?

Now that you have a good idea of what you want to say, start seeing how it can be grouped together and what sections of content appear. It often helps to hire a copywriter to support you in this job. You can then look at these sections and see how they connect to each other, do they deserve to be standalone pieces or grouped into larger sections of content?

Understand the hierarchy of your content

Organising your content based on the importance of it seems obvious. You have your headers, sub-headers, body text, etc. But hierarchy is not always linear on a website and it's not always about which text is larger than others.

Let's take an article in a printed newspaper as an example. There are the following elements: headline, article text, pull-quote, and image. What is the hierarchy of that information? Without any context of what this article is about, I'm going to guess it would typically be in this order: image, pull-quote, headline, and article text. Each one giving enough information based on the attention span of the reader. The image gives a fraction of the context for the least amount of effort for the reader. The pull-quote tends to give a snappy, terse, insight into what the article is about and is usually something to grab the reader's attention. The headline gives a better context of the article, and the article text says it all.

On a digital medium, you need to understand what is the most important thing for the viewer to focus on first for the least amount of effort. What will grab enough of their attention for them to think "this is worth my attention, let me find out more".

Understand what users want from your website

Besides Choose Your Own Adventure books, the print medium tends to have a simple user journey; left to right, shift down, and repeat.

Similar to Choose Your Own Adventure books, websites should tell a story and give the reader, with your guidance, the option to decide their own flow.

You need to understand what your audience came to your website for and what they want to leave with. Try to list the main reasons why someone 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 try to make it as easy as possible for your audience to achieve those 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 horrible 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 what's the point of its existence?
  • Uncontrollable elements: People like control. Doing the work for them may seem generous but in reality it's not cool. 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: This deserves a post on its own but I'll try to summarise. 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 fundamental knowledge of proper 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.