Lisibilité des champs de saisie du formulaire et confirmation
J'ai un formulaire que l'utilisateur saisit des données à envoyer à un serveur, mais je me demande comment un utilisateur lit normalement un formulaire à des fins de saisie?
Faut-il saisir, bouton, confirmation puis fermer:
Ou saisie, confirmation, bouton puis fermeture:
La deuxième méthode semble être la manière la plus conventionnelle en termes de structure de formulaire en ayant les boutons en bas à droite, mais est-il incorrect d'ajouter le texte de confirmation avant (au lieu de après) l'élément de formulaire suivant forçant l'utilisateur à revenir visuellement en arrière ( au lieu d'aller de haut en bas de façon transparente)?
Ou est-ce correct d'ajouter le bouton avec les champs du formulaire pour les garder au même endroit, comme dans le premier exemple?
La meilleure approche serait de retirer la boîte de confirmation du flux de formulaire principal et de la faire apparaître sur le formulaire.
Votre dilemme actuel est uniquement dû au fait que vous ajoutez des éléments à votre formulaire, qui ne font pas partie du flux principal.
De même, vous pouvez supprimer le bouton de fermeture du formulaire et utiliser uniquement l'icône croix en haut à droite pour cela.
La 1ère méthode est meilleure, car vous devez guider l'utilisateur le long du chemin logique:
- Des données d'entrée;
- Confirmez les données;
- Vérifier l'état des données;
- Rien à faire? Fermez tout.
Les boutons doivent être proches de l'action
Dans votre cas, vous avez 2 boutons avec des contextes différents. L'un ferme l'ensemble du formulaire tandis que l'autre effectue un travail spécifique sur le formulaire. Le bouton "Ajouter" doit être proche des champs de saisie car il se rapporte à l'action d'ajout de travaux. De plus, la distance entre les champs de saisie et le bouton "Ajouter" est plus faible, ce qui accélère la sélection de la cible (voir loi de Fitts ). Quoi qu'il en soit, le bouton de fermeture peut être supprimé car il y a "X" dans le coin supérieur droit faisant la même chose.
La confirmation doit être facilement visible
La position du texte de confirmation n'a pas d'importance tant que les utilisateurs peuvent le voir immédiatement sans défilement. L'important ici est que l'utilisateur puisse voir les commentaires du formulaire. L'endroit où vous mettez les commentaires doit être cohérent avec le reste de votre interface.
Autres remarques sur le formulaire
Vous pouvez supprimer le bouton "Ajouter" car vous en avez déjà un dans le coin supérieur droit du modal. Il ajoute simplement plus de choix et d'encombrement.
Le titre "Nouveaux emplois" n'est pas suffisamment descriptif. Spécifiez le but de ce modal, comme "Ajouter de nouveaux travaux". Il en va de même pour le bouton "Ajouter".
Utilisez des étiquettes d'entrée. S'appuyer uniquement sur du texte d'espace réservé crée des problèmes de convivialité ( voir ici ).
Avoir des étiquettes d'entrée nous permet de mettre plus de texte descriptif dans l'espace réservé
Utilisez la mise au point automatique sur les champs de saisie "Nom du travail". De cette façon, l'utilisateur peut commencer à taper immédiatement sans avoir à pointer vers le champ, puis à le sélectionner.
La largeur du champ d'entrée doit correspondre à l'entrée attendue ( voir la 6ème recommandation ).
Je suggère que vous profitiez de lois Gestalt du groupement et que vous gardiez vos boutons ensemble au-dessus ou en dessous de la notification - les utilisateurs sont plus susceptibles de s'attendre à trouver ces boutons regroupés car ce sont les deux fonctions associées à tout le contenu du même panneau.
La notification doit être traitée comme faisant partie d'une séquence de lecture: si l'utilisateur doit en être conscient avant de continuer, elle doit apparaître avant les boutons. S'il est moins important qu'ils voient la notification avant de continuer, elle pourrait apparaître après les boutons.
Je suggère également, dans un souci de lisibilité, que vous amélioriez le rapport de contraste sur vos champs de saisie car ils ne passent pas actuellement les tests d'accessibilité
Au lieu d'utiliser deux boutons, vous pouvez simplement utiliser un seul bouton nommé " ADD JOB " et mettre l'icône de fermeture dans le coin supérieur droit de votre formulaire. Cette approche vous libère des boutons inutiles de votre formulaire.
Certains ce qui aime ci-dessous:
Comme vous n'avez pas décrit toute l'histoire de l'utilisateur, je dois construire ma réponse sur une supposition, c'est-à-dire:
- L'utilisateur est sur une liste de travaux et clique sur [nouveau travail]
- Un modal est ouvert avec le formulaire pour les détails du travail
- L'utilisateur remplit les détails du travail
- L'utilisateur clique sur [ajouter un travail]
- Le formulaire est validé
- Cas: erreur
- Un message d'erreur s'affiche à l'intérieur du formulaire
- Cas: succès
- Modal ferme
- Un message temporaire séparé s'affiche
Dans cet exemple, je suppose que l'utilisateur souhaite ajouter un travail à la fois. L'utilisateur a donc trois actions à effectuer:
nouveau travail -> remplir le formulaire -> ajouter
par rapport à
nouveau travail -> remplir le formulaire -> ajouter -> fermer
Emplois multiples
Si vous souhaitez que votre utilisateur puisse ajouter plusieurs travaux, je suggère de laisser le modal ouvert et de positionner la confirmation (avec un titre de travail supplémentaire: >> "Titre" du travail créé avec succès <<) ci-dessus le formulaire.
Si la confirmation est au-dessus du formulaire, l'attention des utilisateurs est de retour en haut du formulaire, là où le flux suivant commence.
Boutons de dénomination
Comme mentionné par d'autres, j'omettre le bouton [fermer], car vous avez déjà le bouton de fermeture sur le dessus. Si vous souhaitez avoir un bouton, vous pouvez le nommer [annuler] ou [abandonner] pour clarifier qu'aucune action n'est entreprise. (Ceci est utile, car de nombreuses applications modifient les entrées lors de l'édition. La plupart du temps, les cases à cocher ou les radios changent d'état instantanément et n'ont pas besoin d'une confirmation supplémentaire.)