Webmastering - Website Ergonomics

November 2016

The Concept of Ergonomics

Ergonomics is the use of scientific knowledge about humans (psychology, physiology, medicine) with the aim of improving the workplace environment. Ergonomics is generally characterized by two components:

  • Effectiveness, which consists of adopting solutions that are suitable to a product's use, beyond the designer's common sense
  • Utilisability, or if a product is adapted to users' abilities The two main features of ergonomics are:
    • comfort during use, which consists of reducing physical and nerve fatigue as much as possible
    • safety, consisting of choosing appropriate solutions for protecting the user

In the realm of the Internet, website ergonomics can be defined by a website's its ability to effectively respond to the needs of users and provide them with comfort when browsing.

The main obstacle that ergonomics attempts to overcome is the diverse types of visitor profiles. The following are generally determining criteria for a website:

  • user expectations: not all visitors are necessarily looking for the same information and do not necessarily have the same demands in terms of graphics
  • user habits: i.e. acquired behaviors
  • user age: in general describes the user's ability to adapt and the user's speed when browsing
  • equipment: one of the major obstacles. Website display can vary from one machine to another, in particular depending on the browser and the display resolution.
  • level of knowledge: all visitors to a website are not necessarily IT experts. The ergonomics of a website must be designed for the least experienced user.

Human Characteristics

Psychological studies conducted on humans have revealed some aptitudes as well as some limitations. The aim of ergonomics is to take advantage of these psychological elements in order to implement an interface that is effective and comfortable for the user.

According to the "human processor" model, humans perceive their environment by using their sensory system (5 senses: touch, sight, hearing, smell and taste), memorise and plan out their actions by using cognitive system (brain) and, finally, act by using their motor system and language.

Of the 5 senses, sight is most developed sense while taste and smell are known to be poorly developed. Thus, insofar as we consider that visual perception can represent close to 50% of brain activity, it is the most important form of transmission for user interfaces.

Each system has a memory and a processor. Psychology theories define three types of memory:

  • Sensory memory, for the storage of sensory information (stimuli processing) for about one-quarter of a second (250 ms)
  • Short-term memory (or working memory), capable of storing a limited number of mnemes ( "chunks" or "information units", i.e. visual and sound patterns such as a word, etc.) for several minutes. Studies published by Georges Miller in 1956 (Magical number seven) showed that a human being is capable of simultaneously processing 7 mnemes (± two)
  • Long-term memory, capable of permanently storing an indefinite number of pieces of information.

The three types of memory are closely related. An environment that strongly stimulates the senses (music, video, pleasant surroundings) facilitates short-term learning. This is notably why "learning by doing" is very effective. For example, multimedia environments allow children to adapt very quickly to an interface and learn "without realizing it".

Furthermore, repetition is a way to transfer information from short-term memory to long-term memory. The process of long-term memorisation is based on a principle of association: entering a mneme into long-term memory is even easier when it is conceptually tied to other mnemes.

The "action theory" (User Central System Design, Donald A. Norman, 1986) models the actions and reactions of humans. This theory is based on two concepts:

  • Humans devise simple models to define their behavior
  • Humans break their actions up into a 7-step process:
    • Setting a goal: a mental representation of a state to be achieved
    • Formulating an intention: the decision to achieve the set objective
    • Devising an action plan: the sequence of actions to be taken
    • Carrying out the action plan: activating the motor system
    • Perceiving the state of the system, describing with psychological variables the perception of how the organizm has changed
    • Evaluation of the achieved state in comparison to the originally set goals.

    Action Theory

When the initial goal is complex, it is divided into successive sub-goals until the sub-goal is achievable. The sub-goal is translated into an action that leads to the defining of a new goal. The action theory defines two distances that characterise the gap between the user-defined goal and its fulfillment:

  • The execution distance represents the gap between the goal and the state of the system in the descending branch
  • The evaluation distance represents the gap between the state of the system and the goal in the ascending branch

Evaluating these two distances allows the user to judge the effort required to make his mental representation correspond with the set goal.

This list of psychological characteristics is far from being exhaustive. Ergonomics allows designers to take advantage of these behavioral considerations and learning mechanisms in order to create ergonomic man-machine interfaces. In doing so, the following things must occur:

  • a list of items must preferably be comprised of less than 7 items
  • the use of colors, signs and symbols that tie the elements of an interface together help the user to adapt to it
  • short messages facilitate their memorisation
  • the state of the interface must faithfully represent the state of the system. This notably means that suitable alert message must be implemented

The Criteria of Ergonomics

The following are the main criteria of website ergonomics (non-exhaustive list):

Criteria Sub-Criteria Description
Soberness
Soberness
Simplicity An uncluttered website will reinforce an organization's credibility.
Not Overloaded Animated images are not recommended. Animated images should be reserved for strong messages because they attract the user's eye.
Legibility
Legibility
Clearness The fact that written information is harder to read on screen than on paper (25% more reading time) should be taken into account. Thus, the text should be sufficiently spaced out.
Structuring The text should be structured by paragraphs and titles at different levels in order to facilitate reading.
Layout The different pieces of information must be organized by level of importance. The most important pieces of information must appear at the top of the page.
Usability
Usability
Ease when browsing The widely followed "three-click rule" stipulates that all information must be accessible in less than 3 clicks.
Location The visitor must be able to locate where he is on the website at all times. Moreover, the logo must be in the same spot on all the pages and a uniform graphic charter must be applied to all of the pages to let the user know that he is still on the same website. A site map may be an excellent way to help the visitor to know where he is.
Freedom when browsing The website must give the user the possibility to return to the home page and the main headings with one simple click, no matter what page he is on (e.g. by using a navigation bar). As far as possible, the user should be able to browse through the content without having to return to the home page. Intro pages and splash screens should be avoided because they will annoy most visitors.
Address Visibility The page's URL must always be visible and sufficiently clear to allow users to know where they are and easily return to that page.
Tangibility of the Information The information on the website must be qualified, i.e. information such as the date of the last update and the name of the author must be present. In addition, it is a bad idea for a website to have a attention-grabbing home page that leads to pages that are under construction.
Structure Homogeneity The elements used for browsing must be located at the same spot on every page and should have the same presentation from one page to another, if possible.
Speed
Speed
Loading Time A page's loading time must be as short as possible because most Internet users will not wait more than 15 seconds for a page to load. This factor depends particularly on the visitor's connection, the size of the page and its images as well as the webserver capabilities.
Optimized Images It is a good idea to optimize image size as much as possible by choosing a well-adapted format and the fewest of colors possible. The recommendation is to not have more than 30 or 40 kb per image, unless voluntary action is required (e.g. the user can download a high-resolution image).
Non-resized Images For the same reason, images should preferrably not be resized.
Interactivity
Interactivity
Hypertext Links Interactivity describes the possible interactions between users and a website. Hypertext links offer users vast possibilities in this area and give visitors multiple paths that they can take as they like. Web designers are advised to place enough links between the different pages. However, too many links can make reading difficult.
Segmenting Information In order to allow visitors to take in information more easily and, in some cases to pique curiosity, it is a good idea to segment information. In particular, segmenting information can be done by having a catchline and a hypertext link that leads to the rest of the article.
Facilitating Exchanges It is a good idea to have everything set up to make communication with visitors easier, particularly in order to gather their impressions and requests in order to adapt the website to their needs. At a minimum, it must be easy for visitors to contact someone, either by email or by filling out a contact form.
Adaptability
Adaptability
  Adaptability describes the possibility to personalize a website through user intervention.
Font Resizing A website's text should preferrably not use fonts whose sizes are not expressed in absolute value. This way users can resize the font if they so desire.
Adaptativeness
Adaptativeness
  Adaptivity describes the ability for a website to automatically become personalized without user intervention.
Accessibility
Accessibility
Access to all Accessibility means the ability for a website to be accessed universally, i.e. by all types of users including partially sighted and visually handicapped people. A certain number of simple accessibility rules exist and should be followed so as to give access to the greatest number of people, independant of their software or hardware configuration or their handicap.
Interoperability Respect for standards, in particular the W3C accessibility recommendations, helps to guarantee a good level of interoperability, i.e. the ability for clients using different software to access a website.
Format Transparency Preferentially, the formats used should be transparent, i.e. they can be read in text mode. Thus, HTML should preferrably be used instead of Flash. In addition, images and animation must not detract from written information or be a bother for visually handicapped people. Therefore, graphic illustrations should only be used to visually compliment the text.
Caption A caption or replacement text should exist to replace images (by using the alt atribute), in order to allow visually impaired people to understand an image's meaning.
Choice of Colors Colors should be chosen so that color blind people can correctly distinguish the colors.
Healthy Use of Style Sheets The information must be accessible even without a style sheet.
Adapted Contrast Their must be enough contrast between the background color and the text so that partially sighted people can read it.
Modifiable Font Size Font size must be adaptable so that users can enlarge the font size if necessary.

In addition, the fonts used must not be so small that they tire readers' eyes or are illegible.


Related :


Webmastering - Ergonomía de un sitio web
Webmastering - Ergonomía de un sitio web
Webmastering - Ergonomie einer
Webseite
Webmastering - Ergonomie einer Webseite
Ergonomie d'un site web
Ergonomie d'un site web
Webmastering: ergonomia di un sito web
Webmastering: ergonomia di un sito web
Webmastering - Ergonomia de um site web
Webmastering - Ergonomia de um site web
This document entitled « Webmastering - Website Ergonomics » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.