Un menu radial inspiré des jeux de tir

Résumé : Plein de mots arides sur les modes en IHM, puis une modeste pro­po­si­tion d’interaction pour écran tac­tile.

Rappels sur les modes

En IHM, un mode est un para­mètre qui per­met de pro­duire dif­fé­rents résul­tats avec le même input, selon que ce mode soit acti­vé ou non. C’est en fait très simple : par exemple enclen­cher la touche Caps Lock fait bas­cu­ler 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 pra­tique pour aug­men­ter l’éventail des pos­si­bi­li­tés. Les touches Shift et Caps Lock per­mettent de dou­bler le nombre de carac­tères que l’on peut entrer, alors que les pre­mières machines à écrire avaient un cla­vier dédou­blé ou devaient se conten­ter d’une seule casse. Le pro­blème est que cela risque d’égarer l’utilisateur. Vous vous sou­ve­nez sans doute de l’inénarrable mode « refrappe » : on pou­vait l’activer avec la touche Insert et ce n’était signa­lé que par un minus­cule RFP en bas de la fenêtre de Microsoft Word. Il était facile d’entrer dans ce mode sans le vou­loir mais net­te­ment plus dif­fi­cile d’en sor­tir, 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’utilisation 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 pia­no ou la touche Shift d’un cla­vier : elle n’a pas d’effet si elle n’est pas pres­sée. Cela demande plus de coor­di­na­tion motrice, mais en contre­par­tie les deux actions (ici, shift + lettres) sont liées et conco­mi­tantes. L’utilisateur a ain­si plus de contrôle sur le sys­tème et cela dimi­nue les risques de res­ter 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 cap­ture d’écran supra). Si on veut par exemple chan­ger d’arme, on main­tient une touche (sou­vent la molette de la sou­ris) pour faire appa­raitre un cercle d’items. Diriger la sou­ris dans la direc­tion d’un item per­met de le sélec­tion­ner. C’est une très bonne idée qui fait inter­ve­nir plu­sieurs concepts :

  • La mémoire mus­cu­laire (ou appren­tis­sage moteur). Au début, il faut apprendre à situer et recon­naitre le pic­to­gramme de l’item sou­hai­té, mais avec l’habitude tout ce qu’il y a savoir, c’est un mou­ve­ment de la main selon un cer­tain angle.
  • La loi de Fitts, selon laquelle le temps mis par l’utilisateur pour atteindre une cible dépend de sa taille et de son éloi­gne­ment (je sché­ma­tise). Ici la dis­tance est infime (il faut à peine bou­ger la sou­ris) et la taille angu­laire est grande (plus ou moins, selon le nombre d’items).
  • Le quasi-mode. Ici, le fait de devoir main­te­nir la touche est une force plu­tôt qu’un pis-aller, car ce genre de menu sert d’accès rapide. Il est uti­li­sé sou­vent et briè­ve­ment. Ce ne serait pas adap­té pour l’inventaire d’un jeu de rôle, dans lequel on s’attarde plus.

Le desi­gn d’interfaces pour­rait s’inspirer de cette idée. Cela fait long­temps que les menus radiaux sont uti­li­sés ici et là, mais ce n’est pas tou­jours convain­cant. Dernièrement, on peut citer l’excellente appli­ca­tion OneNote sur la Surface de Microsoft, ou bien les wid­gets s’inspirant de Path – les­quels qui brillent sur­tout par leur ani­ma­tion.

Je trouve l’idée par­ti­cu­liè­re­ment adap­tée aux écrans tac­tiles, donc j’ai en tête un modèle d’interaction de ce genre : pres­ser deux doigts pour faire appa­raitre un menu, puis les faire glis­ser vers l’item dési­ré. Décoller les doigts de l’écran suf­fit à sélec­tion­ner ce der­nier. L’interaction conjugue la faci­li­té des gestes tac­tiles et l’immédiateté du feed­back visuel. Le résul­tat est fluide puisque les doigts ne quittent pas l’écran. Dans l’animation ci-après (oui c’est juste un Gif pour­ri), le menu appa­rait vers le haut pour ne pas être caché par la main. L’exemple est assez limi­té (par­ta­ger un article vers divers ser­vices), mais au-delà ce genre d’interaction me semble pro­met­teur.

2x\_Press\_Hold
Cliquer sur l’animation pour l’arrêter.

Cela pour­rait être uti­li­sé soit comme menu contex­tuel, soit comme menu glo­bal (ie qui per­met­trait d’accéder aux même actions quelque soit l’endroit où j’appuie). Le pre­mier cas serait utile avec beau­coup de cibles poten­tielles dis­tinctes (par exemple une page pleine de liens), tan­dis que le second serait plus avan­ta­geux avec des actions répé­ti­tives (par exemple accé­der à une palette d’outils dans une appli­ca­tion de des­sin). Je suis pre­neur d’avis et de cri­tiques. L’utilisabilité aus­si bien que l’utilité de cette pro­po­si­tion sont cer­tai­ne­ment cri­ti­quables et j’ai pu pas­ser à coté de tra­vaux sem­blables.