Le principe de l'interface est de reproduire un visuel affiché sur un autre écran (ou imprimé), en se servant des boutons présents sur les côtés. Ces boutons n'ont aucune indication sur sur leur fonction, mais en voici la liste :
- mélanger tous les paramètres (random)
- augmenter l'épaisseur du contour des motifs
- diminuer l'épaisseur du contour des motifs
- augmenter le nombre de motifs
- diminuer le nombre de motifs
- changer la forme des motifs
- changer la couleur de fond
- changer les formes en arrière-plan
Pour un objectif global, qui est de montrer que nous construisons des habitudes dans nos interfaces numériques, et que ces habitudes s'apprennent et se travaillent :
- Faire comprendre la notion d'affordance
- Montrer que nos interfaces sont utilisables parce que les composants sont affordants
- L'utilisateur doit reproduire un visuel donné, affiché devant lui
- Appuyer sur un premier bouton : trois options
- le bouton change quelque chose sur l'image
- de la surprise en découvrant les effets de chaque bouton
- de l'incompréhension quand certaines boutons ne provoqueront rien (par exemple le bouton pour réduire l'épaisseur des contours, si ce paramètre a déjà atteint le minimum)
- de la frustration quand il va appuyer sur le bouton random et que ça va faire sauter toutes ses modifications
- de la confiance quand il commencera à avoir identifié la place de certains boutons et leur fonction
- de la frustration quand il appuiera sur un bouton qu'il pense connaître, et que l'effet produit n'est pas celui auquel il s'attendait
- de la satisfaction quand il va réussir à s'approcher du visuel souhaité
- de la méfiance et de l'hésitation / angoisse quand il sera proche du but, et qu'il commencera à faire attention à ne pas faire sauter ses modifications / son niveau d'avancement
- de la satisfaction et du soulagement à la réussite
——————————————————————
Texte sur écran de victoire
Tu as eu du mal à reproduire l'image, alors que tous les boutons dont tu avais besoin étaient devant toi ? On t'explique pourquoi !
Texte sur cartel imprimé
Les boutons devant toi ne t'offraient aucune info sur leur utilité. Vraiment pas pratique, non ? Normalement, dans nos interfaces, la fonction de chaque composant est facile à comprendre.
Par exemple, dans l'interface que tu viens d'essayer, rien n'est affordant // trouver synonimes, précisions . Si tu ne sais pas ce qu'il va se produire avant d’appuyer sur un bouton, tu ne contrôles pas tes actions. Résultat : tu ne contrôles pas ton outil numérique.
Au contraire, sur youtube ou beaucoup d'autres, tu sais que si tu appuies sur cette icône 🔎, tu vas accéder à une recherche. Tu connais ce symbole, et tu connais la fonction à laquelle il correspond. On dit de ce bouton qu'il est affordant. C'est ce qui te permet de naviguer même dans une interface que tu ne connais pas, car ces codes sont communs, et tu t'y habitues probablement depuis déjà plusieurs années. // faire passer ça en schéma
[En images, pictogrammes, plusieurs symboles qu'on connait] ➔ ♡ ☆
- Comprendre que chaque bouton a une fonction distincte
- Identifier quelles sont précisément ces fonctions
- Mémoriser précisément quelle fonction correspond à quel bouton
- Ajuster chaque paramètre pour qu'il corresponde au visuel à reproduire // il pourrait y avoir une sorte de jauge / barre de progression où chaque paramètre bien ajusté permettrait de progresser ou de remplir un point précis
- mettre en avant les difficultés liées à chaque point de la section ci-dessous
- comparaison youtube