Un menu radial inspiré des jeux de tir

Résumé : Plein de mots arides sur les modes en IHM, puis une modeste propo­si­tion d’in­te­rac­tion pour écran tactile.

Rappels sur les modes

En IHM, un mode est un para­mètre qui permet de produire diffé­rents résul­tats avec le même input, selon que ce mode soit activé ou non. C’est en fait très simple : par exemple enclen­cher la touche Caps Lock fait basculer les autres touches en mode « lettre capi­tale ».

On consi­dère clas­si­que­ment que c’est une tech­nique utile mais à manier avec précau­tion. C’est pratique pour augmenter l’éven­tail des possi­bi­lités. Les touches Shift et Caps Lock permettent de doubler le nombre de carac­tères que l’on peut entrer, alors que les premières machines à écrire avaient un clavier dédoublé ou devaient se contenter d’une seule casse. Le problème est que cela risque d’égarer l’uti­li­sa­teur. Vous vous souvenez sans doute de l’iné­nar­rable mode « refrappe » : on pouvait l’ac­tiver avec la touche Insert et ce n’était signalé que par un minus­cule RFP en bas de la fenêtre de Microsoft Word. Il était facile d’en­trer dans ce mode sans le vouloir mais nette­ment plus diffi­cile d’en sortir, quand on ne connais­sait pas le truc.

Jeux vidéo et quasi-modes

Si on veut avoir le beurre et l’argent du beurre, Jeff Raskin recom­mande l’uti­li­sa­tion de ce qu’il appelle des quasi-modes, c’est-à-dire des modes qui demandent une inter­ven­tion constante de la part de l’utilisateur. Citons le cas du péda­lier d’un piano ou la touche Shift d’un clavier : elle n’a pas d’effet si elle n’est pas pressée. Cela demande plus de coor­di­na­tion motrice, mais en contre­partie les deux actions (ici, shift + lettres) sont liées et conco­mi­tantes. L’utilisateur a ainsi plus de contrôle sur le système et cela diminue les risques de rester dans un mode sans s’en rendre compte.

Dishonored
Dishonored (ZeniMax / Arkane Studios, 2012)

Certains jeux vidéo croisent cette idée avec celle des menus radiaux (cf. la capture d’écran supra). Si on veut par exemple changer d’arme, on main­tient une touche (souvent la molette de la souris) pour faire appa­raitre un cercle d’items. Diriger la souris dans la direc­tion d’un item permet de le sélec­tionner. C’est une très bonne idée qui fait inter­venir plusieurs concepts :

  • La mémoire muscu­laire (ou appren­tis­sage moteur). Au début, il faut apprendre à situer et recon­naitre le picto­gramme de l’item souhaité, mais avec l’habitude tout ce qu’il y a savoir, c’est un mouve­ment de la main selon un certain angle.
  • La loi de Fitts, selon laquelle le temps mis par l’uti­li­sa­teur pour atteindre une cible dépend de sa taille et de son éloi­gne­ment (je sché­ma­tise). Ici la distance est infime (il faut à peine bouger la souris) et la taille angu­laire est grande (plus ou moins, selon le nombre d’items).
  • Le quasi-mode. Ici, le fait de devoir main­tenir la touche est une force plutôt qu’un pis-aller, car ce genre de menu sert d’accès rapide. Il est utilisé souvent et briè­ve­ment. Ce ne serait pas adapté pour l’in­ven­taire d’un jeu de rôle, dans lequel on s’at­tarde plus.

Le design d’in­ter­faces pour­rait s’ins­pirer de cette idée. Cela fait long­temps que les menus radiaux sont utilisés ici et là, mais ce n’est pas toujours convain­cant. Dernièrement, on peut citer l’ex­cel­lente appli­ca­tion OneNote sur la Surface de Microsoft, ou bien les widgets s’ins­pi­rant de Path – lesquels qui brillent surtout par leur anima­tion.

Je trouve l’idée parti­cu­liè­re­ment adaptée aux écrans tactiles, donc j’ai en tête un modèle d’in­te­rac­tion de ce genre : presser deux doigts pour faire appa­raitre un menu, puis les faire glisser vers l’item désiré. Décoller les doigts de l’écran suffit à sélec­tionner ce dernier. L’interaction conjugue la faci­lité des gestes tactiles et l’im­mé­dia­teté du feed­back visuel. Le résultat est fluide puisque les doigts ne quittent pas l’écran. Dans l’ani­ma­tion ci-après (oui c’est juste un Gif pourri), le menu appa­rait vers le haut pour ne pas être caché par la main. L’exemple est assez limité (partager un article vers divers services), mais au-delà ce genre d’in­te­rac­tion me semble promet­teur.

2x\_Press\_Hold
Cliquer sur l’ani­ma­tion pour l’ar­rêter.

Cela pour­rait être utilisé soit comme menu contex­tuel, soit comme menu global (ie qui permet­trait d’ac­céder aux même actions quelque soit l’en­droit où j’ap­puie). Le premier cas serait utile avec beau­coup de cibles poten­tielles distinctes (par exemple une page pleine de liens), tandis que le second serait plus avan­ta­geux avec des actions répé­ti­tives (par exemple accéder à une palette d’ou­tils dans une appli­ca­tion de dessin). Je suis preneur d’avis et de critiques. L’utilisabilité aussi bien que l’uti­lité de cette propo­si­tion sont certai­ne­ment criti­quables et j’ai pu passer à coté de travaux semblables.