Placement des boutons d'action liés aux tableaux de données
Contexte
Au cours des derniers mois, sur un élément commun partagé entre un grand nombre d'équipes de développement internes, la nécessité de fournir des fonctionnalités sur un tableau de données. L'une des fonctionnalités principales que presque toutes possèdent est l'option "Ajouter" un enregistrement/une ligne. Dans certains cas, les données du tableau de données sont un simple résumé, dans d'autres, ce sont toutes les données du processus en cours. Alors que certains des tableaux de données peuvent devenir assez volumineux, beaucoup d'entre eux sont assez petits et lorsque les données sont volumineuses, les enregistrements sont masqués par pagination.
Problème
La seule chose que ces groupes de développement ne partagent pas est le placement commun de ces boutons "action". Ce que je recherche, c'est quel est l'endroit le plus utilisable pour mettre ces boutons. Je me suis penché en haut à droite, mais devraient-ils aller à l'intérieur du tableau (dans la zone de légende) ou au-dessus du tableau? Quel est l'emplacement le plus utilisable?
Exemples de maquettes
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je dirais de rendre l'action alignée à gauche avec le tableau. Comme il s'agit d'une action principale associée aux données en dessous, vous souhaitez placer l'action dans un espace que les utilisateurs regarderont immédiatement; en haut à gauche.
De plus, vous souhaitez créer une connexion visuelle entre l'objet principal (c'est-à-dire "Compte") et l'action. Cela serait encore renforcé en plaçant cette action directement au-dessus de la colonne Comptes.
Enfin, si cette table a une longueur de liquide, avoir le bouton aligné à droite pousserait le bouton trop loin sur les grands moniteurs. Garder le bouton aligné à gauche empêcherait cela.
Les actions affectent les enregistrements, donc la première mise en page semble plus logique. Pourtant, les deux sont suffisamment explicites et la réponse est plus liée au contexte: l'espace que vous avez entre le titre ("Résumé des données") et le côté droit du tableau par exemple.
Notez que vous pouvez également vouloir lier un peu plus les actions à la table. Par exemple, vous n'avez pas besoin d'un bouton "Ajouter un compte". Au lieu de cela, vous pouvez fournir une ligne vide à la fin du tableau afin que l'utilisateur remplisse les champs manquants.