Que dois-je faire à propos de l'incohérence de mon bouton d'enregistrement entre les onglets?
Le profil utilisateur dans l'application que je crée se trouve dans quelques onglets, mais j'ai eu une situation où je pense que la fonctionnalité de sauvegarde attendue ne sera pas cohérente entre les onglets.
La plupart de mes onglets ressemblent à quelque chose
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Ainsi, le bouton Enregistrer enregistre les informations saisies lorsque l'utilisateur les saisit. Assez basique.
BTW-Ce n'est pas mon application réelle, mais un échantillon proche destiné à illustrer ma question.
Mais quand j'arrive à l'onglet Associés, c'est une liste d'invitation, où l'utilisateur entre les adresses e-mail de ses associés. Un e-mail est envoyé et si l'associé accepte la connexion, son nom apparaîtra dans la liste. Cela ressemblera à quelque chose
J'envisage en quelque sorte cela en utilisant la fonctionnalité ajax dès qu'un nouveau contact est ajouté (+) ou supprimé (x). Mais cela n'est pas cohérent avec les autres onglets qui utilisent un bouton d'enregistrement.
Ok, pas de problème, je peux mettre un bouton d'enregistrement sur cette page, et l'ajout et la suppression ne se produisent pas tant que vous n'appuyez pas sur le bouton d'enregistrement. Et d'ici là, nous avons encore quelques commandes (notez l'invitation supprimée et l'icône d'annulation). C'est un peu plus difficile, mais ce n'est pas grave.
Jusqu'ici tout va bien. Associates était un peu génial, mais ce n'est pas grave.
Mais lorsque nous arrivons à l'onglet projets, je veux faire essentiellement la même chose que l'onglet associés, uniquement avec plus de données. Tellement de données qu'il a vraiment besoin de sa propre page, que j'avais prévu d'afficher dans une boîte de dialogue jQuery.
Maintenant, je suppose que je pourrais sauter à travers les cerceaux pour garder ce bouton de sauvegarde cohérent, mais je pense que l'onglet associés était à peu près aussi loin que je devrais pousser cela. Cependant, je n'aime pas l'incohérence.
Comment dois-je procéder?
Dois-je ajouter le bouton Enregistrer à l'onglet Projet pour le garder cohérent? Dois-je le laisser tel quel dans la maquette? Dois-je le laisser tel quel dans la maquette ET restaurer l'onglet Associés pour supprimer également le bouton Enregistrer? Autre chose?
Parfois, la cohérence pour des raisons de cohérence cause un problème cohérent avec l'intuitivité de l'utilisateur.
L'intuitivité de l'utilisateur final est beaucoup plus importante que de mettre un bouton de sauvegarde sur chaque onglet! La plupart des utilisateurs utilisent la routine de base pour remplir quelques types d'entrées et devoir cliquer sur le bouton enregistrer/soumettre.
Pour les onglets Associés, si les données entrées dans l'entrée de courrier électronique apparaissent après avoir cliqué sur le bouton Ajouter, cela signifierait aux utilisateurs que les informations entrées ont été enregistrées. Il en va de même pour l'onglet projet; à la fin du modal jQuery proposé, si un nouvel enregistrement devait apparaître au-dessus, la plupart des utilisateurs comprendraient que les informations entrées ont été enregistrées. Pour ne pas dire que les messages de renforcement des messages supplémentaires ne pouvaient pas blesser dans les deux cas. Il est également important de tenir les utilisateurs informés de l'état du système.
Un autre avantage clé du processus est qu'en enregistrant les données automatiquement, l'utilisateur a une étape cognitive de moins à penser. Pour les maquettes proposées ci-dessus, je pense que moins c'est plus.
Je voudrais recommander de supprimer le bouton Enregistrer tous ensemble. Si vous avez la possibilité d'utiliser ajax pour mettre à jour des listes avec plusieurs commandes, alors pourquoi ne pas utiliser ajax pour tous les autres onglets également (enregistrement que l'utilisateur tape, ou trouver un moyen d'attraper lorsque les utilisateurs ont arrêté de taper pour enregistrer)?
Avantages:
- Cohérence totale dans toute l'application de tabulation
- Moins de clics pour l'utilisateur
- L'utilisateur doit penser moins == plus de certitude dans l'UX
- L'utilisateur ne peut pas "oublier de sauvegarder"
- Les amateurs d'Ajax vous achèteront des boissons
Quant à l'onglet "Projets" qui contient un déclencheur pour une numérotation modale dans les informations d'entrée, n'utilisez pas le mot "enregistrer", utilisez le mot "créer" ou "ajouter", puis enregistrez les données après la fermeture du modal avec ajax.
J'ai également compris ce que @Jeff dit: que les utilisateurs ont l'habitude de cliquer sur "enregistrer" ou "soumettre" et de les tenir informés de l'état du système. Je ne suis pas en désaccord, mais il existe maintenant de nombreuses applications qui renoncent au bouton "soumettre", et les utilisateurs s'y habituent de plus en plus. De plus, en ne l'ayant pas dans l'interface utilisateur (du moins d'après mon expérience), les utilisateurs n'y pensent tout simplement pas et supposent avec confiance que le travail qu'ils font est en train d'être enregistré.
Si informer l'utilisateur de l'état du système est une grande préoccupation, le fait d'avoir un bouton de sauvegarde ne résout pas vraiment cela non plus. Ce serait une confirmation que le travail est enregistré, pas l'interaction utilisateur elle-même qui valide une modification du système dans l'interface utilisateur. Pour cela, vous pouvez avoir un seul indicateur cohérent qui répond à ajax sur chaque onglet. Pendant l'envoi des données, il peut s'agir d'un moulinet et lorsque le serveur répond, il peut devenir une coche verte. Cela permettrait d'indiquer que "l'activité de l'utilisateur a affecté le système", quelle que soit la structure de l'onglet. En d'autres termes, ce type d'indication fonctionne aussi bien pour "enregistrer que vous tapez" et "enregistrer le nouvel ordre de tri".
Cohérence du bouton Enregistrer
Si vous choisissez de conserver le bouton Enregistrer , il doit être cohérent dans les onglets: si une chose doit être enregistrée après avoir été saisie, alors toutes les choses devrait. peu importe s'il est tapé directement dans un champ de texte, ou créé via une boîte de dialogue. Tant qu'il ressemble à une ligne dans l'un des onglets, il doit se comporter de la même manière que les autres.
Si vous choisissez de conserver le bouton Enregistrer, je n'aurais pas besoin d'une décision pour enregistrer par onglet, mais par profil. Par conséquent, le bouton ne doit pas résider à l'intérieur des onglets, mais à côté de tous.
Et j'ajouterais également un bouton Supprimer , si j'avais un Enregistrer bouton.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Associés et projets
Quelques réflexions sur la façon dont le contenu moins simple pourrait être géré:
Dans l'onglet Associés , un élément peut avoir plusieurs états. Un associé peut être entré, et lors de l'enregistrement, une boîte de confirmation pourrait préciser "Maintenant, envoyer 3 nouvelles invitations à A, B et C. [OK/Annuler]. Ensuite, il devient" en attente d'invitation acceptation "et ainsi de suite.
Dans l'onglet Projets , appuyer sur le bouton Ignorer devrait également être confirmée car toutes les données des projets saisis seraient perdues.
La raison pour laquelle il y a un élan pour ajouter le bouton "Enregistrer" sur l'onglet "Informations de base" est parce qu'il contient beaucoup de champs ouverts qui semblent être modifiables.
Si ces champs apparaissent pour être plus en lecture seule, les utilisateurs se sentiraient plus à l'aise de ne pas y avoir le bouton "Enregistrer", car alors cela donnerait plus d'impression que les champs soient enregistrés automatiquement.
Il est donc préférable de supprimer le bouton Enregistrer de l'onglet Informations de base et de vous assurer que les données sont enregistrées via ajax. C'est ainsi que fonctionnent tous vos autres onglets. Il vous suffit de le rendre plus agréable au goût dans l'onglet "Informations de base" en n'ayant pas autant de champs ouverts.
Vous trouverez ci-dessous des maquettes. Les couleurs sont exagérées.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je ne vois pas en quoi l'onglet Projets diffère sensiblement de l'onglet Associés. Pourquoi ne pas modifier votre bouton "Nouveau projet" pour qu'il ressemble davantage à la ligne "Entrez une adresse e-mail à ajouter"? Cela pourrait dire quelque chose comme "Assistant Nouveau projet", qui indiquerait à l'utilisateur qu'un modal va se lancer. Ensuite, ayez un bouton d'enregistrement comme d'habitude.