Website usability fundamentals for better SEO

Anastasia Kurmakaeva

Written by Anastasia Kurmakaeva

In this post we are going to explore basic website usability guidelines that are essential for search engine optimisation of a website. Although in principle “SEO” and “usability” are two concepts that do not appear to be particularly related to each other, the truth is nowadays these two disciplines could be considered almost inseparable in a web environment, for several different reasons.

On one hand, search engines have evolved enough to understand that good usability is very important to achieve a gratifying user experience, and algorithms pay attention to how usable a website is to evaluate and determine its ranking in the SERPs.

On the other hand, a website can be very usable and intuitive in terms of its design and structure. However, if it isn’t optimised for its users, taking into account keywords that could generate more relevant traffic, and search queries most-frequently entered by the target audience, it certainly misses out on some usability points. This is because not only we aren’t using terms and concepts our users search and understand, but we aren’t giving them a higher priority at the information architecture level, either, in order to help them find what they’re looking for more easily, giving them all information to immediately access content they are interested in.

These can be considered the main reasons why it’s increasingly important to work on both usability and SEO at the same time, so that they go hand in hand throughout the entire web development process. We must ask ourselves: for whom are we building and optimising our website? The answer will always lie in our target audience.

Although this statement kind of contradicts this article’s title, forget about what you think search engines want for a little while, and focus on your future users instead.

Before we fully plunge into the subject at hand, let’s remember some basic usability concepts that any design should follow:

  • Efficient
  • Fast
  • Intuitive
  • Memorable
  • Easy-to-use

And so, let’s take a look at all the aspects we cannot miss, if we want our website to be a true usability and user experience benchmark, besides good SEO.

Download speed and download order

Your website must load quickly, following a logical order and prioritising the main content on each page.

In terms of usability this might not look as important as it is for SEO, considering that in the present day almost everyone has access to a speedy and reliable Internet connection. We should, however, also keep in mind people who live in remote locations and are forced to endure slow Internet (yuck!), or those times when certain users are experiencing network problems. In any case, we should also look at it from a search engine’s standpoint, as it is going to examine to which kind of content we give utmost priority on our site. One way of doing this is by analysing its download order, as the main content block is always going to bear more weight when it comes to evaluating how relevant our website is. Why? Because this is where the most important information can be found, both for users and search engines.

Let’s see it with the following example: say you have an online shop selling shoes, and a user is browsing your ‘Boots’ category. Evidently, this user wants to explore your product catalogue as soon as possible, to see whether you have in stock those boots they are SO looking for. As soon as all elements located within <head></head> tags are loaded, the first thing to appear before their eyes should be your list of products. And only then –after the main content has loaded– should follow the remaining elements, namely the sidebar with filters or subcategories, the footer with additional information regarding your business, etc.

Look at it with another example, like an article in a digital magazine or newspaper. What have we clicked on this link or search result for? To obtain information about an event, discovery, study… you name it. The content block and its headline should always load first, and only afterwards the sidebar with links to related stories, ads, information about the author, comments, etc. should appear.

Navigational structure

A website’s structure should also distribute content by priority, but from a different viewpoint. We want our users to locate what they’re looking for as quick and as easy as possible, instead of wandering around our website in frustration. Given the immense variety of products, services and content Internet puts at our disposal, it’s much easier to hit the “Back” button, and try again with another search result, than going from one link to another for half an hour, having no guarantee whatsoever they will eventually reach the desired destination. For that reason, this aspect is crucial in a website, because we want to keep our bounce rate at a minimum.

Keeping in mind our website’s focus, and having previously carried out a thorough keyword research, we will analyse search terms with the highest search potential and those which are more important for our business and target customers. We want to create a simple enough navigational structure, that is also intuitive and caters to our users’ needs.

Generally, a website’s entry point is the home page. It’s our showcase, where we advertise our most interesting content, our most popular products, and our best and most-requested services. From here on, we want to provide our users with a straightforward roadmap, which they can use to navigate, eventually reaching their goal, whether it’s to get information about some treatment, to check their latest bank account movements, to hire professional cleaning service, or to buy new running trainers.

The most important content (for its profitability, demand, exclusivity, more generic nature…) should be easy to locate and be situated at fewer clicks from the home page, whilst content of a more specific nature will be at a deeper level in the architecture.

So, let’s assume for a moment that we have an e-commerce pet store. It’s mainly focussed on cats and dogs (for obvious reasons), and its navigational structure could be something similar to this:

Navigational structure example for an online pet shop

Disclaimer: this is a very simple example.

We could also include some filters. For example, in “Other pets”, even if we might not have as many products as in our main categories, we probably want to make searching for them easier for users who have rodents, birds, fish, reptiles… It’s important to know how to adapt our navigational structure to our catalogue’s and our users’ needs, besides including other corporate information sections, such as “About us” and “Blog”, or even a section dedicated to getting rid of excess stocks named “Outlet” or “Special offers”, etc.

Better structure equals easier navigation for users, as well as improved accessibility for search engine crawlers to understand our website and to index it correctly.

Language adaptation

Too often we forget that when we know something and it’s really obvious to us, this doesn’t necessarily mean that the rest of the world has the same knowledge or expertise, or even ease to understand certain things.

Remember that your expert point of view regarding the subject your website is based on isn’t always going to coincide with your users’ level, whose competence might be more or less extensive, or perhaps even entirely non-existent.

It’s important to avoid getting carried away with technical terms of your own field. You must know how to adapt this technical language, which you think is “correct”, to the way your clients and users will be able to understand it. Of course it’s important to educate and transmit through our content that we’re the best within our field, but we don’t need to try to prove this through unpronounceable words and terms that mean nothing to a regular user.

If we want our prospects to acquire our product or hire our service, and we’re not directed to a professional or specialised audience, we must adapt our language to them and explain who we are and what we’re offering using their own words, both at a content level, as well as in terms of our website’s navigational structure.

Content structure

All content must begin with a title, which explains in a small number of words what it’s going to talk about:

Content titled with an H1 header

If we have an online store and we visit a product category, we should follow the same pattern. Let’s take a look at how Amazon does this:

Product category title header

Logically, these being the main titles of each page, they are tagged with an H1 heading, which should be unique to each page. Thanks to this, we are:

  1. Helping users to identify at a simple glance where they are and what they are going to see or read in a particular page. No tricks. The real deal.
  2. Helping search engine crawlers to easily identify what the page is about, as its main title is tagged with an <H1> heading.

Besides the title, if we’re looking at an article or presentation of a service, the content block must provide every facility to being easily scanned. We should be realistic: there are very few users who come to our website and read carefully each of our website’s pages.

For that reason, and to make our content more engaging for users who do read it, we can use various techniques:

  • Use bold format to highlight important ideas.
  • Use bulleted and numbered lists.
  • Use graphic elements, such as icons, images or animations.
  • Use charts and diagrams to summarise complex ideas.

It is also important to include breadcrumb trails, so that whenever a user is visiting one of our website’s pages, they know where they are at all times and can quickly return to the previous level in the information architecture. Here are some examples of correctly-implemented breadcrumbs:

Human Level’s blog posts:

Breadcrumbs in Human Level

Asos.com online store:

Breadcrumbs in Asos.com

Tiendanimal.es pet shop:

Breadcrumbs in Tiendanimal.es

Mobile version

Technology is advancing at a dazzling rate, and its use is growing exponentially. If your target users already use their mobile phones more than their desktop computers to search or make purchases on the Internet (most likely they do) it’s absolutely mandatory for your website to be properly adapted to this sort of devices. What does a good mobile version entail?

  • Easily clickable graphic elements and big buttons. They must have enough spacing between them, so as to avoid tapping the wrong link and getting to content we didn’t need.
  • Font size that is large enough to be read easily, without straining our eyes.
  • Responsive design, which means your website should adapt automatically to the screen of any device that a user is browsing from, without horizontal scroll.
  • Super fast download speed.
  • Avoid use of interstitial banners covering the biggest portion of the screen at all costs, as they stand in the way of straightforward and unhindered browsing of your website.
  • Correctly-implemented forms.
  • Possibility to control certain features through voice commands.

Broken links and error pages

Another shared aspect of bad SEO and inadequate usability is the existence of broken links pointing to error pages. On the one hand, they confuse users, because when they run into a broken link in most cases they don’t know what to do, and in the end they will just probably leave and start over from the home page (best case scenario), or they will leave your site and jump directly to another search result belonging to a competitor.

On the other hand, search engines think poor navigation is an important flaw, because not only it makes crawling the site more difficult, but it also has a negative impact on user experience, that we’ve recreated earlier in this post.

In cases when it’s difficult for us to control this aspect, it’s best to rely on a user-friendly 404 error page, so that when someone accidentally tries to access content that doesn’t exist, they are offered ways to get out of this situation. For example, a link leading to similar content, or to content that is somehow related to what they were initially looking for.

Some final notes

Now, besides general considerations with regard to usability and SEO, we must also bear in mind the image we create for ourselves and broadcast to our audience.

If your website isn’t usable or convenient, and it gives off a sense of abandonment and generates mistrust in its users, no one is going to visit it, share it, or link it from other sites, which will definitely have a negative impact on your popularity and visibility.

I encourage you to put into practice all this advice on your website as soon as possible, regardless of whether it’s new or has been around for some time.

Anastasia
Autor: Anastasia
International SEO consultant and translator at the Human Level online marketing agency.

Leave a comment

Your email address will not be published. Required fields are marked *