Un interrupteur paraît simple. Un petit commutateur qui bascule entre activé et désactivé. Pourtant, les interrupteurs déroutent les utilisateurs plus que presque tout autre élément de formulaire. Les gens hésitent. Ils ne savent pas si basculer l'interrupteur change quelque chose tout de suite ou attend un bouton d'envoi. Ils ne savent pas quel côté veut dire oui et quel côté veut dire non. Un seul interrupteur mal placé dans un formulaire peut faire chuter vos taux de remplissage. Le bon interrupteur au bon endroit devient invisible.
Prenez n'importe quel formulaire avec des interrupteurs et regardez ce que font vraiment les gens. Ils avancent lentement. Ils survolent. Ils reviennent vérifier ce que l'interrupteur contrôle. Ils cherchent un bouton d'envoi, car ils ne sont pas sûrs que le changement soit pris en compte. Ce ne sont pas des erreurs d'utilisateur. Ce sont des problèmes de design. Les interrupteurs ont un rôle précis dans les formulaires. Ils font une chose bien. Ils ne font pas tout. Savoir quand un interrupteur a sa place et quand il ne l'a pas fait la différence entre un formulaire fluide et un formulaire confus.
Le problème d'appeler interrupteur n'importe quoi
Le mot interrupteur a un sens précis. C'est un commutateur entre deux états opposés. Vous êtes dans l'état A ou dans l'état B. Rien entre les deux. Rien d'autre. Mais beaucoup de formulaires appellent interrupteurs leurs questions oui/non alors que ce n'en sont pas. Une question comme « Souhaitez-vous recevoir des e-mails promotionnels ? » n'est pas un interrupteur. C'est une question oui ou non qui a sa place dans un formulaire. Un vrai interrupteur, c'est « Activer le mode sombre ». Le commutateur change votre expérience tout de suite. Le formulaire n'a pas besoin d'un bouton d'envoi pour que le changement s'applique.
Cette confusion crée une vraie friction. Placez un vrai interrupteur au milieu d'un formulaire plein de champs de texte et de boutons radio. Les utilisateurs ne sauront pas si le changement s'applique immédiatement ou s'il faut encore cliquer sur envoyer. Ils peuvent basculer l'interrupteur, penser que rien ne s'est passé, le rebasculer, puis être déroutés quand le formulaire affiche l'état opposé de ce qu'ils ont choisi.
Quand un interrupteur a vraiment du sens dans un formulaire
Un interrupteur n'a sa place dans un formulaire que si deux conditions sont réunies. Premièrement, le choix doit être binaire. Exactement deux états. Oui ou non. Activé ou désactivé. Rien d'autre. Deuxièmement, le choix doit prendre effet immédiatement, sans bouton d'envoi. L'utilisateur bascule l'interrupteur et l'état change aussitôt.
Dans la plupart des formulaires, aucune de ces deux conditions n'est vraie. La plupart des formulaires exigent un bouton d'envoi à la fin. Tous les changements s'appliquent d'un coup au clic sur envoyer. Mettre un interrupteur dans un formulaire qui a un bouton d'envoi crée de la confusion, car l'interrupteur semble devoir agir tout de suite, alors que tout le formulaire attend l'envoi.
Les interrupteurs fonctionnent dans les réglages. Ils fonctionnent dans les tableaux de bord de compte où chaque changement est appliqué en direct. Ils ne fonctionnent pas dans les formulaires classiques où l'on collecte des informations et où l'on demande d'envoyer à la fin. Si votre formulaire a un bouton d'envoi, vos questions oui/non doivent utiliser des cases à cocher ou des boutons radio plutôt que des interrupteurs.
Interrupteur ou case à cocher dans les champs de formulaire
La différence visuelle entre un interrupteur et une case à cocher est évidente. Mais c'est la différence de fonctionnement qui compte. Une case à cocher est un contrôle de formulaire qui attend l'envoi. Vous pouvez cocher plusieurs cases. Vous pouvez les décocher. Rien ne se passe avant l'envoi du formulaire. Un interrupteur est un commutateur d'état qui change souvent les choses immédiatement. Le formulaire n'a pas besoin d'être envoyé pour que le changement s'applique.
C'est pourquoi les recherches en ergonomie web montrent que les utilisateurs sont déroutés quand on mélange interrupteurs et cases à cocher dans le même formulaire. Les interrupteurs qui agissent tout de suite se ressentent de façon totalement différente des cases qui attendent. Les mélanger envoie des signaux contradictoires sur ce qui se passe quand on interagit avec le formulaire.
Si vous avez une question binaire oui/non dans un formulaire qui exige un bouton d'envoi, utilisez une case à cocher ou une paire de boutons radio. Les deux sont familiers. Les deux ont du sens dans un formulaire. Les utilisateurs comprennent qu'ils choisissent quelque chose qui sera envoyé, pas qu'ils déclenchent un changement immédiat.
Quand utiliser des boutons radio plutôt qu'un interrupteur
Un interrupteur ne montre qu'un état à la fois. Vous voyez activé ou désactivé. Mais parfois, les utilisateurs doivent voir les deux options en même temps pour décider. C'est là que les boutons radio fonctionnent mieux qu'un interrupteur.
Exemple : un formulaire demande « Quelle offre voulez-vous ? » avec les options « Basique » ou « Premium ». Vous pourriez utiliser un interrupteur pour passer de l'une à l'autre. Mais l'utilisateur ne peut pas voir les deux offres côte à côte. Il doit basculer l'interrupteur pour voir l'autre option. Une paire de boutons radio montre les deux options en même temps. L'utilisateur voit Basique à gauche et Premium à droite. Il peut comparer et choisir sans rien basculer.
Chaque fois que vous voulez que les utilisateurs comparent deux options ou voient les deux choix, utilisez des boutons radio. Chaque fois que l'interrupteur est le seul moyen de passer d'une option à l'autre et que les utilisateurs ne peuvent pas les comparer, les boutons radio sont probablement un meilleur choix.
Comment libeller un interrupteur pour qu'on comprenne ce qu'il fait
Le plus gros problème des interrupteurs, c'est le libellé. Beaucoup de designers n'utilisent que « Activé » et « Désactivé ». Mais activé pour quoi ? L'utilisateur doit deviner. Cela crée de l'hésitation.
Chaque interrupteur a besoin d'un libellé clair qui décrit ce qu'il contrôle. Pas « On/Off ». Plutôt « Activer le mode sombre », « Recevoir les notifications » ou « Afficher les options avancées ». Le libellé dit à l'utilisateur ce qui se passera s'il bascule le commutateur.
Le libellé doit être immédiatement visible et proche de l'interrupteur. Si le libellé est loin ou petit, les utilisateurs ne le relieront pas au commutateur. Ils le basculeront sans comprendre ce qu'ils changent.
Certains interrupteurs affichent les libellés activé et désactivé directement sur le commutateur. « Oui » d'un côté et « Non » de l'autre. Cela peut marcher si les libellés sont grands et clairs. Mais les tests montrent que les gens connaissent moins les interrupteurs oui/non que les interrupteurs on/off. Si vous utilisez des libellés oui/non, testez d'abord avec vos utilisateurs. En général, on/off est plus clair que oui/non pour les interrupteurs.
Le problème d'accessibilité des interrupteurs
Les interrupteurs posent de vrais problèmes aux utilisateurs de lecteurs d'écran. Un interrupteur visuel a du sens pour quelqu'un qui le voit. Il voit le commutateur glisser vers la droite et comprend qu'il est maintenant activé. Mais un utilisateur de lecteur d'écran n'entend rien. L'interrupteur n'a pas de libellé accessible. L'utilisateur ne peut pas savoir dans quel état il est. Il ne peut pas savoir ce qu'il contrôle.
Construire un interrupteur accessible demande un attribut ARIA appelé aria-pressed. Il indique aux lecteurs d'écran que l'élément est un bouton, enfoncé ou non. L'utilisateur du lecteur d'écran entend « Bouton interrupteur mode sombre, actuellement activé ». Sans aria-pressed, il n'entend rien d'utile.
Même avec la bonne configuration ARIA, les interrupteurs ne sont pas des contrôles de formulaire naturels. Une case à cocher est un contrôle de formulaire. Tout le monde sait ce que c'est. Un interrupteur est un contrôle sur mesure qui demande du JavaScript supplémentaire. C'est pourquoi beaucoup de formulaires accessibles évitent les interrupteurs et utilisent des cases à cocher. Les cases sont intégrées à tous les navigateurs. Elles fonctionnent avec les lecteurs d'écran. Elles n'exigent pas de JavaScript sur mesure. Elles fonctionnent, tout simplement.
Contraste des couleurs et indicateurs visuels pour les états
Un interrupteur qui ne s'appuie que sur la couleur pour montrer son état ne fonctionnera pas pour les personnes malvoyantes ou daltoniennes. Si l'interrupteur est vert quand il est activé et rouge quand il est désactivé, un utilisateur daltonien ne peut pas savoir dans quel état il est.
Chaque interrupteur a besoin de plusieurs signaux visuels. Couleur plus forme. Couleur plus position. Couleur plus texte. La forme de l'interrupteur doit changer de position quand il bascule. Le cercle à l'intérieur doit glisser de la gauche vers la droite. Le fond doit changer de couleur. Ensemble, ces trois signaux créent de la redondance pour que toute personne, quel que soit son trouble de la vision, puisse savoir si l'interrupteur est activé ou non.
Les libellés texte ajoutent une couche. Si l'interrupteur affiche un libellé on/off sur le commutateur lui-même, ce libellé renforce ce que montrent déjà la couleur et la position. C'est de la redondance visuelle. Ce n'est pas du superflu. C'est de l'accessibilité.
La taille compte pour les zones tactiles
Un interrupteur joli à 24 pixels de large devient un cauchemar sur mobile. L'utilisateur essaie de le toucher et touche autre chose. Ou il le touche plusieurs fois parce qu'il n'est pas sûr que le premier toucher ait été pris en compte.
La taille minimale de zone tactile pour tout élément interactif est de 44 x 44 pixels. Un interrupteur doit être au moins aussi grand. Plus grand, c'est mieux, surtout sur mobile. Un interrupteur de 60 pixels de large est bien plus facile à toucher avec précision qu'un interrupteur de 30 pixels.
Ce n'est pas une préférence de design. C'est une exigence d'accessibilité. Les utilisateurs à la dextérité limitée, avec des tremblements, ou simplement avec de gros doigts sur de petits écrans ont besoin d'interrupteurs assez grands pour les toucher de façon fiable.
Ne mélangez pas interrupteurs et bouton d'envoi
C'est la plus grosse erreur. Un formulaire avec des champs de texte, des listes déroulantes et d'autres champs classiques a un bouton d'envoi en bas. Tous les changements s'appliquent au clic sur envoyer. Mais on ajoute un interrupteur, conçu pour agir tout de suite sans envoi. Le modèle mental de l'utilisateur se brise. Il s'attend à ce que l'interrupteur attende l'envoi comme les cases à cocher. Mais l'interrupteur change immédiatement. Il pense avoir fait une erreur. Il le rebascule. Chaos.
Si vous avez un formulaire avec un bouton d'envoi, n'utilisez pas d'interrupteurs. Utilisez des cases à cocher pour les questions oui/non. Tous les changements du formulaire s'appliqueront ensemble au clic sur envoyer. Le formulaire est cohérent. L'utilisateur comprend le modèle.
Les interrupteurs ont leur place dans les tableaux de bord, les panneaux de réglages et les endroits où chaque interaction est immédiate. Ils n'ont pas leur place dans les formulaires qui exigent un envoi.
Comment WEMASY gère les interrupteurs dans les formulaires
Le créateur de formulaires de WEMASY propose les interrupteurs comme option de champ. Si vous choisissez d'en utiliser un, le créateur exige un libellé clair. L'interrupteur est assez grand pour le toucher. Il inclut les bons attributs ARIA pour l'accessibilité. Le créateur de formulaires vous avertit aussi si vous ajoutez un interrupteur à un formulaire qui contient d'autres types de champs et un bouton d'envoi. Cet avertissement a une raison. Il repère un vrai problème d'utilisabilité. Si vous le voyez, passez plutôt à des cases à cocher ou des boutons radio. Vos utilisateurs vous en remercieront.