Monthly Archives: avril 2013

Un menu radial inspiré des jeux de tir

Résumé : Plein de mots arides sur les modes en IHM, puis une modeste proposition d’interaction pour écran tactile.

Rappels sur les modes

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

On considère classiquement que c’est une technique utile mais à manier avec précaution. C’est pratique pour augmenter l’éventail des possibilités. Les touches Shift et Caps Lock permettent de doubler le nombre de caractè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’utilisateur. Vous vous souvenez sans doute de l’inénarrable mode « refrappe » : on pouvait l’activer avec la touche Insert et ce n’était signalé que par un minuscule RFP en bas de la fenêtre de Microsoft Word. Il était facile d’entrer dans ce mode sans le vouloir mais nettement plus difficile d’en sortir, quand on ne connaissait pas le truc.

Jeux vidéo et quasi-modes

Si on veut avoir le beurre et l’argent du beurre, Jeff Raskin recommande l’utilisation de ce qu’il appelle des quasi-modes, c’est-à-dire des modes qui demandent une intervention constante de la part de l’utilisateur. Citons le cas du pédalier 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 coordination motrice, mais en contrepartie les deux actions (ici, shift + lettres) sont liées et concomitantes. 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 maintient une touche (souvent la molette de la souris) pour faire apparaitre un cercle d’items. Diriger la souris dans la direction d’un item permet de le sélectionner. C’est une très bonne idée qui fait intervenir plusieurs concepts :

  • La mémoire musculaire (ou apprentissage moteur). Au début, il faut apprendre à situer et reconnaitre le pictogramme de l’item souhaité, mais avec l’habitude tout ce qu’il y a savoir, c’est un mouvement de la main selon un certain 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 éloignement (je schématise). Ici la distance est infime (il faut à peine bouger la souris) et la taille angulaire est grande (plus ou moins, selon le nombre d’items).
  • Le quasi-mode. Ici, le fait de devoir maintenir 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èvement. Ce ne serait pas adapté pour l’inventaire d’un jeu de rôle, dans lequel on s’attarde plus.

Le design d’interfaces pourrait s’inspirer de cette idée. Cela fait longtemps que les menus radiaux sont utilisés ici et là, mais ce n’est pas toujours convaincant. Dernièrement, on peut citer l’excellente application OneNote sur la Surface de Microsoft, ou bien les widgets s’inspirant de Path – lesquels qui brillent surtout par leur animation.

Je trouve l’idée particulièrement adaptée aux écrans tactiles, donc j’ai en tête un modèle d’interaction de ce genre : presser deux doigts pour faire apparaitre un menu, puis les faire glisser vers l’item désiré. Décoller les doigts de l’écran suffit à sélectionner ce dernier. L’interaction conjugue la facilité des gestes tactiles et l’immédiateté du feedback visuel. Le résultat est fluide puisque les doigts ne quittent pas l’écran. Dans l’animation ci-après (oui c’est juste un Gif pourri), le menu apparait 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’interaction me semble prometteur.

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

Cela pourrait être utilisé soit comme menu contextuel, soit comme menu global (ie qui permettrait d’accéder aux même actions quelque soit l’endroit où j’appuie). Le premier cas serait utile avec beaucoup de cibles potentielles distinctes (par exemple une page pleine de liens), tandis que le second serait plus avantageux avec des actions répétitives (par exemple accéder à une palette d’outils dans une application de dessin). Je suis preneur d’avis et de critiques. L’utilisabilité aussi bien que l’utilité de cette proposition sont certainement critiquables et j’ai pu passer à coté de travaux semblables.

Quand le mépris se déguise en empathie

Il est louable de se mettre à la place des gens et de comprendre qu’ils utilisent leurs outils quotidiens de manière pragmatique. Cela parait évident et c’est le point de départ de la conception centrée sur l’utilisateur. C’est grâce à ça qu’on conçoit des interfaces simples, sans jargon ni option inutile. Pourtant cette importance de l’empathie est souvent caricaturée et transformée en dédain.

« Les gens normaux se moquent de telle ou telle chose » : cette tournure est trop souvent utilisée à propos de tout et n’importe quoi. C’est un moyen trop facile pour reprocher à son interlocuteur d’être coupé des réalités et d’accorder de l’importance à ce qui n’en a pas aux yeux de ceux qui comptent, les utilisateurs finaux. « Les utilisateurs lambda se fichent de RSS, de HTTP ou de tel détail technique », « le grand public se moque de la neutralité du net ou de la protection de la vie privée », « madame Michu ne veut pas savoir quel OS tourne sur son téléphone ». En raisonnant ainsi, on fabrique de toute pièce la fiction paresseuse d’un utilisateur forcément négligent et inculte. Certes, la plupart des gens ont une utilisation superficielle de la plupart des services et produits qu’ils utilisent. Le plus souvent, ils se moquent du soubassement technique et des enjeux socio-politico-économiques qu’il peut y avoir derrière. Mais voir tout au prisme d’une échelle unique « noob absolu — nerd ultime » est extrêmement réducteur.

Je peux être très au fait des ordinateurs classiques mais largué par les smartphones, ou l’inverse. Je peux avoir fait des méfaits de la publicité un cheval de bataille personnel tout en me contrefichant de, mettons, les conditions de travail des ouvriers chinois. Je peux avoir quinze ans, n’utiliser mon téléphone que pour texter et être malgré tout assez calé en hardware, à force de comparer avec les copains les specs des modèles à la mode. Il y a plein de raisons qui font qu’on s’intéresse à quelque chose. Les gens sont compliqués.

Et les gens changent. Si une fonctionnalité dont dépend madame Michu existe sur iOS et pas sur Android, elle aura plus facilement tendance à se rappeler de la différence. La plupart des gens font peu attention au partage des informations personnelles, jusqu’au jour où, sur Facebook, une photo deviendra visible par la mauvaise personne. Des problèmes abstraits peuvent vite devenir moins lointains si on montre aux gens l’influence que cela peut avoir sur leur vie.

Observatoire des utilisabilités : le texte tronqué

C’est agaçant quand une interface à base de tableaux ou de grille tronque les libellés, les rendant incompréhensibles. Dans les exemples suivants (respectivement Vimeo et l’iTunes Store), beaucoup d’importance est accordée aux images alors qu’elles ne sont guère informatives. La grille est tellement contraignante que les liens sont facilement trop longs et se retrouvent largement tronqués. Il faut donc passer la souris sur chacun d’entre eux pour avoir une infobulle et comprendre de quoi parlent les conférences. Non mais franchement.

Usability fail : Vimeo
Usability fail : Vimeo

Usability fail : iTunes
Usability fail : iTunes

Pour moi tous mes amis sont beaux – À propos de Facebook Home

Facebook a dévoilé Home, une surcouche pour téléphones Android. Fast Company a un bon résumé des concepts à l’œuvre derrière le design.

Une des fonctionnalités majeures est « Cover Feed », à savoir la transformation de l’écran de verrouillage en diaporama montrant les nouveaux statuts de ses contacts. J’ai lu beaucoup de réactions du genre « ces photographies en plein écran, c’est joli en pub, mais qu’est-ce qu’on fait si on a des amis moches ou mauvais photographes ? » (ici par exemple). Cette proposition de redesign pour Facebook avait essuyé les même critiques : c’est joli en théorie, avec des mannequins et des paysages grandioses, mais ce serait moins rose dans la vraie vie.

Il y a derrière cette critique une incompréhension de ce qui fait l’attrait des réseaux sociaux. On ne peut pas juger « la vraie vie » selon les critères esthétiques d’une publicité, parce que cette vie, c’est la mienne. Les photos que je vois passer dans mon fil Facebook sont toutes liées à mes contacts : ils apparaissent dessus ou ils étaient derrière la caméra. Au minimum ils les ont assez aimés pour les partager. Si je vois passer des dizaines de photos stupides de semi-inconnus, c’est un autre problème et c’est moi que ça regarde.

Je ne dis pas que ce nouveau service de Facebook est une idée géniale, ni que j’ai envie de voir l’écran de verrouillage de mon téléphone se remplir d’images de 9Gag ou de photos de soirée sans filtre anti-yeux rouges (argh !). La chose importante, c’est que ces images sont signifiantes pour moi. Le reste est une question de paramétrage : j’imagine qu’il y aura un minimum d’options de filtrage, comme actuellement sur Facebook.com.

Il y a évidemment une question de degré : on peut accepter un flot de contenu de qualité variable, tant que ça reste sur Facebook et pourtant refuser l’idée que ça envahisse tout votre téléphone. Mais chacun son truc. Il y a bien des manières d’être social et de le montrer. Si vous n’êtes pas du genre à chatter toute la journée ou à mettre des photographies de votre entourage en économiseur d’écran, vous n’êtes sans doute pas la cible de Home.


Message d’intérêt général

Je suis passé de Tumblr à WordPress. Je vous prie de m’excuser pour tout désagrément, bombardement dans vos RSS et manque de finition du site.