web-dev-qa-db-fra.com

Placement des éléments du tableau

J'ai une application web où j'ai besoin d'afficher certaines données sous forme de tableau.J'ai certaines requêtes d'un point de vue UX basé sur mon diagramme ci-dessous: enter image description here

  • Quel devrait être le placement idéal des éléments au-dessus de l'en-tête?

  • La suppression doit-elle être un hyperlien ou un bouton et pourquoi?

  • Dans quelle mesure les options d'édition et d'affichage des détails sont-elles conviviales pour chaque ligne?

  • Toutes autres suggestions pour améliorer l'UX.

2
Nirav Chadda

Peu de choses avant la solution. La solution doit concerner non seulement l'UX mais également l'interface utilisateur. Vous pouvez probablement vérifier la conception des matériaux pour savoir comment une table peut être affichée et où les éléments exploitables peuvent être placés.

https://www.google.com/design/spec/components/data-tables.html

Maintenant, en venant à une approche,

Quel devrait être le placement idéal des éléments au-dessus de l'en-tête?

Comme le montre l'image, les éléments au-dessus de l'en-tête sont:

  • Champ de recherche
  • Taille de la page
  • Supprimer l'option

Il est impératif de maintenir des zones cohérentes pour les types d'actions.

Un arrangement peut être le suivant

enter image description here :

Vous pouvez avoir le bouton Supprimer au-dessus de l'en-tête, mais il y aurait alors un décalage dans le type de contenu que vous affichez. La "Recherche" et la "Taille de la page" sont des actions pour l'ensemble du tableau tandis que la suppression concerne une ligne spécifique. Je suggérerais d'isoler des fonctionnalités pour permettre à l'utilisateur de gérer plus facilement les actions.

La suppression doit-elle être un hyperlien ou un bouton et pourquoi?

Non, car un lien représenterait autre chose. Il est important que les types soient différenciés. L'utilisation d'une icône pour la suppression (icône de la corbeille comme un bouton) serait relativement meilleure car elle est facilement compréhensible. Cela vaut également pour "Modifier" et "Détails".

Mise à jour

S'il est nécessaire de supprimer plusieurs lignes ensemble, une option de suppression peut être fournie en haut. Mais alors vous devez vous assurer qu'il est isolé afin qu'il ne se mélange pas avec les champs existants.

Exemple de conception matérielle:

enter image description here

Dans quelle mesure les options d'édition et d'affichage des détails sont-elles conviviales pour chaque ligne?

Il peut être une bonne option de les avoir en ligne. Cela permettrait à l'utilisateur de rester au point d'action ( c'est-à-dire la ligne) et d'agir en conséquence. Si les éléments d'action ne sont pas bien placés .. l'utilisateur devra peut-être faire un effort supplémentaire pour comprendre l'interface utilisateur.

Toutes autres suggestions pour améliorer l'UX.

Isolation appropriée, conception cohérente, points de mise au point clairs, couleurs appropriées Voici quelques facteurs à prendre en compte lors de la conception.

En dehors de tout cela, vous pouvez vérifier les principes de conception des matériaux et avoir plus d'idées sur la façon dont cela peut être fait.

J'espère que si ce n'est la solution, j'ai pu vous aider avec un processus de réflexion: D

1
DarkBlaze

J'ai rencontré un problème similaire sur un projet sur lequel je travaille actuellement. En ce qui concerne les options de suppression multiple, il n'est pas compatible avec le lecteur d'écran ou le clavier. Cela inclut également les boutons radio, dans un format similaire (mais évidemment pas comme un problème de suppression multiple).

Le problème que j'ai rencontré était un système de messagerie interne. Nous avons beaucoup emprunté à Google Mail, mais lors de son test, nous avons découvert le problème presque immédiatement. Cependant, nos tâches principales consistent à "afficher" la boîte de réception, "sélectionner un message pour afficher ses détails" et "répondre à un message". La gestion des dossiers et des messages était donc secondaire.

  • Cochez les cases dans la première colonne elle-même, manque de contexte, surtout si le contrôle de suppression est externe à la table.
  • Le contrôle que vous montrez est au-dessus du flux logique du processus. (Vous vérifiez d'abord ce que vous voulez puis cliquez sur supprimer).
  • Le lien se perd trop facilement dans l'interface.

Une suggestion pour une suppression multiple qui pourrait satisfaire ceci: Ajoutez une étape dans le processus.

La conception axée sur les tâches nous prie de mettre autant d'action à l'avant. Cependant, trop de choix et trop de contrôles peuvent entraîner une surcharge cognitive.

https://www.nngroup.com/articles/simplicity-vs-choice/

0
HB77