Barva vaší značky na tlačítku odeslat říká člověku, kam kliknout. Tatáž barva na popisku pole ale zhorší čitelnost textu. Písmo vaší značky v nadpisu působí vytříbeně. Stejné písmo v popisku pole je při 12 pixelech nečitelné. To je jádro napětí v návrhu formulářů podle značky: prvky, díky nimž je vaše značka poznatelná, mohou formulář ztížit.
Řešením není značku odstranit. Řešením je používat ji uvážlivě. Barvu značky použijte tam, kde vede k akci. Typografii značky použijte tam, kde zůstává čitelná. Osobnost značky odstraňte tam, kde vytváří překážky. Tento článek popisuje konkrétní rozhodnutí, díky nimž je formulář zároveň v duchu značky i použitelný.
Kde použít barvu značky ve formuláři
Hlavní barva značky patří na tlačítko odeslat. Když člověk dojde na konec formuláře, musí vědět, na co kliknout. Tlačítko v barvě značky je okamžitě poznatelné. Tuto barvu už viděl na celém vašem webu. Ví, že znamená akci. Tlačítko v barvě značky sděluje: "patří to k vaší značce a je bezpečné na to kliknout."
Pozadí formuláře nechte neutrální. Bílé, téměř bílé nebo velmi světle šedé. Světlé pozadí zvýrazní pole formuláře a text je čitelný. Mnoho značek používá na webu tmavé pozadí. Tmavě modrá může v záhlaví působit vytříbeně. Použijete-li ji ale na pozadí formuláře, bílý text v polích se hůř čte. Lidé mhouří oči. Napadne je, že formulář nefunguje. Formulář pak přestává být přínosem pro vaši značku a stává se překážkou.
Barvu značky použijte decentně u stavů zaměření pole. Když člověk klikne do pole, potřebuje vizuální zpětnou vazbu. Objeví se ohraničení nebo se změní pozadí, aby bylo vidět, že je pole aktivní. Použijte zde světlejší odstín barvy značky, ne plnou sytost hlavní barvy. Jemnější verze dává najevo, že je pole vybrané, a formulář nepřebíjí.
Chybové zprávy potřebují vlastní barvu. Standardem je červená. Lidé ji chápou jako "stop" nebo "něco je špatně". Nepoužívejte pro chyby barvu značky, ani když je vaše značka červená. Pokud je červená vaše barva, přidejte pro chyby tmavší nebo sytější odstín. Vznikne tak vizuální rozdíl mezi "normální" a "chybou", který lidé poznají okamžitě.
Zprávy o úspěchu mohou být zelené. Zelená značí dokončení a posun vpřed. Rozumí jí každý. Po odeslání formuláře působí stránka nebo zpráva v zelené jako potvrzení.
Odkazy ve formuláři by měly mít barvu značky. U odkazů se očekává, že budou barevně vynikat. Pomocné texty nebo vysvětlující odkazy by měly působit jako součást vaší značky, ale jasně se odlišovat od polí formuláře.
Problém přístupnosti v barevných paletách značek
Mnoho barevných palet značek neprojde normou kontrastu WCAG AA. Světle mátově zelená, která v příručce značky vypadá krásně, může mít vůči bílé kontrastní poměr 2 ku 1. WCAG AA vyžaduje 4,5 ku 1. Vytříbená fialová může neprojít vůči zvolenému pozadí polí formuláře. Je to běžné. A dá se to napravit.
Barvy značky vyzkoušejte, než je ve formulářích použijete. Použijte nástroj na kontrolu kontrastu. Pokud vaše barva značky WCAG AA nesplňuje, máte možnosti. Použijte tmavší nebo sytější variantu téže barvy. Ke světle mátové může mít vaše paleta variantu v lesní zelené, která poměr splní. Nebo použijte barvu značky jen jako akcent na tlačítkách, kde je kontrast přirozeně vyšší. Pro text, který potřebuje kontrast, použijte tmavou neutrální barvu, například uhlovou.
Zvlášť důležité je to u popisků. Pokud jsou vaše popisky ve světlé barvě značky, bude to pro člověka se zhoršeným zrakem obtížné. Obtížné to bude i pro někoho, kdo formulář sleduje na jasně osvětleném displeji telefonu venku. Popisky nejsou dekorace. Jsou to klíčové informace. Nechte je tmavé s výrazným kontrastem. Barvu značky si nechte pro tlačítka a akcenty, kde nešidí čitelnost.
Jak zvolit typografii pro čitelnost formuláře
Vaše značka má pravděpodobně výrazné písmo. Patková písma dávají najevo vytříbenost u advokátních kanceláří. Geometrická bezpatková působí moderně u technologických firem. Hravá psaná písma se hodí ke kreativním značkám. Tato písma jsou cenným majetkem značky. Pomáhají lidem vaši značku poznat. Ve formuláři ale dělají problémy.
Popisky formuláře musí být přehledné a čitelné i v malé velikosti. Většina dekorativních písem takové není. Ručně psané písmo je krásné v nadpisu o velikosti 36 pixelů. U popisku o velikosti 13 pixelů je téměř nečitelné. Tenké geometrické písmo vypadá elegantně ve větších velikostech. Při 12 pixelech se špatně čte. Zdobené patkové písmo s ornamenty vytváří vizuální šum v poli formuláře, které má být jasné a praktické.
Řešením je použít pro veškerý text formuláře čisté bezpatkové písmo. Popisky, pomocné texty, zástupné texty, chybové zprávy. Všechno by mělo být v jednoduchém, čitelném písmu. Arial, Helvetica nebo moderní systémové písmo. Nejde o opuštění značky. Jde o volbu srozumitelnosti tam, kde na ní záleží. Vaše značka se projeví v barvě tlačítka, v rozvržení a v celkovém vzhledu. Popisky formuláře nemusí nést plnou váhu identity značky.
Pokud vaše značka používá čisté, čitelné bezpatkové písmo, vyzkoušejte ho ve velikosti 12 až 14 pixelů na mobilním telefonu. Čte se jasně? Pokud ano, můžete ho použít ve formuláři. Pokud ne, použijte náhradní písmo.
Text tlačítka odeslat může používat písmo vaší značky, pokud je čitelné ve velikosti 14 až 16 pixelů. Text tlačítka je větší než text popisků. Dekorativní písmo má víc prostoru. Pokud ale písmo vaší značky selže ve velikosti popisků, selže i v polích formuláře. Nejdřív volte čitelnost, osobnost značky až potom.
Jak vytvořit vizuální hierarchii, když spolupracují typografie a barva
Vizuální hierarchie ve formuláři vede člověka shora dolů. Které prvky jsou nejdůležitější? Které jsou druhořadé? Ve formuláři je hierarchie jednoduchá a konkrétní. Popisky polí jsou na prvním místě. Pomocný text je druhořadý. Tlačítko odeslat je výzva k akci.
Tuto hierarchii podpořte velikostí písma. Popisky by měly mít 13 až 16 pixelů. Pomocný text by měl být menší a o něco světlejší, kolem 12 pixelů. Chybové zprávy by měly být stejně čitelné jako popisky. Nezmenšujte chybový text ani ho nezesvětlujte. Lidé musí chyby vidět okamžitě. Chybový text udělejte stejně výrazný jako popisek, který opravuje.
Barva značky tuto hierarchii podporuje. Tlačítko odeslat má hlavní barvu značky a viditelně se liší od popisků polí. Už samotná barva uživateli říká: "tohle je akce, kterou uděláte jako další." Popisky by měly být tmavé a neutrální. Jakákoli barva značky v popiscích by měla být decentní a ustoupit čitelnosti.
Nadpisy sekcí v delším formuláři mohou mít barvu značky. Vytvoří se tak vizuální předěly mezi skupinami polí. Nadpis sekce není vstupní pole. Má prostor být výraznější než popisky. Využijte ho, ale popisky ponechte jasné a čitelné.
Kdy použít osobnost značky a kdy ji odstranit
Formulář je nástroj, kterým někdo něco vyřizuje. Ten člověk chce formulářem projít rychle. Každé designové rozhodnutí by mu mělo buď pomáhat, nebo zmizet.
Osobnost značky patří tam, kde dodává důvěru. Celková vizuální kvalita formuláře, mezery mezi poli, jednotnost barev a typografie, to všechno dává najevo, že vám na detailech záleží. Dopracovaný, profesionálně vypadající formulář patří k dopracované, profesionální značce. To je osobnost značky v praxi. Pomáhá lidem vám důvěřovat.
Osobnost značky nepatří tam, kde vytváří překážky. Nepoužívejte popisky psané velkými písmeny jen proto, že vypadají důrazněji. Nepoužívejte velmi světlý text na tmavším pozadí jen proto, že působí vytříbeněji. Nepoužívejte úzké, zdobené písmo kvůli tomu, aby se vešlo víc textu, jen proto, že odpovídá estetice vaší značky. Taková rozhodnutí poškozují použitelnost. Zpomalují lidi. Návrh formuláře je jedno z mála míst, kde musí značka říct: "moje estetika ustupuje do pozadí, aby lidem pomohla úkol dokončit."
Rozhodnutí o designu značky vyzkoušejte na mobilním telefonu. Pokud osobnost značky ztěžuje vyplnění formuláře na malé obrazovce, nepřidává žádnou hodnotu. Odstraňte ji. Formulář zjednodušujte, dokud se na telefonu nevyplňuje snadno. Teprve potom přidejte prvky značky, které tuto snadnost nenarušují.
Jak funguje jednotnost napříč různými typy formulářů
Značka může mít různé typy formulářů. Kontaktní formulář je krátký a konverzační. Platební formulář je delší a strukturovanější. Dotazník je průzkumný. Přihlášení k newsletteru je minimální. Každý má jiný účel. Každý by ale měl vypadat a působit, jako by patřil ke stejné značce.
Základní vizuální jazyk by měl zůstat stejný u každého formuláře. Tlačítko odeslat má vždy hlavní barvu značky. Popisky jsou vždy ve stejném čitelném písmu. Mezery mezi poli se řídí stejným vzorem. Když člověk přejde z kontaktního formuláře na platební a pak na dotazník, měl by mít pocit, že je pořád v téže zkušenosti se značkou, i když má formulář jiný účel.
Vytvořte si stylový průvodce formuláři a svá rozhodnutí zdokumentujte. Písmo popisků je Open Sans ve velikosti 14 pixelů. Barva hlavního tlačítka je číslo vašeho Pantone. Stav zaměření pole je tento konkrétní světlý odstín barvy značky. Pomocný text je šedý ve velikosti 12 pixelů. Když máte tato rozhodnutí zapsaná, každý formulář, který váš tým vytvoří, bude působit jednotně. Tvorba se také zrychlí, protože rozhodnutí už jsou hotová.
Jak vám WEMASY pomůže vytvářet formuláře podle vaší značky
Tvůrce formulářů ve WEMASY vám umožňuje ovládat každý vizuální prvek a přitom dodržet zásady přístupnosti. Nastavte barvu značky jako barvu tlačítka. Vyberte z knihovny webově bezpečných písem pro popisky. Ovládejte mezery mezi poli a rozvržení. Formulář si před zveřejněním prohlédněte na mobilu.
Svá designová rozhodnutí uložte jako šablonu. Každý formulář, který pak vytvoříte, zdědí stejný jednotný styl. Vytvořte kontaktní formulář, platební formulář, dotazník. Všechny budou vypadat podle vaší značky, protože všechny používají stejnou šablonu.
Formuláře WEMASY automaticky splňují požadavky na kontrast WCAG AA pro prvky formuláře. Pokud pro tlačítka nebo akcenty zvolíte barvu značky, systém dohlédne, aby kontrast zůstal čitelný. Můžete si být jisti, že váš formulář je výrazný a zároveň přístupný.
Podívejte se, jaké funkce formulářů jsou součástí vašeho tarifu WEMASY.