Comment dois-je afficher l'état désactivé dans le tableau?
Permettez-moi d'abord d'expliquer un problème!
Je fais des maquettes pour un service Web à peine composé de tables. Chaque table a une action à la fin de chaque ligne. Ainsi, chaque ensemble d'actions fait référence à une certaine ligne. Dans certaines parties de l'application, il est possible qu'une ligne soit active ou inactive. Je me demande comment représenter ces états et comment les gérer.
Permettez-moi de vous montrer trois options que j'ai en tête ..
J'ai un peu peur d'utiliser un design qui est en fait adapté aux actions interdites dans des situations et des circonstances données. L'état que j'essaie de signaler est "Inactif" et non "Désactivé". Je suis toujours en mesure d'appliquer toutes ces actions comme pour la ligne active. Cette approche est la plus appropriée pour celui qui considère l'espace et la conception. Les utilisateurs peuvent toujours supposer que l'état désactivé (inactif) pourrait devenir actif et ils peuvent se demander s'ils doivent effectuer une action pour les rendre actifs. Ce qui est bien dans ce cas.
J'utilise une colonne spéciale pour afficher l'état actif et inactif. Une ligne avec des cercles verts cochés indique l'état actif, et celles avec des cellules vides indiquent inactif. De cette façon, l'utilisateur est même capable de trier le tableau par colonne (dans chaque exemple, le tableau est triable par colonne) mais cela prend un espace horizontal et je ne l'ai pas assez dans mon application. Néanmoins, l'utilisateur utilise un ensemble d'actions de la dernière colonne pour modifier l'état.
Colonne spéciale qui est en fait modifiable. Comme dans l'exemple précédent, la colonne indique l'état actif et inactif. La différence est que dans cet exemple, j'utilise des cases à cocher, donc pour effectuer un changement d'état, vous n'avez pas besoin d'aller pour un ensemble d'actions à la fin. Je ne pense pas avoir amélioré cette approche, étant donné que ces actions sont côte à côte et qu'il suffit d'un clic de plus pour changer d'état à partir d'un ensemble d'actions à la toute fin ou à chaque ligne.
Ce que vous pensez est la meilleure solution et je serais heureux d'entendre d'autres solutions s'il y en a ..
À votre santé!
Je crois et j'espère toujours que les discussions/commentaires/débats donnent toujours de meilleures (ou meilleures) options. Voici donc la solution raffinée.
Version 1 (première option)
J'ai fait un brainstorming et j'ai proposé 2 options. L'idée est de sauvegarder la page horizontale de l'immobilier et une colonne supplémentaire, surtout pour les petits écrans/mobiles.
Exemple 1:
- Les couleurs de la colonne extrême gauche (vert et rouge) indiquent l'état
- Les éléments dans le coin supérieur droit agissent à la fois comme légende et filtrage
- Modifiez l'état de chaque ligne en cliquant sur Modifier
Exemple 2:
- La colonne extrême gauche indique les états, le tri peut être effectué en cliquant sur l'en-tête de la colonne.
- Modifiez l'état de chaque ligne en cochant/décochant les cases (si la modification est autorisée pour les utilisateurs)
- En survolant (ligne), le bouton "Actions" s'affiche.
- Les éléments du coin supérieur droit sont utilisés pour montrer la légende, si vous pouvez éduquer les utilisateurs, cela peut être ignoré et supprimé.
- Cette conception ne fonctionne pas pour les appareils mobiles car le bouton d'actions est affiché en survolant
Je ne sais pas si vous avez des actions communes/séparées basées sur la sélection multi/aléatoire de lignes. Par exemple: Supprimer, changer d'état, etc.
À mon avis, cela devrait être plus simple:
en cliquant sur la case à cocher, la ligne est sélectionnée (voir ceci exemple DataTables - sélection de la case à cocher ;
dans la dernière colonne, vous avez une icône de paramètres qui ouvre une liste déroulante avec toutes les options (modifier, désactiver) ou les deux dernières colonnes sont réservées pour les actions (Activer/Désactiver et Modifier), mais pas de cases à cocher car cela prête à confusion.
Je pense que votre deuxième exemple n'est pas si mal du tout. Vous pouvez simplement combiner les deux colonnes et utiliser un état de survol pour la liste déroulante (j'espère que c'est uniquement sur le bureau). C'est un peu plus propre de cette façon, par exemple comme ceci (avec survol sur une ligne active et non active):
J'utilise depuis quelques années une technique très simple qui a résolu ce problème. Faites simplement en sorte que vos lignes inactives aient un texte grisé tandis que vos lignes actives ont un texte noir de poids normal. Étant donné que vos contrôles seront activés, peu importe ce que l'utilisateur sait encore qu'il peut prendre des mesures.
J'ai également ajouté des filtres de case à cocher en haut de la liste pour les actifs et les inactifs. Ceux-ci remplissent deux fonctions: il permet à l'utilisateur de supprimer les éléments inactifs et enseigne à l'utilisateur ce que signifie le texte gris.