Bouton Soumettre et réinitialiser, quelle est la meilleure commande?
Dans un formulaire avec un bouton Submit et Reset et la fin, quel est le meilleur ordre pour l'expérience utilisateur?
Submit d'abord?
Ou Reset d'abord?
Je suggère de supprimer complètement le bouton Réinitialiser. Voir cet extrait du Nielsen Norman Group:
Réinitialiser: ne pas utiliser
Le Web serait un endroit plus heureux si pratiquement tous les boutons de réinitialisation étaient supprimés. Ce bouton n'aide presque jamais les utilisateurs, mais les blesse souvent.
La réinitialisation efface l'entrée de l'utilisateur sur un formulaire Web, mais pourquoi les gens voudraient-ils le faire? Le Web se caractérise par des mouvements fréquents entre les pages et les utilisateurs rencontrent rarement deux fois la même forme. Ainsi, un formulaire Web est presque toujours effacé lorsque l'utilisateur le voit. Même lorsqu'un utilisateur revisite un formulaire en une seule session, il est généralement plus rapide de modifier les anciennes données que de les effacer et de recommencer.
Le bouton Réinitialiser blesse les utilisateurs de trois manières:
1.) Le pire problème de la réinitialisation est que les utilisateurs cliquent sur le bouton par erreur lorsqu'ils veulent cliquer sur Soumettre. Bang - tout votre travail est parti!
2.) Le fait d'avoir deux boutons au bas d'un formulaire encombre l'interface et rend plus difficile pour les utilisateurs de voir clairement leur prochaine étape. Un peu de temps perdu est passé à balayer le bouton inutile et à décider lequel des deux boutons est le bon.
3.) Même lorsque les utilisateurs veulent éliminer certaines des données qu'ils ont saisies dans un formulaire, cela peut les ralentir pour avoir un bouton dédié pour cela, car le bouton supplémentaire signifie que les utilisateurs ont le choix: éditer les champs erronés et remplacez l'ancien texte par le nouveau texte cliquez sur Réinitialiser et tapez le nouveau texte dans des champs propres et agréables Le choix supplémentaire nécessite une réflexion supplémentaire, et le temps gagné en utilisant une technique d'interaction optimale est souvent plus petit que le temps perdu à penser au lieu de aller de l'avant avec une seule technique d'interaction qui est toujours utilisée. Il faut au moins une seconde et souvent deux secondes pour choisir entre deux techniques d'interaction possibles, c'est pourquoi il est généralement préférable de ne pas offrir de choix aux utilisateurs. (Une seconde peut ne pas sembler beaucoup, mais elle se traduit par environ 100 millions de dollars de perte de productivité par an dans le monde entier.)
D'autres ont mentionné que le bouton "Réinitialiser" n'était pas une bonne idée pour commencer. Cependant, si vous avez vraiment besoin de plus d'un bouton, l'ordre "correct" dépend vraiment de l'ordinateur sur lequel votre site est consulté:
Sur le Mac, le bouton "par défaut" devrait se trouver à l'extrême droite, les autres à sa gauche.
Sous Windows, l'ordre est généralement inversé. Donc, quel que soit l'ordre que vous utilisez, vous allez (légèrement) dérouter certains de vos utilisateurs.
C'est pour les boutons à choix multiples, bien sûr. Si vous êtes dans une situation de type assistant/assistant avec plusieurs pages, les deux plates-formes ont généralement "Suivant" à droite et "Précédent" à gauche.
(Échangez à droite et à gauche pour les systèmes de script de droite à gauche comme l'arabe ou l'hébreu, bien sûr)
Mise à jour: Oublié de mentionner: Généralement, il faut aussi mettre les boutons dangereux à une distance physique des boutons "sûrs". Par exemple. sous MacOS, la boîte de dialogue "Voulez-vous enregistrer les modifications apportées à ce document" a les boutons disposés comme suit:
[Don't Save] [Cancel] [Save]
Cela signifie que si vous secouez la souris en cliquant (quelque chose que les débutants et les utilisateurs occasionnels avec moins de pratique utilisent facilement), vous ne pouvez pas glisser et finir sur "Ne pas enregistrer". Soit vous fermez la boîte de dialogue (Annuler) soit vous enregistrez le fichier (vos données sont conservées) ou rien ne se passe (vous avez cliqué dans un espace vide).
Premier si Soumettre est une action principale. De plus, je pense que ce bouton de réinitialisation est inutile.
Quelques guides de Web Form Design: Filling in the Blanks par Luke Wroblewski:
- Évitez autant que possible les actions secondaires sur les formulaires. Fournir aux gens un chemin unique vers l'achèvement.
- Si des actions secondaires sont nécessaires, assurez-vous qu'il existe une distinction visuelle claire entre les actions primaires et secondaires.
- Lorsque vous distribuez les questions dans un formulaire sur plusieurs pages Web, les actions principales rapprochent les utilisateurs de l'achèvement et les actions secondaires leur permettent de revenir en arrière.
- Si vous choisissez d'inclure des actions secondaires potentiellement destructives comme Réinitialiser ou Effacer dans votre formulaire, offrez aux utilisateurs un moyen simple de les annuler.
Informations supplémentaires dans Actions primaires et secondaires dans les formulaires Web .
Gardez-le à gauche - la plupart des formulaires actuels le font, cf. Recherche d'images pour 'formulaires avec boutons de réinitialisation' afin que cela soit plus familier à l'utilisateur.
De plus, bien que vous ayez mentionné Reset je préférerais qu'il soit étiqueté Clear (ou Effacer le formulaire/Effacer les champs), ce n'est qu'une préférence personnelle, mais Réinitialiser semble un peu plus technique (comme demandant "ID de connexion" au lieu de "Nom d'utilisateur").
Si vous pensez que vous avez une bonne raison d'avoir un bouton de réinitialisation, il y a des problèmes beaucoup plus importants que la commande.
- Étant donné que le bouton Réinitialiser supprimera les données, assurez-vous qu'il y a une étape de confirmation après que l'utilisateur a appuyé dessus.
- Il est également bon que les boutons destructeurs soient plus précis sur ce qu’ils font exactement. Vous ne voulez pas être trop verbeux, bien sûr, mais ils méritent plus d’un mot.
- Séparez autant que possible le bouton Réinitialiser du bouton Soumettre.
Ensuite, considérez les conventions spécifiques à la plate-forme selon la réponse de uliwitness.
Une autre façon de résoudre ce problème consiste à mettre l'accent sur l'action la plus destructrice en la rendant moins évidente visuellement. Par exemple, en faire un lien au lieu d'un bouton. Cela suppose bien sûr qu'il existe une action plus destructrice qui est moins préférée.
Étant donné que la réinitialisation semble être une action plus destructrice pour moi, je ferais de l'action de réinitialisation un lien et l'alignerais à droite. De cette manière, les utilisateurs seront moins susceptibles de cliquer accidentellement sur le lien Réinitialiser le formulaire car il est éloigné de l'action de soumission principale. Voir l'image ci-dessous pour ce que je veux dire.
Et, si le formulaire n'est pas aussi long, je pourrais même envisager de placer le lien Réinitialiser le formulaire dans le coin supérieur droit du formulaire. De cette façon, les clics accidentels sont encore moins probables, mais l'action de réinitialisation est toujours facilement disponible. Voir l'image ci-dessous pour cela.
D'après mon expérience, l'ordre relatif les uns aux autres n'a pas autant d'importance que la façon dont ils sont positionnés sur le formulaire. Je trouve que la commande est intuitive tant que l'option la plus couramment utilisée (j'espère soumettre) est plus proche du bord du formulaire.
La raison en est que lors de son exécution maximisée, il est souvent plus facile de déplacer le curseur vers le bord de l'écran que de naviguer vers le milieu de l'écran. Cela permet généralement d'éviter un mauvais clic sur l'option de réinitialisation. Votre jeu de couleurs y contribue également, en supposant que votre arrière-plan n'est pas rouge.
Comme l'a commenté Grant, enter devrait envoyer submit, mais, je suggérerais également d'éliminer complètement la réinitialisation de l'ordre de tabulation, donc si quelqu'un voulait l'utiliser, il devrait utiliser sa souris s'il utilisait des raccourcis clavier. Et, en tant que protection supplémentaire contre les réinitialisations accidentelles, peut toujours avoir un avertissement pour être sûr.
Réinitialiser en premier est le meilleur ordre. La plupart des utilisateurs dans le monde sont droitiers. Il serait donc facile d'appuyer sur Soumettre, car les mains préfèrent se déplacer vers la droite en premier.
OMI, il y a une confusion entre reset et cancel.
"Réinitialiser" est une fonctionnalité HTML, un bouton qui rétablit tous les champs de saisie aux valeurs qui avaient lorsque le formulaire a été rendu pour la première fois dans le navigateur.
"Annuler" est une fonctionnalité de l'application, pour permettre à l'utilisateur de s'échapper sans terminer la tâche en cours. Par exemple, celui qui est à la caisse d'une boutique en ligne et s'est rendu compte qu'il n'avait pas vraiment besoin de ce gadget coûteux, ou qu'il en avait besoin de plus, juste avant de cliquer sur "Soumettre" qui devrait être étiqueté quelque chose comme "Achat complet".
En cliquant sur "Annuler", il est ramené dans la zone commerciale.
Le bouton "Réinitialiser", à la place, ramènerait les champs de saisie du formulaire à leurs valeurs initiales (pas les effacer).
À la fin des années 90, il était habituel de mettre un bouton "Réinitialiser", qui était largement inutilisé. Son seul usage était d'être cliqué par erreur et de faire remplir à nouveau chaque champ par l'utilisateur.
À propos du bouton "Soumettre" Je voudrais dire que "Soumettre" est le jargon du développeur. Les utilisateurs devraient voir une étiquette indiquant l'effet sémantique du bouton, comme "Finaliser l'achat", "Envoyer", peu importe "Soumettre".
lorsque vous voyez un bouton Soumettre sur un formulaire, qu'est-ce qui vous vient à l'esprit? On pourrait facilement penser que cliquer sur le bouton soumet les informations de l'utilisateur au système pour traitement. Un bouton Soumettre décrit ce que le système fait bien, mais il ne décrit pas du tout ce que l'utilisateur fait.
Lorsque les utilisateurs remplissent un formulaire, ils se lancent dans une tâche. Le bouton d'action doit confirmer la nature de cette tâche, afin que les utilisateurs sachent exactement ce qui se passe lorsqu'ils cliquent sur ce bouton. Un bouton qui décrit la tâche de l'utilisateur indique aux utilisateurs que le formulaire se concentre sur l'exécution de cette tâche spécifique. Plus votre formulaire est ciblé, plus vous aurez de chances que les utilisateurs le complètent.
Un bouton de formulaire qui indique Soumettre donne aux utilisateurs l'impression que le formulaire n'est pas axé sur une tâche spécifique. Cela donne également l'impression que votre site Web n'est pas convivial, car vous parlez d'une manière technique que la plupart des utilisateurs ne connaissent pas. Si c'est l'impression que vos utilisateurs ont lorsqu'ils remplissent votre formulaire, vous pouvez parier que vous perdez quelques utilisateurs dans le processus.
Mais le bouton de réinitialisation est effectué après le bouton de soumission, car il affiche la valeur par défaut, il devrait donc être dans le deuxième bouton.
La question à se poser est: que fait Submit? et que fait la réinitialisation?
Soumettre et réinitialiser doit-il être utilisé conjointement?
Habituellement, "Soumettre" et "Annuler" sont utilisés ensemble, dans l'ordre indiqué, Annuler signifie essentiellement annuler cette page ou interaction et revenir à l'écran/à la page avant d'arriver à l'écran avec "Soumettre" et "Annuler" page.
Réinitialiser est utilisé lorsque vous souhaitez effacer ou refaire la page/l'écran.
Vous pourriez peut-être envisager quelque chose comme ceci: "Soumettre", "Réinitialiser" et "Annuler"