1 Web Ergonomics

1.1 Introduction of Web Ergonomics

There’s a tendency to concentrate only on the content and the design of a website when you’re creating
it, and we often forget there are other factors that have an impact on users’ experience. The aesthetics,
fonts, colors, load speeds, and general coherence of the site are some of the essential elements for the
usability of a website. In this chapter, we give you the means necessary to master your website’s
ergonomics.

1.2 What defines ergonomics?

Alain Wisner, a progenitor of the field of ergonomics, defined ergonomics as:

“The collection of all the scientific knowledge related to human beings and necessary to create tools,
machines, and devices that can be used, in maximum comfort, security, and efficiency.”

1.3 Ergonomics and the web

The ergonomics of a website includes all recommendations with the goal of optimizing the user’s
experience on a website and improve their comfort navigating it. It aims to create a useful and useable
website. In other words, it tries to understand user experience and puts practitioners in their shoes to
make their experience as nice as possible.

1.4 The importance of an ergonomic website

A physical store that’s unorganized and cluttered will have a tendency to drive customers away. This also
applies to websites. A website that’s complicated to understand, on which it’s difficult to find what you’re
looking for, will frustrate users, and the same as with a messy store, a user will leave your website to go
elsewhere.

Here are a few very unergonomic things that risk driving away users:

 A site that loads too slowly

 A site where the user doesn’t understand what’s being offered
 A poorly structured site where the user might get lost
 A disorganized site with too much information
 An unreadable site

Working on your website’s ergonomics is essential for attracting and keeping users on your site for the
longest period possible, encouraging them to take certain actions (read content, make a purchase, or fill
out a form on your website), and retain them.

1.5 Guidelines for best Web design, Usability, and user Experience
Here are some guidelines for creating the best web design, usability, and user experience:
  Keep it simple and clean: A clean and uncluttered design can help users focus on what's important
on your website.
 Use a responsive design: Make sure your website looks great on different devices and screen
sizes, such as desktops, laptops, tablets, and mobile phones.
 Make navigation easy: Your website should have clear navigation that helps users find what
they're looking for quickly and easily.
 Use consistent branding: Use consistent colors, fonts, and imagery throughout your website to
create a cohesive look and feel.
 Make it accessible: Ensure your website is accessible to all users, including those with disabilities.
 Use high-quality visuals: Use high-quality images and videos that are relevant to your content
and optimized for the web.
 Make it fast: Optimize your website's loading speed to keep users engaged and prevent them
from leaving due to long loading times.
 Make it easy to read: Use legible fonts and typography that are easy to read and avoid using small
font sizes.
 Use white space effectively: Use white space to give your content room to breathe and make it
easier to read.
 Test and iterate: Continuously test your website's usability and user experience and make
improvements based on feedback and data.

1.6 Tips on Web ergonomics

As Web ergonomics refers to designing websites and digital interfaces in a way that minimizes physical
and mental strain on users. Here are some tips on web ergonomics:

 Use a readable font size: Make sure the font size is large enough to be read easily. Small fonts
can cause eye strain and fatigue.
 Choose a legible font: Choose a font that is easy to read, even at smaller sizes. Sans-serif fonts
are generally easier to read on digital screens than serif fonts.
 Use appropriate line spacing: Line spacing should be appropriate to make text easy to read. Too
little or too much line spacing can cause strain on the eyes.
 Use appropriate contrast: The contrast between the text and the background should be high
enough to make it easy to read. Low contrast can cause eye strain.
 Use a responsive design: A responsive design adjusts to different screen sizes, making it easy to
use on different devices.
 Avoid flashing or blinking elements: Flashes and blinking can cause seizures in people with
photosensitive epilepsy.
 Use clear and concise language: Use language that is clear and easy to understand. Avoid using
jargon or complex terminology.
 Provide clear navigation: Navigation should be clear and easy to use, with links and buttons that
are large enough to be clicked easily.
  Minimize scrolling: Users should not have to scroll excessively to find information. Keep
important information above the fold.
 Provide feedback: Users should receive clear feedback when they perform an action, such as
clicking a button or submitting a form.

By following these tips, you can create a website that is ergonomically designed, easy to use, and
comfortable for users.

1.7 Guidelines of web ergonomics

Let’s take a look at some Guidelines of web ergonomics that you can need to follow in order to make your
website more ergonomic and make navigating it easier for users.

 Don’t overload your homepage

 Structure your pages for readability
 Your website should have a coherent structure
 An intuitive menu makes for an ergonomic website
 Choose an ergonomic font
 Choose your colors well
 Optimize the load speed for your webpages
 Remember mobile and tablet browsing
 The 404 error page

1.8 Homepage
Don’t overload your homepage:

The homepage is the first thing users will see of your website, so it’s often the page that will see the
highest traffic. The impression that this page will give, then, is crucial for making users want to stay on
your site and browse to other pages. The aesthetic quality of your design is, of course, important, but the
goal of this page is first and foremost to be clear and effective.

Putting yourself in the shoes of a user of your website, information should be understandable, precise,
and concise. Don’t overload your homepage with information; an overcrowded page will lose users who
won’t know where to look or click. Make your users’ lives easy—they should be able to quickly tell where
to click to find the information they’re looking for, so prioritize simplicity and moderation.

Don’t be afraid to use blank space. We often feel like blank space is there to be filled, but that’s not
necessarily the case. Blank spaces help a user’s eyes focus on the important information, and make
content easy to read. Use blank spaces to limit distracting elements. Of course, you’ll need to make sure
to have balance and don’t leave your page too blank, leaving your users in the void.
In the same way as too much text and images, also don’t overload your page with animations, a site that
moves in every direction won’t give users the desire to stay. You should give preference to judiciously
used animations that highlight your text or help a user along through your page. For example, you can use
micro-interactions—animations on buttons when a user passes their mouse over them. You can animate
buttons that lead to your products, your contact information, your social media, or any other page. These
animations will make it possible for your to add life to your site while showing the user where to click or
find what they’re looking for.

In summary:

 Don’t overload the page

 Prioritize important information
 Guide your user in their path towards other pages
 Use blank space wisely
 Emphasize the main elements of browsing and interaction
 These homepage tips are also valid for any other pages on your website. Your pages should be
clear, clean, and efficient!

1.9 Menus
This axis helps evaluate the ergonomics of the navigation menu. This has a considerable impact on the
ease of access to content. If the user does not understand or does not clearly see the sections they have
access to, it is evident that site navigation will be penalized.

 Follow the web standards for the menus.

 The menu should not overlap the first scrolling page
 Create a clear menu
 Highlight the first clickable elements of the menu

1.10 Links
This axis helps evaluate the ergonomics of the navigation menu. This has a considerable impact on the
ease of access to content. If the user does not understand or does not clearly see the sections they have
access to, it is evident that site navigation will be penalized.

 Follow the web standards for the menus.

 The menu should not overlap the first scrolling page
 Create a clear menu
 Highlight the first clickable elements of the menu

1.11 Navigation and Orientation

This axis concerns more general aspects of navigation and aims to evaluate the quality of orientation
guides provided to users. Besides menus and links, there are other parameters to take into account to
evaluate ease of navigation. In this axis, we approach criterions of a constant interface, common position
identification, pop-up abuse and the help section.

 Present the common position to the user

 Returning to the homepage should be easy
 Sections help site navigation
 Avoid using excessive pop-ups
 The site design should be constant throughout the visit

1.12 Visual aspects and Legibility

This axis concerns legibility of information present on the site. The previous axes were concerned with
information access, but it is evident that the presentation of the information plays an equally important
role for the website usability. The users must be capable of easily reading and visually identify the different
compositions of a web page.

 Allow easy print of the content on the pages

 Limit the length of text lines
 A strong contrast maximizes the legibility
 Avoid superfluous animations
 Avoid the use of frames and offer a HTML version for a flash website
 Add a favicon

1.13 Error Management

The last aspect discussed in this guide concerns error management. A site that has errors will lose in terms
of visits and credibility. Moreover, an important point from this axis concerns the recuperation and
prevention of errors when online forms are filled out. This is effectively a key point of all sites wanting to
integrate with users whether it is for newsletter inscriptions or for an online sales order.

 Pay attention to the use of plug-ins

 Have a personalized 404 error page
 Manage the possible errors in the forms
 Ensure the site is multiplatform