Je merkkleur op een verzendknop vertelt iemand waarop hij moet klikken. Dezelfde kleur op een formulierlabel maakt de tekst moeilijk leesbaar. Je merklettertype in een kop ziet er verfijnd uit. Hetzelfde lettertype in een veldlabel wordt onleesbaar bij 12 pixels. Dit is de kernspanning in formulierontwerp in je huisstijl. De elementen die je merk herkenbaar maken, kunnen je formulier moeilijker invulbaar maken.
De strategie is niet om je merk weg te halen. Het is om je merk selectief te gebruiken. Gebruik je merkkleur waar die mensen naar actie leidt. Gebruik je merktypografie waar die leesbaar blijft. Haal het merkkarakter weg waar het wrijving veroorzaakt. Dit artikel behandelt de concrete keuzes waarmee je formulier zowel herkenbaar als bruikbaar blijft.
Waar je merkkleur in een formulier toepast
Je primaire merkkleur hoort op de verzendknop. Als iemand het einde van een formulier bereikt, moet hij weten waarop hij moet klikken. Een knop in je merkkleur is direct herkenbaar. De persoon heeft die kleur al overal op je website gezien. Hij weet dat het actie betekent. Een knop in je huisstijl zegt "dit hoort bij je merk en het is veilig om erop te klikken."
Houd de achtergrond van je formulier neutraal. Wit, gebroken wit of heel lichtgrijs. Een lichte achtergrond laat formuliervelden opvallen en maakt tekst leesbaar. Veel merken gebruiken donkere achtergronden op hun website. Een donkerblauw kan er in je kop verfijnd uitzien. Gebruik je het als achtergrond van je formulier, dan wordt de witte tekst in formuliervelden ineens moeilijker leesbaar. Mensen turen. Ze vragen zich af of het formulier kapot is. Het formulier is geen aanwinst voor je merk meer, maar wrijving.
Gebruik merkkleur subtiel bij de focusstatus van velden. Klikt iemand op een formulierveld, dan heeft dat veld visuele feedback nodig. Er verschijnt een rand of de achtergrond verschuift om te laten zien dat het veld actief is. Gebruik hier een lichtere tint van je merkkleur. Niet de volle verzadiging van je primaire kleur. Een zachtere versie laat zien dat het veld is geselecteerd zonder het formulier te overweldigen.
Foutmeldingen hebben hun eigen kleur nodig. Rood is de standaard. Mensen begrijpen rood als "stop" of "er klopt iets niet". Gebruik je merkkleur niet voor fouten, ook niet als je merk rood is. Is je merk rood, voeg dan een donkerder of verzadigder tint toe speciaal voor fouten. Zo ontstaat een visueel onderscheid tussen "normaal" en "fout" dat mensen direct herkennen.
Succesmeldingen kunnen groen zijn. Groen staat voor voltooiing en vooruitgang. Het wordt overal begrepen. Na het versturen van je formulier voelt een succespagina of -bericht in groen als bevestiging.
Linkkleuren in een formulier horen je merkkleur te zijn. Van links wordt verwacht dat ze met kleur opvallen. Hulptekst of verklarende links moeten verbonden aanvoelen met je merk, maar duidelijk los staan van formuliervelden.
Het toegankelijkheidsprobleem in kleurpaletten van merken
Veel kleurpaletten van merken voldoen niet aan de WCAG AA-contrastnormen. Een lichtmintgroen dat er prachtig uitziet in je huisstijlgids, kan tegen wit een contrastverhouding van 2 op 1 hebben. WCAG AA eist 4,5 op 1. Een verfijnd paars kan tegen de gekozen achtergrond van je formulierveld tekortschieten. Dat komt vaak voor. Het is ook op te lossen.
Test je merkkleuren voordat je ze in formulieren gebruikt. Gebruik een tool voor het controleren van contrast. Voldoet je merkkleur niet aan WCAG AA, dan heb je opties. Gebruik een donkerdere of verzadigdere versie van die kleur. Een mintgroen heeft in je palet misschien een bosgroene variant die wel aan de verhouding voldoet. Of gebruik je merkkleur alleen als accent op knoppen, waar het contrast van nature hoger is. Gebruik een donker neutraal, zoals antraciet, voor tekst die contrast nodig heeft.
Dit is vooral cruciaal voor labels. Staan je labels in een lichte merkkleur, dan heeft iemand met een slecht zicht problemen. Iemand die het formulier buiten op een helder telefoonscherm bekijkt ook. Labels zijn geen versiering. Het is cruciale informatie. Houd ze donker met sterk contrast. Bewaar je merkkleur voor knoppen en accenten, waar die de leesbaarheid niet opoffert.
Zo kies je typografie voor leesbare formulieren
Je merk heeft waarschijnlijk een onderscheidend lettertype. Schreeflettertypen stralen verfijning uit voor advocatenkantoren. Geometrische schreefloze lettertypen voelen modern voor techbedrijven. Speelse schriftlettertypen passen bij creatieve merken. Deze lettertypen zijn waardevolle merkmiddelen. Ze helpen mensen je merk te herkennen. In een formulier veroorzaken ze problemen.
Formulierlabels moeten scanbaar en leesbaar zijn in kleine formaten. De meeste decoratieve merklettertypen zijn dat niet. Een handschriftlettertype is prachtig in een kop van 36 pixels. Op 13 pixels voor een formulierlabel is het bijna onleesbaar. Een dun geometrisch lettertype ziet er elegant uit in grotere formaten. Op 12 pixels wordt het moeilijk leesbaar. Een sierlijk schreeflettertype met versieringen veroorzaakt visuele ruis in een formulierveld dat helder en praktisch moet zijn.
De oplossing is een rustig schreefloos lettertype voor alle formuliertekst. Labels, hulptekst, plaatshoudertekst, foutmeldingen. Alles in een eenvoudig, leesbaar lettertype. Arial, Helvetica of een modern systeemlettertype. Dat is je merk niet opgeven. Het is kiezen voor duidelijkheid waar het ertoe doet. Je merk komt tot uiting in je knopkleur, je indeling en je algehele uitstraling. Je formulierlabels hoeven niet het volle gewicht van je merkidentiteit te dragen.
Gebruikt je merk een rustig, leesbaar schreefloos lettertype, test het dan op 12 tot 14 pixels op een mobiele telefoon. Kun je het duidelijk lezen? Zo ja, dan kun je het in je formulier gebruiken. Zo nee, gebruik dan een terugvallettertype.
De tekst op je verzendknop mag je merklettertype gebruiken als het leesbaar is op 14 tot 16 pixels. Knoptekst is groter dan labeltekst. Een decoratief lettertype heeft meer ruimte om te werken. Maar faalt je merklettertype op labelgrootte, dan faalt het in formuliervelden. Kies eerst leesbaarheid, dan merkkarakter.
Visuele hiërarchie opbouwen als typografie en kleur samenwerken
Visuele hiërarchie in een formulier leidt een persoon van boven naar beneden. Welke elementen zijn het belangrijkst? Welke zijn secundair? In een formulier is de hiërarchie eenvoudig en specifiek. Veldlabels zijn primair. Hulptekst is secundair. De verzendknop is de oproep tot actie.
Gebruik lettergrootte om deze hiërarchie te ondersteunen. Labels zijn 13 tot 16 pixels. Hulptekst is kleiner en iets lichter van kleur, rond 12 pixels. Foutmeldingen moeten net zo leesbaar zijn als labels. Maak foutteksten niet kleiner of lichter. Mensen moeten fouten direct zien. Maak de fouttekst net zo opvallend als het label dat hij corrigeert.
Je merkkleur ondersteunt deze hiërarchie. De verzendknop heeft je primaire merkkleur en verschilt zichtbaar van veldlabels. Alleen de kleur zegt de gebruiker al "dit is de actie die je hierna doet." Labels horen donker en neutraal te zijn. Elke merkkleur in labels moet subtiel zijn en ondergeschikt aan leesbaarheid.
Kopjes van secties in een langer formulier mogen je merkkleur gebruiken. Zo ontstaan visuele pauzes tussen groepen velden. Een sectiekop is geen invoerveld. Er is ruimte om expressiever te zijn dan labels. Gebruik die ruimte en houd labels duidelijk en leesbaar.
Wanneer je merkkarakter toepast en wanneer je het weglaat
Een formulier is een hulpmiddel waarmee iemand iets wil bereiken. Die persoon wil snel door het formulier. Elke ontwerpkeuze moet hem daarbij helpen of verdwijnen.
Merkkarakter hoort op plekken waar het vertrouwen geeft. De algehele visuele kwaliteit van je formulier, de ruimte tussen velden en de consistentie van kleuren en typografie laten zien dat je merk om details geeft. Een verzorgd, professioneel ogend formulier hoort bij een verzorgd, professioneel merk. Dat is merkkarakter aan het werk. Het helpt mensen je te vertrouwen.
Merkkarakter hoort niet op plekken waar het wrijving veroorzaakt. Gebruik geen labels in hoofdletters omdat het gezaghebbender oogt. Gebruik geen heel lichte tekst op een donkere achtergrond omdat het verfijnder voelt. Gebruik geen smal, sierlijk lettertype om meer tekst te passen omdat het bij je merkstijl past. Deze keuzes schaden het gebruiksgemak. Ze vertragen mensen. Formulierontwerp is een van de weinige plekken waar een merk moet zeggen: "mijn stijl komt na het helpen van mensen bij deze taak."
Test je ontwerpkeuzes op een mobiele telefoon. Maken je keuzes voor merkkarakter het formulier moeilijker invulbaar op een klein scherm, dan voegen ze geen waarde toe. Haal ze weg. Strip het formulier terug tot het makkelijk voelt op een telefoon. Voeg daarna merkkeuzes toe die dat gemak niet verstoren.
Zo blijft je huisstijl consistent in verschillende soorten formulieren
Een merk kan verschillende soorten formulieren hebben. Een contactformulier is kort en informeel. Een afrekenformulier is langer en strakker gestructureerd. Een enquête is verkennend. Een aanmelding voor een nieuwsbrief is minimaal. Elk heeft een ander doel. Maar elk moet eruitzien en aanvoelen alsof het bij hetzelfde merk hoort.
De kern van de visuele taal blijft in elk formulier gelijk. De verzendknop heeft altijd je primaire merkkleur. Labels staan altijd in hetzelfde leesbare lettertype. De ruimte tussen velden volgt hetzelfde patroon. Gaat iemand van een contactformulier naar een afrekenformulier en een enquête, dan moet hij het gevoel hebben in dezelfde merkervaring te zijn, ook al heeft het formulier een ander doel.
Maak een stijlgids voor formulieren en leg je keuzes vast. Het lettertype voor labels is Open Sans op 14 pixels. De kleur van de hoofdknop is je Pantone-nummer. De focusstatus van velden is deze specifieke lichte tint van je merkkleur. Hulptekst is grijs op 12 pixels. Heb je deze keuzes vastgelegd, dan voelt elk formulier dat je team bouwt consistent. Bouwen gaat ook sneller, omdat de keuzes al gemaakt zijn.
Zo helpt WEMASY je formulieren in je huisstijl te bouwen
Met de formulierbouwer van WEMASY beheer je elk visueel element en blijf je binnen de toegankelijkheidsnormen. Stel je merkkleur in als knopkleur. Kies uit een bibliotheek met webveilige lettertypen voor labels. Beheer de ruimte tussen velden en de indeling. Bekijk een voorbeeld van je formulier op mobiel voordat je publiceert.
Sla je ontwerpkeuzes op als sjabloon. Elk formulier dat je daarna maakt, erft dezelfde consistente opmaak. Bouw een contactformulier, een afrekenformulier, een enquêteformulier. Ze zien er allemaal uit als je merk, omdat ze hetzelfde sjabloon gebruiken.
WEMASY-formulieren voldoen automatisch aan de WCAG AA-contrasteisen voor formulierelementen. Kies je een merkkleur voor knoppen of accenten, dan zorgt het systeem dat het contrast leesbaar blijft. Je kunt erop vertrouwen dat je formulier in je huisstijl zowel onderscheidend als toegankelijk is.
Bekijk welke formulierfuncties in je WEMASY-abonnement zitten.