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

10 commentaires

gravatar
Breizh a dit :

Pendant ce temps, chez Citroën, le sélecteur ressemble à ça : https://web.archive.org/web/20210620202604/https://i.ebayimg.com/images/g/c3EAAOSwC~tZiz2S/s-l1600.jpg

J’allais dire « nan mais les voitures qui ont du bizone et autre clim’ bien chiadée ont pas ce genre de connerie » sauf que la tienne si, visiblement… pour le coup je pense qu’à une époque ça déplaçait mécaniquement un sélecteur quelque part, et du coup ça avait du sens. Mais effectivement depuis qu’on est à l’électronique, ça n’en a plus. Continuer à le faire est ridicule.

Même chose pour les lave-linges, et les fours. Surtout que, si y’a une incompatibilité quelque part, il suffit de désactiver le bouton (c’est le cas de mon lave-linge. Le prélavage est une option, avec un bouton du coup, et le bouton fait rien quand certains modes sont sélectionnés). Je trouve pas le coup du lave-linge forcément absurde, parce que c’est comme un bouton radio, et qu’il est souvent juste fusionné température et programme (au lieu d’avoir un sélecteur à 5 option et un à 3 options, t’en as qu’un à 15 options, pourquoi pas tant qu’il est clair). En plus ça permet d’être sûr qu’un choix incompatible peut pas être fait (genre délicat à 90°C). Par contre faut pas faire plus. Genre prélavage ou non, vitesse d’essorage, etc, faut évidemment les séparer (notons encore que l’essorage peut être incompatible par rapport au programme (délicat et 1000rpm). Bref, sur le mien trop séparer les options serait pas pratique, parce que pleins de combinaisons seraient pas gérées et l’indiquer clairement à l’utilisateur serait impossible (pas d’écran).

Celui en exemple sur la photo est infâme par contre, en effet.

gravatar
Cyrille a dit :

Le bouton circulaire c'est du marketing (et aussi un emblème de notre époque) : donner l'illusion d'un vaste choix, donc de modernité, alors qu'on ne fait que tourner en rond.

gravatar
Balistic a dit :

Bonjour,
sur ma voiture, j'ai encore pire : un seul bouton poussoir "mode" qui cycle entre les différentes combinaisons vitre+haut+pieds. Donc impossible de savoir ce que sera la combinaison suivante avant d'avoir appuyé. Et bien sûr, la combinaison vitres+haut n'existe pas.
A force, je retiens par coeur l'ordre du cycle.

gravatar
machineàlaver a dit :

Je rajoute pour la machine à laver :
- temps
- température
- vitesse d'essorage.

(selon la qualité du tissu)

gravatar
Zuhlfain a dit :

Heureusement tous les appareils ne sont pas forcément si mal fichus !
La clim de ma voiture c'est du on/off sur les différentes positions + température et vitesse à part.
Ma machine à laver j'ai trois boutons : programme, température et essorage. Simple et efficace. Et si il y a incompatibilité c'est le programme qui prime (par exemple le programme fragile laine + essorage 1200 tr/min).
Pour la machine ce fut un de mes critères de choix ^^'

gravatar
Der Zeppel a dit :

Je vous lis depuis longtemps, sans jamais me manifester.
Mais c'est une sorte de révélation cet article : nos machines sont effectivement mal foutues.
Comme si nous nous étions résignés, et vous lire m'a fait réaliser que non, un autre monde ergonomique est possible !
Nous ne pouvons rien y faire dans l'immédiat mais j'ai espoir que cela change !
Vos remarques sont tout à fait pertinentes en tout cas :-)

PS : Merci pour la qualité du blog et ce malgré les sujets variés !

gravatar
John Doe a dit :

Pour la voiture et le bouton de ventilation, je crois que c'est une raison technique en amont sur les voitures dans les années 80 (ou avant?).
L'air du ventilateur était orienté par un volet d'abord vers la vitre avant, puis en baissant vers la tête du conducteur, puis en baissant encore vers les jambes.
Je suppose qu'ils ont gardé le système...

gravatar
John Doe a dit :

Et en matière de tableau de bord, je préfère celui de la BX version du début. :)

gravatar
man-x86 a dit :

Les sélecteurs rotatifs des lave-linges viennent de l'époque où c'était un système électro-mécanique avec un moteur synchrone qui faisait tourner lentement le sélecteur avec des cames et des contacts pour activer différentes parties du programme.

Par exemple on tourne le sélecteur sur "lavage délicat", mais on pourrait le tourner un cran plus tôt sur "lavage intensif" ou deux crans plus tôt sur "pré-lavage", ensuite le sélecteur tourne jusqu'à la position "rinçage", puis "essorage".
C'est la logique séquentielle du "programme", ensuite il y a un peu de logique combinatoire pour choisir la puissance de chauffe et la vitesse d'essorage, qui vont connecter des résistance et le moteur différemment.
Il y a même des parties asynchrones avec des capteurs de niveau à flotteur/contact et des thermo-contacts pour être sûr que ça fonctionne correctement.

Les lave-linges "modernes" ont gardé le sélecteur rotatif comme vestige de la même façon que la disquette sert d'icone de sauvegarde.

gravatar
John DoDo a dit :

@Man-X86
Exactement!
Mon lave linge (années 2000) règle les lavages de cette manière.
S'y ajoute 3 boutons: marche/arrêt, lavage court (accélère la rotation du système électro-mécanique?), rinçage plus (diminue la vitesse du système électro-mécanique lors des étapes rinçage?).
Gros avantage de ce système: on peut le brancher sur une prise avec programmateur mécanique (NB: un genre de prise avec un genre de minuteur 24h sur lequel on pousse de petits interrupteurs pour dire à quels moments la prise délivre du courant).
A l'inverse, mon sèche linge, un pur produit de l'électronique moderne, est incompatible avec une telle prise programmateur: couper le courant réinitialise le programme choisi.
Ou comment la modernité n'est pas synonyme d'efficacité.

PS: oui, il existe des lave-linge/ sèches linges/ électroménager avec programmateurs intégré. Mais en général le fabriquant vous le fait payer en plus par rapport au modèle de base. Cher. Une prise à programmateur mécanique coûte max 5€.
PPS: ce genre de prise à programmateur mécanique me sert aussi à lancer le café 30min avant mon réveil. Elle permet de manière générale de rendre tout appareil électrique pas trop truffé d'électronique "programmable". On peut même générer des allumages aléatoires en en branchant deux en série (pour simuler une présence domestique par exemple).


Votre commentaire sera visible après validation par le webmaster.