Please enable JavaScript.
Coggle requires JavaScript to display documents.
Ergonomie des formulaires (Interactions (Elements du formulaire (Liens…
Ergonomie des formulaires
Aides et conseils
Aide à la saisie
Pré-remplissage des informations
(adresse...)
Autocomplétion : suggérer une liste
de choix en fonction de la saisie
Pré-sélectionner le premier champ du formulaire
Utiliser la balise HTML Label
(cliquer sur le texte sélectionne le champ)
Ajouter un effet au survol de la souris
Afficher une aide pour les champs le nécessitant
(affichage constant, au survol ou sur clic d'une icône)
Vérifier que les données saisies sont correctes lorsque le champ est déselectionné
Ajouter des pickers sur les champs spécifique (calendrier pour sélectionner une date...)
Pour la saisie de mot de passe le dernier caractère reste affiché 2 secondes
Sauvegarde automatique des données saisies
En cas d'erreur afficher un message explicite au niveau du champ concerné
Accessibilité
Contenu
Composition
Décomposer en plusieurs parties, donner des noms thématiques
Minimum de pages et de champs
Les éléments liés doivent être proches
Pas de bouton reset / annuler
SI saisie irréversible, finir par une page récapitulative avec liens de retour en arrière
Si plusieurs pages, composant visuel représentant la progression dans le remplissage du formulaire
Page de confirmation de l'envoi du formulaire
Organisation visuelle
Champs alignés
Etiquettes juste au-dessus des champs
Ensemble du formulaire au-desuss du pli si possible
Bouton d'envoi sous l'élément le plus bas et le plus à droite
Ajouter un intitulé dans les zones textuelles (couleur peu saillante, ,disparait à la saisie)
Préciser dans l'intitulé temporaire si le champ est optionnel
Grouper les champs par 5 éléments environ
Adapter la taille des champs à l'information à saisir (info implicite sur le contenu à saisir)
Champs hiérarchisés (numérotation)
Liste : en dessous de 5 entrées, afficher tous les choix
Pas d'organisation en colonnes multiples
Interactions
Cas du formulaire de connexion
Connexion avec l'adresse email ou un pseudo
Connexion via des services tiers
(identifiants Facebook, Google...)
Connexion : Proposer de rester connecté
Elements du formulaire
Liens plutôt que boutons pour les actions de retour en arrière
Bouton d'envoi avec un intitulé personnalisé
Poids visuel accru sur le bouton d'envoi
Désactiver sans le cacher un bouton non-utilisable
Les boutons doivent être visuellement saillants
(aspect de bouton, couleur saillante, intitulé accrocheur et avec une icône...)
Champ sélectionné en surbrillance
Bouton d'envoi désactivé tant que le formulaire n'est pas complet
Sécurité anti-robot
Remplacer les captcha anti-robot par une solution plus ergonomique (case à cliquer...)
Ajouter un champ CSS invisible "Nom", qui ne sera rempli que par les robots
Générer la case captcha en JS pour empêcher sa lecture par les robots
Interdire l'envoi d'un formulaire rempli en moins de 2 secondes
Utilisations
Navigation
Redirection automatique en fin de saisie vers une page donnée
Déplacement d'un champ au suivant avec Tab
Au clic sur le bouton valider, celui-ci est désactivé avec une animation indiquant l'envoi