Plusieurs boutons d'enregistrement après modification des informations
Je continue à faire des allers-retours sur cette question et je voulais obtenir d'autres opinions.
Nous avons une série de pages dans un panneau de configuration des paramètres. Il y a plusieurs modules dans les pages et chaque module peut être enregistré indépendamment.
Si le bouton "ENREGISTRER" de chaque module apparaît:
- Toujours apparaître activé (côté droit de l'image)
- Apparaît uniquement activé lorsqu'une modification a été effectuée (images gauche + droite)
- Une autre variante, comme ne pas apparaître jusqu'à ce qu'un changement soit fait (s'éloigner de cette idée)
Pensez simplement à vous débarrasser du bouton Enregistrer. Chaque fois que l'utilisateur effectue un changement, n'oubliez pas ce changement et mettez-le à jour. Et donnez ensuite à l'utilisateur un reçu non modal comme un toast. C'est une manière moderne et courante d'implémentation de l'interface graphique pour les changements de paramètres, en particulier pour les produits basés sur le Web.
Si vous voulez vraiment avoir le bouton Enregistrer, avoir un bouton est plus logique dans votre cas, mais assurez-vous qu'il est détectable par les utilisateurs.
De plus, étant donné que vos paramètres ont plusieurs pages (sections), vous pouvez envisager d'ajouter une navigation, probablement en fonction des titres de vos sections. Les utilisateurs peuvent ainsi obtenir un aperçu des paramètres et peuvent facilement accéder à une section spécifique en même temps.
Je suggère d'utiliser plusieurs onglets par groupe et de cibler chaque groupe en cliquant sur chaque onglet. 
Ainsi, vos détails mis à jour peuvent être enregistrés en une seule fois, le bouton ENREGISTRER n'apparaît que si vous modifiez ou mettez à jour quelque chose.
Une approche différente consiste à afficher le contenu clairement sur la page en tant que contenu non modifiable (pas de listes déroulantes et de champs de texte, juste du texte) et ajouter un bouton "modifier" à chaque section. Si l'utilisateur clique sur ce bouton, vous montrez toutes les zones de texte, les listes déroulantes, etc. ainsi que le bouton "Enregistrer" et un bouton "Annuler".
Toute cette approche rend l'utilisateur plus à l'aise, vous pouvez afficher la page sans avoir peur de changer quelque chose accidentellement. Vous ne travaillez que sur une section à la fois et pouvez même décider de ne pas appliquer les modifications.
J'aime vraiment le fait que vous ayez de petits morceaux d'informations, c'est plus facile à digérer de cette façon.
Si vous voulez qu'un utilisateur ait l'impression qu'un seul bloc sera enregistré, je suggérerais Option 2. Gardez le bouton "Enregistrer" désactivé sauf si une modification est effectuée.
Si vous gardez tous les boutons actifs (Option 1), un utilisateur peut apporter des modifications aux deux sections, 1 et 2, puis s'attendre à cliquer sur "Enregistrer" dans l'une des sections pour enregistrer les modifications dans les deux zones. Si vous choisissez de suivre la voie Option 1 alors vous devez vous assurer que les boutons "Enregistrer" enregistrent les modifications sur toute la page, plutôt que dans une seule section.
Améliorations UX supplémentaires:
- À l'heure actuelle, votre modèle de conception pour un élément actionnable semble identique à l'en-tête du bloc de groupe, vous pouvez envisager d'utiliser un autre modèle de conception pour votre CTA.
- J'ai vu quelques outils effectuer une sauvegarde automatique lorsqu'un utilisateur quitte un champ. Une telle approche vous permettra d'éliminer le besoin d'un bouton "Enregistrer"