À force de naviguer sur Internet, je suis certain que vous avez déjà croisé les principaux contrôles de formulaire existant.
Il y a par exemple :
Par exemple, utilisons deux boutons radios pour répondre à cette phrase :
Pourquoi n'est-ce pas une bonne solution ?
Bon, je l'admets, mon exemple n'est pas des plus convaincant (bien que je sois réellement un ange :p) car le fait de décocher la case ne fait pas de moi un démon. J'aurai pu choisir quelque chose qui ait un sens à la fois lorsque l'on utilise un bouton radio ou une case à cocher comme :
De ce que j'ai expliqué plus haut, la case à cocher a l'avantage d'être un seul et unique bouton. Activable et désactivable sans bouger la souris. L'inconvénient est que l'explication n'est pas aussi claire que lorsque l'on a deux choix avec deux boutons radios ayant chacun une étiquette.
J'ai donc cherché une solution pour pouvoir relier le meilleur des deux mondes, à savoir un seul et unique contrôle, mais deux choix possible. Comment me direz-vous ? J'ai décidé de nommer cela le commutateur (switch, en anglais) parce que ça me fait penser aux commutateurs pour allumer les lumières dans mon appartement. Il y a un seul bouton et en fonction de l'endroit où vous appuyez, soit il bascule sur On, soit il bascule sur Off. De ce fait, on a un comportement rigoureusement identique à celui attendu : un bouton, deux choix.
Mais ce genre de contrôle n'existe pas en HTML. Pour l'utiliser, il faut donc le créer. Pour ce faire, il suffit d'un peu de javascript, de deux images et d'une case à cocher pour :
Pour voir le fonctionnement réel, je vous invite à visiter cette page d'exemple.
Si vous souhaitez reproduire ceci, téléchargez ce javascript et ces deux images. Il suffit ensuite de créer dans une page web (où vous avez lié le javascript) un contrôle de type checkbox (une case à cocher) avec la classe switch.
Il suffit ensuite de récupérer l'état de la case à cocher. Si la case est cochée, c'est que j'ai décidé d'être un ange, si elle ne l'est pas, c'est que j'ai décidé d'être un démon. Il est important de comprendre qu'il y a une différence entre décider d'être un démon (cas du commutateur où la case à cocher est décochée) et décider de ne pas être un ange (cas de la case à cocher standard où la case à cocher est décochée).
Notez que si cela fonctionne très bien avec Firefox et Safari (et Nokia N95), ce script n'est pas compatible IE ni Opera. Si vous avez des suggestions à faire ou à apporter, n'hésitez pas (et n'oubliez pas de trackbacker cette note pour avoir une sorte d'index des améliorations).
Il s'agit juste d'une idée. Ce contrôle de formulaire n'a pas forcément sa place à chaque fois, mais je pense qu'il est à privilégier lorsqu'on est face à deux choix, ou qu'une case à cocher n'est pas assez explicite. Je n'ai pas encore vu ce genre de contrôle sur Internet, mais Apple l'utilise déjà dans l'iPhone (et donc iPod touch) donc je pense que c'est une idée à explorer et pourquoi pas adopter.
Màj : Beaucoup sont sceptiques quant à la nécessité ou non d'un tel contrôle. Je reste persuadé qu'il a sa place. J'ai d'ailleurs trouvé un contrôle de ce type dans Pages d'Apple, qui a compris l'intérêt pour la simplification de l'interface utilisateur. Je ne sais pas si on verra ce type de contrôle dans Windows ou Linux, trop figés sur ce type d'éléments (Apple change d'interfaces comme de chemises) pour pouvoir essayer d'innover et d'aporter des solutions visant à simplifier le quotidien des utilisateurs.
Je le répète, pour ceux qui n'auraient pas compris, je parle là d'un concept, pas encore d'un application (il est beaucoup trop tôt !). Il y a encore toute une réflexion à faire, notament en terme d'accessibilité (les étiquettes doivent être cliquables, que se passe-t-il lorsque je clique sur une étiquette, etc...) qu'Apple n'a pas encore fait (bien que le commutateur soit déjà implémenté). C'est à venir (je l'espère), mais comme je l'ai dit, c'est juste le début, c'est juste une idée, juste un concept.
Il y a par exemple :
- La case à cocher (checkbox) : Vous avez plusieurs réponses et plusieurs sont possibles à la fois (exemple: Où aimez-vous passer vos vacances ?)
- Le bouton radio : Vous avez plusieurs réponses, mais une seule n'est possible à la fois (exemple : Êtes-vous marié, célibataire, veuf ?)
- Le champs texte : Vous avez simplement à entrer un text court (exemple : Quel est votre nom ?)
- La zone de texte : Vous avez à entrer un texte long (exemple : Décrivez en 300 mots vos dernières vacances)
- Le bouton : Il suffit de cliquer et une action se produit (quand ça marche :).
Par exemple, utilisons deux boutons radios pour répondre à cette phrase :
Je veux être
Pourquoi n'est-ce pas une bonne solution ?
- Le premier point est que si la réponse "un ange" est sélectionné par défaut, je dois cliquer sur l'autre bouton radio (celui de "un démon") pour changer de réponse. Si je change d'avis, je dois retourner sur le premier bouton radio pour recliquer sur celui ayant pour étiquette "un ange". Comme ça, ça n'a l'air de rien, mais c'est une perte de temps considérable, surtout sur un terminal où la navigation se fait à l'aide d'un clavier (comme un téléphone mobile).
- Un autre point, plus contestable celui-ci, mais à prendre en considération quand même, est que l'utilisateur peut s'interroger sur l'action exécutée par un clic sur le bouton radio entre "un ange" et "un démon". Certes, on pourrait tracer un trait en CSS, rajouter des espaces entre les deux choix. Ce problème ne se pose généralement pas lorsque l'on a plus de trois choix, car généralement on a tendance à placer les choix les uns en dessous des autres plutôt qu'à la suite les uns des autres, ce qui est faisable lorsqu'il n'y a que deux choix, en raison de la place disponible.
- Supposons qu'il y ait une liste de choix uniques à deux choix (par exemple : Quel est votre sexe ? Frites ou Nuggets ? Télé ou Radio ? etc..), il faudrait jongler avec les deux colonnes de choix. Ce n'est franchement pas le plus agréable, d'autant plus que cela nécessite de bouger la souris (et sur un terminal sans souris, ça augmente considérablement les actions à effectuer).
Je suis
Bon, je l'admets, mon exemple n'est pas des plus convaincant (bien que je sois réellement un ange :p) car le fait de décocher la case ne fait pas de moi un démon. J'aurai pu choisir quelque chose qui ait un sens à la fois lorsque l'on utilise un bouton radio ou une case à cocher comme :
- Activer et désactiver pour les boutons radios
- Activer pour la case à cocher
De ce que j'ai expliqué plus haut, la case à cocher a l'avantage d'être un seul et unique bouton. Activable et désactivable sans bouger la souris. L'inconvénient est que l'explication n'est pas aussi claire que lorsque l'on a deux choix avec deux boutons radios ayant chacun une étiquette.
J'ai donc cherché une solution pour pouvoir relier le meilleur des deux mondes, à savoir un seul et unique contrôle, mais deux choix possible. Comment me direz-vous ? J'ai décidé de nommer cela le commutateur (switch, en anglais) parce que ça me fait penser aux commutateurs pour allumer les lumières dans mon appartement. Il y a un seul bouton et en fonction de l'endroit où vous appuyez, soit il bascule sur On, soit il bascule sur Off. De ce fait, on a un comportement rigoureusement identique à celui attendu : un bouton, deux choix.
Mais ce genre de contrôle n'existe pas en HTML. Pour l'utiliser, il faut donc le créer. Pour ce faire, il suffit d'un peu de javascript, de deux images et d'une case à cocher pour :
- Afficher une image A lorsque la case est cochée
- Afficher une image B lorsque la case est décochée
- Masquer la case à cocher
Pour voir le fonctionnement réel, je vous invite à visiter cette page d'exemple.Si vous souhaitez reproduire ceci, téléchargez ce javascript et ces deux images. Il suffit ensuite de créer dans une page web (où vous avez lié le javascript) un contrôle de type checkbox (une case à cocher) avec la classe switch.
Il suffit ensuite de récupérer l'état de la case à cocher. Si la case est cochée, c'est que j'ai décidé d'être un ange, si elle ne l'est pas, c'est que j'ai décidé d'être un démon. Il est important de comprendre qu'il y a une différence entre décider d'être un démon (cas du commutateur où la case à cocher est décochée) et décider de ne pas être un ange (cas de la case à cocher standard où la case à cocher est décochée).
Notez que si cela fonctionne très bien avec Firefox et Safari (et Nokia N95), ce script n'est pas compatible IE ni Opera. Si vous avez des suggestions à faire ou à apporter, n'hésitez pas (et n'oubliez pas de trackbacker cette note pour avoir une sorte d'index des améliorations).
Il s'agit juste d'une idée. Ce contrôle de formulaire n'a pas forcément sa place à chaque fois, mais je pense qu'il est à privilégier lorsqu'on est face à deux choix, ou qu'une case à cocher n'est pas assez explicite. Je n'ai pas encore vu ce genre de contrôle sur Internet, mais Apple l'utilise déjà dans l'iPhone (et donc iPod touch) donc je pense que c'est une idée à explorer et pourquoi pas adopter.
Màj : Beaucoup sont sceptiques quant à la nécessité ou non d'un tel contrôle. Je reste persuadé qu'il a sa place. J'ai d'ailleurs trouvé un contrôle de ce type dans Pages d'Apple, qui a compris l'intérêt pour la simplification de l'interface utilisateur. Je ne sais pas si on verra ce type de contrôle dans Windows ou Linux, trop figés sur ce type d'éléments (Apple change d'interfaces comme de chemises) pour pouvoir essayer d'innover et d'aporter des solutions visant à simplifier le quotidien des utilisateurs.
Je le répète, pour ceux qui n'auraient pas compris, je parle là d'un concept, pas encore d'un application (il est beaucoup trop tôt !). Il y a encore toute une réflexion à faire, notament en terme d'accessibilité (les étiquettes doivent être cliquables, que se passe-t-il lorsque je clique sur une étiquette, etc...) qu'Apple n'a pas encore fait (bien que le commutateur soit déjà implémenté). C'est à venir (je l'espère), mais comme je l'ai dit, c'est juste le début, c'est juste une idée, juste un concept.
Le problème c'est qu'on garde l'habitude de ce déplacer sur l'emplacement des petits cercles.
Et c'est peut être bien pour les téléphones, mais les textes non cliquables à la souris c'est pas top!!
Trève de bavardage, si un système comme çà existe il sera implémanté dans IE en 2035 et comme IE reste majoritaire :p
Mais réflexion intéressante, reste à la proposer au W3C
Regarde plutôt l'idée, car mon implémentation est loin d'être parfaite. Il faudrait que le commutateur commute lorsque l'on clique sur l'un des deux label. Et puis je ne pense pas que ce systeme ne se limite qu'aux navigateur, il a sa place dans les applications aussi, tu ne penses pas ?
Bon cas d'étude, mais je ne suis pas convaincu par l'idée de ce nouveau bouton. Je pense qu'en définitive on se retrouve comme si on avait 2 boutons radios. Par contre l'idée d'orienter le choix de l'utilisateur grâce à une case à cocher est une excellente chose, mais réaliste que pour un choix binaire, c'est à dire oui/non, et plus difficile à appliquer pour un choix du genre homme/femme.
Pourquoi un choix du genre homme/femme ne peut-il pas être considéré comme un choix binaire ?
Justement, pourquoi avoir 2 contrôles (les boutons radio) quand on peut en avoir qu'un (la case à cocher déguisée en switch) ?
Ça simplifie pas mal les choses quand même.
Quand je disais choix binaire, je pensais surtout à la l'interprétation de la case à cocher. Par exemple dans la zone commentaire d'un blog on a :
O Conserver mes infos personnelles
Si on coche ça enregistre, sinon rien ne se passe. Pour moi c'est un choix binaire oui/non. Par contre je vois mal dans un formulaire pour décrire le sexe d'une personne :
O Homme
La personne risque de pas bien comprendre, et si c'est une femme, pourquoi n'aurait-elle pas le choix de son sexe proposé dans le formulaire. Pour moi ce n'est pas un choix binaire, mais juste un choix avec 2 possibilités où il est préférable d'indiquer chaque proposition pour une meilleure compréhension.
Oui c'est ce que je dis. Le switch permet d'avoir un choix avec 2 possibilités mais un seul contrôle à activer. Et c'est tout autant applicable avec le choix binaire. Par exemple :
Conservation des infos personnelles activée (o ) suspendue
Je suis un homme ( o) une femme.
J'ai vu qu'il y avait un contrôle de ce type dans Pages 08, je ferai un screenshot dans la soirée.
Personnellement, même si je n'ai pas le temps de développer car je dois partir, je trouve ton idée très interessante Stéphane, et honnêtement, ça vaudrait le coup d'être approfondie.
Je trouve ça beaucoup plus "agréable" et plus pratique pour l'utilisateur.
De plus, ça fait très "esprit mac", ce qui séduit de plus en plus de monde je pense.
A bon entendeur.
Bonne continuation.
En effet ce genre de contrôle peut à mon avis simplifier la vie de l'utilisateur dans certains cas.
Apple l'utilise en effet dans Pages '08 comme Stéphane l'a fait remarquer (je l'ai repéré pour activer ou non le suivi des modifications) et également dans les dernières beta de Leopard (pour activer ou non Time Machine) en plus des nombreux contrôles de l'iPhone et de l'iPod Touch...
Ces contrôles méritent qu'on s'y arrête un peu et qu'on y réfléchisse...
Moi je trouve que tu te tortures l'esprit je ne vois pas trop en quoi ça simplifie, au final on a toujours le choix entre deux "états" et pour changer d'un état à un autre il faut un clic.
Le seul point positif c'est que c'est plus beau mais si c'est plus compatible ie :/
Je veux bien comprendre en quoi ça serait mieux pour l'univers :)
Oui mais pour chanter l'état tu n'as pas déplacer ton curseur.
Je n'ai pas dit que ça serait mieux pour l'univers, mais c'est juste une pensée que j'ai eu, donc j'ai cherché à développer. Voilà :)
Ok c'est plus beau en tout cas :)