Interfaces expérimentales et ludiques
Vue d’ensemble
Section titled “Vue d’ensemble”Cette catégorie explore des expériences web qui réinventent les interactions, détournent les conventions d’interface et transforment le geste en expérience en soi.
Question centrale : Comment le geste devient l’expérience ?
Concepts clés : Interactions inhabituelles, détournement d’UI, expériences surprenantes, microinteractions ludiques
Expériences ludiques et provocantes
Section titled “Expériences ludiques et provocantes”Do Not Draw a Penis
Section titled “Do Not Draw a Penis”
Type : Expérience collaborative provocante
Créateurs : Studio Moniker
Année : 2016
💡 Ce qui fonctionne : Les visiteurs peuvent dessiner librement sur un canvas partagé, mais l’IA analyse les dessins en temps réel et supprime automatiquement tout ce qui ressemble à un pénis. Naturellement, tout le monde essaie d’en dessiner un.
🎯 Pourquoi c’est inspirant : Démontre brillamment comment une contrainte crée l’engagement. La censure algorithmique devient un jeu. Interroge la modération automatique avec humour.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (interaction sociale)
🔗 Statut : Fonctionnel
Click Click Click
Section titled “Click Click Click”
Type : Expérience de surveillance ludique
Créateurs : Studio Moniker
Année : 2017
💡 Ce qui fonctionne : Chaque clic est analysé, commenté et jugé en temps réel par une voix narrative omnisciente. “Vous hésitez”, “Ce clic était nerveux”, “Vous essayez de tromper le système”. Transforme la navigation web banale en performance surveillée.
🎯 Pourquoi c’est inspirant : Révèle par l’absurde la quantité d’informations que nos interactions révèlent sur nous. La surveillance devient tangible et inconfortable.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (narration interactive)
🔗 Statut : Fonctionnel
Patatap
Section titled “Patatap”
Type : Instrument visuel et sonore
Créateurs : Jono Brandel, Lullatone
Année : 2014
💡 Ce qui fonctionne : Chaque touche du clavier déclenche un son et une animation visuelle synchronisés. Simple mais infiniment rejouable. Le clavier devient un instrument musical et visuel.
🎯 Pourquoi c’est inspirant : Transforme un périphérique utilitaire (clavier) en outil de création artistique. Démontre la puissance de la synchronisation audio-visuelle.
📚 Pertinent pour : RTMF1M (Territoires 4 + 5), MM3B (création audiovisuelle)
🔗 Statut : Fonctionnel
Shake That Button
Section titled “Shake That Button”
Type : Série de micro-jeux sur un bouton
Créateurs : Various creators
Année : 2015-2016
💡 Ce qui fonctionne : 100 façons différentes et créatives d’interagir avec un simple bouton. Secouer, double-cliquer, rester appuyé, tracer un cercle autour, etc. Célèbre la microinteraction.
🎯 Pourquoi c’est inspirant : Prouve qu’on peut créer une expérience riche et variée avec l’élément d’interface le plus basique. L’interaction devient le jeu.
📚 Pertinent pour : RTMF1M (Territoire 4)
🔗 Statut : [Indisponible - site hors ligne]
Type : Jeu avec contrôles volontairement difficiles
Créateurs : Bennett Foddy
Année : 2008
💡 Ce qui fonctionne : Course à pied où chaque touche contrôle une cuisse ou un mollet indépendamment. Résultat : chaos hilarant et difficulté extrême pour faire 100 mètres. L’interface devient l’obstacle.
🎯 Pourquoi c’est inspirant : Subvertit les conventions de contrôle pour créer du challenge et de l’humour. Démontre que la difficulté d’interface peut être un choix narratif.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (game design)
🔗 Statut : Fonctionnel
Neal.fun - Collection d’expériences
Section titled “Neal.fun - Collection d’expériences”
Type : Collection d’expériences web ludiques
Créateurs : Neal Agarwal
Année : 2019-présent
💡 Ce qui fonctionne : Site regroupant des dizaines d’expériences interactives courtes et engageantes : “The Deep Sea” (explorer les profondeurs marines au scroll), “Spend Bill Gates’ Money” (simulateur de dépenses), “Internet Artifacts” (musée de l’internet), etc.
🎯 Pourquoi c’est inspirant : Chaque expérience prend un concept simple et l’explore de façon ludique et pédagogique. Maître du scrolling narratif et de l’échelle visuelle.
📚 Pertinent pour : RTMF1M (Territoires 3 + 4), MM3B (narration interactive)
🔗 Statut : Fonctionnel
Exemples notables :
- The Deep Sea : Scroll infini vers le fond de l’océan avec créatures à échelle réelle
- Size of Space : Comprendre l’échelle de l’univers par le scroll
- Progress : Visualisation de l’année qui passe
- The Auction Game : Enchères simulées interactives
Expériences artistiques web
Section titled “Expériences artistiques web”The Johnny Cash Project
Section titled “The Johnny Cash Project”
Type : Clip vidéo collaboratif dessiné
Créateurs : Chris Milk, Aaron Koblin
Année : 2010
💡 Ce qui fonctionne : Des milliers de contributeurs dessinent individuellement des frames du clip “Ain’t No Grave”. HTML5 Canvas permet de contribuer, le résultat est un clip entièrement dessiné de façon collaborative.
🎯 Pourquoi c’est inspirant : Pionnier de la création collaborative massive via web. Chaque frame est unique, créée par un contributeur différent.
📚 Pertinent pour : RTMF1M (Territoires 4 + 5), MM3B (création collaborative)
🔗 Statut : Archive vidéo disponible
The Wilderness Downtown
Section titled “The Wilderness Downtown”
Type : Clip interactif multi-fenêtres
Créateurs : Chris Milk, Google Creative Lab (pour Arcade Fire)
Année : 2010
💡 Ce qui fonctionne : Clip pour “We Used to Wait” d’Arcade Fire qui utilise Google Maps de votre quartier d’enfance, ouvre plusieurs fenêtres de navigateur synchronisées, animations HTML5 Canvas. Expérience personnalisée et immersive.
🎯 Pourquoi c’est inspirant : Pionnier de l’usage créatif de l’API Google Maps et des fenêtres multiples synchronisées. Transforme le clip musical en expérience nostalgique personnelle.
📚 Pertinent pour : RTMF1M (Territoires 1 + 4), MM3B (narration personnalisée)
🔗 Statut : Partiellement fonctionnel
Just a Reflektor
Section titled “Just a Reflektor”
Type : Clip interactif mobile/desktop
Créateurs : Arcade Fire, Google Creative Lab
Année : 2013
💡 Ce qui fonctionne : Clip interactif utilisant le smartphone comme télécommande pour contrôler l’expérience desktop. Utilise gyroscope et multitouch pour créer des effets visuels synchronisés.
🎯 Pourquoi c’est inspirant : Pionnier de l’utilisation du smartphone comme contrôleur pour une expérience desktop. Multi-device avant que ce soit courant.
📚 Pertinent pour : RTMF1M (Territoire 4)
🔗 Statut : Fonctionnel
Like a Rolling Stone - Bob Dylan
Section titled “Like a Rolling Stone - Bob Dylan”
Type : Clip interactif multi-écrans
Créateurs : Interlude
Année : 2013
💡 Ce qui fonctionne : Clip vidéo qui simule le zapping TV. Chaque “chaîne” diffuse une version différente du même clip (télé-achat, journal, téléréalité, etc.) avec les lèvres synchronisées sur les paroles.
🎯 Pourquoi c’est inspirant : Transforme le zapping en outil narratif créatif. Chaque version est parfaitement synchronisée, créant une expérience cohérente malgré la diversité.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (narration multi-perspective)
🔗 Statut : [Indisponible - retiré]
Expériences narratives à interfaces gestuelles
Section titled “Expériences narratives à interfaces gestuelles”The And
Section titled “The And”
Type : Fiction interactive avec choix de personnage
Créateurs : The And
Année : 2015
💡 Ce qui fonctionne : Expérience narrative où vous choisissez visuellement votre personnage en début d’histoire. L’interface galerie transforme le choix narratif en moment visuel fort. Chaque personnage mène à une version différente de l’histoire.
🎯 Pourquoi c’est inspirant : Le choix de personnage devient un moment esthétique et narratif significatif. Démontre qu’une galerie visuelle peut être une interface narrative puissante.
📚 Pertinent pour : RTMF1M (Territoires 3 + 4), MM3B (narration à embranchements)
🔗 Statut : [Statut inconnu]
Swap Tales
Section titled “Swap Tales”
Type : Fiction interactive avec manipulation physique
Créateurs : Luma Arcade
Année : 2016
💡 Ce qui fonctionne : Jeu narratif mobile où vous manipulez physiquement les éléments de l’histoire en les déplaçant sur l’écran tactile. Swap des objets, personnages et décors pour résoudre des énigmes et avancer dans le récit. L’interface devient manipulation littérale de la narration.
🎯 Pourquoi c’est inspirant : Transforme le tactile en outil de réorganisation narrative. Le geste de swipe/drag devient le mécanisme narratif principal. Interface comme métaphore du contrôle de l’histoire.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (narration interactive)
🔗 Statut : Disponible sur iOS/Android
Jeu d’influences
Section titled “Jeu d’influences”
Type : Fiction interactive de manipulation sociale
Créateurs : Arte
Année : 2013
💡 Ce qui fonctionne : Jeu narratif sur le lobbying politique. Vous incarnez un lobbyiste et devez influencer des décideurs via différentes interactions. Interface de type point-and-click avec gestion de ressources (temps, argent, relations). Choix rationnels qui ont des conséquences narratives importantes.
🎯 Pourquoi c’est inspirant : Combine mécaniques de jeu (gestion de ressources) et narration interactive. L’interface matérialise les mécanismes d’influence politique. Démontre qu’on peut gamifier des sujets sérieux.
📚 Pertinent pour : RTMF1M (Territoires 3 + 4), MM3B (narration ludique)
Lien vers : Structures narratives - Embranchements
🔗 Statut : [Indisponible - domaine Arte archivé]
Five Minutes
Section titled “Five Minutes”
Type : Expérience narrative gestuelle mobile
Créateurs : Storycentric
Année : 2014
💡 Ce qui fonctionne : Fiction interactive courte optimisée mobile qui utilise des gestes inhabituels (secouer, incliner, toucher de façons spécifiques) pour raconter une histoire. L’interaction gestuelle est intégrée à la narration, pas juste décorative.
🎯 Pourquoi c’est inspirant : Explore comment les gestes mobiles peuvent devenir langage narratif. Chaque geste a un sens dans l’histoire plutôt que d’être un simple bouton déguisé.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (narration gestuelle)
🔗 Statut : [Indisponible - retiré des stores]
Sortie en Mer
Section titled “Sortie en Mer”
Type : Expérience immersive documentaire
Créateurs : Le Blog documentaire
Année : 2015
💡 Ce qui fonctionne : Documentaire immersif sur le sauvetage en mer utilisant des interactions gestuelles pour renforcer l’immersion. Le spectateur doit parfois interagir physiquement (secouer, incliner) pour simuler les actions des sauveteurs.
🎯 Pourquoi c’est inspirant : Utilise l’interaction gestuelle pour créer de l’empathie. Le geste physique renforce la compréhension émotionnelle du documentaire.
📚 Pertinent pour : RTMF1M (Territoires 3 + 4), MM3B (documentaire immersif)
🔗 Statut : [Indisponible]
Générateurs et outils détournés
Section titled “Générateurs et outils détournés”Camera Restricta
Section titled “Camera Restricta”
Type : Concept de caméra anti-cliché
Créateurs : Philipp Schmitt
Année : 2015
💡 Ce qui fonctionne : Concept (pas implémentation web complète) d’une caméra qui refuse de prendre une photo si le lieu a déjà été trop photographié (analyse géolocalisation + base de données d’images). Critique de l’over-tourisme photographique.
🎯 Pourquoi c’est inspirant : Utilise la technologie pour questionner nos comportements. L’outil devient critique social.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (design critique)
🔗 Statut : Documentation disponible
Popup Trombone
Section titled “Popup Trombone”
Type : Instrument de musique via popups
Créateurs : Matthew Rayfield
Année : 2015
💡 Ce qui fonctionne : Transforme les popups de navigateur (habituellement détestés) en instrument de musique. En redimensionnant et bougeant les fenêtres popup, vous jouez de la musique. Détournement brillant d’un élément d’interface malaimé.
🎯 Pourquoi c’est inspirant : Démontre qu’on peut transformer n’importe quel aspect du navigateur en outil créatif. Les contraintes deviennent des instruments.
📚 Pertinent pour : RTMF1M (Territoire 4), MM3B (détournement créatif)
🔗 Statut : Fonctionnel
Rafael Lozano-Hemmer - Projects
Section titled “Rafael Lozano-Hemmer - Projects”
Type : Installations interactives monumentales
Créateurs : Rafael Lozano-Hemmer
Année : 1990s-présent
💡 Ce qui fonctionne : Artiste majeur d’installations interactives à grande échelle. Projections architecturales, capteurs biométriques, interactions collectives. Œuvres qui transforment l’espace public en expérience participative.
🎯 Pourquoi c’est inspirant : Référence mondiale des installations interactives. Démontre comment l’échelle monumentale et la technologie peuvent créer des expériences collectives poétiques. Portfolio complet à explorer.
📚 Pertinent pour : RTMF1M (Territoires 1 + 4), MM3B (installations)
🔗 Statut : Fonctionnel
Œuvres notables :
- Pulse Room : Ampoules qui pulsent au rythme cardiaque des visiteurs
- Under Scan : Projections qui suivent les passants
- 33 Questions per Minute : Installation de questions projetées
Ressources complémentaires
Section titled “Ressources complémentaires”Concepts clés
Section titled “Concepts clés”- Microinteraction : Petits moments d’interaction soignés
- Friction intentionnelle : Rendre l’interface difficile volontairement (QWOP)
- Détournement d’usage : Transformer un outil utilitaire en expérience créative
- Feedback ludique : Réponses visuelles/sonores exagérées ou surprenantes
- Multi-device : Expériences synchronisées entre appareils
Collections à explorer
Section titled “Collections à explorer”- Experiments with Google - Expériences créatives avec technologies Google
- Codrops - Tutoriels et démos d’interactions innovantes
- Awwwards - Sites primés pour leur créativité
Cours associés
Section titled “Cours associés”- RTMF1M : Ces œuvres correspondent au Territoire 4 : Interfaces expérimentales
- MM3B : Exemples d’interactions narratives et surprenantes