Ergonomie web et UX

I - La notion d’ergonomie web

1- Les critères de l’ergonomie

Les deux critères de l’ergonomie sont :

- l’utilité
- l'utilisabilité

2- La théorie de la Gestalt

La théorie de la Gestalt définit les principes de la perception. Quand nous

naviguons sur une interface, ces lois sont perçues de façon tout à fait
inconsciente si elles sont bien utilisées.

Plusieurs lois composent les théories de la Gestalt, dont trois sont

particulièrement pertinentes dans le domaine du Web : la loi de clôture, la loi
de proximité et la loi de similarité.

La loi de clôture

Une forme fermée est plus facilement identifiée comme une figure (ou
comme une forme) qu’une forme ouverte.
Pour que l’effet de clôture s’active, il faut que le cerveau puisse rapidement
percevoir les contours du cadre. Il faut donc travailler les zones avec les
autres lois de Gestalt pour renforcer la visualisation du « cadre ».

La loi de proximité

La loi de proximité énonce que notre cerveau tend à regrouper les choses
qui sont proches physiquement. En terme d’interface, il est donc important
de rassembler les éléments qui vont avoir la même fonction ou une action
similaire. La proximité visuelle serait donc traitée en tant qu’indice par notre
cerveau pour préjuger d’une proximité conceptuelle.
La largeur des colonnes, les distances entre les titres et les paragraphes nous
font comprendre que les éléments appartiennent à la même catégorie.

Problèmes de proximité

Le manque d’espace de respiration entre les groupes d’informations à

l’écran ne permet pas de voir ces informations comme des groupes distincts.
Pourtant, le discernement est essentiel pour que les internautes comprennent
rapidement ce que vous leur proposez. Il permet de leur mâcher le travail
d’analyse visuelle de la page.

Lorsqu’une page souffre de problèmes de proximité, c’est souvent par

manque d’espace. Préservez des marges suffisantes entre les différents blocs
pour permettre une compréhension intuitive de votre page. Un site qui utilise
l’éloignement physique des blocs d’informations grâce à des espaces
vierges paraît plus facile à prendre en main que celui qui ne semble être
qu’un tas indifférencié d’objets.

La loi de similarité

Notre cerveau à tendance à regrouper les choses qui se ressemblent. La loi

de similarité indique qu’une forme similaire, de la même taille, de la même
couleur suggère une fonctionnalité / action équivalente.

Une ressemblance ou une différence de forme sera donc le signe que les
objets sont comparables ou opposables d’un point de vue conceptuel.
Différents attributs visuels peuvent nourrir la similarité de deux éléments,
notamment la taille, la forme, la couleur, le contenu et le comportement.

Exemple : Une mauvaise application de la loi de proximité - il est difficile de

savoir si le lien « Achetez-moi » concerne le produit du haut ou celui qui se
situe en dessous.
3- La loi de Fitts

La loi de Fitts

Cette loi met en évidence une relation entre la vitesse et la précision

rapportée au pointage. En effet, les éléments les plus petits ou les plus
éloignés demandent forcément davantage de temps pour être atteints.

Cette loi fondamentale a de grandes implications dans l’expérience

utilisateur (UX) et le design d’interface.

« Le temps que l’on met pour atteindre une cible est proportionnel à la
distance à laquelle elle se trouve, ainsi qu’à sa taille. »

Plus précisément, une cible est d’autant plus rapide à atteindre qu’elle est
proche et grande. Cette règle constitue ce que l’on appelle la loi de Fitts.

Si on applique ce principe sur le Web, cela signifie qu’il faudrait essayer

d’augmenter la taille des éléments cliquables et de réduire leur éloignement
vis-à-vis du point de départ du mouvement.

La loi de Fitts révèle la « zone de confort » des interfaces graphiques La zone

de confort est l’espace de l’écran le plus facilement atteignable.

La loi de Fitts doit être appliquée de manière hiérarchisée, en fonction de

l’importance respective des différents éléments cliquables.

Le Web fait appel à différents types d’objets cliquables, qui sont soumis à la
loi de Fitts : logos, barres de navigation, icônes, images, liens hypertextes...
Le Fittsizing

Le Fittsizing, c’est l’application de la loi de Fitts dans une interface.

Dans un sens restrictif, elle concerne uniquement la compensation de la

distance vers un élément par l’augmentation de sa taille.

Plus largement, lorsqu’on « fittsize » une interface, c’est que l’on conçoit les
objets qui la composent en prenant en compte la loi de Fitts.

On choisit d’appliquer ce que l’on appelle le Fittsizing en fonction des

niveaux d’importance relative et de la possibilité de compenser
l’éloignement par la taille.

Faciliter le clic des éléments, c’est augmenter la vitesse avec laquelle on

peut cliquer dessus. Moins l’internaute a besoin d’effectuer un mouvement
précis en termes de pixels, plus il pourra aller vite dans sa visée.

C’est aussi l’une des réflexions justifiant que les liens hypertextes soient
constitués par des libellés significatifs de quelques mots plutôt que par des
libellés génériques.

Et ce d’autant plus que ces derniers sont de taille réduite. Comparez ainsi la
facilité à cliquer dans les trois exemples suivants (plus le lien est grand, plus il
est facile à cliquer) :
La première manière d’augmenter la taille des éléments cliquables, c’est
naturellement d’augmenter leur taille réelle.

Cet objectif peut en outre vous amener à revoir la nature même de vos
objets cliquables.

Prenons un exemple de présentation d’une liste de résultats paginée.

Si l’on se trouve sur la première page et que l’on souhaite passer à la
suivante, on peut en général procéder en cliquant sur un lien 2, mais aussi sur
un objet signifiant « page suivante ».
Cet objet peut être, soit un élément typographique ou graphique sous forme
de flèche orientée vers la droite, soit un lien hypertexte.
C’est ce dernier format qu’il faut privilégier, en partie parce que, étant de
taille plus importante qu’une flèche, il est plus facile à cliquer.

Espace neutre

Un deuxième type d’approche peut permettre d’augmenter la taille virtuelle

des éléments cliquables, particulièrement dans les espaces de navigation où
plusieurs éléments actifs sont placés les uns à côté des autres. Pour
augmenter leur taille virtuelle, il faut une zone vide de entre deux éléments
cliquables.
Cette recommandation est justifiée par le fait qu’une erreur de clic sur un
élément neutre est moins grave qu’une erreur de clic sur un élément actif
(qui enverrait alors l’internaute sur une autre page que celle souhaitée).

La proximité géographique

La seconde partie de la loi de Fitts concerne la proximité géographique des

objets : plus l’objet cible est proche de l’objet source, plus on l’atteindra
rapidement.

Il est plus difficile d’appliquer ce principe sur le Web, dans la mesure où de

nombreux emplacements sont conventionnels. La plupart du temps, il est plus
important de respecter une convention que d’obéir à tout prix à la loi de
Fitts.
La proximité géographique et les conventions de localisation peuvent être
oubliées à condition que l’utilisateur soit guidé par des éléments de
navigation intuitifs et par une navigation fluide.

4 - La notion d’affordance

Les affordances sont les possibilités d’action suggérées par les

caractéristiques d’un objet.

Par exemple, lorsque l’on arrive devant une porte, un faisceau d’indices
permet de comprendre, avant toute action, si on doit la pousser, la tirer, la
faire glisser, etc.

Lorsque l’on arrive sur un site web, ce dernier fournit un ensemble d’indices
pour comprendre son utilisation. Ainsi, deux dimensions sont capitales à
prendre en compte.

L’application la plus importante de la notion d’affordance sur le Web réside

dans la différenciation que les internautes peuvent faire entre ce qui est
cliquable et ce qui ne l’est pas.
On doit d’une part optimiser l’affordance à la cliquabilité des éléments
correspondants pour faciliter leur repérage. Autrement dit, l’internaute doit
savoir très vite, d’après l’apparence d’un objet, si ce dernier est cliquable, s’il
peut le mener quelque part ou lui permettre d’accomplir une action.. Cette
règle doit être appliquée seulement aux éléments primaires de navigation.

L’affordance peut-être induite par : l’apparence, la position, le libellé, les

conventions...

Cette règle doit être appliquée seulement aux éléments primaires de

navigation. On ne devrait pas rendre affordants aux clics les éléments de
navigation de second niveau, sous peine de surcharger considérablement
l’interface.

L’affordance des zones de saisie

Les éléments de navigation (souvent des liens) et d’action (souvent des

boutons) ne sont pas les seuls dont on doit travailler l’affordance. C’est aussi
le cas des éléments d’interaction pure (éléments de formulaires).

L’affordance à l’interaction est obtenue par recoupement des dimensions

suivantes :
• forme, couleur, libellé , contenu , localisation dans l’interface,
• adjonction d’éléments indiquant son caractère interactif (puce, icône,
bouton d’action).

Pour repérer un champ de saisie, les internautes s’attendent à trouver une

forme rectangulaire blanche et vide, qui leur permette de saisir quelque
chose au clavier : c’est le format qui présente la plus grande affordance à
l’interaction.

Placer un champ de saisie sur un fond de couleur plus foncé permet de

renforcer son affordance perçue à l’interactivité : l’internaute comprend
immédiatement qu’il peut agir sur cette zone.
Les affordances erronées

On a souvent affaire à des affordances erronées lorsque les concepteurs

cherchent à mettre en avant des éléments qui ne sont pas des liens.

Dans le même ordre d’idées, il ne faut pas utiliser, pour présenter des
éléments inactifs, des formats habituellement adoptés pour des éléments
actionnables. Sinon on risque que les internautes essaient de les utiliser et
soient déçus, ou pensent que le site fonctionne mal.

5 - La notion d’utilisabilité

Norme d’utilisabilité : « Un système est utilisable lorsqu’il permet à l’utilisateur

de réaliser sa tâche avec efficacité, efficience et satisfaction dans le
contexte d’utilisation spécifié ».

Évaluer l’utilisabilité d’une application web : une application web est

utilisable lorsque l’utilisateur peut réaliser sa tâche (efficacité), qu’il
consomme un minimum de ressources pour le faire (efficience) et que le
système est agréable à utiliser (satisfaction).

Comment mesurer l’utilisabilité :

Efficacité : Vérifier que les objectifs visés par l’utilisateur sont atteints
Efficience : Mesurer les ressources nécessaires pour atteindre ces objectifs,
par exemple le temps mis par l’utilisateur pour réaliser la tâche
Satisfaction : Déterminer si l’application est agréable à utiliser, par exemple
en décomptant le nombre de remarques négatives émises par les utilisateurs
lors du test
Le test d’utilisabilité

Méthode : observer les utilisateurs en situation réelle et identifier les

problèmes qu’ils rencontrent, les questions qu’ils se posent et les
fonctionnalités qu’ils apprécient ou non.

Echantillon : 5 utilisateurs suffisent

Comment : Le test d’utilisabilité est effectué dans un contexte le plus proche

possible de l’utilisation réelle. L’utilisateur réalise les principales tâches pour
lesquelles l’application a été conçue.

L’observateur donne à l’utilisateur des consignes qui vont le conduire à

effectuer des tâches typiques de l’application web
Important : pas aider l’utilisateur et le laisser se débrouiller.

L’observateur note les erreurs commises, les incompréhensions, les difficultés,

toute information qui présente une difficulté d’utilisation de l’application.

En phase de conception, le test d’utilisabilité permet de valider des

hypothèses sur le comportement de l’utilisateur, par exemple : la façon dont
il navigue dans l’interface, les informations qu’il recherche ou les
commandes dont il se sert le plus souvent.

Les étapes d’un test d’utilisabilité :

1. Définir les objectifs exemples : identifier les problèmes de navigation, les

erreurs de clic, la facilité de trouver l’information souhaitée, la facilité pour
accomplir une tâche sur le site, etc.

2. Créer les scénarios d’utilisation : exemples : l’utilisateur doit commander un

produit spécifique, trouver un contenu spécifique, remplir un formulaire,
trouver un produit sur le site en utilisant le smartphone

3. Conduire les test : les utilisateurs manipulent l’application

4. Reporting : mesurer l’efficacité par des données mesurables (combien
d’utilisateurs ont réussi la tâche attribuée), l’efficience (combien de temps
ont-ils mis pour accomplir la tâche, et la satisfaction (compter les remarques
négatives lors de la manipulation de l’application)

5 utilisateurs suffisent

J. Nielsen a montré que des tests effectués avec 5 utilisateurs permettent

d’identifier au moins 80 % des problèmes d’utilisabilité. En augmentant le
nombre d’utilisateurs, on ne trouve pas plus de problèmes.

Tester avec un plus grand nombre d’utilisateurs augmente le coût du test,

pas la pertinence des résultats. Plutôt que de mener un test avec 15
utilisateurs, J. Nielsen considère qu’il est préférable de faire 3 tests avec 5
utilisateurs, en améliorant l’interface à chaque itération.

Lorsque l’application vise différents types d’utilisateurs, il importe de tester

auprès des différents groupes.

Comment mesurer l’utilisabilité (pour chaque scénario) :

Efficacité (E1): objectif atteint = 1; objectif non atteint = 0

Efficience (E2): Temps mis par l’utilisateur pour réaliser la tâche
>3 min = 0 / 2-3 min = 1 / 1-2 min= 2 / 30s-1min = 3 / 15s-30s= 4 / <15s = 5
Satisfaction (S): mesure le degré de satisfaction lors de l’utilisation du site Ce
site web est agréable à utiliser :

Le score SUS

SUS (System Usability Scale), qui est l’une des échelles les plus célèbres et les
plus utilisées par les professionnels de l’UX
- une des premières échelles de mesure de l’utilisabilité perçue (en 1996)
- est libre de droits et comporte un nombre restreint d’items faciles à
comprendre pour les utilisateurs
- méthode basée sur les éléments de la norme ISO 9241-11 sur l’utilisabilité

Le SUS comprend dix items présentés sous la forme affirmative, dont un sur
deux est inversé :
Le calcul du score au SUS est décomposé en quatre étapes :

- pour les items impairs, soustrayez un point au score brut coché par
l’utilisateur ;
- pour les items pairs, calculez cinq moins le score brut coché par l’utilisateur ;
- faites la somme des dix nouveaux scores ainsi recalculés ;
- multipliez la somme des scores calculés par 2,5.

Vous obtenez ainsi un score total compris entre 0 et 100. Une fois que vous
avez obtenu le score total pour chacun des utilisateurs à qui vous avez
soumis le SUS, calculez une moyenne de tous les scores obtenus, qui
représente l’évaluation globale de votre système.

Exemple de calcul de score SUS :

L’interprétation du score SUS :

II - L’UX (expérience utilisateur)

1 - Définition

« L'expérience utilisateur (en anglais, user experience- UX) est un terme des
années 2000 qui tente de qualifier le résultat (bénéfice) et le ressenti de
l'utilisateur (expérience) lors d'une manipulation (utilisation provisoire ou
récurrente) d'un objet fonctionnel ou d'une interface homme-machine (via
une interface utilisateur)... »

L’objectif est de proposer une expérience idéale à l’utilisateur, durant

laquelle il ne rencontrera aucune difficulté, afin qu’il identifie le plus
rapidement possible et sans barrière la valeur que lui apporte l’utilisation du
dit produit/service.

L’expérience utilisateur (UX) a pour but de rendre les logiciels :

plus utiles -> car toutes les fonctionnalités n’ont pas toujours leur place
plus utilisables -> car le logiciel doit être facile à utiliser
plus désirables -> car l’attrait visuel et émotionnel a beaucoup d’importance
chez tout être humain
plus navigables -> car on ne veut pas perdre son temps à chercher des
éléments
plus accessibles -> pour les personnes ayant des handicaps
plus crédibles -> parce qu’une bonne UX renforce la qualité perçue du
logiciel
2 - Notion de design itératif

“Les bons designs se créent grâce à une évolution constante [itération] :

l’objet original est modifié légèrement par rapport au précédent, éliminant
les erreurs, en faisant des améliorations ou en testant de nouvelles idées.”
3 - Les différents éléments du diagramme UX

Utile

Service et contenu

Utilisable

Structure et arborescence

Norme d’utilisabilité : « Un système est utilisable lorsqu’il permet à l’utilisateur

de réaliser sa tâche avec efficacité, efficience et satisfaction dans le
contexte d’utilisation spécifié ».

Évaluer l’utilisabilité d’une application web : une application web est

utilisable lorsque l’utilisateur peut réaliser sa tâche (efficacité), qu’il
consomme un minimum de ressources pour le faire (efficience) et que le
système est agréable à utiliser (satisfaction).
Désirable

La désirabilité est déclenchée par :

• l’attachement à une marque,
• le branding
• l’identité
• l’esthétique
• et par le design émotionnel.

Navigable

Menu et recherche

L’utilisateur doit pouvoir parcourir le site sans effort. Structure, menu, gamme,
etc doivent être facilement identifiables.

Crédible

Sécurisation

Assurer de la loyauté, de l'expertise des conseils, de l'attention portée à la

protection des utilisateurs permet une expérience sereine.

Accessible

L'accessibilité du web est la problématique de l'accès aux services et

contenus en ligne non seulement pour les handicapés et les seniors, mais
aussi de manière plus générale pour tous les utilisateurs qui ne disposent pas
du confort offert par un ordinateur de bureau.

Des travaux ont été engagés sur le plan international pour améliorer
l'accessibilité des contenus web, avec l'initiative pour l'accessibilité du Web
(Web Accessibility Initiative - WAI) lancée en 1996 par le World Wide Web
Consortium (W3C).
« L'accessibilité du Web signifie que les personnes en situation de handicap
peuvent utiliser le Web. Plus précisément, qu'elles peuvent percevoir,
comprendre, naviguer et interagir avec le Web, et qu'elles peuvent
contribuer sur le Web. L'accessibilité du Web bénéficie aussi à d'autres,
notamment les personnes âgées dont les capacités changent avec l'âge.
L'accessibilité du Web comprend tous les handicaps qui affectent l'accès au
Web, ce qui inclut les handicaps visuels, auditifs, physiques, de parole,
cognitifs et neurologiques. »

La loi française n°2005-102 du 11 février 2005 pour l’égalité des droits et des
chances, la participation et la citoyenneté des personnes handicapées, fait
de l’accessibilité une exigence pour tous les services de communication
publique en ligne de l’État, des collectivités territoriales et des établissements
publics qui en dépendent.

La loi reconnaît les « recommandations internationales pour l’accessibilité de

l’Internet » comme la référence à suivre. C’est la raison pour laquelle, en
application de cette loi, un Référentiel général d’accessibilité pour les
administrations (RGAA) est élaboré.

Ce référentiel, à forte dimension technique, offre une traduction

opérationnelle des critères d’accessibilité issus des règles internationales ainsi
qu’une méthodologie pour vérifier la conformité à ces critères.

Précieux

Exclusif

Une offre exclusive et différenciante permet d'accroître l'intérêt et l'adhésion

de l'utilisateur.
III - Boîte à outils UX

1 - Les personas

Les personas sont des personnes fictives représentant les différents

archétypes des futurs utilisateurs de l'application.

Les personas ont une identité, un statut, un niveau d'expertise et des objectifs.

Les personas permettent de confronter l'application à des objectifs et des

scénarios par type d'utilisateur et ainsi déceler les difficultés rencontrées.
2 - Les modèles mentaux UX

La carte d'empathie

- est outil simple d’utilisation qui permet à synthétiser les observations sur
l’utilisateur final et en tirer des conclusions nouvelles
- elle vise une compréhension profonde de l’utilisateur
- permet de cerner le profil d’un « client type », avatar représentatif d’un
segment de clientèle dont il illustre les principaux traits
- permet de se mettre à la place de l’utilisateur
- est une étape préliminaire à la conception d’une « experience map ».
- l’idéal est de réaliser une carte d’empathie à plusieurs, lors d’une séance
d’idéation. Les membres de l’équipe notent leurs idées sur des post-It, qu’ils
placent dans l’un des cadrans de la carte d’empathie.

2 versions possibles :

Celle de Nielsen Norman Group :

Celle de A. Osterwalder :

Customer journey map

- une interprétation visuelle de l’ensemble des interactions entre un client et

un produit, un service ou une entreprise spécifique
- un outil qui permet une visualisation de l’expérience du service vécue par
l’utilisateur
- représente les différentes étapes du service et aide à une analyse de
l’expérience, en vue de l’améliorer

Objectifs : identifier les points de contact avec le produit ou le service et les

émotions générés par les différents expériences du parcours utilisateur
Les émotions ressentis permettent d’identifier les points sensibles
(d’amélioration), ainsi que les opportunités d’innovation.

La carte d’expérience

L’Experience Map, carte d’expérience en français, est une représentation

visuelle de l’expérience globale d’un utilisateur, consommateur, ou client,
indépendamment d’un service ou d’un produit spécifique.

L’experience map est :

- une forme de mapping UX collaborative et itérative un outil de travail qui
raconte une histoire compréhensible par tous et suscitant l’empathie de
l’équipe
- un moyen de se mettre à la place de l’utilisateur et de ses expériences
- une représentation graphique et holistique des actions, pensées et émotions
des utilisateurs durant la réalisation d’une tâche, ou pour atteindre un
objectif

L’Experience Map répond aux questions suivantes :

Qu’est-ce que l’utilisateur veut (motivation), fait, pense, ressent ?

Quelle expérience a-t-il du produit (avant, pendant, après) ?
Quels sont les points de contacts et les interactions ?
Quelles sont les informations pertinentes à utiliser ?
Comment structurer et présenter visuellement l’histoire de l’utilisateur ?
Que faire pour améliorer le produit ou service existant voire innover ?

Les étapes d’élaboration d’une expérience map :

- identifier le profil de l’utilisateur concerné (à l’aide d’un persona) ;

- comprendre l’objectif qu’il souhaite atteindre (ce qui va guider ses
comportements durant son parcours) ;
-identifier les scénarios d’usage (qui présentent la situation globale de
l’interaction) ;
- Identifier le contexte d’usage (technologique, social, environnemental).

Attention : le point de départ d’une expérience map est toujours antérieur à

l’interaction directe entre l’utilisateur et votre site
3 - Autres outils

L’AB testing

La technique de A/B testing est issue du marketing.

On propose plusieurs variantes et on évalue les performances de chaque
option.
Ces tests peuvent être automatisés en mettant en ligne un script filtrant les
entrées en les redirigeant vers telles ou telles versions.

L’eye tracking

Le tri par carte

Le tri par carte est une méthode permettant d'organiser les pages d'un site
web.
Les pages sont représentées par des cartes en papier.
L'utilisateur regroupe les cartes qui se ressemblent.
Il organise ainsi le contenu du site selon son point de vue et retrouve plus
facilement les informations qu'il cherche.