Problème d'interface utilisateur pour ajouter, modifier et supprimer l'expérience
Première question sur UX, alors faites-moi savoir si vous avez besoin d'ajouter plus de détails.
J'ai un module budgétaire où l'utilisateur peut ajouter des détails budgétaires et plus tard, ils peuvent modifier ces détails.
Page Ajouter un budget
Ce formulaire est donc simple, l'utilisateur doit remplir les détails de base, télécharger les fichiers, puis sélectionner l'année fiscale et l'année de tarification associée. Après cela, ils peuvent ajouter des produits et remplir les détails comme la quantité/taux pour tous les mois (c'est-à-dire de janvier à décembre).
Selon l'expérience utilisateur, ce formulaire ne pose aucun problème.
Page de modification du budget
Maintenant, le problème est sous la forme ci-dessus. Il y a trois aspects.
1) L'utilisateur peut ajouter un nouvel exercice et l'année de tarification associée, puis le détail du budget associé.
- Pour cet utilisateur doit cliquer sur le bouton Enregistrer
- Les produits nouvellement ajoutés ou l'exercice nouvellement ajouté et les données connexes seront stockés.
2) L'utilisateur peut modifier les détails du produit déjà ajoutés.
- Pour modifier le produit, l'utilisateur peut cliquer sur le bouton "Mettre à jour". Ce qui ouvrira le formulaire et l'utilisateur pourra modifier les détails du produit dans cette fenêtre contextuelle. Popup a son propre bouton "Enregistrer" sur un clic qui stockera directement le daa dans la base de données (en utilisant ajax). (Pas besoin de cliquer sur le bouton "Enregistrer" qui est au niveau du formulaire)
3) L'utilisateur peut supprimer directement la case entière de l'exercice.
- Identique à l'édition, au clic de l'icône de suppression, les données seront directement supprimées de la base de données à l'aide de la demande ajax. (c'est-à-dire qu'au clic de suppression, il demande confirmation que cette action est irréversible.)
Maintenant, certains utilisateurs ont du mal à utiliser ce formulaire. C'est-à-dire qu'ils ajoutent le produit et pensaient qu'il avait été enregistré dans DB. Mais il ne sera stocké dans DB que s'ils cliquent sur le bouton "Enregistrer".
Donc, la question est de savoir comment je peux montrer visiblement que pour modifier/supprimer, il n'est pas nécessaire de cliquer sur le bouton "Enregistrer". Mais s'ils ajoutent un nouveau produit ou un nouvel exercice, ils doivent cliquer sur le bouton "Enregistrer"?
Ce n'est pas facile à résoudre. Tout d'abord, une remarque générale, puis quelques idées pour votre cas.
Je me demande pourquoi "Ajouter plus de produit" (cela devrait être grammatical, soit dit en passant: "Ajouter un produit" ou "Ajouter plus de produits") ajoute un panneau, dont le contenu nécessite Enregistrer, tandis que "Mettre à jour" ouvre une fenêtre contextuelle qui a son propre bouton de sauvegarde. Je préfère concevoir créer et éditer le même, à la seule différence que la création commence par un formulaire vide, tandis que l'édition montre les valeurs existantes dans les champs/tables.
Le bouton Enregistrer est très loin de l'endroit où se trouve l'utilisateur lorsqu'elle a fini de changer - essentiellement des bords opposés de l'écran. Il est donc difficile pour les utilisateurs de se rappeler d'enregistrer. Déplacer Enregistrer et Annuler en bas à droite pourrait améliorer la situation (mais cela bouleversera tous ceux qui ont appris la position actuelle de Enregistrer :-(
Il est un peu étrange que les données saisies dans une fenêtre contextuelle soient immédiatement enregistrées. Je mets généralement "Appliquer" ou "Ok" dans la fenêtre contextuelle et je souhaite que le bouton Enregistrer normal soit enfoncé. Il en va de même pour la suppression d'éléments (peut-être en incluant une confirmation si la suppression a des conséquences drastiques, comme vous l'avez).
Je suppose qu'il y a une confirmation de perte de données si l'utilisateur navigue quelque part sans enregistrer.
Quelques réflexions ...
En tant qu'ancien administrateur de base de données, pensez à ne jamais supprimer quoi que ce soit de la base de données. Les gens font des erreurs, frappent de mauvais boutons, demandent aux superviseurs de changer d'avis, etc. Au lieu de cela, lorsque l'utilisateur appuie sur un bouton pour supprimer un élément, un champ Date de suppression est défini dans l'enregistrement de la base de données. Cela vous donne également une capacité d'annulation limitée via un bouton Annuler qui apparaît à côté du bouton Supprimer à la fin de la "suppression". Un travail par lots est ensuite exécuté périodiquement pour déplacer les anciennes suppressions vers une table d'archivage. Le bouton Supprimer devrait également afficher immédiatement une confirmation qui explique tout ce qui sera supprimé (par exemple, uniquement le dernier élément par rapport à tous les éléments et sous-éléments).
La "cohérence" est le mot d'ordre dans toutes les programmations et UX en particulier. Les boutons d'action tels que Enregistrer, Supprimer, Mettre à jour, etc. doivent apparaître dans la même position relative sur chaque formulaire. Le plus souvent, c'est en bas à droite et il devrait donc y avoir une très bonne raison si vous ne les mettez pas là. N'oubliez pas que l'esthétique vous rend probablement heureux, mais l'utilisateur veut juste accomplir sa tâche aussi rapidement et simplement que possible. Moins il faut de réflexion, mieux c'est. Ainsi, la réutilisation des connaissances sur la façon d'utiliser le premier formulaire sur les formulaires suivants, tout en faisant clairement la distinction entre eux, donne à l'utilisateur la confiance d'avoir accompli la tâche correctement.
Le X rouge en haut à droite de chaque formulaire ferme le formulaire ... point. Cela ne devrait avoir aucun effet sur la base de données. Cela serait incompatible avec la façon dont les fenêtres (dont chaque formulaire est) fonctionnent. Souvent, les gens feront apparaître les détails sur votre formulaire de mise à jour par exemple, sans intention de changer quoi que ce soit. En utilisant le formulaire de mise à jour pour afficher les détails, ils s'assurent que tout ressemblera à ce qu'ils ont fait lorsqu'ils l'ont inséré. " dialogue.
Pensez également à faire de chaque élément de détail budgétaire un formulaire à plusieurs lignes au lieu d'avoir une longue ligne. Le défilement horizontal est devenu un grand anti-motif.