web-dev-qa-db-fra.com

Comment proposer plusieurs actions sur les éléments du tableau, au sein du tableau?

J'ai un tableau que les utilisateurs doivent parcourir et effectuer des actions spécifiques. Les actions sont des choses comme "Supprimer", "Signaler", "Envoyer à", mais dans la maquette ci-dessous, ce ne sont que des actions 1, 2, etc.

À l'heure actuelle, l'idée est d'avoir un "panneau d'action" à droite du tableau, et lorsqu'une ligne est mise en surbrillance, les options deviennent accessibles.

Quels sont les autres moyens potentiels de présenter ces actions sans utiliser d'élément d'interface utilisateur externe à la table?

J'envisage d'utiliser des liens de survol contextuels (dernière maquette ci-dessous), mais cela ressemble plus à un outil de navigation qu'à un outil permettant d'effectuer l'action principale de cette partie de l'interface.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

6
dennislees

Pourquoi les actions n'apparaissent-elles pas en ligne?

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Cela l'aidera à apparaître comme si les actions affectaient chaque ligne des données et ne semblaient pas trop déconnectées.

En outre, voici une solution si vous avez des actions groupées:

wordpress

ÉDITER:

  1. REMOVE peut être géré avec une action groupée comme ci-dessus.
  2. FLAG peut être une icône à gauche.
  3. SEND TO peut être géré avec un flux accordéon:

Comment wordpress gère en ligne dans le tableau - ils utilisent une option accordéon pour développer et révéler une option avancée par ligne.

wordpress 2

Je trouve que ces solutions sont assez efficaces en ce qui concerne les fonctions que les utilisateurs utiliseront encore et encore.

3
Pdxd

Une autre approche qui peut être adoptée est une variante de l'endroit où vous avez commencé. Gardez toutes les actions possibles visibles, mais activez et désactivez en fonction de la sélection de l'utilisateur. S'il s'agit de véritables sélections radio, faites-en des boutons eux-mêmes plutôt que d'ajouter un autre choix, puis un bouton pour agir.

Cela permettra à la fois des actions en bloc et basées sur une seule ligne. L'utilisateur peut faire défiler le tableau en sélectionnant de nombreux éléments, pourrait même ajouter un nombre d'éléments sélectionnés dans le panneau d'actions, puis l'utilisateur ne clique que sur le bouton d'action qui est à la fois activé par les règles métier et le résultat souhaité pour ces objets.

Cela supprimera également tout encombrement visuel et l'utilisateur saura toujours quelles actions peuvent être prises en fonction de ce qu'il a sélectionné. Il peut également y avoir des info-bulles pour les actions désactivées afin d'expliquer quelle règle métier a désactivé ce bouton.

1
RCburn

Une approche ancienne et courante consiste à utiliser une barre de boutons (vous savez, la chose avant les barres d'outils et les barres de ruban).

En termes de convivialité, nous voulons réduire le mouvement de la souris d'un élément à l'action souhaitée. Pour cela, plusieurs améliorations sont disponibles (à coup sûr, toutes avec des compromis).

  • Boutons en ligne qui n'apparaît qu'en cliquant sur la ligne (de préférence sur le tableau avec beaucoup de cas d'utilisation "visualisation" et moins de cas d'utilisation "exécution"). Voir l'image ci-dessous
  • Boutons en ligne toujours visibles: votre solution proposée. C'est très bien et peut être utilisé sur des cas d'utilisation "basés sur une utilisation intensive". Considérez que vous avez besoin d'environ 80% d'espace vertical en plus pour cela.
  • Colonnes séparées pour les actions: dépend du nombre d'actions que vous avez. Habituellement, les icônes sont utilisées pour économiser de l'espace, mais vous devez toujours réserver un espace horizontal qui est généralement la partie la plus critique d'une table.

Un consensus général est que survoler doit être évité pour les boutons d'action dans les tableaux, car les lecteurs d'écran ne les reconnaîtront pas et ce que vous pouvez faire là-bas n'est pas clair. Mon opinion personnelle est que ce n'est pas si mal si les cas d'utilisation ne sont pas vraiment importants, mais vous devez quand même réserver de l'espace, donc vous n'avez pas de gros avantage sauf moins d'encombrement.

left: button bar, right: inline buttons

1
Gustav