15 web usability focus points you should keep in mind

Sometimes it occurs that you notice some pages or elements on your website don’t really provide the return or outcome you’re trying to reach. Via UX research you can specifically detect which pages form a bottleneck for your sales. On the other hand you’ll get to know the behavior of your users and see how they interact with your website and where it all goes wrong. You’ll find out how to optimize your website which will ultimately lead to higher sales, more visitors and returning customers. You don’t even need a lot of people to uncover these problems: by conducting a test with 5 users you will already detect 85% of your sites problems.

In case you haven’t had the time yet to conduct 5 user tests we give you some usability guidelines alongside which you can work.

Usability is about how easy and pleasant it is to use a website (or any other tool, product, service for that matter). In my humble opinion this umbrella term consists of 5 components, memorability, learnability, satisfaction, efficiency and errors.

  • Memorability is about how easily a user can recognize how the website worked when he hasn’t visited it for a long period of time.
  • Learnability is when a new user first visits the website, how easy is it for him to accomplish the basic tasks when he has never used this website before?
  • Satisfaction is about how pleasant it is for the user to use the website, what about the design, the features, ….?
  • Efficiency is when the user visited the website several times, how quickly can he perform his tasks? How efficient is the website in use when the user is already accustomed to the new design?
  • Errors is quite obvious, how many errors does a user make when he tries to accomplish his tasks on the website? Are those errors severe or not? Can he manage to accomplish his tasks or does he abandon the website?

For more information on this topic: https://www.nngroup.com/articles/usability-101-introduction-to-usability/

A visitor comes to a website with a clear plan in mind, whether that may be that he needs information about products, opening times, prices, or whether he wants to do something like placing an order, playing a game, …. . So you are providing the solution to his problem, make your website based upon these possible problems, not for yourself.

Keeping these 5 components in mind, we provide you with 15 focus points you need to remember when making adjustments to your website or building a new one.

Homepage and landing pages

Why do we visit websites? Most of the time we do this because we have a problem and need a solution whether that’s finding information about a subject or a specific purchase of some sort. We therefore scan the website in search for this solution but being unsure about the solution fitting our problem, we will leave the website if we don’t quickly find a suited answer. Before we enter a website we probably googled for information and landed on a specific page of the website.

Therefore not only the homepage should be user friendly, every page should be. Most of your visitors come onto your website via a secondary page or via a link they saw on other media. Or because of the search words they googled. It’s important to detect all the possible landing pages of your website and make sure those are easy to read.

They should be designed in that way that first time users can easily find what they are looking for and accomplish their basic tasks.

Usability guidelines for the homepage:

  • Make sure product categories are presented and clearly visible on the homepage.
  • Keep in mind not to over-format navigation areas on the homepage so that users will not mistake them for advertisements.
  • A first time user should always understand where to start by looking at the homepage.

For more homepage guidelines: http://www.userfocus.co.uk/resources/homepagechecklist.html

F-pattern

Sorry to burst your bubble but you can be sure no one will take the time to read every single word on your website (or even this blog post), people scan. Thanks to eye tracking research we know that people scan a website in more or less the same pattern every single time on every single page. People tend to look at websites in an F-pattern (E and L-pattern is also possible), with this knowledge in mind, you can place your key information into this pattern so that the chance is bigger that your users will see it.

Logo, tagline, navigation menu and page titles is the most courant information which is placed within this pattern.

Coolblue applies the F-pattern correctly, the call-to-action buttons are strategically placed within the pattern. Users can easily find what they need via the left navigation bar or the navigation on top. After choosing they can easily add it to their basket and order.

Thanks to placing your key information within this pattern users will be able to find it more rapidly and quickly perform their tasks. They’ll accomplish their goals much more efficiently.

Usability guidelines for task orientation:

  • Make sure that important calls to action, like “add to basket”, are highly visible.
  • Don’t place your most important and frequently used topics, features and functions in the far left or right margins but close to the centre of the page.
  • People are looking for specific information make sure the site is free from irrelevant, unnecessary and distracting information.

For more task orientation guidelines: http://www.userfocus.co.uk/resources/taskchecklist.html

Navigation

Make sure your users can quickly navigate through the website and the system responses quickly. The less they have to wait the better it is for the user experience. Even a first time user should find his way easily and accomplish the tasks he intended to do on the site. By ordering your navigation in the most logical or task-oriented way, new and long time users will easily find their way.

Detecting top tasks from your visitors is key in this part but if you don’t have the time to do user testing you can also get some inspiration out of your search bar. When people don’t immediately find what they’re looking for they’ll insert it in the search bar, those search words provide you an indication of what they didn’t immediately found on your website.

I personally think the desktop navigation of Apple is very clear for first time and for current visitors. You can easily make the distinction between different types of iPads and Iphones indicated with the different icons. Each product category has it’s own tab so that a visitor doesn’t need to click several times to find his product.

Labels and tabs help users to recognize how a website works even when they haven’t visited it for a long period of time.

Usability guidelines for the navigation:

  • Make sure that the information users are most likely to need is easy to navigate to from most pages.
  • All links should look the same in the different sections of the site.
  • Users should be able to bale out of a current task without having to go through an extended dialog. Mark the exit or way out clearly on every page.

For more navigation guidelines: http://www.userfocus.co.uk/resources/navchecklist.html

Call-to-action and forms

When your user has targeted what he was looking for, found the right information and made the decision to place an order or insert contact details, he probably pressed a call-to-action button. To make sure this process goes smoothly for your visitor, there are some focus points you should keep in mind.

GoToMeeting for example has a strong call to action button ‘start my free 30 day trial’. The orange color stands out against the white background, the orange is also more or less the same as the logo and therefore fits the branding.

When clicking on ‘start my free 30 day trial’ you have to fill out a short form. It’s very clear what your need to fill in but it’s unsure what is required and what not. The notification you’ll get when you don’t correctly fill out the form is very clear. It’s easy to fix the errors but there is no option to close the form.

Usability guidelines for forms:

  • Make sure that text entry fields indicate the amount and the format of data that visitors needs to enter.
  • Before submitting the form it always should be validated.
  • It should always be clear what information is required, therefore field labels on forms need to clearly explain what entries are mandatory to complete the form.

For more form guidelines: http://www.userfocus.co.uk/resources/formschecklist.html

Layout

Make sure that the content is aligned so that people can easily identify the significant content. Use line breaks and headings to distinguish information. Every page should more or less have a consistent layout and a look and feel that will engage the visitors. The font should be readable and credible. Animation should only be used when it’s helpful or an added value for your user.

I’m not going to start discussing this example of Arngren.net but I think you get the point. Make navigation easy, make sure people find what they’re looking for. I wanted to change the language of the website in the left top corner and got transferred to a page where I could buy translators. That was not what I expected :). If everything else fails, make a website at least nice to look at.

Usability guidelines for layout:

  • You can use colour to structure and group items on a page.
  • Make sure all colours work well together and complicated busy backgrounds are avoided.
  • Related information and functions are clustered and each cluster can be scanned in a single look.

For more layout guidelines: http://www.userfocus.co.uk/resources/layoutchecklist.html

I hope these guidelines will help you with your current or future web development but please keep in mind, if you really want to make a difference for your users, develop for and with them. Conduct user research and ultimately reduce costs and increase revenue.