E-Learning

Affordance Detective

Un jeu d’enquête où l’on diagnostique une interface défaillante avec les bons outils d’analyse. Destiné aux étudiants et praticiens de la conception d’interfaces.

Ouvrir la démo

Le contexte

Reconnaître un défaut d’interface ne suffit pas : encore faut-il savoir avec quel outil le mettre en évidence et sous quel cadre théorique le nommer. Le jeu place l’apprenant en situation de diagnostic, plutôt que de lui présenter une liste de bonnes pratiques.

Le dispositif

Trois indices sont dissimulés dans un formulaire administratif volontairement défaillant. Pour les trouver, l’apprenant dispose d’une boîte à outils d’analyse à mobiliser à bon escient.

Curseur

Repérer les zones cliquables réelles et les faux affordances qui trompent l’œil.

Lecteur d’écran

Éprouver l’interface sans la voir, pour révéler ce qui manque à l’oreille.

Contraste WCAG

Mesurer la lisibilité des textes et des composants selon les seuils d’accessibilité.

Loi de Fitts

Évaluer la taille et la distance des cibles au regard du coût moteur du pointage.

Les décisions de conception

Les défauts ne sont pas signalés d’avance : ils sont semés dans l’interface, et c’est à l’apprenant de les faire apparaître. Chaque défaut repéré est ensuite relié à l’un des huit cadres théoriques d’un carnet, qui transforme le repérage en explication.

Ce que j’en retiens

En reliant l’outil au cadre, le jeu apprend une méthode plutôt qu’un catalogue : l’apprenant repart avec un réflexe de diagnostic transposable à n’importe quelle interface, pas seulement au formulaire du jeu.

Galerie

affordance-01-enquete.png
L’enquête : trois indices à débusquer dans un formulaire administratif défaillant.
affordance-02-outils.png
La boîte à outils : curseur, lecteur d’écran, contraste WCAG et loi de Fitts.
affordance-03-cadres.png
Le carnet : huit cadres théoriques qui expliquent chaque défaut repéré.