web-dev-qa-db-fra.com

Emplacement du bouton de workflow

Dans notre système, nous avons des workflows qui peuvent comporter de 1 à plusieurs étapes. Ci-dessous, vous en verrez un exemple assez simple en une seule étape, avec les boutons "Enregistrer" et "Annuler". Certains autres workflows qui existent dans notre système ont des combinaisons de boutons telles que: "Enregistrer et ajouter un autre" "Enregistrer" "Annuler" ... et un autre a "Précédent" "Suivant" "Exécuter le processus". Mon point est qu'il peut y avoir de nombreux workflows différents avec de nombreuses combinaisons de boutons.

Existe-t-il des meilleures pratiques pour l'emplacement des boutons sur les flux de travail lors de la comparaison de mes deux exemples ci-dessous?

Première option: Boutons situés en haut à gauche

Option deux: Boutons situés en bas à droite

enter image description here

2
L. Lemmer

Cela dépend de la disposition et du type de formulaire, mais en fin de compte, les boutons CTA doivent être sous le formulaire (en raison de la façon dont nous analysons l'interface utilisateur) et ne pas être si séparés des entrées qu'ils pourraient ne pas être vu (ou ne pas apparaître dans certaines vues).

Selon les exemples, la meilleure façon serait de localiser les boutons en bas de l'écran, en suivant la direction verticale.

Le nombre d'étapes définit si le bouton doit être aligné à droite ou à gauche.

Dans une disposition à une colonne, les yeux de l'utilisateur se déplacent dans une direction verticale pour remplir le formulaire. Lorsque les utilisateurs atteignent le bas de votre formulaire, ils n'ont pas à déplacer leurs yeux vers la gauche ou la droite pour trouver votre bouton.

http://uxmovement.com/forms/aligning-submit-buttons-on-form-column-layouts/

Il existe trois types de formulaires que vous devez prendre en compte: le formulaire à pages multiples, à sections multiples et à page unique. Le type de formulaire que vous utilisez déterminera où placer votre bouton d'envoi.

http://uxmovement.com/forms/where-to-align-form-buttons-on-different-layouts/

En un mot, mettez vos CTA sous vos formulaires, et pas si loin qu'ils semblent séparés.

1
S M