L'expérience utilisateur (abrégé UX) est la qualité du vécu d’un utilisateur face à une IHM (Interface Homme Machine, tel qu’un PC, un téléphone, les écrans d’une console de pilotage…). Cette notion est essentielle lors de conception d’outils numériques, pour l’apprentissage notamment.
L’ergonomie de ce qui est présenté à l’utilisateur, l’utilisabilité (la manipulation facile des objets présentés), mais aussi la qualité des contenus qui lui sont proposés sont incontournables. Elles mettent l'utilisateur-apprenant au centre de la conception des applications et modules de formation.
“Ce que l'on conçoit bien s'énonce clairement”
Nicolas BOILEAU
| On a déjà tous vu cette image où, selon la définition donnée et le point de vue, la balançoire sur la branche n’a pas du tout le même visage.
L’expérience utilisateur doit être pensée au plus tôt : dès les spécifications pédagogiques, graphiques, techniques et fonctionnelles de tout projet. |
Faciliter la lecture
D’un côté, il faut s'intéresser aux différentes théories abordées par la psychologie (pour bien cibler ses apprenants et les objectifs) mais également aux recherches en cognition (pour l’apprentissage multimédia…). Elles sont nécessaires dès la conception des modules, pour s'assurer de la compréhension des contenus mis en forme.
Il faut par exemple respecter le sens de lecture, pour la disposition des éléments sur une page. En respectant les principes culturels de chaque pays, il suit le balayage de l'œil, formant une sorte de Z, soit de gauche à droite, soit de droite à gauche, mais toujours du haut vers le bas.
Bien mettre en évidence les messages essentiels, sur le fond et la forme : jouer sur les contrastes, pour s’assurer de la lisibilité, de l'accessibilité et de la mise en avant des informations souhaitées. Être cohérent et homogène du début à la fin, pour aider l'utilisateur dans sa navigation, pour le guider et que ce soit plus simple pour lui.
Une mise en forme cohérente et homogène
Dans le Digital, il faut s’assurer de respecter les règles de ponctuation dans les messages et les propriétés d'usage de chaque objet, qui sont définis par des normes ou leurs utilisations, pour conserver l'attention et ne pas perturber l’utilisateur-apprenant. Prenons quelques exemples illustratifs (non exhaustifs).
La structure
Un module est généralement composé de 3 grandes zones :
- L’entête (header), qui comporte le titre du module, un ou plusieurs bouton(s) et un logo ou une image. Ce bandeau est généralement le même tout au long du module
- Juste en dessous, on retrouve l’aire pédagogique. C'est là où sont disposés les contenus, qui varient d’une page à l’autre.
- Tout en bas, on dispose en général d’un pied de page (footer) avec les boutons de navigation (Précédent et Suivant), un indicateur de progression, de type Page actuelle/Nombre de pages total, pourcentage d'avancement, ou barre de progression.
Les boutons
- Distinguer les cases à cocher des boutons radio :
▣ Cases à cocher : lorsque l’utilisateur peut cocher plusieurs cases parmi celles proposées
◉ Boutons radio : lorsque l’apprenant ne peut sélectionner qu'une seule case, le choix est exclusif
- Respecter les différents états des boutons :
- Actif (cliquable),
- Inactif (non cliquable),
- En cours (exemple : pour les boutons de type onglet, avec un affichage exclusif ; l’apprenant a cliqué sur le bouton et est en train de consulter les informations qui sont apparues),
- Déjà vu (l’apprenant a déjà cliqué sur le bouton, puis il a cliqué sur un autre bouton du même type).
Ces différents états sont représentés graphiquement différemment, pour aider l'apprenant à savoir si les boutons sont cliquables ou non et s'ils ont déjà été vus ou non.
Les consignes
Une question se termine toujours par un point d'interrogation. Elle correspond à une partie de l’énoncé et est parfois accompagnée d’une consigne technique qui précise l'action que doit effectuer l’utilisateur. Lorsque l’interface est très intuitive, on peut se dispenser de la consigne car l’utilisateur comprend tout de suite l’action qu’il doit réaliser.
"Remets les étapes de la pose d’une fenêtre dans l’ordre."
Mauvaise pratique : l’énoncé mélange la question et l’action à réaliser.
"Comment doit être réalisée la pose d’une fenêtre ?
Glissez-déposez chaque étape de la pose pour les remettre en ordre, puis validez."
Bonne pratique : Une question + une consigne spécifique à l'exercice.
Une interface facile à utiliser
Un autre aspect capital mais un peu plus technique est à prendre en compte : la modélisation de la performance humaine. Autrement dit, la relation entre la taille d’un élément (une case à cocher, un élément à déplacer ou un bouton, par exemple) et la facilité avec laquelle l’utilisateur peut le sélectionner/déplacer/cliquer dessus. Cette notion est décrite dans la loi de Fitts.
KÉSAKO ?
Ce paradigme décrit le temps qu’il faut à l’utilisateur pour accéder à un bouton, en fonction de la taille et la distance de ce dernier par rapport à la position initiale de l’utilisateur. Il en résulte une équation qui permet de déterminer le temps (T) qu’il faut pour accéder à la cible à partir de la distance (D) et de la largeur (L), A et B étant des paramètres de régression linéaire déterminée empiriquement :
Tout est une question de bon sens, en réalité. Il faut simplement que :
- les éléments cliquables soient suffisamment grands pour être facilement sélectionnés par l’utilisateur,
- ces boutons soient clairement identifiables et bien séparés des autres éléments de l’interface,
- les éléments liés par une fonctionnalité doivent être proches les uns des autres (exemples : les boutons pour quitter et réduire une fenêtre, ou encore les boutons sur un player vidéo).
Ainsi, il a été identifié des zones « confort » (Partie "facile" sur l’image ci-dessous), dans lesquelles il est recommandé de disposer les boutons les plus importants (comme les boutons de navigation). Ces zones varient selon les supports de consultation. Attention donc au responsive design, c'est-à-dire à l’adaptation des contenus sur PC, tablette et Smartphone.
Coming soon, le chapitre 11, sur les termes à connaître sur l'accessibilité en ligne !
