Dit brands farve på en send-knap fortæller, hvad man skal klikke på. Den samme farve på en etiket gør teksten svær at læse. Din skrifttype til brandet ser flot ud i en overskrift. Den samme skrifttype i en etiket til et felt bliver ulæselig ved 12 pixel. Det er den grundlæggende spænding i formulardesign med brand. De elementer, der gør dit brand genkendeligt, kan gøre din formular sværere at udfylde.
Strategien er ikke at fjerne dit brand. Det er at bruge dit brand med omtanke. Brug brandets farve, hvor den leder folk til handling. Brug brandets typografi, hvor den stadig er læselig. Fjern brandets personlighed, hvor den skaber friktion. Denne artikel gennemgår de konkrete valg, der holder din formular både tydeligt dit brand og nem at bruge.
Hvor du bruger brandets farve i en formular
Brandets hovedfarve hører til på send-knappen. Når nogen når bunden af en formular, skal de vide, hvad de skal klikke på. En knap i brandets farve er genkendelig med det samme. Personen har allerede set den farve overalt på din hjemmeside. De ved, at den betyder handling. En knap i brandets farve siger "den her hører til dit brand, og det er sikkert at klikke".
Hold formularens baggrund neutral. Hvid, off-white eller meget lysegrå. En lys baggrund får formularfelter til at stå frem og gør teksten læselig. Mange brands har mørke baggrunde på deres hjemmesider. En mørk marineblå kan se sofistikeret ud i din sidehoved. Bruger du den som baggrund i formularen, bliver den hvide tekst i felterne pludselig sværere at læse. Folk misser med øjnene. De undrer sig over, om formularen er i stykker. Formularen holder op med at være en styrke for dit brand og bliver til friktion.
Brug brandets farve diskret, når et felt har fokus. Når nogen klikker på et felt, skal feltet give visuel respons. En kant dukker op, eller baggrunden skifter for at vise, at feltet er aktivt. Brug en lysere nuance af brandets farve her. Ikke hovedfarvens fulde styrke. En blødere udgave viser, at feltet er valgt, uden at overvælde formularen.
Fejlmeddelelser har brug for deres egen farve. Rød er standarden. Folk forstår rød som "stop" eller "der er noget galt". Brug ikke brandets farve til fejl, selv om dit brand er rødt. Hvis dit brand er rødt, så tilføj en mørkere eller mere mættet nuance kun til fejl. Det skaber en visuel forskel på "normal" og "fejl", som folk genkender med det samme.
Beskeder om succes kan bruge grøn. Grøn signalerer, at noget er gennemført, og at man kan gå videre. Det forstår alle. Når nogen har sendt din formular, føles en side eller besked i grønt som en bekræftelse.
Links i en formular skal have brandets farve. Links forventes at skille sig ud med farve. Hjælpetekst eller forklarende links skal føles forbundet med dit brand, men tydeligt adskilt fra formularfelterne.
Problemet med tilgængelighed i brandets farvepaletter
Mange farvepaletter i brands består ikke WCAG AA-standarden for kontrast. En lys mintgrøn, der ser smuk ud i din brandguide, kan have et kontrastforhold på 2 til 1 mod hvid. WCAG AA kræver 4,5 til 1. En flot lilla kan komme til kort mod den baggrund, du har valgt til formularfelter. Det er almindeligt. Det kan også rettes.
Test brandets farver, før du bruger dem i formularer. Brug et værktøj til at tjekke kontrast. Hvis brandets farve ikke opfylder WCAG AA, har du muligheder. Brug en mørkere eller mere mættet udgave af farven. En mintgrøn kan have en mørkegrøn variant i din palet, som opfylder forholdet. Eller brug brandets farve kun som accent på knapper, hvor kontrasten naturligt er højere. Brug en mørk neutral farve som trækul til tekst, der skal have kontrast.
Det er især vigtigt for etiketter. Hvis dine etiketter er i en lys brandfarve, vil en med nedsat syn have svært ved dem. Det vil en, der ser formularen på en mobilskærm i skarpt lys udendørs, også. Etiketter er ikke pynt. De er vigtig information. Hold dem mørke med stærk kontrast. Gem brandets farve til knapper og accenter, hvor den ikke går ud over læseligheden.
Sådan vælger du typografi, så formularen er læselig
Dit brand har sandsynligvis en karakteristisk skrifttype. Skrifttyper med seriffer signalerer sofistikation hos advokater. Geometriske skrifttyper uden seriffer føles moderne hos tech-virksomheder. Legende skrifttyper i håndskrift passer til kreative brands. De skrifttyper er værdifulde aktiver for brandet. De hjælper folk med at genkende dit brand. I en formular skaber de problemer.
Etiketter i formularer skal kunne skimmes og læses i små størrelser. De fleste dekorative skrifttyper til brands kan ikke det. En skrifttype i håndskrift er smuk i en overskrift ved 36 pixel. Ved 13 pixel til en etiket er den næsten ulæselig. En tynd geometrisk skrifttype ser elegant ud i større størrelser. Ved 12 pixel bliver den svær at læse. En udsmykket skrifttype med seriffer og snirkler skaber visuel støj i et formularfelt, der skal være klart og nyttigt.
Løsningen er at bruge en ren skrifttype uden seriffer til al tekst i formularen. Etiketter, hjælpetekst, pladsholdertekst, fejlmeddelelser. Alt skal være i en enkel, læselig skrifttype. En almindelig standardskrifttype eller en moderne systemskrifttype. Det er ikke at opgive dit brand. Det er at vælge klarhed, hvor det har betydning. Dit brand viser sig i knappens farve, dit layout og din samlede æstetik. Dine etiketter behøver ikke bære hele vægten af brandets identitet.
Hvis dit brand bruger en ren, læselig skrifttype uden seriffer, så test den ved 12 til 14 pixel på en mobiltelefon. Kan du læse den tydeligt? Hvis ja, kan du bruge den i din formular. Hvis nej, så brug en reserveskrifttype.
Teksten på din send-knap kan bruge brandets skrifttype, hvis den er læselig ved 14 til 16 pixel. Tekst på knapper er større end tekst i etiketter. En dekorativ skrifttype har mere plads. Men hvis brandets skrifttype ikke dur i størrelsen til etiketter, dur den heller ikke i formularfelter. Vælg læselighed først og brandets personlighed bagefter.
Sådan bygger du visuelt hierarki, når typografi og farve virker sammen
Visuelt hierarki i en formular leder en person oppefra og ned. Hvilke elementer er vigtigst? Hvilke er sekundære? I en formular er hierarkiet enkelt og konkret. Etiketter til felter er det vigtigste. Hjælpetekst er sekundær. Send-knappen er opfordringen til handling.
Brug skriftstørrelse til at understøtte det hierarki. Etiketter skal være 13 til 16 pixel. Hjælpetekst skal være mindre og en anelse lysere, omkring 12 pixel. Fejlmeddelelser skal være lige så læselige som etiketter. Gør ikke fejltekst mindre eller lysere. Folk skal se fejl med det samme. Gør fejltekst lige så tydelig som den etiket, den retter.
Brandets farve understøtter hierarkiet. Send-knappen har brandets hovedfarve og er tydeligt anderledes end etiketterne. Farven alene fortæller brugeren "det er den handling, du skal tage nu". Etiketter skal være mørke og neutrale. Brandets farve i etiketter skal være diskret og komme efter læseligheden.
Overskrifter til afsnit i en længere formular kan bruge brandets farve. Det skaber visuelle pauser mellem grupper af felter. En overskrift til et afsnit er ikke et felt. Den har plads til at være mere udtryksfuld end etiketter. Brug den plads, men hold etiketter klare og læselige.
Hvornår du bruger brandets personlighed, og hvornår du fjerner den
En formular er et værktøj, som nogen bruger for at nå et mål. Personen vil gerne hurtigt igennem formularen. Hvert designvalg skal enten hjælpe dem med det eller forsvinde.
Brandets personlighed hører til de steder, hvor den giver tryghed. Den samlede visuelle kvalitet i din formular, afstanden mellem felter, ensartede farver og typografi viser alt sammen, at dit brand går op i detaljerne. En poleret, professionel formular hører til et poleret, professionelt brand. Det er brandets personlighed i arbejde. Den hjælper folk med at stole på dig.
Brandets personlighed hører ikke til de steder, hvor den skaber friktion. Brug ikke etiketter med store bogstaver, fordi det ser mere dominerende ud. Brug ikke meget lys tekst på en mørkere baggrund, fordi det føles mere sofistikeret. Brug ikke en smal, udsmykket skrifttype for at få mere tekst med, fordi den passer til brandets æstetik. De valg skader brugbarheden. De sinker folk. Formulardesign er et af de få steder, hvor et brand må sige: "min æstetik kommer i anden række, når det gælder om at hjælpe folk med at gennemføre opgaven."
Test dine designvalg til brandet på en mobiltelefon. Hvis valgene om brandets personlighed gør formularen sværere at gennemføre på en lille skærm, giver de ikke værdi. Fjern dem. Skær formularen ind til benet, indtil den føles let på en telefon. Tilføj så de valg til brandet, der ikke forstyrrer den lethed.
Sådan holder du formularer ens på tværs af typer
Et brand kan have forskellige typer formularer. En kontaktformular er kort og som en samtale. En betalingsformular er længere og mere struktureret. Et spørgeskema er undersøgende. En tilmelding til nyhedsbrev er minimal. Hver har et forskelligt formål. Men hver skal se ud og føles, som om den hører til det samme brand.
Det grundlæggende visuelle sprog skal være det samme i alle formularer. Send-knappen har altid brandets hovedfarve. Etiketter har altid den samme læselige skrifttype. Afstanden mellem felter følger det samme mønster. Når nogen går fra en kontaktformular til en betalingsformular til et spørgeskema, skal de føle, at de er i den samme oplevelse af brandet, selv om formularen har et andet formål.
Lav en stilguide til formularer og skriv dine valg ned. Skrifttypen til etiketter er en enkel skrifttype i 14 pixel. Knappens hovedfarve er dit brands farvenummer. Fokus på felter har netop den lette nuance af brandets farve. Hjælpetekst er grå i 12 pixel. Når du har de valg skrevet ned, vil hver formular, dit team bygger, føles ensartet. Det går også hurtigere at bygge dem, fordi valgene allerede er truffet.
Sådan hjælper WEMASY dig med at bygge formularer med dit brand
WEMASYs formularbygger lader dig styre alle visuelle elementer og samtidig overholde standarder for tilgængelighed. Sæt dit brands farve som knappens farve. Vælg fra et bibliotek af sikre webskrifttyper til etiketter. Styr afstand og layout af felter. Se din formular på mobil, før du udgiver den.
Gem dine designvalg som en skabelon. Hver formular, du laver derefter, arver den samme ensartede stil. Byg en kontaktformular, en betalingsformular, et spørgeskema. De ser alle ud som dit brand, fordi de alle bruger den samme skabelon.
WEMASYs formularer opfylder automatisk WCAG AA-kravene til kontrast for formularelementer. Hvis du vælger en brandfarve til knapper eller accenter, sørger systemet for, at kontrasten forbliver læselig. Du kan være tryg ved, at din formular med dit brand både er karakteristisk og tilgængelig.
Se, hvilke funktioner til formularer der er med i din WEMASY-plan.