Comportement préférentiel pour l'affichage des états de lignes vides
Étant donné qu'un composant d'interface utilisateur fait partie d'un contrôle utilisé pour gérer une collection d'articles commerciaux - dans ce cas, la cargaison est dans un manifeste - j'essaie d'explorer le comportement préférentiel du composant lorsqu'il est "état" est tel qu'il n'y a actuellement aucun cargaison à afficher.
Un exemple typique du composant pourrait être comme ci-dessous
Cette collection fait partie d'un objet métier parent, pour lequel ce composant fait partie d'une interface utilisateur plus large. Lorsque cet objet parent est créé, l'état par défaut du composant ressemble à celui ci-dessous - essentiellement un article de chargement "vide" prêt à être peuplé avec du contenu.
De nouvelles lignes pour l'entrée de cargaison peuvent être créées et supprimées à l'aide des boutons AJOUTER et SUPPRIMER dans la colonne de droite.
Mon dilemme est de savoir comment je gère la situation dans laquelle TOUS les éléments de ligne existants de cette collection sont supprimés. Dans quel état dois-je afficher le composant?
La complexité supplémentaire ici est que la majorité des utilisateurs de cette application naviguent principalement à l'aide de leurs claviers - par exemple, en tabulant les champs - et en tant que tel, la conception n'a pas besoin de hiérarchiser les interactions avec la souris ou les touches pour effectuer des actions clés
Selon moi, il y a deux options - qui ont toutes deux des forces et des faiblesses.
Option 1
En cliquant sur l'action SUPPRIMER pour l'élément final, nous remettons l'interface utilisateur à l'état par défaut, c'est-à-dire. une ligne vide qui peut être remplie de nouveau contenu
[~ # ~] pros [~ # ~]
Il s'agit d'un état familier pour l'utilisateur, et en concentrant automatiquement l'utilisateur sur le premier élément de la ligne, il n'y a pas d'autres interactions - clavier ou souris - que l'utilisateur doit effectuer pour continuer à saisir des données dans l'application
[~ # ~] contre [~ # ~]
Le comportement du bouton DELETE change simplement parce que c'est le dernier élément de la collection. Si vous avez 4 marchandises dans la collection, appuyer sur le bouton SUPPRIMER pour les 3 premiers articles détruira cette suppression - la supprimant complètement de l'interface utilisateur. La quatrième et dernière fois, cela changera - en supprimant à la place tout contenu de la ligne.
Cela semble décousu et déroutant.
Option 2
Un autre état vide qui l'indique explicitement et encourage l'utilisateur à ajouter son premier élément à la collection
[~ # ~] pros [~ # ~]
Moins déroutant pour l'utilisateur. La suppression du dernier élément de la collection reste cohérente, donc une fois la ligne détruite, elle disparaîtra de l'interface utilisateur comme les éléments précédents
[~ # ~] contre [~ # ~]
Cela nécessite une interaction supplémentaire de l'utilisateur pour créer une nouvelle ligne - c'est-à-dire un clic de souris sur le bouton AJOUTER UNE CHARGE. Il sera extrêmement rare que l'objet commercial parental contenant cette collection s'attende à ce qu'il soit vide, il y aura donc TOUJOURS au moins 1 article.
L'état vide est différent de l'état par défaut de la page lorsqu'elle est rendue pour la première fois et que la collection est vide.
Alors que nous pourrions utiliser l'option 2 pour cet état vide; pour les mêmes raisons que ci-dessus, je souhaite minimiser les interactions avec les Ko et réduire le nombre de clics nécessaires dans la mesure du possible. Il s'agit d'une application lourde de saisie de données et la réduction des frottements là où nous le pouvons est primordiale.
Donc, avec tout ce qui a été dit, je suis intéressé de voir ce que la communauté pense être la meilleure approche à adopter. Sinon, y a-t-il une troisième option - hybride - que je n'ai même pas encore envisagée?
Je suggérerais simplement que la combinaison de vos deux options serait une excellente solution, de cette façon, l'utilisateur peut être au courant de la liste de fret vide et commencer à ajouter immédiatement une nouvelle cargaison.
Je suis d'accord avec Bharath Selvaraj, mais je tiens à souligner que l'approche hybride et l'option 1 entrent en conflit avec l'attente de la façon dont les données sont entrées dans l'interface utilisateur à partir de votre exemple et de l'option 2.
Dans le premier exemple de votre question, la dernière ligne de fret a déjà ses informations remplies et il y a un bouton pour ajouter une autre ligne. Ceci établit l'espoir qu'une fois que le bouton "Ajouter une ligne" est cliqué, une ligne vide apparaîtra pour que l'utilisateur puisse entrer des données. En d'autres termes, une ligne doit être créée en premier et les données peuvent être entrées en second.
L'option 1 et l'approche hybride établissent une attente différente. Les cases sont déjà vides et prêtes pour la saisie des données. Vos utilisateurs peuvent alors s'attendre à ce que les données qu'ils saisissent dans ces cases vides soient enregistrées une fois que le bouton "Ajouter une ligne" est cliqué, ce qui ajoutera une ligne vide sous les données qu'ils viennent d'entrer. Dans ce cas, les données sont entrées en premier et une ligne est créée en second.
Je n'ai pas de données permettant de savoir si une ligne vide doit être créée en premier, puis les données saisies ou les données doivent être saisies, puis la ligne est "enregistrée". Cependant, votre boîtier vide et votre boîtier non vide doivent suivre les mêmes étapes et répondre aux mêmes attentes. Je suppose que si une majorité de vos utilisateurs interagissent via le clavier, la saisie de données puis l'ajout d'une ligne se dérouleront plus facilement dans l'ordre des onglets, car le bouton "Ajouter une ligne" est à droite.