Grille / table avec beaucoup de boutons
Étant donné que j'ai une grille avec un certain nombre de boutons pour les actions que l'utilisateur peut effectuer. Cela ressemble à ceci.
J'ai un certain nombre de grilles similaires dans le système. Je me demande si les opinions des gens devraient l'être.
- Laissez tel quel
- Avoir un bouton avec une liste déroulante des différentes options. Cela signifie que la hauteur de la ligne est inférieure.
- Autre chose.
Il s'agit d'un écran que les utilisateurs n'utilisent pas régulièrement, peut-être une seule fois par jour en moyenne. La vitesse (1 vs 2 clics) n'est probablement pas un problème majeur.
Il existe une situation similaire dans Youtube Studio Video Editor qui peut vous aider à obtenir des idées, un mélange d'icônes, des menus d'options déroulants et de l'interactivité.
- Chaque ligne a deux icônes: l'icône sélectionnez à gauche et la vue icône verte avec options
- Une icône Watch in Youtube et le menu d'options à trois points apparaissent en survol la ligne
- Cliquer sur le menu d'options à trois points affiche cinq options:
- Éditer
- Obtenir le lien
- Promouvoir
- Télécharger
- Supprimer
Du point de vue de l'accessibilité, je vous conseille fortement de n'avoir qu'un seul élément interactif par cellule de tableau. Il améliore considérablement la navigation dans la table avec un lecteur d'écran. Sur mon lieu de travail, nous avions une table similaire; certaines des cellules seraient lues à haute voix par le lecteur d'écran pendant 10 à 20 secondes en raison de tous les différents contenus de la cellule et de son en-tête de tableau.
Tel quel: moche mais fonctionnel. Je pense qu'il serait mieux lu avec le même tableau de boutons sur chaque ligne, avec ceux inutiles grisés. Il est simplement plus facile de traiter des données tabulaires lorsque chaque ligne a exactement le même format. Je les styliserais également plus petits, mais si c'est Bootstrap c'est un peu pénible de le faire. (Pourquoi oh pourquoi ont-ils supprimé btn-xs?)
Drop down: si l'acte de sélection déclenche l'action, alors cette interface aura une incidence plus élevée d'erreurs car le fonctionnement d'une liste déroulante est physiquement plus sujet aux erreurs. Si c'est sélectionner une action suivie d'un clic sur un bouton pour y arriver, ça va.
Sans autre contexte, il est difficile de répondre à vos questions. Comment les utilisateurs utilisent-ils votre table? À quelle fréquence interagissent-ils avec elle? Est-il clair pour les utilisateurs quelles actions sont possibles dans les différents états?
Voici quelques réflexions, sans connaître le contexte: tel quel, il n'est peut-être pas très joli, mais il présente certains avantages par rapport à une liste déroulante. Il est clair que toutes les actions ne sont pas disponibles dans tous les États. Toutes les actions possibles sont visibles au premier coup d'œil. L'utilisateur peut cliquer directement sur l'action souhaitée sans cliquer d'abord sur une liste déroulante. Si vous changez cela, vous devrez considérer ces avantages. Mais il y a aussi certains inconvénients. L'interface utilisateur est très encombrée. Il y a beaucoup à traiter pour l'utilisateur.
La question est de savoir quel est l'objectif de ce tableau. Si cela aide l'utilisateur à être très efficace dans l'exécution de la tâche. Si cela aide à donner à l'utilisateur un aperçu rapide des états et à interagir avec les éléments, c'est secondaire et pas toujours nécessaire.
Je dirais que vous pouvez peut-être utiliser un mélange de solutions 1 et 2. Ayez l'action la plus utilisée disponible et ajoutez les actions moins utilisées dans une liste déroulante. La difficulté peut être que l'action principale n'est pas toujours la même selon l'état de l'objet.
Mais à la fin, vos utilisateurs seront les mieux informés. Donc, ce que je ferais, c'est de tester cela avec un prototype simple et de le tester avec de vrais utilisateurs. Vous n'aurez pas besoin de le tester avec beaucoup d'utilisateurs pour voir quelle solution fonctionnera le mieux dans votre contexte.
Vous pouvez mettre toutes les options dans un menu contextuel et désactiver celles qui ne peuvent pas être utilisées à ce stade en raison du statut de l'élément. De cette façon, l'utilisateur a toujours la même liste d'options (et vous pouvez expliquer pourquoi une option est désactivée).
N'est-il pas également possible de faire de l'option d'affichage non pas un bouton mais juste un clic sur la ligne elle-même?
On peut distinguer trois types d'actions sur une commande. Divisez-les et regroupez les actions au sein d'un type.
Visualisation
Tout d'abord, je donnerais le bouton de la seule option que les commandes ont en commun, qui est de les voir (je suppose ici que il n'y a aucune objection à voir une nouvelle commande), son propre emplacement plus prévisible. Maintenant, il saute partout, selon les autres options disponibles.
Édition
Lors de la modification d'une commande, l'utilisateur doit d'abord voir ce qu'il contient. Supprimez donc le bouton d'édition ici et rendez l'option d'édition accessible à partir de l'écran d'affichage.
En traitement
Il nous reste maintenant à envoyer, renvoyer, recevoir, annuler et annuler. Vous pouvez utiliser une liste déroulante, mais ce sont un peu plus capricieux que les boutons normaux, donc peut-être qu'une grille de cinq boutons serait la meilleure. Ne masquez pas les options qui ne sont pas disponibles, mais désactivez-les, de sorte que chaque bouton sera toujours au même emplacement.
Voir d'abord, Action plus tard
Ou, selon excellente suggestion d'Annemiek , rendez la visualisation disponible en cliquant sur la ligne. Supprimez tous les boutons et déplacez-les sur l'écran d'affichage, si un clic supplémentaire par commande n'est pas un problème . Cela dépend un peu de vos utilisateurs. Il crée une vérification supplémentaire, en quelque sorte, car un utilisateur doit d'abord visualiser une commande avant d'agir.
J'ai un certain nombre de grilles similaires dans le système
La capture d'écran que vous avez partagée comporte différentes actions sur chaque ligne. Avoir tous ces boutons/actions disponibles en amont sur chaque ligne n'est pas un bon choix en termes d'encombrement visuel, de charge cognitive pour l'utilisateur et également du point de vue de l'accessibilité comme Tobias mentionné. Si une action est présente sur chaque ligne et que l'utilisateur exécute cette action fréquemment, vous pouvez conserver ce bouton sur la ligne et les autres actions secondaires peuvent être regroupées dans un menu de kebab (icône à trois points verticaux)
Vous pouvez continuer les actions de survol pour chaque ligne. Ainsi, une fois que l'utilisateur survole une ligne, il verra une option déroulante, qui fournit une liste d'actions.
Il semble déroutant d'avoir différentes options pour chaque élément dans cette vue. Dans une grille ou une liste, l'utilisateur attend généralement la même interface exacte pour chaque élément.
Vous pouvez conserver le bouton "Afficher" (peut-être le convertir en icône, mais ce n'est pas important), car cette action est disponible pour tous les éléments et déplacer les autres options dans les éléments UX exposés lorsque l'utilisateur "Visualise" l'élément. .
De plus, la visualisation n'est pas une étape destructrice, tandis que les autres actions font une sorte de travail, qui peut ne pas être réversible. Imaginez l'utilisateur essayant d'annuler ORD-123455 dans une liste, pris en sandwich entre ORD-123545 et ORD-213455. En ajoutant une action supplémentaire entre l'affichage d'un élément et l'action sur celui-ci, vous ajoutez une petite quantité de friction, mais donnez également à l'utilisateur plus de confiance dans la sélection de l'élément correct.