web-dev-qa-db-fra.com

Formulaires mobiles - Où placer les boutons d'enregistrement et d'annulation?

Nous créons un site Web réactif. Il y a un formulaire sur le site et je ne sais pas quel type de boutons enregistrer et annuler utiliser où. J'ai trouvé plusieurs modèles comme vous pouvez le voir dans l'image avec les variables suivantes: - Position des boutons (haut/bas, horizontal/vertical) - Bouton Autosave/Save - Type de boutons supérieurs (texte/icônes)

Action buttons input form mobile site

Quelle solution est la meilleure pratique?

Les utilisateurs remplissent généralement le formulaire de haut en bas (dans ce cas) qui prendrait en charge les boutons en bas, mais la convention pourrait plutôt parler des boutons du haut. Ou les boutons du haut appartiennent-ils plutôt à la navigation (native) de l'application et non à la navigation du site mobile? La bataille pour la succession de l'écran parlerait du positionnement horizontal des boutons (annuler à côté pour enregistrer), mais soutenir les gauchers parlerait du positionnement vertical. Peut-être que le bouton d'annulation peut même être omis et que la croix en haut ou en arrière couvrirait suffisamment cette fonction?

2
Avadeha

Je pense que cet article répond très bien à votre question:
Pourquoi les utilisateurs oublient les boutons de formulaire placés dans la barre d'actions

enter image description here

En remplissant le formulaire, leurs yeux se déplacent du haut de la page vers le bas.
Quand ils l'ont terminé, leurs yeux sont en bas de la page. L'absence d'un bouton d'envoi les rend confus et incertains de la façon de remplir le formulaire.

(Également souligné dans cette réponse , qui indique que nous lisons dans un motif en Z)

Un autre facteur important est qu'en manquant le bouton "enregistrer" en haut à droite, l'utilisateur peut oublier d'enregistrer:

Une fois que les utilisateurs ont sélectionné leurs paramètres, ils ont tendance à appuyer sur le bouton de retour car ils ne se rendent pas compte qu'ils doivent enregistrer . Le bouton Enregistrer est l'action principale de la tâche, mais il est masqué sous forme d'icône de vérification dans le coin.


Un autre sujet de préoccupation pourrait être que les notifications pourraient couvrir un CTA important , comme indiqué dans Pourquoi les notifications iOS ruinent mon mariage :

enter image description here


Donc, dans l'ensemble, je dirais que placer ces boutons en bas présente beaucoup plus d'avantages et donne la sécurité aux utilisateurs, au détriment d'un peu plus d'espace d'écran.

3
Big_Chair

Les livres de Luke Wroblewski sur la conception de formulaires Web et mobiles ont maintenant 10 ans, mais méritent toujours d'être lus: https://www.lukew.com/ff/ .

Je suis d'accord avec la réponse ci-dessus, que les gros boutons clairs au bas de la page feront mieux que les contrôles placés dans l'en-tête.

Pouvez-vous avoir les deux? Dupliquer les contrôles dans l'en-tête et en bas de la page?

La raison pour laquelle je pose la question est que je vois plus de questions/formulaires à écran unique maintenant et que les contrôles d'en-tête sont immédiatement visibles pour ceux-ci.

0
RobC