Comment afficher les actions de sauvegarde / annulation dans un accordéon
Je suis en train de concevoir un flux de configuration et j'ai décidé d'opter pour un paradigme d'accordéon (en raison du grand nombre d'étapes, l'utilisation d'onglets entraînerait un débordement d'onglets dans les appareils mobiles). En entrant dans le flux de configuration, l'utilisateur est présenté avec la première étape ouverte.
Cependant, je ne sais pas comment présenter aux utilisateurs l'action d'enregistrer ou d'annuler les modifications qu'ils ont apportées.
L'une des options consiste à réutiliser le bouton "modifier" qui ouvre un accordéon et à le transformer en bouton d'enregistrement.
L'autre alternative est un peu plus simple et place simplement un bouton d'enregistrement et d'annulation à l'intérieur de l'élément développé.
Y a-t-il des annonces/des inconvénients à opter pour l'une des alternatives? Y a-t-un autre moyen de faire ça?
Pour moi, votre interaction est trop lourde pour un mobile: beaucoup d'étapes et d'actions. Et l'action de sauvegarde déplace la responsabilité du système vers l'utilisateur. Cela rend l'interaction plus complexe, exhaustive et faillible.
Mes suggestions sont:
- Utilisez l'enregistrement automatique pour enregistrer les données. C'est ainsi que se comportent les applications modernes.
- Affichez les éléments d'accordéon modifiés pour améliorer la navigation, car le modèle d'accordéon fournit un accès aléatoire aux éléments et l'utilisateur pourrait se perdre et l'interaction sera interrompue.
- Utilisez la fonction Annuler les modifications plutôt que Enregistrer si vous avez vraiment besoin de revenir aux anciennes valeurs.
- Essayez de placer des étiquettes à gauche pour réduire la taille verticale.
- N'utilisez pas le bouton Modifier car le contenu de l'article d'accordéon est masqué, donc l'utilisateur n'a aucune idée s'il doit le modifier. Au lieu de cela, il l'ouvre et prend ensuite une décision.
[~ # ~] mise à jour [~ # ~]
Je traite Save and Discard comme une dichotomie, donc avoir Discard et auto-save vous permet de minimiser les actions des utilisateurs dans l'interaction; J'ai imaginé ce que je voulais dire:
si vous voulez laisser l'utilisateur se concentrer sur un bouton, je pense qu'il existe un moyen de le faire. comme ci-dessous, lorsque vous cliquez sur modifier, le bouton devient "annuler". Si vous ne souhaitez pas enregistrer votre entrée, vous pouvez cliquer sur Annuler. mais si vous voulez l'enregistrer, le bouton Enregistrer est juste en dessous du contenu (cliquez dessus, l'élément se retirera et s'ouvrira ensuite), vous ne le manquerez pas si vous avez fini de saisir les informations. dans les deux situations, vous n'avez qu'à vous concentrer sur un seul bouton.
Je choisirais de garder les boutons d'enregistrement, d'annulation et de modification ensemble. Pour garder une trace de ce qui est enregistré et de ce qui ne l'est pas, vous pouvez garder le bouton Enregistrer visible pour les éléments fermés non enregistrés. Dans mon exemple, vous pouvez voir que le bouton d'édition est réutilisé mais se transforme en bouton d'annulation:
Évidemment, vous pouvez afficher les trois boutons si les titres des éléments ne deviennent pas trop longs:
Une autre idée est que si vous souhaitez que l'utilisateur se concentre sur une tâche à la fois, vous pouvez également masquer les boutons de modification lorsqu'un élément est en cours de modification. Vous pouvez modifier le nom annuler pour fermer une fois l'élément enregistré.
Ensuite, le bouton annuler/fermer ferme l'élément et les boutons d'édition apparaissent sur tous les éléments:
Je travaille actuellement sur ce problème et après réflexion, je suis arrivé à la conclusion qu'un bouton d'édition, qu'il soit dans la barre de titre ou à l'intérieur de l'accordéon, est une interaction inutile. Lorsqu'un utilisateur clique sur la barre de titre et ouvre l'accordéon, vous pouvez faire l'hypothèse qu'il clique avec l'intention de modifier le contenu caché à l'intérieur et donc un accordéon ouvert doit toujours être en "mode d'édition".
Les options d'enregistrement et d'annulation vont de pair, toujours. Ce n'est jamais une bonne pratique de les diviser, car cela oblige les utilisateurs à parcourir la page pour l'action appropriée.
En utilisant le paradigme de open = edit pour les accordéons, vous pouvez afficher les actions de sauvegarde/annulation dès le début à l'intérieur de l'accordéon mais désactivées. Une fois qu'une action est prise, ils deviennent actifs. Si vous autorisez les utilisateurs à fermer un accordéon dont les valeurs ont été modifiées, une étiquette similaire à "modifications non enregistrées" peut s'afficher dans la barre de titre. S'ils essaient de s'éloigner de la page, vous pouvez flasher une alerte de formulaire incomplète.
Si aucune action n'est entreprise, la fermeture de l'accordéon ramène tout simplement à son état d'origine. La mise en garde de cette approche est que vous combinez le "mode d'édition" et le "mode de résumé" qui, selon votre contenu, pourraient ne pas être pratiques.