web-dev-qa-db-fra.com

Comment indiquez-vous qu'un élément n'est pas sélectionnable?

J'ai un tableau où un utilisateur doit sélectionner une ligne avant de pouvoir continuer, mais j'ai également un cas où certaines valeurs doivent être affichées mais ne sont pas sélectionnables.

Comment en êtes-vous arrivé là?

Mes premières réflexions sont d'utiliser une combinaison d'icônes, de style visuel et de texte explicatif. Mais je ne suis pas sûr que le bon message apparaisse tel quel - je n'ai pas non plus d'idées qui pourraient fonctionner sur une icône pour non sélectionnable sauf si j'utilise une case à cocher désactivée, ce qui, selon moi, est trompeur car il semble que vous pourriez faire quelque chose pour le rendre sélectionnable.

enter image description here

Toutes les réponses sont les bienvenues!

19
J4G

Si la case à cocher est désactivée, cela ne devrait pas poser de problème , si cela vous inquiète, vous pouvez utiliser des info-bulles pour expliquer à l'utilisateur pourquoi il n'est pas sélectionnable lorsqu'il survole sur le terrain.

Quelques réflexions sur le design:

Les cases à cocher que vous utilisez ne permettent pas de comprendre la case à cocher non sélectionnable car leur bordure coïncide avec le conteneur. Faites-les plus petits.

Je les mettrais aussi à gauche car c'est plus courant .

Je ne pense pas qu'il soit nécessaire de mettre la ligne dans une couleur ou une opacité différente pour montrer qu'elle n'est pas sélectionnable. Cela pourrait en fait apporter une certaine confusion, car il pourrait être associé à une autre raison. Restez simple :

Action = Select
Action performed on -> checkbox
Action not available => different checkbox(preferred) or no checkbox

enter image description here

28
Alvaro

Je vais vous donner une bonne solution et je vous expliquerai mal

enter image description here

À l'époque, c'était beaucoup plus facile pour les utilisateurs lorsque presque tous les sites Web utilisaient des couleurs et des conceptions similaires avec des formulaires interactifs, car lorsque les utilisateurs l'apprendront sur ce site Web, ils le sauront sur tous les autres sites Web.

enter image description here

Cependant, de nos jours, les concepteurs imposent plus d'identité dans leurs conceptions, y compris les formulaires interactifs. Ce qui est légèrement dérivé des modèles courants, et de nouveaux modèles sont également introduits.

Mais, essayez autant que possible de vous en tenir aux motifs, ils ne sont pas toujours sexy, mais cela se fait au prix de l'évidence de votre design.

Si vous analysez votre conception, vous avez dû utiliser une teinte grise de l'icône Vérifier enter image description here afin d'indiquer qu'il s'agit d'une case à cocher, alors que si vous diminuez un peu la taille de la case, cela indiquera mieux qu'il s'agit d'une case à cocher.

Ce qui nous donne ensuite la possibilité d'utiliser le fond gris pour indiquer si une case est activée ou désactivée.

Dans le mode activé, vous pouvez utiliser les couleurs de votre thème que vous désirez, par exemple, j'ai utilisé du violet pour la bordure de la boîte, et vous pouvez également colorier l'icône de vérification elle-même.

Lorsqu'il est désactivé, nous lui enlevons simplement la vie, en le transformant en noir et blanc.

En ce qui concerne votre problème, les cases à cocher désactivées pouvant être trompeuses, vous pouvez ajouter une info-bulle lorsqu'un utilisateur survole le champ désactivé, expliquant pourquoi il est désactivé.

8
UX Labs

Si l'utilisateur a seulement besoin de sélectionner exactement une ligne avant de continuer, pensez à remplacer la case à cocher par un Select bouton. Vous pouvez faire en sorte que le bouton ne soit visible que sur les éléments dont la sélection est autorisée.

5
Harrison Paine

Dans un monde idéal, je cacherais simplement la ligne qui n'est pas sélectionnable, mais comme vous l'avez dit, vous avez un cas où vous devez le montrer, et sans plus de contexte sur la raison pour laquelle il doit être affiché, je ne peux pas être sûr si ma réponse est applicable. en tous cas...

Je n'aurais aucune sorte de case à cocher pour la ligne non sélectionnable. La case à cocher devrait être à gauche, comme Alvaro l'a déjà mentionné. Je suggère également que vous ayez une case à cocher dans la ligne de titre qui puisse sélectionner toutes les lignes.

Une autre option pourrait être de faire un barré sur la police de la ligne non sélectionnable, mais cela dépend de ce que sont les informations et pourquoi elles ne sont pas sélectionnables.

1
Peter

Je suis d'accord, je n'ai aucune sorte de case à cocher pour quelque chose qui ne peut pas être sélectionné. Ensuite, rendez la distinction encore plus claire en ayant des boutons "sélectionner" pour les valeurs qui devraient être.

0
A Brigham