i

Je suis webdev à mes heures. Une partie du boulot consiste à savoir quels éléments utiliser dans l’interface des pages web pour avoir une interaction simple entre l’humain et la machine.

Pour une action « A », est-ce qu’il vaut mieux :

  • utiliser une interface style « menu » ?
  • utiliser une interface style « champ de texte » ?
  • utiliser une interface style « bouton » ?
  • ne pas proposer l’option ?

Tous les développeurs d’interface graphique font face à ça.

Exemples d’interfaces et comment choisir la bonne

Parfois, les choix sont simples. Par exemple, pour proposer de choisir un pseudo, il serait malvenu de proposer 15 menus déroulants de A à Z où l’utilisateur choisit son nom :

i
Cela serait la galère, non ? Oui, on est d’accord.

Maintenant, imaginez, vous avez question : « Que voulez-vous sur votre sandwich ? »

Lequel de ces sélecteurs est plus pratique :

i
i
Évidemment, il s’agit du second. Pourquoi ? Parce qu’il reflète la vraie vie. Dans une sandwicherie, un dialogue se passerait typiquement comme ça. Prenez l’exemple de chaîne « subway », où ça se passe exactement de cette façon :

« je vous met du fromage ?
— oui
— de la salade ?
— oui
— du jambon ?
— non merci
— du beurre ?
— non merci »

Il est donc normal qu’on fasse une interface qui retranscrive tout ça. L’interface humain-machine (IHM) doit idéalement refléter une interaction humain-humain.

Laissez-moi redire ça : une interface humain-machine n’est bien faite que si elle reflète une interaction naturelle entre deux personnes. Autrement, votre interface peut-être considérée comme globalement merdique. Point.

À l’inverse maintenant, s’il n’était pas possible de combiner les ingrédients, mais qu’on était limité à un choix unique, on aurait eu le dialogue suivant :

« je vous met du fromage, de la salade, du jambon, ou bien du beurre ?
— du fromage, s’il vous plaît ! »

… et dans ce cas, l’élément d’interface appropriée aurait été le menu déroulant à choix unique (ou bien une interface à bouton « radio »), mais sûrement pas les cases à cocher qui sont — par nature — à choix multiple.

Ça peut sembler simple, tout ça. Probablement trop. Pourtant, créer des interfaces permettant une expérience utilisateur convenable, c’est un métier, et ce n’est pas pour rien.

Dans les faits, c’est dingue comme il existe des cas d’interfaces tellement pourries qu’on se demande ce qui est passé par la tête de leur concepteurs… et dans celui des managers qui ont embauché ces personnes, et aussi dans celui des chefs de projets qui vont validé ça au cours de réunions « café-croissants-cravates »

Cas d’une interface limitée par contrainte

Parfois, les limitations techniques empêchent de prendre l’interface approprié et on doit faire au mieux.

Ainsi, une guirlande de noël « RGB » qui n’a qu’un seul bouton poussoir, propose les combinaisons « R », « G », « B », « RG », « RB », « GB », « RGB ». Cela correspond à une interface style « menu déroulant » cyclique, en bouclant sur toute les possibilités avant de revenir à la première. À l’utilisateur de s’arrêter à la combinaison qu’il souhaite.

Sur la guirlande avait eu un petit écran tactile pour choisir, il aurait pu proposer des cases à cocher pour permettre de cocher/décocher les couleurs voulues.

Ici, évidemment, on ne va pas mettre un écran tactile sur un câble de guirlande. Donc on fait au mieux.

Sur un appareil plus gros par contre, où l’on n’est pas limité à un seul bouton et qu’on peut virtuellement en mettre autant qu’on veut, on doit en mettre autant qu’il en faut, ni plus, ni moins.

Dans les exemples qui suivent, ce principe n’est pas respecté.

L’interface du système de chauffage d’une voiture

Le sélecteur de chauffage dans sa voiture permet de choisir où l’on envoie l’air chaud (ou froid) :

  • les vitres (désembuage)
  • le haut de l’habitacle
  • les pieds

Et l’on a donc trois boutons bien séparés pour choisir :

  • vitres : on/off
  • haut : on/off
  • pieds : on/off

Imaginez un peu la galère en revanche si on avait un sélecteur circulaire qui boucle entre « haut », « vitres », « haut + vitres », « pieds + vitres », « vitres + haut + pied », etc..

Comme ça :

Interface chauffage voiture.
Heu… mais c’est ce que font toutes les voitures !

Et oui, et je trouve que c’est du gros n’importe quoi.

Comment faire si je veux les vitres et le haut ? On peut pas.
Par contre, je peux avoir les vitres et les pieds. C’est à rien n’y comprendre.

Va-t-on me faire croire que ce n’est pas possible — techniquement — de faire 3 boutons on/off pour choisir où envoyer l’air ? Surtout dans les voitures actuelles qui ont des climatisations bi-, tri- voire quadri-zone, où l’on peut envoyer l’air chaud à gauche, l’air froid à droite, ou vice-versa et la même chose à l’arrière au gré de chacun des passagers.

Je ne connais pas une seule @#%µ& de voiture qui propose une interface correcte pour ce système.

La mienne, qui date de 2020, et qui a plus d’options que je n’utilise, a ce style de sélecteur merdique ! Pire, il s’agit même d’un bouton tactile cyclique qui empêche de voir où on en est dans la boucle et où les autres sélecteurs — clim, désembuage auto, bi-zone — entrent en conflit ou réinitialisent ce premier sélecteur.

C’est absolument ridicule, mais ce n’est pas un cas isolé.

L’interface des fours électriques

Dans ma cuisine j’ai un four électrique avec une grille en haut, une grille en bas et un ventilateur pour faire circuler la chaleur.
Pensez-vous qu’ils auraient fait trois boutons ?

  • haut : on/off
  • bas : on/off
  • ventilateur : on/off

Bien-sûr que non :

Interface bullshit de four.
Et je passe sous silence les interfaces abominables des fours à micro-ondes avec « réchauffer », « cuisson », « décongélation », et tout un tas de pré-réglages à la con qui ne suffisent qu’à 0,3 % des cas et qui ne fonctionne que 5 % du temps.

En règle général, pour ce genre d’appareil, on devrait se contenter de deux choses :

  • la puissance
  • la durée

La chauffe d’un plat est conditionné par l’énergie thermique qu’elle reçoit de l’appareil.

Or vous savez-quoi ? L’énergie est le produit de la puissance par la durée d’exposition à cette puissance : E = W×t.
Deux boutons suffisent donc pour un four à micro-ondes, un four, une chauffe biberon, une plaque chauffante…

Les machines à laver

Et sur les machines à laver ?

Pourquoi devrait-il être simple de constituer son propre programme avec pré-lavage (oui/non), lavage (oui/non), essorage (oui/non) ?

Est-il écrit quelque part qu’il doit y avoir systématiquement un bouton circulaire avec N choix parmi toutes les possibilités, qui plus est sans ordre logique, et de surcroît où il en manque toujours une ou deux ?

Interface machine à laver.

Là aussi, de façon général, réservez les boutons circulaires à un choix qui permette de graduellement changer un paramètre : température, vitesse d’essorage… N’utilisez pas ça pour des options décorrélées entre-elles.

ÉDIT : quelques autres problèmes d’interface

Dans ma Hyundai Ioniq, il y a une multitude d’options, mais tous ne sont pas configurables au même endroit.

Pour ma part, je pense qu’il y a plusieurs types de fonctions :

  • les options de préférences, accessibles très rarement et réglable dans les écrans tactiles, quand on est arrêté. Pas besoin d’un bouton physique dédié pour cela, ce qui surchargerait l’interface. Ce ne sont pas options à changer souvent. Exemple : le réglage de la luminosité de l’interface, de la position des sièges.
  • les options qu’on bidouille tout le temps selon la situation : chauffage, volume radio… Au même titre que les clignotant ou l’essuie-glace, ces boutons doivent être accessibles rapidement et à tout moment.
  • les options occasionnels (activation ou non du radar de recul, de la caméra, de l’assistance de maintient de voie). Je ne pense que pas qu’il y ait besoin d’un bouton physique pour ça, mais pouvoir y accéder en roulant est essentiels, donc via des menus dans le système d’infotainment me semble utile.

Dans la Hyundai, tout est mélangé. Certains boutons physiques ne servent jamais. Pire, l’assistance de maintient de voie est accessible via un bouton ET via les menus.

Aussi, les boutons sont en on/off. Normalement leur état est enregistré quand on éteint la voiture. Certains oui. D’autres non, comme le auto-hold du frein. C’est incompréhensible. Ça c’est typiquement l’option qui devrait être dans la catégorie « accessible très rarement » : c’est une préférence de l’utilisateur, pas une option qu’on change tout le temps.
De même que l’assistance au maintient de voie et le détecteur d’angle mort : pas besoin de boutons physique pour ça.

Tesla la bien compris : tout est dans le système d’infotainment, et dans deux sections : les fonctions accessibles très vite, et les options de préférences. Pas de mélange.

Et, toujours dans la Hyundai, je ne parle pas des la disposition des boutons : il y en a au volant, dans le compteur (menus virtuels), sur la portière, sur la console centrale, autour du levier de vitesses, en bas à gauche du volant, en bas à gauche du volant mais un peu plus bas… Y en a partout. C’est pauvrement étudié.

Autres liens