La notion d’affordance est un principe clé en UI/UX qui fait référence à la manière dont la forme d’un objet suggère naturellement son utilisation. Un bon design permet à l’utilisateur de comprendre comment interagir avec un élément sans avoir besoin d’explications détaillées. Pensez à ces jeux pour enfants où ils doivent insérer des formes géométriques dans les trous correspondants (un cube dans un carré, un cylindre dans un rond, etc.). Ces jeux initient les jeunes enfants aux concepts de formes et de volumes, mais surtout, ils leur permettent de comprendre intuitivement quelles actions sont possibles en fonction des formes qu’ils observent.
Ce principe n’est pas nouveau et trouve ses racines dans les travaux de l’école du Bauhaus. Fondée au début du 20e siècle, cette école de design prônait une approche où la forme devait toujours suivre la fonction. Les objets, qu’ils soient architecturaux ou décoratifs, étaient pensés pour être avant tout pratiques et fonctionnels. Cette philosophie se retrouve aujourd’hui dans la conception des interfaces numériques : un bouton doit suggérer qu’il peut être cliqué, un curseur doit indiquer qu’il peut être déplacé, tout comme un levier suggère qu’il doit être tiré.
L’affordance dans les jeux vidéo : des origines aux grands exemples modernes
Dans les jeux vidéo, l’affordance est primordiale pour que les joueurs puissent comprendre naturellement comment interagir avec l’environnement virtuel. Le principe est simple : les objets ou éléments du jeu suggèrent par leur forme ou leur aspect les actions que le joueur peut effectuer, et ce, sans qu’il soit nécessaire de recourir à des instructions explicites.
Prenons l’exemple des premiers jeux Mario Bros. Un des éléments emblématiques est le bloc mystère : par son aspect distinctif et sa position en hauteur, il attire immédiatement l’attention du joueur et indique qu’il peut interagir avec cet objet en sautant dessus. Le joueur n’a pas besoin de lire un manuel pour comprendre cette interaction — c’est une affordance pure. Le design des objets et des ennemis dans Super Mario repose sur ces principes clairs, où la forme, la texture et la couleur guident instinctivement les actions.
Les premiers pas de l’affordance dans le jeu vidéo, les bases étaient déjà posées. Source Nintendo.
Un exemple moderne d’affordance se trouve dans The Legend of Zelda: Breath of the Wild. Le jeu, basé sur un gameplay systémique*, intègre l’affordance non seulement dans les objets, mais aussi dans les mécaniques de son monde ouvert. Tout est conçu pour encourager l’expérimentation. Par exemple :
- Les objets peuvent prendre feu et si j’enflammais ces buissons qui bloquent mon chemin pour en créer un nouveau ?
- Je vois un bâtiment au loin, mais une montagne me barre la route. Le joueur sait qu’il peut escalader, alors pourquoi ne pas essayer de grimper cette montagne ?
- De la même manière, les environnements secs et inflammables indiquent intuitivement que le feu peut être utilisé pour provoquer des réactions en chaîne, comme brûler des herbes ou déclencher des explosions.
Enfin, prenons l’exemple marquant des arbres que le joueur peut couper pour en faire des ponts. Il n’est pas rare de croiser des arbres avec une hache plantée dessus, comme si un bûcheron l’avait laissée là avant de faire une pause.
Le problème posé est le suivant : Le joueur aperçoit une zone de jeu face à lui mais séparé par un ravin profond. Comment y parvenir et surtout comment lui faire comprendre qu’il peut passer ?
Ici, le concept d’affordance moderne prend tout son sens. Ce qui fait que le joueur comprend qu’il peut couper un arbre, c’est l’association logique avec des mécanismes familiers de la vie réelle. Il pourrait y parvenir de plusieurs manière tant le gameplay est riche mais concentrons nous sur les arbres et la chaine logique d’actions :
- 1- Le game design propose un obstacle à franchir ici le ravin et la narration environnementale place subtilement une hache.
- 2- La hache est un outil clairement identifié pour couper du bois
- 3- Dans le monde réél un arbre est coupé à la hache.
- 4- Dans le monde du jeu, la hache peut être utilisée comme arme mais également pour casser des objets.
- Dans ce cas pourquoi ne pas essayer de taper sur l’arbre pour le couper et le faire tomber pour créer un passage au dessus du ravin ?
Cette interaction découle de la manière dont le monde du jeu réagit de manière réaliste aux actions du joueur, renforçant ainsi l’immersion. L’affordance symbolisée par hache et le concept de couper un arbre pour le faire tomber permettent au joueur de découvrir des solutions créatives, en appliquant leur compréhension du monde réel dans un cadre virtuel.
Le gameplay systémique et l’affordance en action.
Si l’affordance permet aux joueurs d’interagir intuitivement avec des environnements complexes dans les jeux vidéo, ce même principe trouve une application tout aussi essentielle dans d’autres domaines, notamment l’UI/UX des plateformes d’e-learning et serious game. En effet, la capacité d’un utilisateur à comprendre naturellement comment interagir avec une interface est cruciale pour garantir une expérience d’apprentissage fluide et efficace.
L’importance de l’affordance dans l’UI/UX des e-learning
Bien que l’affordance soit souvent associée aux jeux vidéo, elle est tout aussi cruciale dans la conception des interfaces d’apprentissage numérique (UI/UX). L’objectif est d’assurer que l’utilisateur puisse naviguer et interagir avec un module e-learning de manière intuitive, sans nécessiter de longues explications. Cela permet à l’apprenant de se concentrer pleinement sur le contenu, sans être distrait par la complexité des mécanismes d’interaction.
Prenons l’exemple de l’accessibilité, un domaine où l’affordance améliore sensiblement l’expérience utilisateur. Des boutons clairement identifiables visuellement permettent aux apprenants de comprendre immédiatement leur fonction. Par exemple, un bouton de lecture sonore peut utiliser une icône de haut-parleur, plus parlante pour sonoriser des interfaces destinées aux apprenants malvoyants. Ce type de bouton, reconnaissable par sa forme et renforcé par un retour sonore à chaque activation, permet de rendre l’interaction accessible à tous.
De plus, l’usage des couleurs est un outil puissant pour guider l’utilisateur à travers les différentes actions possibles. Un code couleur bien conçu peut, par exemple, indiquer visuellement les options disponibles : le vert pour les actions activables, le rouge pour des erreurs ou alertes, et le gris pour des fonctionnalités inactives. Cela permet de limiter les erreurs et d’orienter l’utilisateur efficacement dans son parcours. En complément, des animations subtiles, comme un bouton qui change légèrement de forme, de couleur ou qui vibre lorsqu’il est survolé, renforcent l’affordance en signalant qu’il est interactif.
Enfin, pour les apprenants ayant des troubles cognitifs ou des difficultés d’apprentissage, l’affordance joue un rôle clé en réduisant la charge cognitive. Par exemple, utiliser des pictogrammes et icônes simples et universels, comme une flèche pour indiquer la progression ou un panier pour ajouter un élément, aide à rendre l’interface plus compréhensible. Ces éléments visuels suggèrent instantanément les actions possibles, sans nécessiter de réflexion supplémentaire ou d’explications écrites.
En combinant affordance et accessibilité, les concepteurs d’e-learning peuvent non seulement améliorer l’expérience utilisateur globale, mais aussi rendre leurs modules inclusifs pour tous les types d’apprenants, y compris ceux avec des besoins spécifiques. Cela permet de créer des environnements d’apprentissage qui encouragent la fluidité, réduisent la frustration et facilitent la concentration sur l’essentiel : le contenu pédagogique.
Exemple d’affordance dans un module e-learning : le drag-and-drop
Les drag and drop dans le e-learning un sujet sensible
Un bon exemple de ce principe dans un contexte e-learning est l’utilisation du drag-and-drop. Dans un scénario où un apprenant doit organiser des informations, les éléments visuels et leur disposition doivent naturellement indiquer qu’ils peuvent être déplacés. Des zones de dépôt claires et des objets bien définis permettent à l’utilisateur de comprendre sans effort que les éléments peuvent être glissés et placés à certains endroits.
Toutefois, il est important que ces interactions aient du sens. Prenons l’exemple d’un module sur la comptabilité. Un exercice pourrait demander à l’apprenant de glisser-déposer des types de comptes dans des catégories fiscales. Sur le papier, cela semble être une bonne idée pour rendre l’exercice interactif. Mais dans les faits, les comptables utilisent déjà des logiciels spécialisés ou des tableurs pour effectuer ces tâches. Créer une interaction drag-and-drop ici ne reflète pas la réalité de leur travail quotidien et devient une barrière inutile à leur apprentissage.
Dans ce cas, il serait beaucoup plus efficace de simuler les outils réels utilisés par les comptables, comme un logiciel de comptabilité ou un tableur Excel, pour que l’apprentissage soit directement applicable et non un simple exercice abstrait.
À l’opposé, imaginons un module de formation destiné aux employés d’un restaurant rapide, leur apprenant à assembler des commandes. Ici, un drag-and-drop serait extrêmement pertinent. L’apprenant pourrait glisser-déposer des ingrédients pour assembler un burger dans l’ordre approprié, suivant une séquence proche de la réalité. Cet exercice prépare l’utilisateur à ce qu’il devra faire sur le terrain et le familiarise avec les étapes avant même d’entrer en cuisine la forme suit la fonction CQFD.
Un exemple de drag and drop pertinent en e-learning. Source Adulting made Easy.
L’affordance comme pont entre le jeu vidéo et le e-learningL’affordance comme pont entre le jeu vidéo et le e-learning
Que ce soit dans le domaine des jeux vidéo ou du e-learning, l’affordance joue un rôle crucial dans la création d’interactions intuitives. En concevant des objets et des environnements qui suggèrent naturellement leur usage, les designers permettent aux utilisateurs d’apprendre, de jouer et de naviguer de manière fluide et sans frustration. Pour le e-learning, intégrer ces principes d’affordance dans l’UI/UX signifie offrir une expérience utilisateur fluide, efficace, agréable et tournée vers l’accessibilité, où la technologie disparaît au profit de l’apprentissage.
Chez Mediaskills , nous croyons que l’affordance, inspirée par l’univers du jeu vidéo, est essentielle pour concevoir des contenus e-learning accessibles et engageants. Ces principes offrent des solutions innovantes pour l’apprentissage des adultes. En alliant interaction intuitive et accessibilité, nous permettons à tous les apprenants de naviguer facilement dans des environnements d’apprentissage complexes.
En intégrant ces stratégies avec des méthodes pédagogiques modernes, nous visons à créer des expériences d’apprentissage fluides et inclusives pour tous.
*Le gameplay systémique est un type de design de jeu où les éléments et mécaniques interagissent de manière cohérente et dynamique, permettant aux joueurs d’expérimenter librement et de découvrir des solutions émergentes. En lien avec l’affordance, il exploite la compréhension intuitive des objets et des actions, incitant les joueurs à interagir de façon naturelle avec leur environnement. Cela crée un système fluide où les joueurs comprennent instinctivement comment manipuler les éléments du jeu, renforçant ainsi l’immersion et l’engagement.
