Gobz

Je vais quand même commencer par ce dont je voulais parler à la base : Songza. Oui, encore.
Je ne me remets toujours pas de l’interface et ils viennent d’ajouter la possibilité d’enregistrer sa playlist pour pouvoir l’écouter n’importe où ensuite. C’était une fonctionnalité qui faisait réellement défaut au service mais l’équipe d’Humanized continue à travailler dessus et j’espère voir bientôt arriver la possibilité de faire plusieurs playlists et de les partager, un peu à la manière des onglets netvibes.

C’est donc en cherchant des infos sur les pie menus que je suis retombé sur la loi de Fitts.
En poussant encore un peu, j’ai découvert qu’elle avait en fait un rôle fondateur dans le design d’interface et qu’elle impliquait certaines règles, de bon sens et un peu plus.
Je vais donc commencer par expliquer en quoi consiste cette loi avant de parler des conséquences sur le design d’interface pour finir par les pie menus, pourquoi c’est bien, pourquoi il faut en manger, et quelques exemples.

Définition

La loi de Fitts a été publié par Paul Fitts en 1954. Elle modèlise le mouvement humain en prédisant le temps requis pour aller à la zone visée en utilisant une fonction prenant en compte la distance jusq’à la cible et la taille de celle-ci. Elle a depuis trouvée une place importante dans le design d’interface puisqu’elle est parfaite pour modèliser l’acte de pointer sur un ordinateur.

D’après la loi de Fitts, le temps de mouvement est :

1. une fonction logarithmique de la distance quand la taille de la cible est constante
2. une fonction logarithmique de la taille de la cible quand la distance est constante

Et pam! ça donne ça :

MT = a + b log2(2A/W)
avec
MT = temps de mouvement
a, b = paramètres dépendant de la situation
A = distance entre le départ et la cible
W = largeur de la cible sur l’axe de mouvement

Ce qu’il faut retenir pour les non-matheux qui auraient préféré que ça donne des chocapics, c’est que mettre une cible petite et loin est une mauvaise idée.
Cela peut sembler bête mais ce qu’on peut noter, c’est la fonction logarithmique qui signifie que la relation entre la taille et le temps n’es pas linéaire. Un petit changement de taille sur un petit objet aura un résultat beaucoup plus important que le même sur un gros objet.
De même, un petit changement de distance sur un objet très lointain aura très peu d’effet comparé au même changement appliqué à un objet proche.

Conséquences

Les boutons

Les boutons et autres éléments de contrôle doivent donc être d’une taille raisonnable et idéalement les fonctions importantes doivent être représentées plus grandes pour être accessible plus rapidement.
ParticleTree a écrit un article intéressant sur la visualisation de la loi de Fitts.
Il souligne notamment que la cible n’est finalement pas tant à considérer comme une surface mais plus comme une ligne placée sur la trajectoire de la souris.
Cela implique que selon la place du curseur par rapport à une cible rectangulaire, la cible ne va pas être de la même largeur. Le cercle devient alors une solution intéressante car la taille de cible est constance quelque soit la position du curseur.
La forme en cercle assure une taille de cible constante quelque soit la position du curseur.

Chez MindHacks , on a étudié graphiquement le temps de ciblage en fonction de la distance et de la taille de la cible. En rouge, les plus longs temps de mouvement, en bleu les plus courts.
Etude du temps de ciblage en fonction de la distance et de la taille de la cible.
MindHacks a fait un graphique en 3D prenant également en compte le temps de mouvement.
On observe une diagonale qui indique qu’augmenter la taille si on augmente la distance n’aura aucun effet sur le temps de ciblage. De même, diminuer la distance si on diminue la taille ne changera rien.
Pour améliorer un très mauvais temps, on aura meilleur compte de d’abord diminuer la distance. Ensuite (vers 4 en distance sur le graphique), seul l’augmentation de la taille aura un effet (jusqu’à +50%). En dernier lieu, les deux variables influent également.

Utiliser les contraintes de l’écran

Les éléments placés le long du bord peuvent en fait être considérés comme ayant une profondeur infinie. On peut y aller comme un bourrin, le curseur n’ira jamais plus loin et on sera toujours sur la cible. Cela fait des bords, et plus particulièrement des coins, des endroits particulièrement pratiques et facile à atteindre.
Un problème se pose sur le web cependant : à part si on est en full-screen, les coins et bords sont occupés par l’interface du navigateur.

Depuis le début, les interfaces Apple utilisent la loi de Fitts. Le menu est directement collé au bord supérieur et est toujours au même endroit quelques soit l’application et la taille de la fenêtre. De même dans les versions plus récentes, Exposé apparait par défaut quand on place sa souris dans les coins.Il n’y a pas d’espace entre le menu Mac et le bord de la fenêtre, il suffit d’envoyer sa souris en haut pour être sur le menu

Si la solution d’Apple semble évidente au vue de la loi, celle de Microsoft la prend pourant en compte également mais différement. Ainsi, quand la fenêtre est redimensionnée ou quand on utilise plusieurs écrans, le menu reste assez proche alors que la solution Apple devient un peu cauchemardesque dans le cas du bi-écran.

La barre de titre Windows empêche d’arriver sur le menu aussi facilement que sur un OS Mac. Mais la solution Apple devient un peu cauchemardesque dans le cas du bi-écran où les distances à parcourir sont beaucoup plus grandes.
Les deux solutions actuelles ont leurs défauts et leurs inconvénients, peut-être que la solution idéale se trouve dans une redéfinition des menus eux-mêmes.

Les pie menus

Actuellement on a principalement deux types de menu, les pop-up menus et les menu déroulants. Entre ces deux-ci il est préférable de choisir les pop-up menu car les distance à parcourir sont moins longues mais Songza m’a fait découvrir un troisième type de menu, les pie menus (menu en tarte O_o?).
Inventés en 1986 par Don Hopkins sur un Sun 3/160, ce sont des pop-up menus de forme circulaire qui laisse un espace inactif en leur centre pour fermer le menu rapidement.

Ses avantages peuvent être résumé en quelques points :

La distance
Tous les items du menu sont à égale distance du curseur et celle-ci est très courte.
Les études montre un gain de temps de 15% au minimum et montant à plus de 50% pour les items éloignés d’un menu déroulant.

La surface
Les formes courbées assurent une plus large surface à cibler et celle-ci peut facilement être augmenter.Augmenter la surface cliquable n’augmente pas la distance contrairement aux menus déroulants.

L’apprentissage et l’automatisation
Pour les utilisateurs novices, les pie menus montrent et nous dirigent vers ce qu’on peut faire. La sélection ne dépend plus de la distance mais de la direction. A chaque utilisation, l’utilisateur apprend la direction de la commande, rendant la phase d’apprentissage naturelle.
Au bout d’une semaine, l’utilisateur n’a plus besoin de regarder le menu pour les commandes habituelles, il actionne les commandes en faisant simplement un geste. La phase d’automatisation est donc là aussi complètement naturelle.

Exemples

Audiopmap de Tune Glue, sans doute l’exemple le mieux designé que j’ai trouvé.
Comme souvent, les jeux savent profiter des idées intéressantes :

• Sim City (déjà!)
• Rainbow6: raven Shield
• The Sims

easyGestures, un plugin pour Firefox
Maya, un logiciel de 3D
Et ai-je besoin de parler de Songza ?

Références

Particle Tree : Schémas explicant la loi de Fitts
MindHacks : Taille et sélection
Un questionnaire pour évaluer notre maitrise de la loi de Fitts (bon courage)
Pourquoi les pie-menus ne se sont pas imposés
Designer et implémenter les pie-menus par Don Hopkins