La couleur de votre marque sur un bouton d'envoi indique où cliquer. Cette même couleur sur un libellé de champ rend le texte difficile à lire. La police de votre marque dans un titre paraît sophistiquée. La même police dans un libellé de champ devient illisible à 12 pixels. C'est la tension centrale de la conception d'un formulaire de marque. Les éléments qui rendent votre marque reconnaissable peuvent rendre votre formulaire plus difficile à remplir.
La stratégie n'est pas de retirer votre marque. C'est de l'utiliser de façon sélective. Appliquez la couleur de marque là où elle guide vers l'action. Utilisez la typographie de marque là où elle reste lisible. Retirez la personnalité de marque là où elle crée de la friction. Cet article présente les décisions précises qui gardent votre formulaire à la fois fidèle à votre marque et facile à utiliser.
Où appliquer la couleur de marque dans un formulaire
Votre couleur de marque principale va sur le bouton d'envoi. Quand quelqu'un arrive à la fin d'un formulaire, il doit savoir sur quoi cliquer. Un bouton à la couleur de votre marque est immédiatement reconnaissable. La personne a déjà vu cette couleur partout sur votre site. Elle sait qu'elle signifie une action. Un bouton de marque signale "cela appartient à votre marque et on peut cliquer sans risque".
Gardez le fond du formulaire neutre. Blanc, blanc cassé ou gris très clair. Un fond clair fait ressortir les champs et rend le texte lisible. Beaucoup de marques utilisent des fonds sombres sur leur site. Un bleu marine foncé peut paraître sophistiqué dans votre en-tête. Utilisez-le comme fond de formulaire et soudain le texte blanc dans les champs devient plus difficile à lire. Les gens plissent les yeux. Ils se demandent si le formulaire est cassé. Le formulaire cesse d'être un atout pour votre marque et devient une friction.
Appliquez la couleur de marque avec subtilité aux états de focus des champs. Quand quelqu'un clique sur un champ, celui-ci a besoin d'un retour visuel. Une bordure apparaît ou un fond change pour montrer que le champ est actif. Utilisez ici une teinte plus claire de votre couleur de marque, pas la pleine saturation de votre couleur principale. Une version plus douce signale que le champ est sélectionné sans écraser le formulaire.
Les messages d'erreur ont besoin de leur propre couleur. Le rouge est la norme. Les gens comprennent le rouge comme "stop" ou "quelque chose ne va pas". N'utilisez pas votre couleur de marque pour les erreurs, même si votre marque est rouge. Si votre marque est rouge, ajoutez une nuance plus sombre ou plus saturée réservée aux erreurs. Cela crée une distinction visuelle entre "normal" et "erreur" que les gens reconnaissent instantanément.
Les messages de réussite peuvent utiliser le vert. Le vert signale l'achèvement et l'avancée. Il est compris universellement. Après l'envoi du formulaire, une page ou un message de réussite en vert donne l'impression d'une confirmation.
Les couleurs de liens dans un formulaire doivent être celle de votre marque. On s'attend à ce que les liens ressortent par la couleur. Les textes d'aide ou les liens explicatifs doivent paraître liés à votre marque tout en restant nettement séparés des champs.
Le problème d'accessibilité des palettes de marque
Beaucoup de palettes de marque ne respectent pas les normes de contraste WCAG AA. Un vert menthe clair magnifique dans votre charte graphique peut avoir un rapport de contraste de 2 pour 1 face au blanc. Les WCAG AA exigent 4,5 pour 1. Un violet sophistiqué peut échouer face au fond de champ que vous avez choisi. C'est courant. C'est aussi réparable.
Testez vos couleurs de marque avant de les utiliser dans les formulaires. Utilisez un outil de vérification du contraste. Si votre couleur de marque ne respecte pas les WCAG AA, vous avez des options. Utilisez une version plus sombre ou plus saturée de cette couleur. Un vert menthe peut avoir une variante vert forêt dans votre palette qui respecte le rapport. Ou bien utilisez votre couleur de marque seulement comme accent sur les boutons, où le contraste est naturellement plus fort. Utilisez un neutre foncé, comme l'anthracite, pour le texte qui a besoin de contraste.
C'est particulièrement crucial pour les libellés. Si vos libellés sont dans une couleur de marque claire, une personne malvoyante aura du mal. Une personne qui regarde le formulaire sur un écran de téléphone en plein soleil aussi. Les libellés ne sont pas de la décoration. Ce sont des informations essentielles. Gardez-les foncés et bien contrastés. Réservez votre couleur de marque aux boutons et aux accents, là où elle ne sacrifie pas la lisibilité.
Comment choisir une typographie lisible pour les formulaires
Votre marque a probablement une police distinctive. Les polices avec empattements évoquent la sophistication pour les cabinets d'avocats. Les polices géométriques sans empattements paraissent modernes pour les entreprises technologiques. Les écritures ludiques conviennent aux marques créatives. Ces polices sont des atouts de marque précieux. Elles aident les gens à reconnaître votre marque. Dans un formulaire, elles créent des problèmes.
Les libellés de formulaire doivent se parcourir facilement et rester lisibles en petite taille. La plupart des polices décoratives de marque ne le sont pas. Une écriture manuscrite est superbe dans un titre à 36 pixels. À 13 pixels pour un libellé de formulaire, elle est presque illisible. Une police géométrique fine paraît élégante en grande taille. À 12 pixels, elle devient difficile à lire. Une police avec empattements ornée de fioritures crée du bruit visuel dans un champ qui doit être clair et utilitaire.
La solution est d'utiliser une police sans empattements simple pour tout le texte du formulaire. Libellés, textes d'aide, textes indicatifs, messages d'erreur. Tous doivent être dans une police simple et lisible, par exemple une police système moderne. Ce n'est pas renoncer à votre marque. C'est choisir la clarté là où elle compte. Votre marque s'exprime dans la couleur de votre bouton, votre mise en page, votre esthétique générale. Vos libellés n'ont pas à porter tout le poids de l'identité de marque.
Si votre marque utilise une police sans empattements claire et lisible, testez-la à 12 à 14 pixels sur un téléphone mobile. La lisez-vous clairement ? Si oui, vous pouvez l'utiliser dans votre formulaire. Sinon, utilisez une police de repli.
Le texte de votre bouton d'envoi peut utiliser la police de votre marque si elle est lisible à 14 à 16 pixels. Le texte d'un bouton est plus grand que celui d'un libellé. Une police décorative a plus de marge. Mais si la police de votre marque échoue aux tailles de libellés, elle échouera dans les champs. Choisissez d'abord la lisibilité, ensuite la personnalité de marque.
Construire la hiérarchie visuelle quand typographie et couleur travaillent ensemble
La hiérarchie visuelle d'un formulaire guide la personne de haut en bas. Quels éléments sont les plus importants ? Lesquels sont secondaires ? Dans un formulaire, la hiérarchie est simple et précise. Les libellés des champs sont primaires. Les textes d'aide sont secondaires. Le bouton d'envoi est l'appel à l'action.
Utilisez la taille de police pour soutenir cette hiérarchie. Les libellés doivent faire 13 à 16 pixels. Les textes d'aide doivent être plus petits et d'une couleur un peu plus claire, autour de 12 pixels. Les messages d'erreur doivent être aussi lisibles que les libellés. Ne les rendez pas plus petits ou plus clairs. Les gens doivent voir les erreurs immédiatement. Donnez au texte d'erreur autant de présence qu'au libellé qu'il corrige.
Votre couleur de marque soutient cette hiérarchie. Le bouton d'envoi est dans votre couleur de marque principale et se distingue nettement des libellés. La couleur seule dit à l'utilisateur "voilà l'action à faire ensuite". Les libellés doivent être foncés et neutres. Toute couleur de marque dans les libellés doit être discrète et passer après la lisibilité.
Les titres de section d'un formulaire plus long peuvent utiliser votre couleur de marque. Cela crée des pauses visuelles entre les groupes de champs. Un titre de section n'est pas un champ de saisie. Il peut être plus expressif que les libellés. Profitez-en tout en gardant les libellés clairs et lisibles.
Quand appliquer la personnalité de marque et quand la retirer
Un formulaire est un outil que quelqu'un utilise pour accomplir quelque chose. Cette personne veut avancer vite dans le formulaire. Chaque choix de conception doit l'aider à le faire ou disparaître.
La personnalité de marque a sa place là où elle renforce la confiance. La qualité visuelle globale de votre formulaire, l'espacement entre les champs, la cohérence des couleurs et de la typographie montrent que votre marque soigne les détails. Un formulaire soigné et professionnel appartient à une marque soignée et professionnelle. C'est la personnalité de marque à l'œuvre. Elle aide les gens à vous faire confiance.
La personnalité de marque n'a pas sa place là où elle crée de la friction. N'utilisez pas de libellés tout en majuscules parce que cela fait plus autoritaire. N'utilisez pas un texte très clair sur un fond plus sombre parce que cela paraît plus sophistiqué. N'utilisez pas une police étroite et ornée pour faire tenir plus de texte parce qu'elle correspond à votre esthétique. Ces choix nuisent à l'utilisabilité. Ils ralentissent les gens. La conception d'un formulaire est l'un des rares endroits où une marque doit dire "mon esthétique passe après l'aide que j'apporte pour mener cette tâche à bien".
Testez vos choix de conception sur un téléphone mobile. Si vos choix de personnalité de marque rendent le formulaire plus difficile à remplir sur un petit écran, ils n'apportent rien. Retirez-les. Dépouillez le formulaire jusqu'à ce qu'il soit facile sur téléphone. Puis appliquez des choix de marque qui ne gênent pas cette facilité.
Comment garder la cohérence entre vos différents types de formulaires
Une marque peut avoir différents types de formulaires. Un formulaire de contact est court et conversationnel. Un formulaire de paiement est plus long et plus structuré. Une enquête est exploratoire. Une inscription à la newsletter est minimale. Chacun a un but différent. Mais chacun doit avoir l'air de la même marque.
Le langage visuel de base doit rester le même dans tous les formulaires. Le bouton d'envoi est toujours dans votre couleur de marque principale. Les libellés sont toujours dans la même police lisible. L'espacement des champs suit le même schéma. Quand quelqu'un passe d'un formulaire de contact à un formulaire de paiement puis à une enquête, il doit avoir le sentiment de rester dans la même expérience de marque, même si le formulaire a un autre but.
Créez un guide de style des formulaires et documentez vos décisions. La police des libellés est telle police à 14 pixels. La couleur du bouton principal est la référence exacte de votre couleur de marque. L'état de focus des champs est cette teinte claire précise de votre couleur de marque. Le texte d'aide est gris à 12 pixels. Une fois ces décisions documentées, chaque formulaire créé par votre équipe sera cohérent. Leur création sera aussi plus rapide, car les décisions sont déjà prises.
Comment WEMASY vous aide à créer des formulaires de marque
Le créateur de formulaires WEMASY vous laisse contrôler chaque élément visuel tout en respectant les normes d'accessibilité. Définissez votre couleur de marque comme couleur de bouton. Choisissez dans une bibliothèque de polices web courantes pour les libellés. Contrôlez l'espacement et la mise en page des champs. Prévisualisez votre formulaire sur mobile avant de publier.
Enregistrez vos choix de conception comme modèle. Chaque formulaire créé ensuite hérite du même style cohérent. Créez un formulaire de contact, un formulaire de paiement, une enquête. Tous ont l'air de votre marque, car tous utilisent le même modèle.
Les formulaires WEMASY respectent automatiquement les exigences de contraste WCAG AA pour les éléments de formulaire. Si vous choisissez une couleur de marque pour les boutons ou les accents, le système veille à ce que le contraste reste lisible. Vous pouvez être sûr que votre formulaire de marque est à la fois distinctif et accessible.
Voyez les fonctions de formulaire incluses dans votre offre WEMASY.