Le design d’interaction (Interaction Design, IxD) est la discipline qui consiste à concevoir les comportements d’un système numérique en réponse aux actions de l’utilisateur, afin de rendre l’expérience claire, efficace, prévisible, inclusive et respectueuse.
Contrairement au simple « UI design » (qui se concentre sur l’apparence), le design d’interaction interroge :
- Quel feedback fournit le système lorsqu’on clique, tape, scroll ?
- Comment guider sans manipuler ?
- Quelles erreurs sont évitées ou réparables ?
- Quelle charge cognitive est imposée ?
- Qui est inclus ou exclu par ce flux ?
Outils et technologies pour le design d’interaction
1. Conception et modélisation (avant le code)
| Outil | Usage | Pertinence |
|---|---|---|
| Excalidraw | Schématiser des parcours utilisateurs, wireflows, états d’interface | Open source, export SVG/JSON, auto-hébergeable, idéal pour pédagogie |
| Penpot | Maquettes interactives légères, flowcharts | Alternative libre à Figma, basée sur les standards web |
| Mermaid.js | Diagrammes de flux directement dans Markdown/Git | Versionnable, intégré à Obsidian, GitHub, documentation technique |
| Pencil Project | Wireframes desktop hors ligne | Aucune dépendance cloud, léger, open source |
2. Prototypage fonctionnel (sans surcharge)
| Techno | Cas d’usage | Avantage |
|---|---|---|
| HTML + CSS + Vanilla JS | Prototype cliquable réel | Directement testable avec lecteur d’écran, pas de “faux” comportement |
| Astro + Islands | Interactivité ciblée dans site statique | Pas d’hydratation globale, performance + accessibilité |
| Alpine.js | Comportements dynamiques simples (menus, onglets) | 7 Ko, pas de build complexe, proche de jQuery mais moderne |
| Web Components | Composants réutilisables, standards W3C | Interopérables, pérennes, sans framework |
Principe : « Si tu ne peux pas prototyper l’interaction en HTML/CSS pur, elle est probablement trop complexe. »
3. Technologies d’interaction inclusive
| Techno | Fonction | Bonne pratique |
|---|---|---|
:focus-visible | Afficher le focus uniquement quand nécessaire | → Respecte prefers-reduced-motion et navigation clavier |
| ARIA Live Regions | Annoncer dynamiquement du contenu (ex. : résultats de recherche) | → À utiliser avec parcimonie, tester avec NVDA |
prefers-reduced-motion | Désactiver animations non essentielles | → Obligatoire pour l’accessibilité cognitive |
inert polyfill | Désactiver l’arrière-plan lors d’un modal | → Améliore la navigation clavier et lecteur d’écran |
4. Tests et validation d’interaction
| Méthode | Outil | Objectif |
|---|---|---|
| Test clavier | Clavier physique | Vérifier tabulation, focus, activation |
| Lecteur d’écran | NVDA (Windows), VoiceOver (macOS), Orca (Linux) | Tester l’ordre logique, les annonces |
| Carte d’expérience | Papier ou Excalidraw | Cartographier frustrations, moments de doute |
| A/B testing éthique | Plausible Events + consentement | Comparer deux flux sans tracking invasif |
Éviter les outils de heatmaps ou session replay (Hotjar, etc.) : ils violent la vie privée et biaisent l’analyse.
5. Principes fondamentaux (plus importants que les outils)
Un bon design d’interaction repose sur :
- Feedback immédiat : l’utilisateur·rice sait toujours ce qui se passe (chargement, succès, erreur).
- Prévisibilité : les actions ont des conséquences cohérentes.
- Annulation facile : « undo » plutôt que « confirmation intrusive ».
- Charge cognitive minimale : pas de choix superflus, pas de jargon.
- Résilience : fonctionne même en cas d’erreur réseau, de bas débit, ou de JS désactivé.
6. À éviter absolument (anti-patterns)
- Chatbots obligatoires avant d’accéder à l’info
- Carrousels automatiques (nuisent à l’accessibilité et à la lecture)
- Micro-interactions décoratives (hover complexes, animations inutiles)
- Formulaires sans sauvegarde locale (
localStorage) - Boutons sans état « disabled » pendant le chargement