Est-ce une bonne idée d'ajouter de nouvelles lignes par-dessus celles existantes?
Considérez mon implémentation de violon d'une table 1 . (Pour ceux qui sont curieux, voici le code 2 )
Au début, ma table était plus conventionnelle, avec le + sous le tableau et en ajoutant de nouvelles lignes sous les anciennes.
Maintenant, j'ai décidé de rendre la table plus compacte et j'ai donc déplacé le + bouton à l'en-tête, où il est aligné avec le - bouton de chaque ligne.
Depuis le + bouton a été déplacé vers l'en-tête, je pensais que ce serait plus naturel si de nouvelles lignes étaient ajoutées au-dessus des anciennes; mais est-ce vraiment le cas?
Est-il possible que - puisque les nouvelles lignes sont surlignées en bleu pendant 1 seconde après la création - peu importe si des lignes sont ajoutées au-dessus ou en dessous?
1 : Chrome affiche l'en-tête de manière incorrecte; envisagez de visualiser le violon avec Firefox ou IE 10+ à la place.
2 : Pour ceux qui souhaitent utiliser mon code dans leurs propres projets; aller de l'avant. Aucune condition, aucune condition attachée. Je vous demande seulement de ne pas revendiquer la paternité de ce code; ce n'est qu'un accord et ne sera pas appliqué. Si quoi que ce soit, j'espère simplement que vous respectez cet accord par principe.
Il serait préférable que les lignes existantes soient déplacées/animées vers le bas sur une période d'environ 300 millisecondes, pour faire de la place pour la nouvelle ligne. Le mouvement est très efficace pour attirer l'attention - remarquer que le mouvement est une réponse instinctive et qu'il est perceptible du coin de l'œil.
La direction du mouvement fournit des informations utiles, vers le haut ou vers le bas le mouvement appelle l'attention et fournit des informations, mais:
Les lignes existantes doivent se déplacer vers le bas pour que quelque chose soit inséré en haut, mais pour quelque chose pour être inséré en bas, les lignes existantes n'ont pas besoin de monter. Cela suggère qu'il est plus facile de fournir une rétroaction de mouvement utile en insérant des lignes en haut.
Le point culminant est vraiment utile pour attirer l'attention de l'utilisateur, vous devriez le prolonger ou le changer en un effet de décoloration, mais l'idée est d'attirer l'attention sur la ligne pendant plus de temps, maximisant les chances de remarquer le changement sur le table.
Si la conception de la table est celle du violon, je trouve un problème, je suppose que A, B et C seront une sorte de titre pour les colonnes. Il devrait également y avoir un en-tête pour la colonne de suppression de ligne et il serait préférable qu'il y ait un changement de couleur pour celle-ci car ce ne sont pas des données mais une action, ce qui signifie qu'il s'agit d'une catégorie différente d'informations/d'interaction.
Enfin, à propos de votre question, l'ajout de la nouvelle ligne en haut, ou comme la première, a du sens, non seulement à cause de la position du bouton, mais parce que cela va être proche des en-têtes et où l'attention de l'utilisateur est très probablement va être. Bien que, si la table peut être assez longue, ou si l'utilisateur va vérifier les données le long de la table, le contrôle d'ajout sera trop loin, donc lorsqu'il est toujours bon, vous pouvez envisager d'ajouter un nouveau contrôle, par exemple par exemple un flottant, avec son explication, bien sûr. Vous pouvez également envisager de répéter la section des en-têtes qui améliore la convivialité et vous donne un endroit pour avoir le bouton plus.
Si vous répétez les en-têtes, puis que vous avez plus de boutons d'ajout, chaque fois que l'utilisateur clique dessus et ajoute une nouvelle ligne, elle doit être insérée juste en dessous du contrôle, comme dans votre exemple réel.
Si le tri est important, après une insertion, vous devez également fournir une entrée à l'utilisateur et un bouton pour appuyer sur les données et les récupérer.