Territoire 4 - Interfaces expérimentales/ludiques
Vue d’ensemble
Section titled “Vue d’ensemble”Focus : Interaction pure, réinvention des gestes
Question centrale : Comment le geste devient l’expérience ?
Le web comme terrain de jeu interactif. Vous créez des expériences où l’interaction est au centre, parfois déroutante, toujours surprenante. Le geste n’est pas un moyen d’accéder au contenu, le geste EST le contenu.
Concepts clés
Section titled “Concepts clés”L’interaction comme narration
Section titled “L’interaction comme narration”Le geste raconte une histoire. Cliquer, glisser, secouer… chaque action crée du sens.
La subversion des conventions
Section titled “La subversion des conventions”Jouer avec les attentes de l’utilisateur. Un bouton qui ne se laisse pas cliquer, une interface qui réagit de manière inattendue.
La découverte par l’action
Section titled “La découverte par l’action”Pas d’instructions. L’utilisateur explore, teste, découvre par lui-même.
Exemples d’expériences
Section titled “Exemples d’expériences”Variations sur un bouton
Section titled “Variations sur un bouton”Concept : 100 façons différentes d’interagir avec un seul bouton.
Inspirations : Shake That Button
Technologies : Événements variés, animations créatives
Instrument numérique
Section titled “Instrument numérique”Concept : Interface qui génère du son/des visuels en temps réel selon les interactions.
Inspirations : Patatap, Incredibox
Technologies : Audio Web API, canvas, particules
Interface narrative ludique
Section titled “Interface narrative ludique”Concept : Expérience où naviguer dans l’interface raconte une histoire.
Inspirations : neal.fun, Line Wobbler
Technologies : Interactions inhabituelles, feedback visuel
Jeu de contrôles absurdes
Section titled “Jeu de contrôles absurdes”Concept : Interface avec des gestes délibérément complexes ou déroutants.
Inspirations : QWOP, Getting Over It
Technologies : Physique simple, inputs inhabituels
Inspirations
Section titled “Inspirations”Sites/projets :
- neal.fun (collection d’expériences)
- Patatap (instrument visuel)
- Shake That Button
- Pointer Pointer
- The Useless Web
Artistes/studios :
- Rafael Rozendaal (art web)
- Studio Moniker (interfaces expérimentales)
- Everest Pipkin (jeux étranges)
Questions à se poser
Section titled “Questions à se poser”Sur le geste :
- Quel geste inhabituel explorer ?
- Le geste est-il évident ou mystérieux ?
- Comment créer de la surprise ?
Sur l’expérience :
- L’interaction EST-elle l’histoire ?
- Y a-t-il une fin ou c’est infini ?
- Le feedback est-il immédiat ou différé ?
Sur l’émotion :
- Quelle sensation : joie, frustration, émerveillement ?
- Comment le geste crée l’émotion ?
Faisabilité technique
Section titled “Faisabilité technique”Technologies accessibles
Section titled “Technologies accessibles”- ✅ Événements de souris/clavier variés
- ✅ Animations et transitions
- ✅ Canvas 2D pour dessins
- ✅ Audio simple
- ✅ Détection de gestes basiques
Technologies moyennes
Section titled “Technologies moyennes”- ⚠️ Web Audio API avancé
- ⚠️ Physique 2D simple
- ⚠️ Particules complexes
- ⚠️ Génération visuelle procédurale
Technologies avancées (hors scope)
Section titled “Technologies avancées (hors scope)”- ❌ WebGL/Three.js complexe
- ❌ Reconnaissance de gestes avancée
Idées de projets
Section titled “Idées de projets”-
L’interface impossible
Interface qui réagit de manière absurde aux tentatives d’interaction -
Instrument visuel
Chaque geste crée des formes et des couleurs différentes -
Le bouton qui ne veut pas
Variations ludiques sur un bouton récalcitrant -
Curseur vivant
Le curseur a une personnalité et réagit aux mouvements -
Paysage sonore interactif
Explorer l’écran génère un environnement audio unique
Prochaines étapes
Section titled “Prochaines étapes”Si ce territoire vous intéresse :
- Identifiez un geste qui vous fascine (cliquer, glisser, secouer…)
- Imaginez 5 variations sur ce geste
- Prototypez rapidement : testez l’interaction avant de polir
- Itérez sur le feedback : comment rendre le geste satisfaisant ?