Laquelle de ces méthodes est la bonne pour permettre aux utilisateurs de réorganiser les colonnes d'une table
J'ai un tableau de données où je présente des données de capteur en direct pour comparaison.
- Il y a au moins 10 colonnes sur l'écran à tout moment et l'utilisateur peut ajouter jusqu'à 100 colonnes en les basculant
- Certaines colonnes sont fixes et ne peuvent pas être réorganisées tandis que d'autres participent à la réorganisation
Mon approche actuelle
- J'ouvre un modal à l'intérieur duquel chaque colonne visible a un numéro qui lui est assigné
- La modification des nombres changerait l'ordre des colonnes
- Les numéros d'en-tête fixes ne peuvent pas être modifiés
Quelle est la bonne façon de procéder?
- Glissez-déposez des colonnes dans le tableau lui-même? Comment cela fonctionne-t-il avec les longues tables à défilement horizontal
- Ouvrez un modal et affichez toutes les colonnes dans un format de liste et laissez les gens glisser-déposer des éléments dans cette liste. La liste se développera verticalement et le modal aura besoin d'une barre de défilement au-delà de disons 20 colonnes
- Afficher les chiffres comme mon approche actuelle? Y a-t-il de meilleures approches que je n'ai pas encore envisagées
Une direction sera super appréciée
Je pense que Drag and Drop est une approche commune et intuitive pour réorganiser les éléments de la grille.
Parmi les options que vous avez notées,
Glissez-déposez des colonnes dans le tableau lui-même - Vous pouvez l'utiliser avec le bureau et vous en sortir, même s'il y a une barre de défilement, car malheureusement c'est une limitation avec les grilles de données, si vous avez besoin de toutes les colonnes visibles (comme dans votre cas)
Modal avec liste (éléments empilés verticalement) - Vous devez l'utiliser pour des écrans étroits (si votre application est mobile responsive)
Afficher les chiffres comme mon approche actuelle - Je pense que le problème avec cela est que les utilisateurs doivent garder une trace des numéros qu'ils ont entrés dans chaque champ de saisie. Cela peut également conduire à des doublons et cela impliquera des vérifications de validation, etc. Je pense que cela rend le processus un peu compliqué.
Cependant, vous devez être attentif à l'expérience de l'utilisateur avec le glisser-déposer. Les interactions par glisser-déposer sont souvent négligées ou passent inaperçues.
Jetez un œil à cet article pour une analyse détaillée des modèles de glisser-déposer -
https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d
Exemple de code pour de bons modèles de glisser-déposer -