IFT2905 - Démo 3
Système Cognitif, Contrôle Moteur & Loi de Fitts
Plan de la démo
- Système Cognitif
- Loi de Hick-Hyman
- Contrôle Moteur
- Expérimentation
- Analyse
- Applications Design
- Mémorabilité
- Quiz!
Le Modèle du Processeur Humain
τp = 100ms
τc = 70ms
τm = 70ms
7±2 chunks, ~7 sec
Inf capacité, Inf durée
Cycle PCM complet : τp + τc + τm ≈ 240ms [105-470ms]
Système Cognitif
Exercice : Test de Mémoire
Instructions
Des mots vont s'afficher un par un. Lisez-les normalement, puis essayez de tous les retenir.
Effets de Mémoire
Loi de Miller
On peut retenir en moyenne 7 (±2) chunks en mémoire de travail.
5145551234
vs.
514-555-1234
Note: Des études récentes suggèrent plutôt 3-5 items! (Par contre des aides memoires peuvent aider)
Effet Von Restorff
Un élément qui se distingue des autres est plus facilement mémorisé.
Application : Utilisez la couleur, la taille ou le style pour mettre en évidence les éléments importants.
Effet de Position Sérielle
Les éléments au début et à la fin sont mieux retenus.
Mémoire Reconstructive
Nos souvenirs ne sont pas fidèles. On "reconstruit" à partir d'indices.
Avez-vous noté "Clavier"?
Application : Préférez la reconnaissance (menus, listes) au rappel (ligne de commande).
Supériorité de l'Image
Les images sont mieux mémorisées que les mots seuls.
Principe multimédia : Mots + Images = meilleur apprentissage.
Autres Biais
- Mots concrets > abstraits (ie: chien > politique)
- Mots émotionnels mieux retenus (danger, feu)
- Mots familiers mieux retenus (bouton, écran)
- Effet Mandela : faux souvenirs partagés
Pire ou Mieux ? Menus Adaptatifs
Menu "Adaptatif" (Word 2000-2003)
Les options peu utilisées sont cachées et changent de position !
Menu Statique
Toutes les options sont toujours visibles, toujours au même endroit.
Biais Cognitifs dans les Interfaces
Biais d'Ancrage
On s'appuie trop sur la première information rencontrée.
Ex: "Était 99€, maintenant 49€!"
Coûts Irrécupérables
Continuer parce qu'on a déjà investi du temps/argent.
Ex: "J'ai déjà passée 2h sur tout ce css..."
Biais du Statu Quo
Tendance à garder l'option par défaut.
Ex: Cases pré-cochées, abonnements auto-renouvelés, cookies
Aversion à la Perte
Les pertes sont ressenties 2 fois plus fort que les gains équivalents.
Ex: "Ne manquez pas cette offre!"
Ces biais peuvent être utilisés pour manipuler ou pour aider les utilisateurs. Utilisez-les de manière éthique !
Loi de Hick-Hyman : Temps de Décision
T = a + b x log₂(n + 1)
Pour n choix équiprobables, le temps de réaction augmente logarithmiquement.
Calculateur Hick-Hyman
Attention : Souvent Mal Utilisée!
Le Problème
Selon la loi, afficher plus d'options d'un coup est toujours meilleur que les diviser en sous-menus :
T = a + b x log₂(32+1) = a + 5b
T = (a + b x log₂(4+1)) + (a + b x log₂(8+1)) = 2a + 5.5b
Mais en pratique, c'est souvent faux !
Pourquoi la Loi de Hick-Hyman est Problématique
Ignore le Contrôle Moteur
La loi ne mesure que le temps de décision. Le temps de pointage (Fitts's) domine souvent.
Ignore la Charge Cognitive
32 options = surcharge visuelle. La loi de Miller (7±2) est violée.
Suppose des Choix Équiprobables
En réalité, certaines options sont beaucoup plus fréquentes. La hiérarchie peut aider.
Temps de Décision Négligeable
Pour des utilisateurs experts, la décision est quasi-instantanée (mémoire spatiale).
Conseil Pratique
N'utilisez pas la loi de Hick-Hyman pour justifier vos designs.
Préférez :
- La loi de Fitts pour optimiser le pointage
- La loi de Miller pour limiter les options visibles
- Des tests utilisateurs pour valider vos choix
Contrôle Moteur : Loi de Fitts
T = a + b x log₂(D/W + 1)
Variables :
- T = Temps de mouvement (ms)
- D = Distance à la cible (px)
- W = Largeur de la cible (px)
Paramètres (dépendent du dispositif) :
- a = Intercept (temps de base)
- b = Pente (ms/bit)
- ID = log₂(D/W + 1) = Index de difficulté
Calculateur d'Index de Difficulté
Exercices Rapides : Calcul d'ID
Calculez l'ID (sans calculatrice!)
Q1. D = 100px, W = 50px, ID =
Indice: log₂(3) ~ 1.58
Q2. D = 300px, W = 100px, ID =
Indice: 2² = 4
Q3. D = 700px, W = 100px, ID =
Indice: 2³ = 8
Intuition derrière la Formule
Pourquoi cette formule fonctionne-t-elle ? Développons une intuition.
Pourquoi le ratio D/W?
Le ratio D/W capture l'idée que la difficulté est... r e l a t i v e :
- Une cible de 10px à 100px de distance est aussi difficile qu'une cible de 20px à 200px
- C'est la précision requise qui compte, pas les valeurs absolues
- Doubler D et doubler W == même difficulté
Pourquoi le logarithme ?
Le logarithme reflète comment les humains traitent l'information :
- Rendements décroissants : Doubler la distance n'ajoute pas 2 fois la difficulté, mais seulement +1 bit d'information
- Analogie avec les bits : Chaque "bit" de difficulté représente une division par 2 de la précision
- Loi de Weber-Fechner : La perception humaine est logarithmique (lumière, son, distance)
| D/W | ID (bits) | Interprétation |
|---|---|---|
| 1 | 1.0 | Cible aussi large que la distance |
| 3 | 2.0 | Distance = 3 fois la largeur |
| 7 | 3.0 | Distance = 7 fois la largeur |
| 15 | 4.0 | Distance = 15 fois la largeur |
| 31 | 5.0 | Distance = 31 fois la largeur |
Pattern : Pour augmenter l'ID de 1 bit, il faut doubler le ratio D/W (+1 puis x 2)
Pourquoi le "+1" dans log₂(D/W + 1)?
La formulation de Shannon ajoute "+1" pour deux raisons :
- Éviter l'infini négatif : Sans le +1, si D/W < 1 (cible plus large que la distance), log₂(D/W) serait négatif
- ID minimum = 0 : Quand D = 0 (déjà sur la cible), ID = log₂(0/W + 1) = log₂(1) = 0 bits
Interpréter les Résultats
Les coefficients a et b
Coefficient a (intercept)
Unité : millisecondes (ms)
Signification : Temps "de base" quand ID → 0
Inclut :
- Temps de perception de la cible
- Temps de décision cognitive
- Temps d'initiation du mouvement
- Latence du dispositif
Valeurs typiques : 50-200 ms
Coefficient b (pente)
Unité : ms/bit
Signification : Temps ajouté par bit de difficulté
Détermine :
- La "vitesse" du dispositif
- L'efficacité du contrôle moteur
- La précision du pointage
Valeurs typiques : 70-350 ms/bit
C'est le critère principal de comparaison !
Le Throughput (Débit)
Le Throughput (TP) est la mesure standardisée ISO 9241-9 pour comparer les dispositifs :
TP = IDe / T ou TP ≈ 1/b
- Unité : bits/seconde (bps)
- Avantage : Combine vitesse ET précision en une seule métrique
- IDe = Index de difficulté effectif (calculé à partir des clics réels, pas des paramètres)
| Dispositif | b (ms/bit) | TP (bits/s) |
|---|---|---|
| Eye tracker | ~70 | ~14 |
| Souris | ~100 | ~10 |
| Touchpad | ~120 | ~8 |
| Écran tactile | ~150 | ~7 |
| Joystick | ~200 | ~5 |
| Trackball | ~350 | ~3 |
Le coefficient R² (qualité de l'ajustement)
Le R² indique à quel point la loi de Fitts explique vos données :
| R² | Interprétation | Action |
|---|---|---|
| 0.95 - 1.00 | Excellent ajustement | La loi de Fitts modélise très bien vos données. Yay! |
| 0.85 - 0.95 | Bon ajustement | Acceptable, peut-être quelques outliers |
| < 0.85 | Ajustement faible | Vérifiez : outliers ? erreurs ? fatigue ? |
Causes d'un R² faible :
- Erreurs de mesure (clics accidentels, distractions)
- Fatigue de l'utilisateur au cours du test
- Gamme d'ID trop étroite (tous les points sont similaires)
- Utilisateur non familier avec le dispositif
Cas Spéciaux et Limites
Cibles aux bords de l'écran
Au bord de l'écran, on ne peut pas dépasser la cible :
- W effectif → ∞
- ID → 0 bits
- Les coins sont encore meilleurs (2 bords !)
Exception : Ne s'applique PAS aux écrans tactiles (pointage direct) car vous pouvez manquer le bord.
Cibles très petites (W → 0)
Quand W devient très petit :
- ID → ∞ théoriquement
- En pratique, taux d'erreur augmente
- La loi de Fitts suppose ~4% d'erreurs
Recommandation : Taille minimum de 40-44px pour les cibles tactiles
Dimension de la cible
Quelle dimension utiliser pour W ?
- Utiliser la dimension dans la direction du mouvement
- Pour un bouton rectangulaire approché horizontalement : utiliser la largeur
- Pour le même bouton approché verticalement : utiliser la hauteur
Cibles circulaires : W = diamètre (même dans toutes les directions)
Mouvements 2D vs 1D
La loi de Fitts originale est pour les mouvements 1D (linéaires).
Pour les mouvements 2D (écran) :
- Utiliser la distance euclidienne : D = √(Δx² + Δy²)
- La formule reste applicable avec R² > 0.9 typiquement
- Certains modèles ajoutent un terme pour l'angle
Au-delà de Fitts : Loi de Steering (Guidage)
Que se passe-t-il quand le mouvement n'est pas en ligne droite ? Par exemple, naviguer dans un menu hiérarchique ou tracer dans un tunnel.
T = a + b x ∫0A ds/W(s)
Pour un chemin de longueur A et largeur W(s) variable
Pour un tunnel droit de longueur constante et largeur constante, la formule se simplifie :
T = a + b x (A / W)
où A = longueur du tunnel, W = largeur du tunnel
Calculateur Steering Law
T = 0 + 100 x 10 = 1000 ms
Application : Menus Hiérarchiques
Le curseur doit rester dans le "tunnel" pour garder le sous-menu ouvert.
Solutions...Correctes
Ce menu Costco.com montre le compromis : un menu large facilite la navigation verticale, mais allonge le tunnel horizontal vers le sous-menu. La plupart des menus ne sont pas optimisés — ils sont juste aussi larges que leur texte le plus long.
Meilleures Solutions: Zone de Transition
Amazon mega-menu : zone triangulaire qui anticipe la direction du mouvement.
Meilleures Solutions : Pie ...Miam
Pinterest marking menu : options disposées en cercle autour du point d'origine, minimisant la distance et maximisant la largeur.
Chaîne Cinématique de Guiard (Bimanuel)
Quand on utilise deux mains, elles ont des rôles différents mais complémentaires :
✋ Main Non-Dominante
- Agit en premier
- Établit le cadre de référence
- Mouvements grossiers
- Contrôle proximal (proche du corps)
Ex: Tenir la feuille, positionner la règle
🖐️ Main Dominante
- Agit après la main non-dominante
- Opère dans le cadre établi
- Mouvements précis
- Contrôle distal (loin du corps)
Ex: Écrire, tracer le long de la règle
Applications au Design
- Raccourcis clavier + souris : Main gauche (Ctrl/Cmd) + main droite (clic)
- Tablettes graphiques : Main gauche (boutons/molette) + main droite (stylet)
- Jeux vidéo : Main gauche (WASD/déplacement) + main droite (souris/visée)
- Écrans tactiles : Une main tient l'appareil, l'autre interagit
Un peu problématique pour nous les gauchers, non?
Anti-Fitts : Ralentir Intentionnellement
Parfois, on veut que certaines cibles soient difficiles à atteindre :
Actions Destructives
Bouton "Supprimer définitivement" petit et éloigné de "Annuler".
Achats In-App
Confirmation multiple pour éviter les achats accidentels (surtout pour les enfants).
Paramètres Système
Options avancées/dangereuses cachées ou nécessitant plusieurs clics.
Expérimentation en Groupes
Organisation des Groupes
Divisez-vous en 4 groupes selon votre dispositif :
L'Outil Cornell Fitts's Law
Nous utilisons l'outil de Cornell University Ergonomics, qui teste automatiquement 9 conditions (3 largeurs x 3 distances).
Paramètres par Défaut
16, 32, 64 px
128, 256, 512 px
10 clics/condition
Les 9 Conditions et leurs IDs
L'outil teste toutes les combinaisons Width x Amplitude (Distance). Voici les IDs pré-calculés :
| Amplitude (Distance) | |||
|---|---|---|---|
| Width | D = 128 | D = 256 | D = 512 |
| W = 16 | ID = 3.17 | ID = 4.09 | ID = 5.04 |
| W = 32 | ID = 2.32 | ID = 3.17 | ID = 4.09 |
| W = 64 | ID = 1.58 | ID = 2.32 | ID = 3.17 |
Note : Certaines conditions ont le même ID (par ex. W=32/D=128 et W=64/D=256 = 2.32 bits). C'est normal : même ratio D/W = même difficulté!
Instructions de l'Expérience
Étapes
- Ouvrez l'outil Cornell (bouton ci-dessous)
- Gardez les paramètres par défaut :
16,32,64|128,256,512|10 - Cliquez "Start"
- Cliquez alternativement sur les cibles bleues le plus vite possible
- L'outil passe automatiquement par les 9 conditions
Résultat Attendu
Après l'expérience, l'outil affiche un tableau Mean MT comme ceci :
Mean MT (exemple)
| 128 | 256 | 512 | |
|---|---|---|---|
| 16 | 423 | 512 | 598 |
| 32 | 356 | 418 | 489 |
| 64 | 298 | 342 | 401 |
Lignes = Width, Colonnes = Amplitude, Valeurs = Temps moyen (ms)
Calcul Manuel : Régression Linéaire (n = 4)
Pour comprendre comment calculer a et b, faisons un exemple complet avec 4 points de données.
Objectif
Trouver la droite T = a + b x ID qui passe au mieux par nos 4 points.
- a = intercept (temps de base en ms)
- b = pente (ms ajoutées par bit de difficulté)
Exemple de Données
Supposons qu'un utilisateur avec une souris obtient ces temps moyens :
| Point | x (ID en bits) | y (Temps en ms) |
|---|---|---|
| 1 | 1.58 | 285 |
| 2 | 2.32 | 356 |
| 3 | 4.09 | 512 |
| 4 | 5.04 | 598 |
Formules de Régression
ATTENTION : Σ(x²) != (Σx)² !
- Σx² = somme des carrés = x₁² + x₂² + x₃² + x₄²
- (Σx)² = carré de la somme = (x₁ + x₂ + x₃ + x₄)²
Ces deux valeurs sont différentes! C'est une erreur fréquente.
Construire le Tableau de Calcul
| Point | x (ID) | y (Temps) | x² | x * y |
|---|---|---|---|---|
| 1 | 1.58 | 285 | 1.58² = 2.50 | 1.58 x 285 = 450.3 |
| 2 | 2.32 | 356 | 2.32² = 5.38 | 2.32 * 356 = 825.9 |
| 3 | 4.09 | 512 | 4.09² = 16.73 | 4.09 x 512 = 2094.1 |
| 4 | 5.04 | 598 | 5.04² = 25.40 | 5.04 x 598 = 3013.9 |
| Σ | 13.03 | 1751 | 50.01 | 6384.2 |
Calculer les Sommes
n = 4 (nombre de points)
Σx = 1.58 + 2.32 + 4.09 + 5.04 = 13.03
Σy = 285 + 356 + 512 + 598 = 1751
Σx² = 2.50 + 5.38 + 16.73 + 25.40 = 50.01
Σxy = 450.3 + 825.9 + 2094.1 + 3013.9 = 6384.2
(Σx)² = 13.03² = 169.78
Calculer b (pente)
b = (4 * 6384.2 − 13.03 * 1751) / (4 * 50.01 − 169.78)
b = (25536.8 − 22815.5) / (200.04 − 169.78)
b = 2721.3 / 30.26
Calculer a (intercept)
a = (1751 − 89.9 * 13.03) / 4
a = (1751 − 1171.3) / 4
a = 579.7 / 4
Équation Finale
T = 145 + 90 × ID
Temps prédit (ms) = 145 + 90 × Index de Difficulté (bits)
Vérification (optionnelle)
Vérifions que notre équation prédit des valeurs proches des temps réels :
| ID | Temps Réel | Prédit : 145 + 90 × ID | Erreur |
|---|---|---|---|
| 1.58 | 285 ms | 145 + 90 x 1.58 = 287 ms | +2 ms Yay! |
| 2.32 | 356 ms | 145 + 90 x 2.32 = 354 ms | −2 ms Yay! |
| 4.09 | 512 ms | 145 + 90 x 4.09 = 513 ms | +1 ms Yay! |
| 5.04 | 598 ms | 145 + 90 x 5.04 = 599 ms | +1 ms Yay! |
Calculer R² et Throughput (optionnel)
R² (Coefficient de Détermination)
R² mesure la qualité de l'ajustement (entre 0 et 1) :
R² = 1 − (SSrésiduel / SStotal)
Avec nos données : R² ~ 0.998 (proche de 1, donc très bon)
Throughput (Débit)
TP = 1000 / b = 1000 / 90 = 11.1 bits/seconde
Résumé : Constantes Pré-Calculées (n = 4)
Pour nos 4 conditions choisies (ID = 1.58, 2.32, 4.09, 5.04), voici les constantes :
| n | 4 |
| Σx | 13.03 |
| Σx² | 50.01 |
| (Σx)² | 169.78 |
| Dénominateur | 30.26 |
Vous n'avez qu'à calculer Σy et Σxy à partir de vos temps!
Calculateur Automatique
Entrez vos données pour calculer automatiquement la régression :
| ID (bits) | Temps T (ms) |
|---|---|
Comparaison des Dispositifs
| Dispositif | b (ms/bit) | Throughput (bits/s) |
|---|---|---|
| Eye Tracking | 73 | 13.7 |
| Souris | 96 | 10.4 |
| Stylet | 94.7 | 10.6 |
| Joystick | 199 | 5.0 |
| Trackball | 347 | 2.9 |
| Vos résultats | ??? | ??? |
Applications au Design
La puissance de la loi de Fitts : comparer des designs sans implémenter ni tester ! Il suffit de calculer l'ID.
Exercice 1 : Comparateur de Designs
Entrez les dimensions de deux designs de menu et comparez leur difficulté moyenne :
Design A
Design B
Exercice 2 : Menu avec Probabilités Différentes
Dans la vraie vie, les options de menu ne sont pas équiprobables. Calculons l'ID moyen pondéré :
IDpondéré = Σ (Pi × IDi)
| Item | Distance D (px) | Largeur W (px) | Probabilité P |
|---|---|---|---|
| 1 | |||
| 2 | |||
| 3 | |||
| 4 |
Scénarios de Design
Scénario A : Menus Circulaires vs Linéaires
Menu Linéaire
D varie de 30px à 150px
W = 100px pour tous
Menu Circulaire (Pie Menu)
D = 60px pour tous
W (angle) = 90° pour tous
Scénario B : Les Bords Magiques
Question : Pourquoi la barre de menu macOS (collée au bord supérieur) est-elle plus rapide que les menus Windows (dans la fenêtre) ?
Scénario C : Bouton OK à Droite ou à Gauche ?
Un dialogue avec "OK" et "Annuler". L'utilisateur vient de cliquer sur "Supprimer" situé à droite.
Question : Où placer "OK" pour minimiser le temps de clic ?
Conception Mémorable : Principes & Exercices
Un bon design n'est pas seulement utilisable, il est aussi mémorable. Commençons par un test pour voir à quel point vous pouvez retenir une interface après une brève exposition.
Exercice : Gallery Walk
Instructions
- Étape 1 (5 min) : En groupes de 3-4, dessinez une interface pour le Café étudiant
- Étape 2 : Affichez votre design au mur (face cachée)
- Étape 3 (20 sec) : Gallery Walk - observez l'interface d'un AUTRE groupe
- Étape 4 (3 min) : Retournez à votre place et redessinez de mémoire
- Étape 5 : Comparez avec l'original!
Questions de Discussion Rapide
- Quels éléments avez-vous facilement retenus ? (Position, couleurs, texte ?)
- Qu'avez-vous oublié ou confondu ?
- Les interfaces bien organisées étaient-elles plus faciles à mémoriser ?
Revenons à notre test de mémorabilité. Pourquoi certaines interfaces étaient-elles plus faciles à retenir ?
Revision Principes de Mémorabilité
Chunking
Grouper l'information en 5-9 "chunks". Ex: 514-555-1234 vs 5145551234
Hiérarchie Visuelle
Taille, couleur, position indiquent l'importance. L'œil suit un chemin prévisible.
Groupement Gestalt
Proximité, similarité, continuité. Les éléments proches sont perçus comme liés.
Consistance
Mêmes actions = mêmes positions. Réduit la charge cognitive.
Reconnaissance > Rappel
Montrer les options plutôt que forcer l'utilisateur à s'en souvenir.
Mémoire Spatiale
Les positions sont plus faciles à retenir que les noms. Gardez les éléments fixes.
Exercice : Diagnostiquer les Problèmes
Combien de problèmes voyez-vous ?
Interface A
Interface B
Exercice : Redesign d'un Menu
Menu de Restaurant
Analysez ce menu problématique et identifiez les améliorations possibles.
MENU
Soupe du jour 5$ • Salade César 8$ • Bruschetta 7$ • Ailes de poulet 9$ • Nachos 10$ • Burger classique 14$ • Burger végé 13$ • Fish & Chips 16$ • Pâtes Alfredo 15$ • Pizza Margherita 12$ • Pizza Pepperoni 14$ • Steak frites 22$ • Saumon grillé 19$ • Poulet rôti 17$ • Gâteau chocolat 7$ • Tarte aux pommes 6$ • Crème brûlée 8$ • Café 3$ • Thé 3$ • Jus d'orange 4$ • Bière 6$ • Vin (verre) 8$
Ont peut rapidement évaluer une interface avec cette checklist :