louismntt / sd-affordance-creative

Interface casse-tête : faire comprendre la notion d'affordance, par une interface de création visuelle, composée d'un canvas et de boutons sans indications

AFFORDANCE CREATIVE

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

Objectifs pédagogiques

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

Quel déroulement dans l'expérience / le jeu ?

Quels objectifs doit atteindre l'utilisateur ?

• L'utilisateur doit reproduire un visuel donné, affiché devant lui

Quelles actions va effectuer l'utilisateur ?

• Appuyer sur un premier bouton : trois options
  • le bouton change quelque chose sur l'image

Quelles émotions va ressentir l'utilisateur ?

• 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.

C'est le principe d'affordance

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] ➔ ♡ ☆

Pour ça, il doit :

• 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

Comment on débrief du jeu pour faire comprendre les notions visées ?

• mettre en avant les difficultés liées à chaque point de la section ci-dessous
• comparaison youtube