Formulaires
Les règles pour le formulaire entier, avant tout champ : demandez peu, une colonne, l'étiquette en vue et l'erreur sous le champ.
Sur cette page
Règles pour le formulaire entier
- Demandez uniquement ce qui est nécessaire. Chaque champ supplémentaire est du travail pour la personne. Si vous pouvez le trouver vous-même, ne demandez pas.
- Une seule colonne. Champs les uns sous les autres, dans l'ordre où la personne pense. Côté à côté seulement quand ils sont une chose (heure et minute).
- Étiquette toujours visible, au-dessus du champ. Le texte de remplacement ne prend jamais sa place.
- Tout est requis, sauf ce qui indique "(optionnel)". Marquer l'optionnel est plus court que de disperser des astérisques.
- Plus proche, plus ensemble. À l'intérieur d'un champ,
space-1; entre les options dans un groupe,space-2; entre un champ et le suivant,space-5. - L'erreur se trouve sous le champ, avec icône et mot, et un résumé en haut s'il y en a plusieurs. En dessous, elle ne rompt pas un formulaire à deux colonnes.
- Le serveur valide toujours. L'erreur revient avec les valeurs remplies ; rien de ce que la personne a écrit n'est perdu.
- Un seul bouton principal à la fin, indiquant ce qui se passe : "Enregistrer le rappel". Le feedback s'affiche sur le formulaire lui-même.
Un formulaire complet
Time format:
Essayez d'enregistrer avec un nom vide : l'erreur s'affiche sous le champ, et le focus y va. Avec un nom, le feedback s'affiche sur le formulaire lui-même.
Texte de remplacement
- Autorisé comme exemple court supplémentaire, sous une étiquette qui reste : "ex. Arroser les plantes", "Rechercher des tâches".
- Jamais au lieu de l'étiquette ou du message d'aide : il disparaît lorsque la personne tape, et ce qui est dit s'en va avec lui.
- Jamais pour les informations nécessaires (format requis, limites) : cela va dans le message d'aide, qui reste.
- Dans la couleur de texte douce, qui passe le contraste 4.5.
Faire et ne pas faire
Do
Subject
L'étiquette reste visible, et l'exemple aide seulement.
Don’t
L'exemple à la place de l'étiquette, avec une règle à l'intérieur : tout disparaît lorsque la personne tape.
Do
Note (optional)
Seule la case optionnelle est marquée, en mots.
Don’t
Name *
Astérisques sur tout, avec la clé bien en bas.
Do
Name
L'erreur sous le champ, avec icône et mot.
Don’t
Name
L'erreur en haut, vague, et par couleur seulement.
Rédaction
- Étiquette : un nom court ou une question directe (« Nom du rappel », « Quand rappeler ? »). Pas de deux-points à la fin.
- Message d'aide : uniquement s'il aide à le faire bien la première fois. Si chaque champ a un message d'aide, aucun n'est lu.
- Erreur : que faire, pas ce qui ne va pas (« Écrire un nom », pas « Champ invalide »).
Composants
- Champ, TextInput, TimeInput, Select, Checkbox, Radios, Switch : les pièces.
- ErrorMessage et ErrorSummary : les erreurs.
- Feedback in place : ce qui se passe après Sauvegarder.