A márkaszíned egy küldés gombon megmondja, mire kattintson valaki. Ugyanez a szín egy űrlapcímkén nehezen olvashatóvá teszi a szöveget. A márkabetűtípusod egy címsorban kifinomultnak látszik. Ugyanez a betűtípus egy mezőcímkében 12 pixelnél olvashatatlanná válik. Ez a márkás űrlaptervezés alapfeszültsége. Azok az elemek, amelyek felismerhetővé teszik a márkádat, nehezebbé tehetik az űrlap kitöltését.
A stratégia nem az, hogy lehámozd a márkádat. Hanem az, hogy szelektíven használd. Alkalmazd a márkaszínt ott, ahol cselekvésre vezeti az embereket. Használd a márkatipográfiát ott, ahol olvasható marad. Hagyd el a márka karakterét ott, ahol súrlódást okoz. Ez a cikk azokat a konkrét döntéseket mutatja be, amelyekkel az űrlapod márkás és használható is marad.
Hol alkalmazd a márkaszínt az űrlapon
Az elsődleges márkaszíned a küldés gombra való. Amikor valaki az űrlap végére ér, tudnia kell, mire kattintson. A márkaszínű gomb azonnal felismerhető. Az illető ezt a színt már látta a weboldalad egészén. Tudja, hogy cselekvést jelent. A márkás gomb azt jelzi: „ez a márkádhoz tartozik, és biztonságos rákattintani.”
Tartsd az űrlap hátterét semlegesen. Fehér, törtfehér vagy nagyon világosszürke. A világos háttér kiemeli az űrlapmezőket, és olvashatóvá teszi a szöveget. Sok márka sötét hátteret használ a weboldalán. Egy sötét tengerészkék kifinomultnak tűnhet a fejlécedben. Ha az űrlap hátterére teszed, hirtelen nehezebben olvasható lesz a fehér szöveg az űrlapmezők belsejében. Az emberek hunyorognak. Azon tűnődnek, hogy elromlott-e az űrlap. Az űrlap megszűnik a márkád értéke lenni, és súrlódássá válik.
Alkalmazd a márkaszínt finoman a mezők fókuszállapotánál. Amikor valaki egy űrlapmezőre kattint, annak a mezőnek vizuális visszajelzés kell. Megjelenik egy szegély, vagy elmozdul a háttér, hogy jelezze, a mező aktív. Használd itt a márkaszíned világosabb árnyalatát. Ne az elsődleges színed teljes telítettségét. A lágyabb változat jelzi, hogy a mező ki van választva, anélkül hogy elnyomná az űrlapot.
A hibaüzeneteknek saját színre van szükségük. A piros a szabvány. Az emberek a pirosat „stop”-ként vagy „valami nincs rendben”-ként értik. Ne használd a márkaszíned a hibákhoz, még ha a márkád piros is. Ha a márkád piros, adj hozzá egy sötétebb vagy telítettebb árnyalatot kifejezetten a hibáknak. Ez vizuális különbséget teremt a „normál” és a „hiba” között, amelyet az emberek azonnal felismernek.
A sikerüzenetek használhatnak zöldet. A zöld befejezést és előrehaladást jelez. Általánosan érthető. Miután valaki beküldi az űrlapodat, a zöld színű sikeroldal vagy üzenet visszaigazolásnak érződik.
Az űrlapon belüli linkek színe legyen a márkaszíned. A linkektől elvárják, hogy színnel kiemelkedjenek. A segítő szövegnek vagy a magyarázó linkeknek a márkádhoz kapcsolódónak kell érződniük, de egyértelműen elkülönülniük az űrlapmezőktől.
Az akadálymentességi probléma a márka színpalettáiban
Sok márka színpalettája nem felel meg a WCAG AA kontrasztszabványoknak. Egy világos mentazöld, amely gyönyörűen mutat a márkakönyvedben, fehér ellen 2:1 kontrasztarányú lehet. A WCAG AA 4,5:1-et követel meg. Egy kifinomult lila megbukhat a választott űrlapmező-háttéren. Ez gyakori. És javítható.
Teszteld a márkaszíneidet, mielőtt űrlapokon használod őket. Használj kontrasztellenőrző eszközt. Ha a márkaszíned nem felel meg a WCAG AA szintnek, van lehetőséged. Használd az adott szín sötétebb vagy telítettebb változatát. A mentazöldnek lehet erdőzöld változata a palettádon, amely megfelel az aránynak. Vagy használd a márkaszíned csak kiemelésként a gombokon, ahol a kontraszt természetesen magasabb. Használj sötét semleges színt, például szénszürkét a kontrasztot igénylő szövegekhez.
Ez különösen kritikus a címkéknél. Ha a címkéid világos márkaszínűek, a gyengénlátó nehezen boldogul. Aki az űrlapot erős kinti fényben, telefonképernyőn nézi, nehezen boldogul. A címkék nem dísz. Kritikus információ. Tartsd őket sötétnek, erős kontraszttal. A márkaszíned tartogasd a gombokra és kiemelésekre, ahol nem megy az olvashatóság rovására.
Hogyan válassz tipográfiát az űrlap olvashatóságához
A márkádnak valószínűleg megkülönböztető betűtípusa van. A talpas betűk kifinomultságot jeleznek az ügyvédi irodáknál. A geometrikus talp nélküli betűk modernnek hatnak a technológiai cégeknél. A játékos kézírásos betűk a kreatív márkáknál működnek. Ezek a betűtípusok értékes márkaeszközök. Segítenek az embereknek felismerni a márkádat. Egy űrlapon problémát okoznak.
Az űrlapcímkéknek átfuthatónak és kis méretben is olvashatónak kell lenniük. A legtöbb díszes márkabetűtípus nem az. Egy kézírásos betűtípus gyönyörű egy 36 pixeles címsorban. 13 pixelen, űrlapcímkeként szinte olvashatatlan. Egy vékony geometrikus betűtípus elegánsan néz ki nagyobb méretben. 12 pixelen nehezen olvasható. Egy díszes talpas betűtípus, díszítő hurkokkal, vizuális zajt kelt egy olyan űrlapmezőben, amelynek tisztának és praktikusnak kell lennie.
A megoldás, hogy az űrlap minden szövegéhez tiszta, talp nélküli betűtípust használj. Címkék, segítő szöveg, helyőrző szöveg, hibaüzenetek. Mind egyszerű, olvasható betűtípusban legyen. Egy sima, modern rendszerbetűtípus is megfelel. Ez nem a márkád feladása. Ez azt jelenti, hogy az érthetőséget választod ott, ahol számít. A márkád a gombod színében, az elrendezésedben, az általános esztétikádban jelenik meg. Az űrlapcímkéknek nem kell viselniük a márkaidentitás teljes súlyát.
Ha a márkád tiszta, olvasható talp nélküli betűtípust használ, teszteld 12-14 pixelen egy mobiltelefonon. Tisztán el tudod olvasni? Ha igen, használhatod az űrlapodban. Ha nem, használj tartalék betűtípust.
A küldés gomb szövege használhatja a márkabetűtípusodat, ha 14-16 pixelen olvasható. A gombszöveg nagyobb, mint a címkeszöveg. A díszes betűtípusnak több hely jut. De ha a márkabetűtípusod megbukik a címkeméreteknél, megbukik az űrlapmezőkben is. Először az olvashatóságot válaszd, másodszor a márka karakterét.
Vizuális hierarchia kialakítása, amikor a tipográfia és a szín együtt dolgozik
Az űrlap vizuális hierarchiája fentről lefelé vezeti az embert. Mely elemek a legfontosabbak? Melyek a másodlagosak? Egy űrlapon a hierarchia egyszerű és konkrét. Az űrlapcímkék az elsődlegesek. A segítő szöveg másodlagos. A küldés gomb a cselekvésre hívás.
Használd a betűméretet e hierarchia támogatására. A címkék 13-16 pixelesek legyenek. A segítő szöveg legyen kisebb és kicsit világosabb színű, körülbelül 12 pixeles. A hibaüzenetek legyenek ugyanolyan olvashatók, mint a címkék. Ne tedd a hibaszöveget kisebbre vagy világosabbra. Az embereknek azonnal látniuk kell a hibákat. Tedd a hibaszöveget ugyanolyan feltűnővé, mint a címkét, amelyet javít.
A márkaszíned támogatja ezt a hierarchiát. A küldés gomb az elsődleges márkaszíned, és láthatóan különbözik az űrlapcímkéktől. A szín önmagában megmondja a felhasználónak: „ez a következő lépésed”. A címkék legyenek sötétek és semlegesek. Bármely márkaszín a címkékben legyen finom, és az olvashatóság mögött másodlagos.
A hosszabb űrlapok szakaszfejlécei használhatják a márkaszíned. Ez vizuális töréseket hoz létre a mezőcsoportok között. A szakaszfejléc nem beviteli mező. Van hely arra, hogy kifejezőbb legyen a címkéknél. Használd ezt a helyet, miközben a címkék tiszták és olvashatók maradnak.
Mikor alkalmazd a márka karakterét, és mikor hagyd el
Az űrlap eszköz, amellyel valaki el akar érni valamit. Az illető gyorsan akar végigmenni az űrlapon. Minden tervezési döntésnek vagy ebben kell segítenie, vagy el kell tűnnie.
A márka karaktere ott van a helyén, ahol bizalmat ad. Az űrlapod általános vizuális minősége, a mezők közötti térköz, a színek és a tipográfia következetessége mind azt jelzi, hogy a márkád törődik a részletekkel. A csiszolt, professzionális megjelenésű űrlap egy csiszolt, professzionális márkához tartozik. Ez a márka karaktere munkában. Segít az embereknek megbízni benned.
A márka karaktere nem ott van a helyén, ahol súrlódást okoz. Ne használj csupa nagybetűs címkéket, mert parancsolóbbnak tűnik. Ne használj nagyon világos szöveget sötétebb háttéren, mert kifinomultabbnak érződik. Ne használj keskeny, díszes betűtípust több szöveg elhelyezéséhez, mert illik a márkaesztétikádhoz. Ezek a döntések rontják a használhatóságot. Lassítják az embereket. Az űrlaptervezés egyike azon kevés helyeknek, ahol a márkának azt kell mondania: „az esztétikám háttérbe szorul amellett, hogy segítsek az embereknek elvégezni ezt a feladatot.”
Teszteld a márkatervezési döntéseidet mobiltelefonon. Ha a márka karakteréről hozott döntéseid megnehezítik az űrlap kitöltését kis képernyőn, nem adnak hozzá értéket. Vedd el őket. Egyszerűsítsd az űrlapot, amíg telefonon könnyűnek nem érződik. Aztán alkalmazz olyan márkadöntéseket, amelyek nem zavarják ezt a könnyedséget.
Hogyan működik az egységesség a különböző űrlaptípusaid között
Egy márkának különböző típusú űrlapjai lehetnek. A kapcsolati űrlap rövid és beszélgetős. A fizetési űrlap hosszabb és strukturáltabb. A felmérés feltáró jellegű. A hírlevél-feliratkozás minimális. Mindegyiknek más a célja. De mindegyiknek ugyanahhoz a márkához tartozónak kell kinéznie és éreznie.
Az alapvető vizuális nyelvnek minden űrlapon ugyanannak kell maradnia. A küldés gomb mindig az elsődleges márkaszíned. A címkék mindig ugyanabban az olvasható betűtípusban vannak. A mezők térköze ugyanazt a mintát követi. Amikor valaki a kapcsolati űrlapról a fizetési űrlapra, majd a felmérésre lép, úgy kell éreznie, hogy ugyanabban a márkaélményben van, még ha az űrlapnak más is a célja.
Készíts űrlap-stílusútmutatót, és dokumentáld a döntéseidet. A címkék betűtípusa egy meghatározott betűtípus 14 pixelen. Az elsődleges gombszín a márkád színkódja. A mezők fókuszállapota a márkaszíned ez a konkrét világos árnyalata. A segítő szöveg szürke, 12 pixelen. Ha ezek a döntések dokumentálva vannak, a csapatod minden űrlapja egységesnek fog érződni. Az építésük is gyorsabbá válik, mert a döntések már megszülettek.
Hogyan segít a WEMASY márkás űrlapokat építeni
A WEMASY űrlapépítője lehetővé teszi, hogy minden vizuális elemet irányíts, miközben megőrzi az akadálymentességi szabványokat. Állítsd be a márkaszíned a gomb színének. Válassz a webbiztos betűtípusok könyvtárából a címkékhez. Szabályozd a mezők térközét és az elrendezést. Közzététel előtt tekintsd meg az űrlapodat mobilon.
Mentsd el a tervezési döntéseidet sablonként. Minden ezután létrehozott űrlapod ugyanazt az egységes stílust örökli. Építs kapcsolati űrlapot, fizetési űrlapot, felmérési űrlapot. Mind márkásnak látszik, mert mind ugyanazt a sablont használja.
A WEMASY űrlapjai automatikusan megfelelnek a WCAG AA kontrasztkövetelményeknek az űrlapelemeknél. Ha márkaszínt választasz a gombokhoz vagy kiemelésekhez, a rendszer gondoskodik róla, hogy a kontraszt olvasható maradjon. Biztos lehetsz benne, hogy a márkás űrlapod egyszerre megkülönböztető és akadálymentes.
Nézd meg, milyen űrlapfunkciókat tartalmaz a WEMASY csomagod.