Séance 2 - Storyboarder l'interactivité

Durée : 4h
Format : Atelier pratique
Livrable : Storyboard d’une œuvre existante

Objectifs

À la fin de cette séance, vous saurez :

Représenter visuellement une interaction narrative
Utiliser les symboles d’interaction de façon pertinente
Identifier et représenter les embranchements narratifs
Créer un storyboard compréhensible par un tiers

Déroulé de la séance

1. Vocabulaire visuel (30 min)

Question : Comment représenter une interaction sans écrire de code ?

Les symboles de base

Révision des symboles disponibles :

Symbole	Interaction	Quand l’utiliser
	Clic	Action ponctuelle sur un élément
	Survol	Passage de la souris, sans clic
	Scroll	Défilement de page
	Drag	Déplacement d’un objet
	Clavier	Saisie de texte ou touches
	Temps	Événement temporel (délai, durée)

Les flèches de causalité

Principe : Toujours montrer QUOI provoque QUOI

[État initial] --[ACTION]--> [Résultat]

Exemples :

[Personnage neutre] --[SURVOL]--> [Personnage sourit]
[Page 1] --[CLIC bouton]--> [Page 2]
[Silence] --[ATTENDRE 5s]--> [Musique démarre]

Les embranchements

Structure SI/ALORS :

        ┌─────────────┐
        │ Situation   │
        └──────┬──────┘
               │
       ┌───────┴────────┐
       │                │
    [Choix A]        [Choix B]
       │                │
       ▼                ▼
   [Résultat A]    [Résultat B]

2. Analyse collective d’une œuvre (45 min)

Œuvre choisie : Do Not Touch

Exercice collectif au tableau :

Identifier les états (10 min)
- État initial : qu’est-ce qu’on voit ?
- États intermédiaires : quelles variations ?
- États finaux possibles
Identifier les interactions (10 min)
- Quelle(s) interaction(s) l’utilisateur peut faire ?
- Quels sont les déclencheurs ?
Créer le storyboard ensemble (25 min)
- Dessiner les états principaux
- Ajouter les symboles d’interaction
- Tracer les flèches de causalité
- Annoter avec les émotions/intentions

Résultat attendu : Un storyboard complet de “Do Not Touch” créé collectivement.

3. Exercice pratique en binôme (90 min)

Consignes :

Choisir une œuvre (5 min)
- Parmi une liste fournie (œuvres simples du catalogue)
- Ou une des œuvres testées en séance 1
Analyser l’œuvre (20 min)
- Tester/re-tester l’œuvre
- Identifier les états clés
- Repérer les interactions et embranchements
Créer le storyboard (50 min)
- Format papier ou numérique
- Minimum 3 états différents
- Symboles utilisés correctement
- Flèches de causalité claires
Peer review (15 min)
- Échangez votre storyboard avec un autre binôme
- Peuvent-ils comprendre le fonctionnement sans explication ?
- Retours constructifs

Outils disponibles :

Papier + crayons
Tablettes/ordinateurs (Excalidraw, Figma)
Symboles imprimés à découper

4. Restitution collective (30 min)

Format :

4-5 binômes présentent leur storyboard (5 min chacun)
Projection du storyboard
Explication rapide
Questions/retours du groupe

Ce qu’on observe :

Clarté du storyboard
Utilisation pertinente des symboles
Identification correcte des embranchements
Compréhensibilité par le groupe

5. Discussion et théorie (25 min)

Questions à discuter :

Niveau de détail

Jusqu’où aller dans le détail ?
Faut-il dessiner chaque pixel ou juste l’essentiel ?
Comment trouver le bon équilibre ?

Storyboard vs wireframe

Wireframe : structure, placement, fonctionnel
Storyboard interactif : narration, émotion, expérience

Notre focus : Le storyboard raconte l’EXPÉRIENCE, pas juste la mécanique.

Annoter les émotions

Un bon storyboard indique :

Ce que l’utilisateur FAIT (action)
Ce qui SE PASSE (résultat)
Ce que l’utilisateur RESSENT (émotion)

Exemple :

[Image: personnage loin]
ACTION: Souris s'approche
RÉSULTAT: Personnage grandit
ÉMOTION: Intimité, connexion

Livrable à rendre

Storyboard d’une œuvre existante (10% de la note finale)

Consignes :

Choisissez UNE œuvre du catalogue
Créez un storyboard complet d’une séquence interactive
Format : papier scanné OU numérique
Minimum 3-5 états différents
Symboles utilisés correctement
Flèches de causalité (SI… ALORS…)

Ce qui doit apparaître :

État initial clair
Interactions annotées avec symboles
Résultats visuels (sketches des nouveaux états)
Embranchements narratifs si présents
Annotations d’émotion/intention

Critères d’évaluation :

Clarté (compréhensible par quelqu’un d’autre)
Utilisation correcte des symboles
Identification des embranchements
Qualité des annotations

Deadline : Avant la séance 3

Ressources

Templates

Template storyboard interactif

Outils recommandés

Papier + scan : Souvent le plus rapide
Excalidraw - Gratuit, web
Figma - Gratuit pour usage étudiant
Miro - 3 boards gratuits

Œuvres simples pour commencer

Do Not Touch
Patatap
Typedrummer
In Pieces

Conseils pratiques

Pour le dessin

Vous n’êtes pas évalué sur la beauté du dessin.

Utilisez :

Bonshommes bâton
Rectangles pour les écrans
Formes simples
Annotations textuelles

Un storyboard clair avec des carrés vaut mieux qu’un beau dessin confus.

Pour les annotations

Soyez explicite :

❌ “Ça change”
✅ “Le personnage passe de triste à joyeux”

Indiquez les conditions :

❌ “Selon le clic”
✅ “SI clic sur bouton A ALORS page 2 / SI clic sur bouton B ALORS page 3”

Pour les embranchements

Numérotez les étapes si nécessaire :

1. État initial
2a. SI choix A → État A
2b. SI choix B → État B
3. Retour à l'état commun

Questions fréquentes

Mon storyboard doit-il couvrir TOUTE l’œuvre ?

Non. Une séquence significative (3-5 états) suffit. Privilégiez la qualité à l’exhaustivité.

Et si l’œuvre a des dizaines d’embranchements ?

Montrez les principaux. Vous pouvez indiquer “X autres chemins possibles” sans tous les dessiner.

Papier ou numérique ?

Les deux sont acceptés. Le papier est souvent plus rapide. Le numérique est plus facile à partager.

Je ne sais pas dessiner, c’est grave ?

Non. Des formes géométriques et du texte suffisent largement.

Pour aller plus loin (optionnel)

Ces ressources théoriques approfondissent les concepts vus aujourd’hui. Elles ne sont pas au programme de l’évaluation.

Les structures narratives - 6 structures (linéaire, élastique, concentrique, parallèle, embranchements, constellation)
Les types d’interfaces - 8 archétypes (point-and-click, scrollable, timeline, écrans partagés, galeries, environnements 3D, cartes, gestuelles)