Ergonomie, Rails et Architecture de l'information web (2.0)

On se retrouve tous un jour ou l’autre confronté au problème de questions à réponses multiples et encore plus nombreuses, sans possibilités de filtrage préalable. Dans ce cas, la première solution qui vient à l’esprit est celle du menu déroulant à choix multiple, et elle peut sembler alléchante à plus d’un point de vue.

Grave erreur ! Il n’y a pas pire pour votre utilisateur que cette extension de notre bon vieux select, dont j’avais sérieusement remis la fiabilité en question il n’y a pas si longtemps que cela. Je me suis rendu compte à mes dépends que les menus déroulants à choix multiples étaient aux formulaires ce que le blink et les gifs animés étaient aux pages web des années 90 : une plaie.

On fait tous des conneries, et moi le premier. Confronté à des formulaires dans lesquels je rencontrais de nombreux champs à réponse multiple sans aucun contrôle de ma part sur leur nombre, j’ai mis du menu déroulant partout, persuadé de détenir la bonne méthode. Horreur, malheur, dirait la sorcière si elle était là, le truc s’avère épouvantable à utiliser.

• Un clic de souris à coté, et on perd toute sa sélection.
• La sélection de cases non adjacentes relève du défi olympique.
• Difficile à styler, on s’y perd facilement entre les réponses.

J’ai cherché un moment avant de trouver une solution satisfaisante vues les contraintes qui m’étaient imposées :

• Un nombre infini de réponses potentielles.
• Accessibilité totale, donc pas de javascript.
• Facilement personnalisable.

La solution

Pas besoin de chercher bien loin. Remonter à l’origine du problème et aux avantages apparents de la solution choisie devaient me permettre de prendre la bonne direction.
Dans un formulaire, la première chose à laquelle on pense quand il s’agit de réponses multiples, c’est “cases à cocher”. Malheureusement, celles-ci deviennent rapidement impossible à afficher au delà de quelques éléments. D’où l’utilisation du menu déroulant à choix multiple, dont l’ascenseur permet d’occuper un minimum de place, mais au détriment de l’utilisabilité.

Il me fallait donc combiner les avantages des cases à cocher et des menus déroulants à choix multiples, sans sacrifier à l’accessibilité :

• Espace à l’écran restreint.
• Réponses multiples.
• Nombre de réponses indéfini et potentiellement infini.

Pour cela, je commence par englober mes réponses dans une div dont je force la hauteur et à laquelle j’attribue la propriété CSS overflow-y : auto. Voilà pour la partie déroulante.

J’ajoute ensuite une série de label dans lesquels j’englobe ma case à cocher. Si je trouve ça sémantiquement moyen – le label désigne le champ de formulaire, ce dernier ne saurait donc y être inclus – c’est structurellement valide. J’applique ensuite à chacun de mes labels la propriété CSS display: block

Ce dernier point est très important. En effet, si l’id de la case à cocher et la propriété for= du label sont renseignées correctement, la sélection du champ quand je clique sur le label s’étend à toute la ligne. Pratique non ?

Il ne me reste qu’à mettre un peu de couleur une ligne sur deux pour bien différencier les réponses, et le tour est joué. Évidemment, le résultat présenté est tout sauf joli, mais je vous rappelle que mon sens artistique avoisine le zéro absolu.

Télécharger le code source de l’exemple.

Intéressante discussion la semaine dernière avec le responsable du service clientèle d’un fournisseur de télécommunications sur l’emploi fait par les utilisateurs des formulaires web de demande d’aide à la hotline.

En substance, il s’avère que, concernant les menus déroulants servant à qualifier les problèmes rencontrés par ses clients, cet opérateur m’a fourni les chiffres suivants :

• 90% choisissent la première option, quelle qu’elle soit.
• 5% choisissent l’option autres si elle est présente.
• 5% choisissent une option plus ou moins en rapport avec leur problème.

Cette constatation introduit deux problèmes évidents :

Les problèmes étant répartis entre les différentes équipes en fonction de leur typologie, un travail de requalification de l’affaire doit être effectué systématiquement avant traitement, avec une retransmission à l’équipe concernée. Outre l’allongement des délais de traitement, cela implique aussi une charge de travail supplémentaire, qui passe par l’analyse de diatribes rédigées dans un français généralement douteux par Madame Michu, dont je vous reparlerai très bientôt.

Vus ces chiffres, quel crédit accorder aux données émises via un menu déroulant, et par extension, par toute zone de formulaire à choix multiples ? Dès lors, on doit classer ces données en trois catégories :

• Celles qui impliquent une dépense ou un investissement du client, par exemple la durée d’un abonnement. On peut raisonnablement tabler sur la fiabilité d’une telle donnée puisqu’elle implique une variation du paiement à l’arrivée.
• Celles qui sont absolument indispensables au traitement du formulaire et qu’une intervention humaine ne peut permettre de recouper à partir d’autres renseignements.
• Les données purement statistiques.

Quant à notre opérateur, afin de mieux répartir le travail entre les équipes chargées des différentes typologies de problèmes, il a tout simplement décidé de générer ses menus déroulants dans un ordre aléatoire.