IFT2905 - Démo 5
Styles d'Interaction
Plan de la démo
- Vue d'ensemble des styles d'interaction
- Ordonnancement Objet–Verbe
- Manipulation Directe
- Modes & Quasimodes
- Ligne de commande
- Interfaces conversationnelles
- Formulaires & Menus
- Interaction instrumentale
- Interaction gestuelle
- Principes de conception
Vue d'ensemble des Styles d'Interaction
Les styles sont indépendants de la technologie!
Peu importe l'appareil (terminal des années 70, smartphone, ordinateur de bureau) les mêmes styles d'interaction fondamentaux reviennent.
Trois familles:
- Manipulation physique / directe agir directement sur les objets visibles
- Ligne de commande / conversationnelle communiquer par texte ou langage naturel
- Formulaires et menus remplir des champs, sélectionner des options
Chaque interaction se décrit comme un objet (ce qu'on manipule), un verbe (l'action) et optionnellement des paramètres (comment).
Discussion
Pire ou Mieux ?
- Le GUI est-il toujours mieux qu'une ligne de commande ?
- Plus de fonctions = mieux ?
IMPORTANT: Il n'y a pas de « meilleur » style universel.
Tout dépend du contexte, de l'expertise et de la tâche.
Ordonnancement Objet–Verbe
Trois ordres possibles (et leur lien avec les modes)
Classifiez l'interaction
Classification
Pour chaque interaction, identifiez l'objet, le verbe, l'ordonnancement et si ça crée un mode :
| Interaction | Objet | Verbe | Ordre | Mode? |
|---|---|---|---|---|
| Sélectionner du texte, puis Ctrl+B | ||||
| Sélectionner l'outil Pinceau, puis peindre | ||||
| Redimensionner via les poignées | ||||
| Dire « Siri, envoie un message à Marie » | ||||
| Glisser un fichier vers la Corbeille |
| Interaction | Objet | Verbe | Ordre | Mode? |
|---|---|---|---|---|
| Texte → Ctrl+B | Texte sélectionné | Gras | Postfixe | Non |
| Pinceau → canevas | Zone du canevas | Peindre | Préfixe | Oui |
| Poignées de coin | La forme | Redimensionner | Simultané | Non |
| « Siri, envoie... » | Marie / message | Envoyer | Préfixe | Oui |
| Fichier → Corbeille | Le fichier | Supprimer | Postfixe | Non |
Point clé : Préfixe = mode. Postfixe et simultané = sans mode.
Manipulation Directe
La manipulation directe provoque un enthousiasme vif chez les utilisateurs, en contraste frappant avec l'acceptation réticente ou l'hostilité ouverte. - Shneiderman
Définition "formelle"
Pointer-cliquer, glisser-déposer
Objets changent visuellement
Postfixe (objet d'abord)
Les trois principes de Shneiderman
Représentation continue
Les objets d'intérêt restent visibles en permanence à l'écran.
Actions physiques
Actions physiques ou boutons étiquetés plutôt qu'une syntaxe complexe.
Rapide, incrémental, réversible
Opérations dont l'impact est immédiatement visible.
Concepts clés
Objets d'intérêt
Éléments du domaine ou de la tache que l'utilisateur veut manipuler
- Word : caractères, mots, paragraphes
- Photoshop : pixels, formes
IMPORTANT: Menus, boutons, barres d'outils ≠ objets d'intérêt
WYSIWYG
« What You See Is What You Get »
- Objets affichés sous leur forme finale
- Ex: traitement de texte vs. LaTeX
Nécessaire mais pas suffisant (faut aussi la sélection directe)
Actions physiques
Idéalement par geste (glisser, saisir)
| Mode 1 | Sélection + Menu (clic droit) |
| Mode 2 | Sélection + Geste (glisser vers dossier) |
Incrémental, réversible, visible
- Incrémental = corriger en temps réel
- Réversible = Undo/Redo, encourage exploration
- Visible = feedforward + feedback
Niveau d'indirection
objets virtuels
écran tactile
objets réels
Limites de la manipulation directe
Pas facile à découvrir
- swipe-to-delete iOS
- Force Touch
- glisser Finder → Terminal
Sélection difficile
- Nuage de points dense
- Objets superposés
Pas toujours idéal
- Opérations en lot
- Tâches répétitives
- Workflows experts
Google Maps
Ouvrez Google Maps. Pour chaque principe, trouvez un exemple qui respecté et un qui violé :
| Principe | Respecté | Violé |
|---|---|---|
| 1. Représentation continue | ||
| 2. Actions physiques | ||
| 3. Rapide, incrémental, réversible |
Bonus : Quels sont les objets d'intérêt dans Maps ? (La barre de recherche et les boutons ne sont PAS des objets d'intérêt.)
Objets d'intérêt : La carte, les lieux/points, les itinéraires, les marqueurs, le bonhomme Street View.
Respect : P1 : carte toujours visible, marqueurs stables. P2 : pincer pour zoomer, glisser pour naviguer. P3 : zoom continu et incrémental.
Violations : P1 : un panneau d'info couvre la carte. P2 : changer le mode de transport = clic dans un menu. P3 : glisser un point d'itinéraire est incrémental, mais l'annuler n'est pas évident (pas de Ctrl+Z).
Même Tâche, Plusieurs Styles
Comparer les approches
Les diapositives illustrent « déplacer un objet » via différents styles. Parcourons-les ensemble :
Manipulation physique
Prendre l'objet avec ses mains et le déplacer. Indirection nulle, compatibilité maximale.
Ligne de commande
mv -i box1 -to 50,50, Connaître la syntaxe exacte, le nom, les coordonnées. Aucune représentation visuelle pendant l'exécution.
Formulaire
Position : X = 652pt, Y = 273pt → Appliquer. L'objet se déplace d'un coup, pas incrémental.
Manipulation directe (souris)
Cliquer, glisser. Feedback continu, incrémental, réversible.
Manipulation directe (toucher)
Toucher sur tablette, glisser le doigt. Encore plus direct, « Manipulation (encore plus?) Directe »
Conversationnelle
« Déplace le carré rouge en haut à gauche. », Facile pour un novice, mais « un peu plus à gauche... non, moins »
… futurs styles à ajouter (Maintennant c'est à vous)
Gestuelle ? Instrumentale ? Multimodale ?
Discussion
- Quel style est le plus rapide pour un novice ? Pour un expert ?
- Pour 100 objets au lieu d'un seul, quel style gagne ?
Modes & Quasimodes
Qu'est-ce qu'un mode ?
Un état de l'interface qui change la signification des actions de l'utilisateur.
Quasimode ?
Un mode temporaire maintenu par une action continue (ex. maintenir Shift pour les majuscules).
Mode à usage unique ?
Un mode qui s'applique à la prochaine action seulement, puis revient automatiquement (ex. cliquer sur l'outil gomme, efface le prochain trait puis revient au pinceau).
Mode spatiaux ?
Un mode qui s'applique selon la position du curseur (ex. déplacer un objet en cliquant sur un coin).
Mode transient ?
Un mode qui disparaît automatiquement après une action ou un délai (ex. mode de sélection de texte, tooltips).
Problèmes des modes
- Causent des erreurs. Pourquoi? On oublie dans quel mode on est
- On ne sait pas sortir. Expérience frustrante (ex: vim stackoverflow) Mais, permettent la prévisualisation de l'effet de l'action.
Solutions recommandées
- Modes spatiaux, L'interprétation est selon position du curseur
- Quasimodes, maintenir un bouton (ex. Shift pour scale sur Figma)
- Affichez le mode ! Icône du curseur devrait indiquer clairement le mode actif
Gypsy : premier éditeur sans mode
Larry Tesler & Tim Mott, Xerox PARC, 1975
Toujours en mode « insert »
Sélection à la souris, double-clic mot
Invention du copier/coller !
Postfixe : sélectionner d'abord → agir ensuite. Presse-papier visualisé à l'écran.
Est-ce que les éditeurs modernes ont adopté le modèle de Gypsy ?
Chasse aux modes
Trouvez et classifiez les modes
Nous allons ouver une application et puis documenter chaque mode trouvé :
| Application | Mode trouvé | Comment savoir ? | Comment sortir ? | Type |
|---|---|---|---|---|
Dessiner sans modes
« Les outils de dessin utilisent des modes. Comment dessiner un rectangle ou un cercle sans mode (postfixe) ? »
Esquissez une interface de dessin sans jamais sélectionner un outil d'abord.
- Reconnaissance de gestes : dessiner à main levée, le système reconnaît la forme
- Instruments bimanuels : Toolglass (Bier et al., 1993) : main gauche positionne un pochoir, main droite dessine à travers
- Matière première : tout commence comme un point; tirer crée une ligne, tirer en rectangle crée un rectangle
Ligne de Commande
Interaction par le texte, syntaxe précise
Définition
Texte
Texte
Par nom
Préfixe
Tente de se rapprocher du langage naturel, mais nécessite une syntaxe précise.
grep -ri "todo" . | sort | uniq | wc -l
Chercher → trier → dédupliquer → compter
Interfaces Conversationnelles
Limites du langage naturel
Définition
Similaire à la CLI mais en langage naturel.
Langage naturel
Langage naturel
Moins stricte
Préfixe ET postfixe
Ex : ChatGPT, Amazon Echo
ELIZA
Premier chatbot. Règles de correspondance de motifs pour simuler un psychothérapeute rogérien (très peu de compréhension réelle nécessaire)
L'Effet ELIZA
Tendance à projeter compréhension et empathie sur des programmes rudimentaires.
Modèles conceptuels
Explication simplifiée de comment quelque chose fonctionne.
- Mauvais : Google Drive (métaphore de dossiers trompeuse)
- Bon : Explorateur Windows (hiérarchie correcte)
Limites du langage naturel
- Forme organique, case dans une grille : facile à pointer, difficile à décrire
- « Un peu plus à gauche... non, moins. Ah. Un peu plus haut... »
Formulaires & Menus
Widgets, arbre de décision, contraintes
Définition
Texte + sélection
Texte + formulaires
Entrer des données
Anatomie d'un formulaire
Saisie
Champs texte
Sélection
Choix prédéfinis
Déclenchement
Bouton d'action
VIA Rail : saisie (origine/destination), sélection (passagers, date), déclenchement (Rechercher)
Comment choisir le bon widget ?
OUI (ensemble défini)
NON (entrée libre)
Arbre de décision illustré avec les composants d'Ant Design (ant.design)
Spectre de la saisie de date
De libre (plus d'erreurs) → contraint (moins d'erreurs) : champ texte libre → champ formaté → champs séparés → dropdowns/spinners → widget calendrier.
Contraintes
Indices limitant les actions possibles. Forcées ou interprétées. Comme des pièces de puzzle.
4 types de contraintes. (Ex: Numéro de téléphone)
| Type | Description | Exemple |
|---|---|---|
| Physique | Le champ limite physiquement la saisie | Nombre limité de caractères |
| Logique | Validation du format | +1 (514) 343 6111 (0 caractères restants) |
| Sémantique | Validation du sens | Vérifier que c'est un numéro canadien, pas un faux |
| Culturelle | Hypothèse culturelle | (514) 343 6111 sans code pays (convention nord-américaine) |
Exemples de mauvais formulaires
Pourquoi ces choix sont-ils mauvais ?
Plus d'exemples
Interaction Instrumentale
Motivation
Comment peindre avec la manipulation directe ?
Pour un travail professionnel, on a besoin d'instruments (pinceaux, couteaux).
Agir sur les objets
Agir à travers des outils
Deux éléments fondamentaux
Ce que l'utilisateur manipule (texte, formes, cellules)
Transducteurs bidirectionnels
Action → Instrument → Commande → Objet → Réponse → Réaction
Catégories d'instruments
Dans la main (Hand)
Préfixe. Change le curseur. Risque de mode. Ex : palette Photoshop. Pour : une commande → plusieurs objets.
Distant
Postfixe. Séparé de l'objet (panneaux, dialogues). Pas de mode. Ex : barre formatage Word. Pour : plusieurs commandes → un objet.
Attaché
Postfixe/Simultané. Sur l'objet. Pas de mode. Ex : poignées, fermeture éclair, onglet de canette.
Bimanuel
Simultané. Deux mains. Ex : Toolglass (Bier et al., 1993) la main gauche positionne le filtre, main droite clique à travers.
Trois propriétés de comparaison
Distance spatiale + temporelle entre action et effet
Poignées = faible
Boîte dialogue = forte
DoF utilisés / DoF fournis
Souris (2 DoF) + scrollbar (1 DoF) = 50%
Similarité action physique / réponse
Glisser = redimensionner = haute
Comparaison des instruments (Beaudouin-Lafon, CHI 2000)
Comment Comparer?
1. Indirection
Distance entre l'action et l'effet (spatiale + temporelle)
Notez: les exemples sont subjectifs et discutables ils ne sont pas pour être définitif.
Sur l'objet
Poignées de coin
Très proche
Mini-toolbar popup
Position fixe
Toolbar en haut
Fenêtre séparée
Dialogue « Format »
Temps réel
Glisser une forme
Instantané au clic
Clic sur Gras
Après Enter/Tab
Champ de propriété
Après confirmation
Dialogue Imprimer
2. Intégration
Ratio : DoF utilisés / DoF disponibles sur le périphérique.
Notez: les exemples sont subjectifs et discutables ils ne sont pas pour être définitif.
100%
Glisser-déposer
2/2 DoF
~75%
Stylet X,Y,pression
3/4 DoF
~50%
Scrollbar
1/2 DoF
<25% ou >150%
Rotation 3D souris
3/2 DoF
~0%
Bouton « Pivoter 90° »
0/2 DoF
3. Compatibilité
Est-ce que l'action physique ressemble au résultat à l'écran?
Notez: les exemples sont subjectifs et discutables ils ne sont pas pour être définitif.
Miroir parfait
Glisser fichier → dossier
Intuitif
Pincer pour zoomer
Logique appris
Scrollbar (inversé)
Convention
Slider opacité
Symbolique
Taper x=50, y=100
Comment distingue-t-on entre + et ++ ?
- ++ : touche/chevauche l'objet
- + : très proche, élément séparé
- - : objet encore visible
- -- : instrument cache l'objet
- ++ : TOUS les DoF utilisés
- + : au moins un gaspillé
- - : contrôle continu partiel
- -- : réduit à des clics binaires
- ++ : mime sans écran = devinable
- + : intuitif avec écran
- - : métaphore spatiale
- -- : purement symbolique
Pour l'instant, nous pouvons nous satisfaire de simplement distinguer entre (High) et (Low).
Figma
Disséquez les instruments de Figma
Ouvrez Figma. Identifiez au moins 8 instruments et classifiez-les :
| Instrument | Catégorie | Pré/Postfixe | Indirection | Intégration | Compatibilité |
|---|---|---|---|---|---|
- Poignées de redimensionnement: Attaché, simultané, ++/++/++
- Outil Rectangle (R): Main, préfixe (mode), +/+/+
- Panneau Design (droite): Distant, postfixe, -/±/-
- Color picker: Distant, postfixe, -/+ (2D)/+
- Outil Plume (P): Main, préfixe (mode), +/+/±
- Glisser un élément: Attaché, simultané, ++/++/++
- Panneau Layers: Distant, postfixe, -/±/-
- Ctrl+D (dupliquer): N/A, postfixe, +/+/-
Interaction Gestuelle
5 types de gestes
Définition
Gestes (pointer, glisser, pincer, balayer)
Objets changent d'état
Typiquement postfixe
Les objets doivent être visibles.
Taille du geste vs. distance
Deux axes : taille (petit doigt → corps entier) et distance (toucher → à distance)
petit + proche
petit + distant
grand + distant
Les 5 types
Keynote : une interface composite. Quels styles d'interaction identifiez-vous ?
Multimodale
Combine plusieurs canaux : gestes + voix, eye tracking + gestes
eye tracking + gestes
voix + toucher
Minecraft en réalité augmentée (HoloLens)
Minecraft sur Microsoft HoloLens : le monde virtuel se superpose au salon.
L'utilisateur interagit avec un monde Minecraft projeté sur sa table de salon via le HoloLens. Imaginez les gestes nécessaires :
| Action | Quel(s) geste(s) proposez-vous ? | Type(s) |
|---|---|---|
| Placer un bloc | ||
| Détruire un bloc | ||
| Se déplacer dans le monde | ||
| Changer d'outil (pioche, épée) | ||
| Zoomer / dézoomer |
Discussion : Quels gestes sont multimodaux (geste + voix) ? Lesquels sont purement gestuels ? Quels problèmes de compatibilité et de découvrabilité anticipez-vous ?
- Placer un bloc : Déictique (pointer l'endroit) + manipulation (maintenir pour placer). Le HoloLens réel utilise le « air tap » (pincer dans le vide).
- Détruire : Pantomimique (taper) ou sémaphorique (poing fermé). Conflit possible avec placer !
- Se déplacer : Manipulation (pincer-glisser le monde). Marcher physiquement = compatibilité maximale mais espace limité.
- Changer d'outil : Candidat idéal pour la voix (« pioche ! ») → multimodal. Ou un geste iconique (mimer la forme).
- Découvrabilité : Aucune affordance visible pour les gestes dans l'air → problème majeur de la RA.
Discussion :
Combinaisons naturelles vs absurdes ? Compatibilité?
Sémaphoriques = apprentissage nécessaire → découvrabilité?
Manipulation = feedback continu ?
Principes de Conception
Réification, Polymorphisme, Réutilisation
Trois principes complémentaires. Leur puissance vient de la combinaison : réification crée des objets → manipulés par des instruments polymorphes → créant des opportunités de réutilisation.
Réification (L'abstrait devient concret)
Transformer un concept abstrait ou une commande en objet concret manipulable.
Barre de défilement réifie « naviguer dans un document » → objet visible et glissable.
Groupes de formes réifient « grouper » → le groupe devient un objet persistant.
Styles dans un éditeur → collections d'attributs devenues des objets applicables.
Polymorphisme
Un instrument polymorphe fonctionne sur plusieurs types d'objets. Réduit le nombre d'outils à apprendre.
« Dans votre cuisine, avez-vous un coupe-avocat ? Ou un couteau ? »
Ctrl+C/V : texte, fichiers, images, formules, calques. Un instrument, des dizaines de types.
Glisser-déposer : fichier, playlist, élément Figma, email. Même geste, contextes différents.
Double-clic : ouvrir fichier, sélectionner mot, éditer calque. Inventé par Gypsy en 1975!
Couleur du texte vs. d'une forme (même concept, panneaux différents dans beaucoup d'apps)
Redimensionner image vs. texte (poignées pour l'image, menu taille de police pour le texte (Slides/PowerPoint))
Rechercher dans un doc vs. un dossier vs. le web (trois interfaces pour la même opération)
Réutilisation
Rendre commandes et résultats accessibles pour usage ultérieur.
Réutiliser une commande : Macros, Ctrl+Y (répéter), Find & Replace en boucle, styles réutilisables.
Réutiliser un résultat : Copier-coller, templates, « Duplicate » dans Figma, « Save as ».
La combinaison
Réification crée des objets → actionnés par des instruments polymorphes → plus d'opportunités de réutilisation → interface plus simple ET plus puissante.
« Design interactions, not interfaces! »
Défi Final
Concevoir une interaction, pas une interface
Choisissez un scénario (vous pouvez être en groupes). Décrivez d'abord les interactions, ensuite seulement esquissez l'interface.
📸 Trier 200 photos par « ambiance »
Par émotion, pas par date ni lieu.
☕ Horaire bénévole du Tore et Fraction
~40 bénévoles, plages lundi–vendredi 8h30–17h30. Contraintes : disponibilités, examens, formations des nouveaux.
🏠 Comparer 15 appartements
Prix, superficie, métro, luminosité, bruit.
🎵 Playlist collaborative en direct
5 amis votent, chansons montent/descendent.
Points à adresser :
- Quels sont les objets d'intérêt ? (≠ boutons et menus)
- Quels instruments ? Quelle catégorie (main/distant/attaché) ?
- Préfixe ou postfixe ? Créez-vous des modes ?
- Opportunités de réification ?
- Instruments polymorphes ?
- Indirection / intégration / compatibilité ?
- Quels styles combinez-vous ?
Récapitulatif
Points clés
- Styles d'interaction = indépendants de la technologie, interfaces réelles = composites.
- Ordonnancement : Postfixe = sans mode. Préfixe = mode. Simultané = objet+verbe ensemble.
- Manipulation directe (Shneiderman) : représentation continue, actions physiques, opérations rapides/incrémentales/réversibles. Limites : découvrabilité, sélection.
- Modes → erreurs. Préférer postfixe, quasimodes, modes spatiaux. Affichez le mode!
- CLI : texte→texte, syntaxe précise. Toujours utilisée (Google, Discord).
- Conversationnelle : langage naturel, imprécis pour le visuel/spatial. L'Effet ELIZA persiste.
- Formulaires : arbre de décision → widget. Contraintes physique/logique/sémantique/culturelle.
- Instrumentale : indirection, intégration, compatibilité. Poignées + glisser-déposer = les meilleurs.
- 5 gestes : déictique, sémaphorique, pantomimique, iconique, manipulation.
- Réification + Polymorphisme + Réutilisation = interactions plus puissantes.
- Concevez des interactions, pas des interfaces.