Brändivärisi lähetyspainikkeessa kertoo, mitä klikata. Sama väri lomakkeen otsikossa tekee tekstistä vaikealukuisen. Brändifonttisi otsikossa näyttää hienostuneelta. Sama fontti kentän otsikossa muuttuu lukukelvottomaksi 12 pikselin koossa. Tämä on brändätyn lomakesuunnittelun ydinjännite. Elementit, jotka tekevät brändistäsi tunnistettavan, voivat tehdä lomakkeesta vaikeamman täyttää.
Strategia ei ole riisua brändiäsi pois. Se on käyttää brändiäsi valikoivasti. Käytä brändiväriä siellä, missä se ohjaa ihmiset toimintaan. Käytä brändin typografiaa siellä, missä se pysyy luettavana. Poista brändin persoonallisuus siellä, missä se aiheuttaa kitkaa. Tässä artikkelissa käydään läpi päätökset, joilla lomakkeesi pysyy sekä brändättynä että käytettävänä.
Minne brändiväriä käytetään lomakkeessa
Pääasiallinen brändivärisi kuuluu lähetyspainikkeeseen. Kun joku pääsee lomakkeen loppuun, hänen täytyy tietää, mitä klikata. Brändivärinen painike on heti tunnistettava. Henkilö on jo nähnyt tuon värin koko verkkosivustollasi. Hän tietää sen tarkoittavan toimintaa. Brändätty painike viestii: "tämä kuuluu brändillesi ja sitä on turvallista klikata."
Pidä lomakkeen tausta neutraalina. Valkoinen, luonnonvalkoinen tai hyvin vaaleanharmaa. Vaalea tausta saa lomakekentät erottumaan ja tekee tekstistä luettavaa. Monilla brändeillä on tummat taustat verkkosivustoillaan. Tumma laivastonsininen voi näyttää hienostuneelta ylätunnisteessasi. Käytä sitä lomakkeen taustalla, ja yhtäkkiä valkoinen teksti lomakekentissä on vaikeampi lukea. Ihmiset siristävät silmiään. He ihmettelevät, onko lomake rikki. Lomake lakkaa olemasta brändisi vahvuus ja muuttuu kitkaksi.
Käytä brändiväriä hienovaraisesti kentän kohdistustiloissa. Kun joku klikkaa lomakekenttää, kentän pitää antaa visuaalista palautetta. Reunus ilmestyy tai tausta vaihtuu osoittamaan, että kenttä on aktiivinen. Käytä tässä brändivärisi vaaleampaa sävyä. Ei pääväriäsi täydellä kylläisyydellä. Pehmeämpi versio viestii, että kenttä on valittu, ylivoimaistamatta lomaketta.
Virheilmoitukset tarvitsevat oman värinsä. Punainen on vakio. Ihmiset ymmärtävät punaisen tarkoittavan "seis" tai "jokin on pielessä". Älä käytä brändiväriäsi virheisiin, vaikka brändisi olisi punainen. Jos brändisi on punainen, lisää tummempi tai kylläisempi sävy erityisesti virheitä varten. Tämä luo visuaalisen eron "normaalin" ja "virheen" välille, jonka ihmiset tunnistavat heti.
Onnistumisviesteissä voi käyttää vihreää. Vihreä viestii valmistumisesta ja eteenpäin menemisestä. Se ymmärretään yleisesti. Kun joku on lähettänyt lomakkeesi, vihreä onnistumissivu tai -viesti tuntuu vahvistukselta.
Linkkien värin lomakkeen sisällä pitäisi olla brändivärisi. Linkkien odotetaan erottuvan värillä. Ohjetekstin tai selittävien linkkien pitäisi tuntua yhteydessä brändiisi mutta selvästi erillisiltä lomakekentistä.
Esteettömyysongelma brändin väripaleteissa
Monet brändin väripaletit eivät täytä WCAG AA -kontrastistandardeja. Vaalea minttuvihreä, joka näyttää kauniilta brändiohjeessa, voi saada kontrastisuhteeksi 2:1 valkoista vasten. WCAG AA edellyttää 4,5:1. Hienostunut violetti voi epäonnistua valitsemaasi lomakekentän taustaa vasten. Tämä on yleistä. Se on myös korjattavissa.
Testaa brändivärisi ennen niiden käyttöä lomakkeissa. Käytä kontrastintarkistustyökalua. Jos brändivärisi ei täytä WCAG AA:ta, sinulla on vaihtoehtoja. Käytä sen värin tummempaa tai kylläisempää versiota. Minttuvihreällä voi olla paletissasi metsänvihreä variantti, joka täyttää suhteen. Tai käytä brändiväriäsi vain korostuksena painikkeissa, joissa kontrasti on luonnostaan korkeampi. Käytä tummaa neutraalia, kuten hiilenharmaata, tekstille, joka tarvitsee kontrastia.
Tämä on erityisen kriittistä otsikoille. Jos otsikkosi ovat vaalealla brändivärillä, heikkonäköinen joutuu kamppailemaan. Kamppailee myös se, joka katsoo lomaketta kirkkaalla ulkona olevalla puhelimen näytöllä. Otsikot eivät ole koristeita. Ne ovat kriittistä tietoa. Pidä ne tummina vahvalla kontrastilla. Säästä brändivärisi painikkeisiin ja korostuksiin, joissa se ei uhraa luettavuutta.
Miten valitset typografian lomakkeen luettavuutta varten
Brändilläsi on luultavasti erottuva kirjasintyyppi. Serif-fontit viestivät hienostuneisuutta lakitoimistoille. Geometriset groteskit tuntuvat modernilta teknologiayrityksille. Leikkisät kirjoitusfontit sopivat luoville brändeille. Nämä fontit ovat arvokkaita brändin voimavaroja. Ne auttavat ihmisiä tunnistamaan brändisi. Lomakkeessa ne aiheuttavat ongelmia.
Lomakkeen otsikoiden täytyy olla silmäiltäviä ja luettavia pienessä koossa. Useimmat koristeelliset brändifontit eivät ole. Käsinkirjoitettua tyyliä oleva fontti on kaunis otsikossa 36 pikselin koossa. 13 pikselin lomakeotsikkona se on lähes lukukelvoton. Ohut geometrinen fontti näyttää tyylikkäältä suuremmissa koissa. 12 pikselin koossa sitä on vaikea lukea. Koristeellinen serif-fontti, jossa on koristekiemuroita, luo visuaalista kohinaa lomakekenttään, jonka pitäisi olla selkeä ja käytännöllinen.
Ratkaisu on käyttää selkeää groteskifonttia kaikessa lomaketekstissä. Otsikoissa, ohjetekstissä, paikkamerkkitekstissä ja virheilmoituksissa. Kaikkien pitäisi olla yksinkertaisella, luettavalla fontilla. Yleinen groteskifontti tai moderni järjestelmäfontti. Tämä ei ole brändistäsi luopumista. Tämä on selkeyden valitsemista siellä, missä sillä on väliä. Brändisi näkyy painikkeesi värissä, asettelussasi ja kokonaisilmeessäsi. Lomakkeesi otsikoiden ei tarvitse kantaa brändi-identiteetin koko painoa.
Jos brändisi käyttää selkeää, luettavaa groteskia, testaa sitä 12-14 pikselin koossa matkapuhelimella. Voitko lukea sen selvästi? Jos kyllä, voit käyttää sitä lomakkeessasi. Jos ei, käytä varafonttia.
Lähetyspainikkeesi teksti voi käyttää brändifonttiasi, jos se on luettava 14-16 pikselin koossa. Painikkeen teksti on suurempaa kuin otsikkoteksti. Koristeellisella fontilla on enemmän tilaa toimia. Mutta jos brändifonttisi epäonnistuu otsikoiden koossa, se epäonnistuu lomakekentissä. Valitse ensin luettavuus, toiseksi brändin persoonallisuus.
Visuaalisen hierarkian rakentaminen, kun typografia ja väri toimivat yhdessä
Visuaalinen hierarkia lomakkeessa ohjaa ihmisen ylhäältä alas. Mitkä elementit ovat tärkeimpiä? Mitkä toissijaisia? Lomakkeessa hierarkia on yksinkertainen ja täsmällinen. Kenttien otsikot ovat ensisijaisia. Ohjeteksti on toissijaista. Lähetyspainike on toimintakehotus.
Käytä fonttikokoa tämän hierarkian tukena. Otsikoiden pitäisi olla 13-16 pikseliä. Ohjetekstin pitäisi olla pienempää ja hieman vaaleampaa väriltään, noin 12 pikseliä. Virheilmoitusten pitäisi olla yhtä luettavia kuin otsikoiden. Älä tee virhetekstistä pienempää tai vaaleampaa. Ihmisten täytyy nähdä virheet heti. Tee virheilmoituksesta yhtä näkyvä kuin otsikko, jota se korjaa.
Brändivärisi tukee tätä hierarkiaa. Lähetyspainike on pääasiallisella brändivärilläsi ja näkyvästi erilainen kuin kenttien otsikot. Väri yksin kertoo käyttäjälle: "tämä on toiminto, jonka teet seuraavaksi." Otsikoiden pitäisi olla tummia ja neutraaleja. Kaikkien otsikoissa olevien brändivärien pitäisi olla hienovaraisia ja toissijaisia luettavuuteen nähden.
Pidemmän lomakkeen osio-otsikoissa voi käyttää brändiväriäsi. Tämä luo visuaalisia taukoja kenttäryhmien välille. Osio-otsikko ei ole syöttökenttä. Sillä on tilaa olla ilmaisevampi kuin kenttien otsikoilla. Käytä tuo tila ja pidä otsikot selkeinä ja luettavina.
Milloin brändin persoonallisuutta käytetään ja milloin se poistetaan
Lomake on työkalu, jolla joku yrittää saada jotain aikaan. Tuo henkilö haluaa edetä lomakkeen läpi nopeasti. Jokaisen suunnitteluvalinnan pitäisi joko auttaa häntä siinä tai kadota.
Brändin persoonallisuus kuuluu paikkoihin, joissa se lisää luottamusta. Lomakkeesi kokonaisvaltainen visuaalinen laatu, kenttien väliset välit sekä värien ja typografian johdonmukaisuus viestivät, että brändisi välittää yksityiskohdista. Viimeistellyn, ammattimaisen näköinen lomake kuuluu viimeistellylle, ammattimaiselle brändille. Se on brändin persoonallisuus työssä. Se auttaa ihmisiä luottamaan sinuun.
Brändin persoonallisuus ei kuulu paikkoihin, joissa se aiheuttaa kitkaa. Älä käytä pelkkiä isoja kirjaimia otsikoissa, koska se näyttää määräävämmältä. Älä käytä hyvin vaaleaa tekstiä tummemmalla taustalla, koska se tuntuu hienostuneemmalta. Älä käytä kapeaa, koristeellista kirjasinta saadaksesi enemmän tekstiä mahtumaan, koska se sopii brändisi estetiikkaan. Nämä valinnat heikentävät käytettävyyttä. Ne hidastavat ihmisiä. Lomakkeen suunnittelu on yksi harvoista paikoista, joissa brändin täytyy sanoa: "estetiikkani väistyy sen tieltä, että autan ihmisiä saamaan tämän tehtävän valmiiksi."
Testaa brändin suunnitteluvalintasi matkapuhelimella. Jos brändin persoonallisuuteen liittyvät valintasi tekevät lomakkeesta vaikeamman täyttää pienellä näytöllä, ne eivät tuo lisäarvoa. Poista ne. Riisu lomake takaisin, kunnes se tuntuu helpolta puhelimella. Sen jälkeen lisää brändivalinnat, jotka eivät häiritse tätä helppoutta.
Miten yhdenmukaisuus toimii eri lomaketyyppien välillä
Brändillä voi olla eri tyyppisiä lomakkeita. Yhteydenottolomake on lyhyt ja keskusteleva. Kassalomake on pidempi ja jäsennellympi. Kysely on tutkiva. Uutiskirjeen tilaus on minimalistinen. Jokaisella on eri tarkoitus. Mutta jokaisen pitäisi näyttää ja tuntua kuuluvan samaan brändiin.
Ydinvisuaalisen kielen pitäisi pysyä samana jokaisessa lomakkeessa. Lähetyspainike on aina pääasiallisella brändivärilläsi. Otsikot ovat aina samalla luettavalla fontilla. Kenttien välit noudattavat samaa mallia. Kun joku siirtyy yhteydenottolomakkeesta kassalomakkeeseen ja kyselyyn, hänen pitäisi tuntea olevansa samassa brändikokemuksessa, vaikka lomakkeen tarkoitus on eri.
Luo lomakkeiden tyyliopas ja dokumentoi päätöksesi. Otsikoiden fontti on selkeä groteskifontti 14 pikselin koossa. Pääpainikkeen väri on määritelty väriarvo. Kentän kohdistustila on tämä tietty brändivärisi vaalea sävy. Ohjeteksti on harmaata 12 pikselin koossa. Kun nämä päätökset on dokumentoitu, jokainen tiimisi rakentama lomake tuntuu yhdenmukaiselta. Niiden rakentaminen myös nopeutuu, koska päätökset on jo tehty.
Miten WEMASY auttaa rakentamaan brändättyjä lomakkeita
WEMASYn lomakerakennin antaa hallita jokaista visuaalista elementtiä esteettömyysstandardit säilyttäen. Aseta brändivärisi painikkeen väriksi. Valitse otsikoille fontti verkkoturvallisten fonttien kirjastosta. Hallitse kenttien välejä ja asettelua. Esikatsele lomakettasi mobiilissa ennen julkaisua.
Tallenna suunnitteluvalintasi pohjaksi. Jokainen sen jälkeen luomasi lomake perii saman yhtenäisen tyylin. Rakenna yhteydenottolomake, kassalomake, kyselylomake. Ne kaikki näyttävät brändätyiltä, koska ne kaikki käyttävät samaa pohjaa.
WEMASYn lomakkeet täyttävät automaattisesti WCAG AA -kontrastivaatimukset lomake-elementeille. Jos valitset painikkeille tai korostuksille brändivärin, järjestelmä varmistaa, että kontrasti pysyy luettavana. Voit olla varma, että brändätty lomakkeesi on sekä erottuva että esteetön.
Katso, mitkä lomakeominaisuudet sisältyvät WEMASY-tilaukseesi.