web-dev-qa-db-fra.com

Comment ajouter un ou plusieurs éléments à la ligne du tableau?

Le contexte

Je travaille sur une solution d'entreprise très complexe. Nous avons ce tableau qui montre la liste des appelons-les contrats. Chaque contrat (ligne) peut contenir un ou plusieurs clients (et un ou plusieurs produits).

Problème

Je dois penser à ces cas d'utilisation: 1. Les gens veulent copier et coller les identifiants clients.
2. Les gens devraient pouvoir supprimer tous les clients à la fois.
3. Les gens devraient toujours avoir un aperçu des clients sélectionnés.
4. Les gens devraient pouvoir parcourir les clients et choisir ceux qu'ils veulent.
(Puisque nous sommes capables, la solution doit être compacte)

Ma proposition

My solution
- Cliquer sur le "CD-0005" déclencherait la fenêtre de navigation
- Fonction de copier-coller manquante

enter image description here
- Ça a l'air super moche
- Difficile de donner un aperçu de tous les éléments (avoir une info-bulle sur le survol d'entrée est en quelque sorte étrange)

Que pensez-vous? Comment résoudre ce problème?

5
Marek Dlugos
  1. Vous pouvez ajouter un lien de copie devant chaque ID client en survol.

enter image description here

  1. Ajouter des filtres sur les en-têtes de tableau
  2. Mettez en surbrillance les lignes sélectionnées ou faites de l'ID client un badge lorsqu'il est sélectionné
  3. La création d'un badge d'identification client faciliterait l'identification de ceux nécessaires et le basculement entre les États.

J'ai adoré la façon dont "Clear Move" gère les tables. Vous pouvez l'utiliser comme source d'inspiration. enter image description here

1
Usman Mani

Usman Mani a déjà proposé une solution élégante, cependant pour tous ceux qui voient cela après ... J'ai eu des questions similaires et suis tombé sur un article très utile sur la construction de tables pour la réutilisabilité.

https://uxdesign.cc/designing-tables-for-reusability-490a37605

TLDR: il est normal de ne pas afficher toutes les informations d'affilée, de faire des tests d'utilisabilité et de trouver les 2-3 points de données les plus importants dont un utilisateur a besoin dans une ligne de tableau, puis de masquer le reste. L'utilisation d'une police impressionnante illustre qu'il y a plus de données si l'utilisateur en a besoin.

0
ksudu94

Une manière plus simple et plus propre serait de fournir une icône Modifier pour chaque ligne du contrat et d'ouvrir le tout dans une superposition modale, à condition que le formulaire ne soit pas trop long.

0
Ren

Pourquoi n'ajoutez-vous pas un menu contextuel (invoqué par un clic droit de la souris) contenant les éléments "Copier" et "Copier tout"?

Pour savoir quel ID client vous êtes sur le point de copier un survol (au-dessus de la souris au-dessus de chaque ID) aide.

Le ballon se ferme à la sortie de la souris.

Il peut être difficile par programmation d'ajouter un menu contextuel sur un ballon, mais une fois que vous l'avez surmonté, la facilité d'utilisation compense vos efforts.

0
Mike