Tableau avec actions par ligne
L'une des pages de notre application Web comprend un tableau qui comprend généralement quelques dizaines de lignes pour chaque utilisateur, et il occupe la majeure partie de la largeur de la page (5 à 8 colonnes).
Pour chaque ligne, les utilisateurs peuvent effectuer 3 actions possibles.
Quelle est la méthode recommandée pour permettre aux utilisateurs d'effectuer ces actions? Nous avons envisagé quelques options:
- 3 petits boutons d'action sur le côté gauche de chaque ligne 1
- 3 petits boutons d'action sur le côté droit de chaque rangée
- Descendez avec les trois actions
- D'autres approches?
J'ai vu d'autres questions avec une grande discussion sur Comment éviter les actions répétitives dans les lignes du tableau? , mais dans ce cas, je suis plus intéressé par le bon endroit pour les mettre.
Merci!
Option 1 Illustration
3 petits boutons d'action sur le côté gauche de chaque rangée
Avec les langues LTR, on peut supposer que les utilisateurs inspecteront d'abord la ligne (en partant de la gauche) et décideront ensuite de prendre des mesures.
Donc, placer les boutons sur le côté gauche est un peu à contre-courant.
3 petits boutons d'action sur le côté droit de chaque rangée
Avantages:
- Les boutons sont facilement accessibles . Ceci est important si l'utilisateur effectue un grand nombre de ces actions (en grande partie parce que le point principal du tableau est de permettre aux utilisateurs d'agir sur les enregistrements).
Inconvénients:
- Plus de probabilité d'erreurs (petits boutons à proximité).
- Les petits boutons auront des icônes , qui ont une sémantique de second degré.
- Prend plus d'espace qu'une liste déroulante.
- Non évolutif - il y a une limite au nombre de boutons que vous pouvez mettre.
- Plus bruit visuel .
Descendez avec les trois actions
Les inconvénients:
- Nécessite un clic supplémentaire.
Avantages:
- Les listes déroulantes peuvent utiliser du texte, qui est plus clair que les icônes.
- Moins de bruit visuel . Les utilisateurs ne voient les actions que lorsqu'ils en ont besoin.
- Prend moins d'espace .
- Peut facilement évoluer , voire jusqu'à une douzaine d'actions.
D'autres approches?
Au moins pour lutter contre le problème de bruit visuel/d'espace, vous ne pouvez afficher ces actions qu'en vol stationnaire (bien qu'une telle conception ne fonctionne pas sur les appareils tactiles). Comme dans la boîte de réception de Google:
Finalement
Je pense que cela se résume vraiment à la fréquence à laquelle ces actions sont utilisées. Dans certains systèmes, les utilisateurs doivent agir sur chaque enregistrement, ce qui signifie qu'un clic supplémentaire dans une liste déroulante peut réduire l'efficacité. Mais sur les systèmes où les actions sont moins courantes, les listes déroulantes sont une bonne solution - en réduisant le bruit visuel et en économisant de l'espace.
En termes de commande, l'identifiant principal (en termes d'association d'utilisateurs) pour la ligne de données doit toujours être à gauche dans une langue de gauche à droite localisation.
Notez que si vous avez un ID unique pour chaque élément, cela peut ne pas être approprié s'il ne s'agit pas de ce que l'utilisateur lui-même associera principalement à cet élément, ou de la fonctionnalité principale sur laquelle il triera/recherchera généralement un élément en fonction. La disposition des colonnes par défaut doit être abordée non pas à partir de votre contexte, mais à partir de l'utilisateur.
La réponse de @ Xabre fournit plus de détails/articles sources liés à la numérisation et à la reconnaissance.
En termes de placement et de format des contrôles, il y a toujours une énigme entre la charge visuelle créée en remplissant une partie d'un écran avec des contrôles répétés (en particulier lors du défilement) et avec la vitesse d'utilisation de ces contrôles, tout en s'assurant que les contrôles sont suffisamment explicites. dans leur identification de l'action qu'ils ne causent pas de confusion.
Souvent, les contrôles en ligne sont plus petits ou avec de simples icônes, afin de tenir dans l'espace auquel ils sont limités. Cela peut être problématique pour la découverte pour les personnes qui ne connaissent pas votre application. Même lorsque vous sentez que vous avez utilisé des icônes dont le but devrait être évident et qui sont relativement cohérentes à l'échelle mondiale avec d'autres applications similaires.
Une liste déroulante ou un accordéon peut avoir beaucoup de succès ici, si la tâche liée à cet ensemble de données n'est susceptible d'être exécutée qu'une fois par vue liste. À ce stade, le facteur de temps principal est susceptible de trouver (rechercher) la bonne ligne sur laquelle fonctionner, et une petite perte de temps due au fait d'avoir à cliquer pour ouvrir les contrôles ne sera probablement pas un problème.
Une autre bonne option à considérer (en fait, c'est la réponse sélectionnée pour la question que vous avez liée) est d'avoir chaque ligne sélectionnable , avec un ensemble de commandes de fonctionnement fournis en haut ou en bas de l'écran/volet qui effectuent l'action associée sur toutes les lignes sélectionnées. Assurez-vous de fournir des contrôles de désélection appropriés (et éventuellement tout sélectionner) si vous procédez ainsi.
Je recommande généralement de localiser toutes les actions qui ne changeront pas le contexte d'affichage actuel en haut du volet de l'ensemble de données, afin de promouvoir clairement quelles actions peuvent être prises sur l'ensemble de données suivant. Cela permet également de garder les contrôles cohérents avec les paradigmes familiers dans les contrôles de liste à action similaire tels que les visualiseurs d'arborescence de fichiers.
Google Inbox fournit un exemple assez solide ici, avec quatre contrôles principaux et un menu déroulant d'ellipses exposés en haut en mode de sélection multiple, pour effectuer des actions sur l'ensemble de la sélection:
Notez que bien que Google trouve les cases à cocher pour la sélection des lignes sur la gauche, leur uniformité, leur petite taille et leur faible impact visuel signifient qu'il est toujours très facile de rechercher dans la colonne de gauche les titres d'e-mail souhaités. Leur nature simple et répétitive les aide à être facilement atténués visuellement et mentalement sans trop rivaliser dans la tâche de recherche en tant que distracteurs.
Il est également possible de faire une sélection de ligne en demandant à l'utilisateur de cliquer/toucher directement la ligne elle-même afin de la mettre en surbrillance (voir l'exemple de l'Explorateur Windows plus loin ci-dessus), mais assurez-vous qu'il est clair pour l'utilisateur que ce mode d'interaction est disponible et que cela ne conduira pas à changer le contexte de la vue/à s'éloigner. Je préfère généralement les contrôles par case à cocher car ils sont plus évidents dans leur interaction disponible: il peut être difficile de fournir des indices appropriés pour la découverte sans appréhension dans les sélections multiples qui semblent être une liste d'éléments normale (plutôt qu'une auto clairement -contenu multi-select control) à court d'utiliser quelque chose comme un contrôle de case à cocher.
Il est possible de mélanger les deux modèles et d'avoir des contrôles individuels exposés via quelque chose comme le survol ou l'expansion (comme lors de "l'ouverture" d'un e-mail dans la boîte de réception Google, voir ci-dessous, ce qui force les contrôles à rester visibles plutôt que de ne s'afficher qu'au survol) sur chaque item, tout en alternativement pouvoir sélectionner plusieurs éléments (lignes) puis les opérer à partir d'une barre supérieure de commandes. Il est important que ces modes se bloquent mutuellement pour éviter toute confusion : sinon les utilisateurs peuvent se demander ce qui se passera lorsqu'ils utiliseront les commandes sur une ligne individuelle lorsque plusieurs lignes sont sélectionnées.
Cela peut en particulier être un compromis décent entre les choix esthétiques et les problèmes d'utilisation. Des modalités de fonctionnement alternées et/ou multiples peuvent être une arme à double tranchant en termes de convivialité. Tout en offrant plus d'options pour accomplir une tâche offre de la flexibilité aux différentes approches des personnes qui l'utilisent, cela peut également créer de la confusion, en particulier de la confusion entre utilisateurs. Personnellement, je pense que dans ce cas, ces deux éléments ont une conformité globale suffisante en termes de présence de paradigme et de contexte partagé pour être acceptables lorsqu'ils sont présentés ensemble pour la plupart des gens, mais cela peut être quelque chose à garder à l'esprit.
Remarque: cela n'essaie pas de prétendre que Google Inbox est une UX fantastique à tous les niveaux, mais cela a fourni un bon exemple pour cette discussion. Notez également l'utilisation de commandes pour chaque élément sur le côté droit.
Je pense que cela dépend de l'objectif principal de ce tableau; si Update/Delete, mettez-le en premier sinon mettez-le en dernier. Dans la plupart des cas cependant, vous voulez probablement d'abord identifier ce que vous voulez modifier/supprimer; dans ce cas, le placer sur le côté gauche est encombrant et il est préférable de le remplacer par une case à cocher et de placer les commandes en ligne sur le côté droit à la place.
De plus, s'il y a de la place pour placer les actions en ligne, placez-les simplement, sinon ce n'est pas détectable et la charge cognitive augmente; sauf s'il y a beaucoup d'actions, mettez en ligne les plus utilisées et ajoutez un bouton de menu pour les actions les moins utilisées.
De plus, pour réduire le temps de numérisation, on pourrait choisir de rassembler les données pertinentes dans une seule colonne (par exemple, au lieu de `` Prénom '' et `` Nom de famille '', dites `` Nom ''); ordonnant à nouveau les données de gauche à droite dans l'ordre le plus utile.
Sources:
Je vous propose de faire cela comme sur YouTube (et la même solution est proposée dans la réponse acceptée à la question à laquelle vous liez) quand il y a un tableau avec des vidéos que vous avez téléchargées. Il existe certaines actions, comme "Supprimer", "Publier", "Modifier", etc. pour chaque vidéo.
Le tableau a une colonne de plus permettant de sélectionner une vidéo (c'est la case à cocher typique). Vous pouvez sélectionner plusieurs éléments à la fois, puis effectuer la même action pour chaque vidéo sélectionnée. Bien sûr, il existe également des options "Sélectionner/Désélectionner tout".
Ce qui est important (et il en manque sur YouTube, si je me souviens bien), l'en-tête du tableau ne suit pas lorsque vous faites défiler la page vers le bas, vous devez donc sélectionner des vidéos (même si ce n'est qu'une seule), puis faire défiler vers le haut à l'en-tête pour effectuer l'action. J'aimerais qu'il soit toujours en haut de l'écran, pas la page.
Je voudrais rester très simple. Les actions en ligne ne sont OK que lorsqu'il n'y a que 2 à 5 enregistrements. Mais même dans ce cas, les commandes/boutons d'action doivent être sur le côté droit car l'utilisateur scanne/lit l'enregistrement et prend ensuite la décision sur des actions telles que modifier, supprimer. Mais pour les longs tableaux de données, je proposerai de choisir l'option permettant à l'utilisateur de sélectionner les enregistrements sur lesquels il/elle souhaite agir, puis de cliquer sur le bouton d'action. Surtout lorsque l'action consiste à supprimer plusieurs lignes, cela fonctionne bien. Voir l'image suivante pour plus de détails: (Dans cet exemple, je veux placer la modification dans la même ligne, mais en raison de certains défis techniques, j'ai dû la placer à côté pour supprimer le bouton d'action. 