Din varumärkesfärg på en skickaknapp visar någon vad hen ska klicka på. Samma färg på en formuläretikett gör texten svår att läsa. Ditt varumärkestypsnitt i en rubrik ser sofistikerat ut. Samma typsnitt i en fältetikett blir oläsligt i 12 pixlar. Det är den centrala spänningen i formulärdesign med varumärke. De element som gör ditt varumärke igenkännbart kan göra ditt formulär svårare att fylla i.
Strategin är inte att ta bort ditt varumärke. Den är att använda det med omsorg. Använd varumärkesfärgen där den leder människor till handling. Använd varumärkets typografi där den förblir läsbar. Ta bort varumärkets personlighet där den skapar friktion. Den här artikeln går igenom de specifika val som gör att ditt formulär både speglar ditt varumärke och går att använda.
Var du använder varumärkesfärgen i ett formulär
Din primära varumärkesfärg hör hemma på skickaknappen. När någon når slutet av ett formulär behöver hen veta vad hen ska klicka på. En knapp i din varumärkesfärg är direkt igenkännbar. Personen har redan sett den färgen över hela din webbplats. Hen vet att den betyder handling. En knapp i varumärkets färg signalerar "den här tillhör ditt varumärke och det är säkert att klicka".
Håll formulärets bakgrund neutral. Vit, off-white eller mycket ljusgrå. En ljus bakgrund får formulärfälten att synas och gör texten läsbar. Många varumärken använder mörka bakgrunder på sina webbplatser. Marinblått kan se sofistikerat ut i ditt sidhuvud. Använd det som bakgrund i formuläret så blir plötsligt den vita texten i fälten svårare att läsa. Folk kisar. De undrar om formuläret är trasigt. Formuläret slutar vara en tillgång för ditt varumärke och blir friktion.
Använd varumärkesfärgen diskret för fältens fokuslägen. När någon klickar i ett formulärfält behöver fältet visuell respons. En kantlinje dyker upp eller en bakgrund ändras för att visa att fältet är aktivt. Använd en ljusare nyans av din varumärkesfärg här. Inte den fulla mättnaden i din primärfärg. En mjukare version signalerar att fältet är markerat utan att överrösta formuläret.
Felmeddelanden behöver en egen färg. Röd är standard. Människor förstår rött som "stopp" eller "något är fel". Använd inte din varumärkesfärg för fel, inte ens om ditt varumärke är rött. Om ditt varumärke är rött lägger du till en mörkare eller mer mättad nyans särskilt för fel. Det skapar en visuell skillnad mellan "normalt" och "fel" som människor känner igen direkt.
Bekräftelsemeddelanden kan använda grönt. Grönt signalerar slutfört och framåtrörelse. Det förstås överallt. När någon har skickat in ditt formulär känns en tacksida eller ett meddelande i grönt som en bekräftelse.
Länkfärger i ett formulär bör vara din varumärkesfärg. Länkar förväntas synas med färg. Hjälptext eller förklarande länkar ska kännas kopplade till ditt varumärke men tydligt skilda från formulärfälten.
Tillgänglighetsproblemet i varumärkens färgpaletter
Många färgpaletter för varumärken klarar inte kontrastkraven i WCAG AA. En ljus mintgrön färg som ser vacker ut i din grafiska manual kan ha kontrastförhållandet 2 till 1 mot vitt. WCAG AA kräver 4,5 till 1. Ett sofistikerat lila kan misslyckas mot den bakgrund du valt för formulärfälten. Det är vanligt. Det går också att åtgärda.
Testa dina varumärkesfärger innan du använder dem i formulär. Använd ett verktyg för kontrastkontroll. Om din varumärkesfärg inte uppfyller WCAG AA har du alternativ. Använd en mörkare eller mer mättad version av färgen. En mintgrön kan ha en skogsgrön variant i din palett som klarar förhållandet. Eller använd din varumärkesfärg bara som accent på knappar, där kontrasten är högre av naturen. Använd en mörk neutral färg som kol för text som behöver kontrast.
Det här är särskilt viktigt för etiketter. Om dina etiketter har en ljus varumärkesfärg får någon med nedsatt syn det svårt. Någon som tittar på formuläret på en ljus mobilskärm utomhus får det svårt. Etiketter är inte dekoration. De är avgörande information. Håll dem mörka med stark kontrast. Spara din varumärkesfärg till knappar och accenter där den inte offrar läsbarheten.
Så väljer du typsnitt för läsbara formulär
Ditt varumärke har förmodligen ett särpräglat typsnitt. Serifer signalerar sofistikering för advokatbyråer. Geometriska sans-serifer känns moderna för teknikföretag. Lekfulla skrivstilar passar kreativa varumärken. De här typsnitten är värdefulla varumärkestillgångar. De hjälper människor att känna igen ditt varumärke. I ett formulär skapar de problem.
Formuläretiketter måste gå att skumma och läsa i små storlekar. De flesta dekorativa varumärkestypsnitt gör inte det. Ett handskrivet typsnitt är vackert i en rubrik i 36 pixlar. I 13 pixlar som formuläretikett är det nästan oläsligt. Ett tunt geometriskt typsnitt ser elegant ut i större storlekar. I 12 pixlar blir det svårläst. Ett utsmyckat serif-typsnitt med dekorativa krusiduller skapar visuellt brus i ett formulärfält som ska vara tydligt och praktiskt.
Lösningen är att använda ett rent sans-serif-typsnitt för all formulärtext. Etiketter, hjälptext, platshållartext, felmeddelanden. Allt ska vara i ett enkelt, läsbart typsnitt. Arial, Helvetica eller ett modernt systemtypsnitt. Det är inte att överge ditt varumärke. Det är att välja tydlighet där det spelar roll. Ditt varumärke syns i din knappfärg, din layout och din övergripande estetik. Dina formuläretiketter behöver inte bära hela varumärkesidentiteten.
Om ditt varumärke använder ett rent, läsbart sans-serif-typsnitt, testa det i 12 till 14 pixlar på en mobiltelefon. Kan du läsa det tydligt? Om ja kan du använda det i ditt formulär. Om nej, använd ett reservtypsnitt.
Texten på din skickaknapp kan använda ditt varumärkestypsnitt om det är läsbart i 14 till 16 pixlar. Knapptext är större än etiketttext. Ett dekorativt typsnitt har mer utrymme att fungera. Men om ditt varumärkestypsnitt inte fungerar i etikettstorlekar fungerar det inte i formulärfält. Välj läsbarhet först och varumärkets personlighet i andra hand.
Skapa visuell hierarki när typografi och färg samverkar
Visuell hierarki i ett formulär leder en person uppifrån och ned. Vilka element är viktigast? Vilka är sekundära? I ett formulär är hierarkin enkel och tydlig. Fältetiketter är primära. Hjälptext är sekundär. Skickaknappen är uppmaningen till handling.
Använd teckenstorlek för att stödja hierarkin. Etiketter ska vara 13 till 16 pixlar. Hjälptext ska vara mindre och något ljusare i färgen, runt 12 pixlar. Felmeddelanden ska vara lika läsbara som etiketter. Gör inte feltexten mindre eller ljusare. Människor behöver se fel direkt. Gör feltexten lika framträdande som etiketten den rättar.
Din varumärkesfärg stöder hierarkin. Skickaknappen har din primära varumärkesfärg och skiljer sig tydligt från fältetiketterna. Färgen ensam säger till användaren "det här är åtgärden du tar härnäst". Etiketter ska vara mörka och neutrala. All varumärkesfärg i etiketter ska vara diskret och underordnad läsbarheten.
Avsnittsrubriker i ett längre formulär kan använda din varumärkesfärg. Det skapar visuella pauser mellan fältgrupper. En avsnittsrubrik är inte ett inmatningsfält. Den har utrymme att vara mer uttrycksfull än etiketter. Använd det utrymmet och håll etiketterna tydliga och läsbara.
När du använder varumärkets personlighet och när du tar bort den
Ett formulär är ett verktyg som någon använder för att få något gjort. Den personen vill ta sig igenom formuläret snabbt. Varje designval ska antingen hjälpa hen att göra det eller försvinna.
Varumärkets personlighet hör hemma där den skapar förtroende. Formulärets övergripande visuella kvalitet, avståndet mellan fälten, enhetligheten i färger och typografi signalerar att ditt varumärke bryr sig om detaljerna. Ett välgjort, professionellt formulär hör till ett välgjort, professionellt varumärke. Det är varumärkets personlighet i arbete. Den hjälper människor att lita på dig.
Varumärkets personlighet hör inte hemma där den skapar friktion. Använd inte etiketter med versaler för att det ser mer bestämt ut. Använd inte mycket ljus text på en mörkare bakgrund för att det känns mer sofistikerat. Använd inte ett smalt, utsmyckat typsnitt för att få plats med mer text eftersom det matchar din varumärkesestetik. De här valen skadar användbarheten. De saktar ned människor. Formulärdesign är ett av få ställen där ett varumärke måste säga "min estetik kommer i andra hand när det gäller att hjälpa människor slutföra den här uppgiften".
Testa dina varumärkesval i en mobiltelefon. Om valen av varumärkets personlighet gör formuläret svårare att slutföra på en liten skärm tillför de inget värde. Ta bort dem. Skala tillbaka formuläret tills det känns lätt på en telefon. Lägg sedan till varumärkesval som inte stör den enkelheten.
Så fungerar enhetlighet mellan dina olika formulärtyper
Ett varumärke kan ha olika typer av formulär. Ett kontaktformulär är kort och samtalsliknande. Ett kassaformulär är längre och mer strukturerat. En enkät är undersökande. En anmälan till nyhetsbrev är minimal. Alla har olika syften. Men alla ska se ut och kännas som att de tillhör samma varumärke.
Det grundläggande visuella språket ska vara detsamma i varje formulär. Skickaknappen har alltid din primära varumärkesfärg. Etiketterna har alltid samma läsbara typsnitt. Fältavstånden följer samma mönster. När någon går från ett kontaktformulär till ett kassaformulär till en enkät ska hen känna att hen är i samma varumärkesupplevelse, även om formuläret har ett annat syfte.
Skapa en stilguide för formulär och dokumentera dina beslut. Typsnittet för etiketter är Open Sans i 14 pixlar. Den primära knappfärgen är din färgkod. Fältets fokusläge är den här specifika ljusa nyansen av din varumärkesfärg. Hjälptexten är grå i 12 pixlar. När du har de här besluten dokumenterade känns varje formulär som ditt team bygger enhetligt. Det går också snabbare att bygga dem eftersom besluten redan är fattade.
Så hjälper WEMASY dig att bygga formulär med ditt varumärke
WEMASY:s formulärbyggare låter dig styra varje visuellt element samtidigt som tillgänglighetskraven hålls. Ange din varumärkesfärg som knappfärg. Välj bland ett bibliotek av webbsäkra typsnitt för etiketter. Styr fältavstånd och layout. Förhandsgranska ditt formulär på mobilen innan du publicerar.
Spara dina designval som en mall. Varje formulär du skapar efter det ärver samma enhetliga stil. Bygg ett kontaktformulär, ett kassaformulär och ett enkätformulär. De ser alla ut att tillhöra ditt varumärke eftersom de använder samma mall.
WEMASY-formulär uppfyller automatiskt kontrastkraven i WCAG AA för formulärelement. Om du väljer en varumärkesfärg för knappar eller accenter ser systemet till att kontrasten förblir läsbar. Du kan vara trygg med att ditt formulär med varumärke både sticker ut och är tillgängligt.
Se vilka formulärfunktioner som ingår i din WEMASY-plan.