L'étiquette de case à cocher doit-elle être conçue comme un lien d'ancrage?
J'ai eu du mal à trouver une sorte d'argument qui soutienne l'une de mes théories, donc je voulais voir ce que la communauté UX en général en pensait.
Scénario
J'ai une boutique en ligne. Lorsque vous affichez une vue de liste de produits, des cases à cocher et des étiquettes vous sont présentées pour filtrer les produits visibles.
Cliquer sur l'étiquette, comme une donnée, cocherait ou décocherait la case.
Argument pour les styliser en tant que liens
Les étiquettes sont cliquables et exécutent une action lorsque vous cliquez dessus. Nous devons faire en sorte que l'étiquette soit cliquable, sinon les gens ne sauront pas qu'ils peuvent le faire.
Argument contre leur dénomination en tant que liens
L'étiquette doit être cliquable, pour en faciliter l'utilisation et pour agrandir la cible de la case à cocher, mais finalement la case à cocher est l'élément avec lequel l'utilisateur interagit, pas le lien.
Donc, faire ressembler une étiquette à n'importe quel autre lien hypertexte (souligné en bleu) pourrait induire l'utilisateur en erreur en pensant que cliquer sur ce lien pourrait le parcourir ailleurs.
Je voudrais cependant faire en sorte que l'étiquette affiche le curseur du pointeur lorsqu'elle est survolée, car c'est une manière non intrusive d'indiquer que quelque chose peut être cliqué.
Autres sites
Donc, en regardant d'autres sites Web avec des filtres par menus, il est assez dommageable que ces sites affichent les étiquettes sous forme de liens. Cela ne rend pas la décision correcte (car elles pourraient être déconseillées).
www.asos.com
www.sportsdirect.com
Amazon, cependant, fait apparaître les étiquettes de filtre comme des liens lors du survol, mais n'utilise pas leur couleur de lien par défaut. Ceci est cependant probablement fait pour montrer la hiérarchie de leurs liens primaires et secondaires.
Si oui pour les cases à cocher, qu'en est-il des autres éléments du formulaire?
En fonction des réponses, je lancerai un autre argument contre les liens de case à cocher. Si nous disons que les étiquettes de cases à cocher doivent être des liens, ce même argument s'applique-t-il aux étiquettes des éléments, des éléments, etc.?
Le comportement attendu et la pratique courante consistent à rendre l’étiquette cliquable, puis à cocher la case. Vous êtes parfaitement d'accord avec ça. Cependant, les utilisateurs s'attendent à ce comportement sans souligner l'étiquette.
Faire passer le curseur en pointeur est une indication suffisante pour l'utilisateur que l'étiquette sélectionnera également la case. J'ai déjà testé A/B dans le passé et vu des utilisateurs essayer de cliquer sur l'étiquette en anticipant pour cocher la case. (C'était aussi une très large démographie)
Je pense que les arguments contre sont plus convaincants. En général, en voyant un mot (par défaut) de style hyperlien, l'utilisateur s'attend à naviguer vers une page liée à ce mot.
Vous pouvez remplacer le style de lien hypertexte pour le souligner simplement sans changement de couleur, mais personnellement, je pense qu'il est si courant de le laisser tel quel, que vous êtes assez en sécurité là-bas.
Étiquettes cliquables
Les étiquettes des cases à cocher doivent être cliquables. Le Nielsen Norman Group en parle dans son guide sur l'utilisation des cases à cocher et des groupes radio .
Laissez les utilisateurs sélectionner une option en cliquant sur le bouton/la boîte lui-même ou sur son étiquette: une cible plus grande est plus rapide à cliquer selon Fitts's Loi . Dans les formulaires HTML, vous pouvez facilement y parvenir en codant chaque étiquette avec des éléments , comme je l'ai fait pour l'exemple avec les boutons radio horizontaux ci-dessus (pour sélectionner cette option, cliquez sur le mot "Quatre") .
Étiquettes de cases à cocher conçues comme des liens d'ancrage
Aucundessites mentionnés dans votre question ont leurs étiquettes de case à cocher de filtre stylé comme liens traditionnels par default comme vous l'avez proposé. Les trois ont des effets de survol. En survolant Amazon change la couleur de l'étiquette, Asos souligne l'étiquette et SportsDirect fait les deux. Je dirais que ces effets permettent à l'utilisateur de différencier le filtre actuellement sélectionné de tous les autres. Ceci est important car les filtres sont généralement affichés en petites polices et donc la zone cliquable serait minimale. Cliquer sur le mauvais filtre sur le site Web d'Asos est un phénomène courant pour moi personnellement.
Étiquettes de case à cocher implémentées comme liens d'ancrage
Asos et Amazon attribuent à leurs cases à cocher une fonction secondaire. Ils sont implémentés sous forme d'hyperliens et permettent à l'utilisateur de naviguer vers une nouvelle page avec le filtre appliqué. Vous pouvez le tester en cliquant avec le bouton droit sur les étiquettes de filtre sur l'un de ces sites. Les étiquettes de filtre de SportsDirect ne permettent pas la navigation.
Bien que les styles de survol utilisés pour Amazon et Asos puissent suggérer un comportement de lien, je ne sais pas s'ils ont cet effet pour la plupart des utilisateurs ou même s'ils sont destinés à le faire. La pertinence de cela reste donc une question ouverte.
Conclusion
- La cliquabilité n'implique pas qu'un élément est un lien
- Ne pas styliser les étiquettes des cases à cocher en tant que liens hypertexte
- Il est utile de donner des étiquettes aux cases à cocher utilisées pour les effets de survol des filtres
Non. Étant donné que la case à cocher elle-même offre la possibilité visuelle de sélectionner/désélectionner, aucun indicateur supplémentaire n'est donc nécessaire pour donner un indice à l'utilisateur. Généralement, le ou les soulignements sont utilisés pour les hyperliens pour indiquer la navigation d'une section à une autre/page/site. Les soulignements sont largement ignorés de nos jours, mais le fait d'avoir une couleur différente donne un indice cliquable à l'utilisateur.