Seance 5 - Ergonomie

Architecture et Ergonomie

d'un site web

Ergonomie d'un site web

Critères d'ergonomie

Vous devriez savoir

• Notion d'ergonomie
• Les principaux critères d'ergonomie
• Conception du système de navigation
• Structuration du site web

Notion d'ergonomie

L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail.

Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.

L'ergonomie se caractérise généralement selon deux composantes :

L'efficacité, consistant à adopter des solutions appropriées d'utilisation d'un produit, au-delà du bon sens du concepteur

L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur. Elle se décline en :

• confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse.

• sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur.

L'ergonomie, c'est pas facile

La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs.

Les critères suivants sont généralement déterminants pour un site web :

• attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas nécessairement la même information ou n'ont pas nécessairement les mêmes exigences en terme de graphisme.

• habitudes de l'utilisateur : elles correspondent à des comportements acquis.

• âge de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation.

• équipements : il s'agit d'une des difficultés majeures. En effet, l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage

• niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des "guru" de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté.

Les principaux critères d'ergonomie (8 critères) d'un site web sont les suivants

Critère

Sous-critère

Description

Simplicité

Un site web très 'propre' renforcera la crédibilité de l'organisation.

Sobriété

Peu chargé

Les animations doivent être privilégiées pour afficher des messages forts car elles attirent le regard de l'internaute.

Critère

Sous-critère

Description

Clarté

Les informations écrites sont moins faciles à lire sur un écran que sur papier. Ainsi, le texte devra être suffisamment espacé.

Lisibilité

Le texte devra être structuré à l'aide de paragraphes et de titres de différents niveaux, afin d'en faciliter la lecture.

Structuration

Organisation

Les éléments d'informations doivent être hiérarchisé par niveau d'importance (de haut en bas)

Critère

Sous-critère

Description

Facilité de navigation

La « règle des 3 clics », globalement suivie stipule que toute information doît être accessible en moins de 3 clics

Repérage

A tout moment le visiteur doit pouvoir être en mesure de se repérer dans le site. Un plan du site peut constituer un excellent moyen de permettre au visiteur de savoir où il est.

Utilisabilité

Liberté de navigation

Le site doit laisser la possibilité à l'utilisateur de revenir à la page d'accueil et aux principales rubriques par un simple clic.

Visibilité de l'adresse

L'URL de la page en cours doit être constamment visible et suffisamment explicite pour permettre à l'utilisateur de se repérer afin de pouvoir revenir facilement.

Tangibilité de l'information

Les informations présentes sur le site doivent être qualifiées, c'est-à-dire que des éléments permettant d'en connaître la date de mise à jour où l'auteur doivent être présents.

Homogénéité de la structure

Les éléments de navigation doivent être situés au même endroit sur toutes les pages, si possible avec une présentation uniforme d'une page à une autre.

Critère

Sous-critère

Description

Le temps d'affichage d'une page doit être le plus petit possible car la majorité des internautes ne patientent pas.

Temps de chargement

Images optimisées

Rapidité

Il convient d'optimiser au maximum la taille des images, en choisissant un format adapté et un nombre de couleurs le plus petit possible.

Images non redimensionnées

Les images doivent préférentiellement être dans leur taille réelle, sans redimensionnement.

Critère

Sous-critère

Description

Liens hypertextes

Il est conseillé de mettre suffisamment de liens entre les différentes pages. A l'inverse, trop de liens peuvent rendre difficile la lecture.

Interactivité

Découpage de l'information

Le découpage de l'information peut se traduire par un texte d'accroche et un lien hypertexte conduisant à la suite de l'article.

Facilitation des échanges

Le visiteur doit pouvoir trouver facilement le moyen de contacter une personne, par courrier électronique ou grâce à un formulaire de contact.

Critère

Sous-critère

Description

(Définition)

L'adaptabilité caractérise la possibilité de personnalisation du site web sur intervention de l'utilisateur.

Adaptabilité

Redimensionnement des polices

Les textes du site doivent utiliser des polices dont la taille n'est pas exprimée en valeur absolue, afin de laisser la possibilité de les redimensionner aux personnes le souhaitant.

Description

Critère

Adaptativité

L'adaptativité caractérise la possibilité de personnalisation du site web à personnaliser automatiquement le site web sans intervention de l'usager.

Critère

Sous-critère

Description

Universalité de l'accès

Il existe un certain nombre de règles d'accessibilité simples: Quelle que soit leur configuration logicielle et matérielle ou leur handicap, etc.

Interopérabilité

Le respect des standards (W3C) permet de garantir un bon niveau d'interopérabilité, c'est-à-dire la capacité du site web à être consultable par différents clients logiciels.

Transparence des formats

Lees images ou animation ne doivent pas se soustraire aux informations textuelles ou provoquer une gêne pour les non-voyants.

Accessibilité

Légende

Une légende ou un texte de remplacement doivent être prévu en lieu et place des images (grâce à l'attribut alt), afin de permettre aux déficients visuels de comprendre le sens de l'image.

Choix des couleurs

Les couleurs doivent être choisies afin de laisser l'information lisible aux personnes ne distinguant pas les couleurs correctement.

L'information doit pouvoir être accessible, y compris sans feuille de style.

Usage sain des feuilles de style

Contraste adapté

Le niveau de contraste entre la couleur d'arrière-plan et le texte en avant plan doit être suffisant pour en permettre la lecture aux malvoyants.

Conception du

système de navigation

Il s'agit dans un premier temps de faire l'inventaire des contenus du site web et de les regrouper par thématique afin de constituer des rubriques, on parle alors de rubriquage.

Structuration du site web

Des études ont montré que l'oeil de l'internaute moyen parcourt généralement la page web selon un cheminement global en "zigzag" commençant à l'angle supérieur gauche, jusqu'à l'angle inférieur droit.

Parcours visuel

Agencement de la page

Elle aboutit généralement à la création de modèles de pages (templates).

Les templates sont des images, créées sous forme de calques, ou bien des pages web représentant le squelette graphique d'une page type.

Eléments de navigation

-Le fil d'ariane (breadcrumb)

Exemple: [Accueil] > Webmastering > Navigation

-La navigation par onglets (tabs)

Une en-tête contenant le nom du site, un bandeau de navigation et une zone prévue pour une bannière (publicitaire ou non)

La structure traditionnelle d'une page web est la suivante :

-La carte du site (sitemap)

Un logo situé en haut à gauche.

La plupart du temps le logo est cliquable et mène à la page d'accueil.

Un corps de page, contenant l'essentiel de l'information

Un pied de page regroupant des informations utiles telles que la date de mise à jour, un lien vers un formulaire de contact, un plan d'accès, etc.

Une zone de navigation, située à gauche et/ou à droite.