12 examples of ergonomics to adopt for your websites

1. What is the ergonomics of a website ?

Ergonomics comes from the Greek word ergon which means work and nomos which means law.

To make a parallel with everyday life, when you sit in your sofa, the armrest will be at the right height, the depth of the seat will be the right size and the cushion will be soft as you wish. Well, that's ergonomics.

Ergonomics is the fact of designing and optimizing an object in order to facilitate its daily use. For a website, we will try to respond effectively to the expectations of a user so that it is a comfortable navigation. Ergonomics is based on 4 pillars: utility, use, design and satisfaction.

If the basic rules of usability are not respected on a website, it will not hold the attention of users. This is why users leave a website, often because of lack of time or annoyance:

• if a site is slow to load
• if you don't understand directly what the site offers
• if they get lost on the site
• if the texts are little or not readable
• if there is too much information

2. 12 examples of web ergonomics

2.1 Slogan

Do you know what the waterline is? It's the space at the top of the website, the part you see when scrolling through the page.

Well, in this area, display a simple and clear slogan that will describe what your website sells.

Thanks to this slogan, the user should understand at first sight what the website is about.

2.2 Simplicity

• Use of the page blank

"But why so much white space? It's a waste of space, we could put advertising or text!"

Well, no, white space is essential for the eye to focus on important information. It makes the content more readable. But it is still important to gauge the amount of white otherwise the user will have a feeling of emptiness not pleasant.

Here is a simple example to show that white is essential to highlight an element.

Image without white: can you see the Maybelline logo?

2.3 Page legibility

• Visual hierarchy of elements

At first glance, we must be able to hierarchize the elements of a web page. This is done by a hierarchy of titles, but also by a summary for a blog post.

Let's take the example of this blog article, a summary is located at the top of the page. It will allow the user to have a summary of the whole article in a few seconds and if an element of the summary interests him, he can go there in one click without having to browse the whole article. Then we have the titles and the text:

• Main title (or h1)
• Title 2 (or h2)
• Title 3 (or h3)
• Title 4 (or h4)
• Paragraph (or p)

Between these elements, there must be a relationship of size so that the eye sees the structure of the page.

In a book, the paragraph is not bigger than the title of the book, and well in the web, it's the same.

2.4 Legibility of the text

• Choice of typeface

Use a font, or typography, that is very legible. Use only one typeface and play with different weights (light, normal, bold, italic). For the more creative, do not use more than 2 fonts on your site.

Think of simple and sans serif fonts for your paragraphs, they are very readable and offer many weights to put words in bold or quotes in italic.

Here is a small selection of typefaces available for free on Google Font and having a good readability:

• Lato
• Roboto
• Raleway

For your titles, allow yourself a little bit of craziness! Use a more classic serif typeface. This will help reading because the eye will recognize paragraph titles more quickly.

Here is a small selection of typefaces available for free on Google Font and having a nice readability:

• Merriweather
• Baskerville
• Cormorant Garamond
• Noto Serif

Here is an article to improve the content of your texts.

• Formatting

Use elements to clarify your texts like :

2.5 Color contrast

Colors have a meaning. Indeed, the language of colors allows us to know which color to use in which circumstance. For example, to encourage a user to act quickly, in an emergency such as during a sale, we will use the color red.

But let's move on, here we are talking about contrast. It is important to play on the contrast between your background and your titles.

So that all Internet users can see your content correctly, you must respect a rule: the contrast between the background color of your web page and the color of your text must be at least 4.5:1.

Let's take the example of a website with a dark background:

• For the typography, choose a light gray instead of white. The contrast will be just as important, but the gray color will be softer to the eye and will help readability.
• For the icons, go for a peppy color. Think turquoise, yellow or red. These colors will draw the reader's attention to important points.
• For buttons, use several colors: a bright color and a medium color depending on the importance of the button. For a "Call to action" button, use a bright color.

You can find more details on "The W3C's Web Accessibility Initiative" rules

Color is not perceived in the same way by everyone, so it should not be the only element to convey information. The example of an error message is perfect to illustrate this point. A simple red color should not be enough to announce an error, an attention icon or a cross should be added.

Finally, when you have chosen to work with a color, think of creating a large palette of this color, going from white to black (see picture below). This allows you to have a cameo of color. For a website, it will allow to have only 2 or 3 colors but, on different shades. It will seem to have several colors but, in reality not.

2.6 Action button

Don't forget to make the action buttons attractive. Users are used to seeing buttons in certain places and will naturally gravitate towards them. The location of the buttons is good, now let's move on to their design!

The color of the buttons is just as important or even more important than the text itself. Indeed, each color has a meaning, we call it the language of colors.

Some tips for your action buttons:

• For the text of your button add an action verb such as "to launch" or to make the user act.
• For the color, choose an attractive and medium color like blue, orange or green.
• Animate your button when the mouse passes over it as in the example below
• Do not put too much text in your button

2.7 Simplicity of navigation

• Location

Display the menu at the top of your pages! It is important to have the menu always accessible, especially if your web page is long. Having a fixed header in the page avoids the user having to scroll to the top of the page to get the menu.

• Button

Put an action button at the top right corner. This button is your "Call to action". It allows the following actions:

1. register
2. connection
3. contact
4. subscription
5. ...

• Footer

Put back in the footer your menu and links that do not appear in the header

Let's take the example of a site that has a blog: the header will contain a link to the blog index which will display all the articles of the blog. But in the footer, you can choose to highlight certain important articles with direct links.

The same goes for the legal pages "Terms and Conditions" or "Privacy Policy", they have their place in the footer.

• Breadcrumb trail

The breadcrumb trail allows the reader to find his way through the tree structure of your site. It is a menu, often horizontal, that is found above the body of the site. It will indicate the path that the user has taken to get to the page where he is. In e-commerce, we can find this type of breadcrumb trail:

Home -> Winter collection -> Women -> Coat -> Article

Respecting the "standards" of the web is not a bad thing, it allows a more fluid navigation. Some automatisms have been created by Internet users, let's use them! Like :

• the menu at the top right
• the action button at the top right
• the logo at the top left that sends you back to the home page
• Highlighting clickable links with a different color

2.8 Responsive mobile

Today, more than half of all internet searches are done from a mobile or a tablet. A responsive design is therefore essential! You don't want to disappoint your readers with a frustrating user experience or a slow loading site.

Optimizing a website on a computer is not the same as optimizing it on a mobile! Beware, your website can be highly optimized on computer but not on mobile. And yes, you can have a very fast site on computer and very slow on mobile.

This is due to :

1. The choice of your photos: choose square photos, which will be more visible on mobile.
2. The weight of your photos: compress your images as much as possible while keeping a good quality of course!
3. The use of SVG which are very light.
4. The respect of minimum sizes for buttons and icons.

To improve the SEO of your pages on mobile, see the article on page loading speed.

You have to think that not all mobile screens are big and not all people have small hands! So to avoid that some people click on 2 buttons at the same time, there are rules to respect:

• the minimum recommended size for a click is about 48 x 48 pixels, which is about 9 millimeters.
• the spacing between each click zone must be at least 8 pixels, horizontally and vertically.
• take 24 pixel icons and add a background to optimize the click area

Use the Google Mobile Friendly toolto know if your website is optimized for phones.

2.9 Fast loading

Who likes to wait for a web page to load? You like me, when it happens we click very quickly on the previous button to go to another website. Nowadays, we are so used to all websites going fast that we are very quickly annoyed when we come across a slow website.

You must therefore have a fast website to :

• not to make your users run away
• not to make wait the robots of indexation of Google
• not to scare away your sales

2.10 Simplified forms

When you ask your user to contact you via a form, for example, you must follow a few rules of ergonomics:

• Put a label for each field.
• Order the fields logically.
• Show what is mandatory to fill in with an asterisk for example.
• Minimize the number of fields: if you ask for too much information to be filled in, it may slow down your visitor.
• Adapt the fields: there are several types of fields such as multiple selection, checkboxes, drop-down menu, date calendar ...
• Display errors clearly when information is incorrect.

In summary, avoid putting many fields on your form. If you can avoid using a form, that's even better. But if its usefulness is paramount, just think about it.

A little tip: if you need to ask for a person's date of birth, forget the 3 drop-down lists to choose the day, then the month and finally the year! Split everything in a single field in the form of a calendar.

Here is an example of a simplified contact form:

2.11 Search field

Having an intuitive menu is good, but giving the user the possibility to do a text search is a plus. By doing this search, they are sure to have access to the information they want.

If you opt for this search field, place it at the top of your website. But why at the top? Well, simply because Internet users are used to finding this field at the top of the page, like on the Google search.

For your search button, stay classic with "search" or "start search". Any other type of text can mislead the user, he may think it's an action or newsletter button.

2.12 Page 404

It is important to avoid having 404 pages on your website, it is disappointing for the Internet user to find a page that no longer exists. However, if you customize your 404 page and it is attractive or allows you to go elsewhere on the website, it is a very good practice.

As on the example below

3. Why does the ergonomics have an impact on the referencing ?

It is important to know that the best web pages are the best ranked by search engines.

The objective of any search engine is to respond to a request from the Internet user. Even if your site has the best answer for the user, the search engine will not systematically direct the user to your site if it does not meet its selection criteria, which includes ergonomics.

Thanks to the improvement of the ergonomics of your website, you improve :

1. the conversion rate of your pages
2. the user experience
3. the traffic on the pages of your site
4. the bounce rate
5. your brand image
6. the notoriety of your website
7. the loyalty of your customers

To enlighten you on another point, ergonomics is not only improved from a design point of view, but also from a technical point of view!

• loading speed
• accessibility on all browsers
• accessibility for disabled people
• mobile responsive