Váš formulář může fungovat dokonale. Data se zpracují, odeslání projdou, všechno funguje, jak má. Ale pokud formulář vizuálně nereaguje na to, co lidé dělají, budou si stejně myslet, že je rozbitý. Klikou na stejné pole dvakrát, protože si nejsou jistí, zda se první klik zaregistroval. Budou přemýšlet, jestli se objevila chybová zpráva a jestli se odeslání opravdu povedlo. Zmatek ničí dokončování formulářů rychleji než jakýkoli problém s designem. Řešením jsou mikrointerakce, malé animace a vizuální reakce, které lidem říkají, že jejich akce zabrala.
Mikrointerakce je okamžitá zpětná vazba, která se objeví, když někdo s formulářem pracuje. Ohraničení pole se rozsvítí, když na něj klikne. Chybová zpráva se lehce zatřese, aby upoutala pozornost. Během zpracování odeslání se točí kolečko. Když je zadaný údaj správně, objeví se fajfka. Tyto animace trvají jen milisekundy, ale odvádějí zásadní práci. Odpovídají na tichou otázku, kterou si klade každý uživatel formuláře při každé akci: Stalo se něco? Tento článek vysvětluje, co mikrointerakce dělají, jak je správně načasovat a proč přímo ovlivňují, zda lidé formulář dokončí, nebo ho v půlce opustí.
Co mikrointerakce ve formulářích dělají
Mikrointerakce má jediný úkol: poskytnout okamžitou zpětnou vazbu na konkrétní akci. Někdo píše heslo a ukazatel síly se plní. Někdo nechá povinné pole prázdné a objeví se chyba s posunem do červeného pozadí. Někdo klikne na odeslat a tlačítko se změní, aby ukázalo zpracování. Žádná z těchto interakcí není překvapením. Lidé je očekávají. A trvají méně než půl sekundy.
Mikrointerakce ve formulářích slouží čtyřem účelům. Za prvé potvrzují, že systém akci zaregistroval. Formulář působí rozbitě, když kliknete a nic se nezmění. Nenápadná animace říká, že akce zabrala. Za druhé vedou lidi k dalšímu kroku. Tlačítko odeslat, které svítí, říká, kam kliknout. Chybová zpráva, která zvýrazní problémové pole, říká, kam se zaměřit. Za třetí snižují nejistotu v nejasných chvílích. Kolečko, které se točí při odesílání formuláře, říká "něco se děje, počkejte". Bez něj si lidé myslí, že se formulář zasekl. Za čtvrté ověřují vstup v reálném čase. Fajfka u platné e-mailové adresy říká lidem, že to mají správně, aniž by museli čekat na odeslání.
Nejdůležitější, co mikrointerakce dělají, je okamžitá odpověď na jedinou otázku. Zabralo to? Když lidé odpověď vidí, pokračují s jistotou. Když ji nevidí, pochybují o sobě nebo zbytečně opakují své akce.
Stavy zaměření a ukázání, které pole je aktivní
Stav zaměření je mikrointerakce, která nastane, když někdo klikne do pole formuláře. Pole se změní, aby ukázalo, že je teď aktivní a připravené na zadání. Bez stavu zaměření člověk nemusí vědět, do kterého pole právě klikl, zvlášť na mobilu nebo když je formulář plný polí.
Jednoduchý stav zaměření je změna barvy ohraničení. Pole má světle šedé ohraničení. Při zaměření se změní na barvu vaší značky nebo jemnou modrou. Trvá to 100 až 150 milisekund. Právě tato rychlost rozhoduje mezi viditelným a neviditelným. Příliš rychle a lidé si toho nevšimnou. Příliš pomalu a působí to loudavě.
Druhou možností je změna barvy pozadí. Pozadí pole zůstává bílé, když je neaktivní. Po kliknutí se změní na velmi světlý odstín barvy vaší značky. Ze světle šedé na o něco světlejší modrou. Ne dramatická změna. Jen tolik, aby pole vynikalo.
Nepoužívejte obojí najednou. Změna barvy ohraničení plus změna pozadí plus stín plus záře je příliš. Vyberte jedno a udělejte to zřetelně. Zaměřené pole by mělo být v tu chvíli tím nejvýraznějším na formuláři.
Pomoci může i zástupný text, který po zaměření pole zmizí. Zástupný text ukazuje příklad, co psát. "priklad@email.cz" v poli pro e-mail. Když někdo klikne, aby začal psát, zástupný text vybledne a uvolní místo pro jeho vstup. I to je mikrointerakce, i když bývá přehlížena.
Zpětná vazba z ověřování v reálném čase
Ověřování v reálném čase znamená, že formulář kontroluje vstup při psaní a říká vám, zda je správný. Pole pro e-mail kontroluje každý znak a ukáže fajfku nebo křížek ještě před dopsáním. Pole pro heslo ukazuje sílu při přidávání znaků. Pole pro PSČ potvrdí, že je formát správný.
Mikrointerakcí je tu objevení fajfky nebo křížku a změna barvy z neutrální na zelenou (správně) nebo červenou (špatně). Dějí se okamžitě při psaní. Bez čekání. Bez nutnosti odeslat.
Ověřování v reálném čase snižuje počet chyb při odeslání. Když někdo vidí křížek u svého vstupu, opraví ho před kliknutím na odeslat. Nevyplní celý formulář jen proto, aby se na konci dozvěděl, že jedno pole bylo špatně. To šetří frustraci a zvyšuje míru dokončení formulářů.
Na načasování záleží. Ověření by se mělo spustit poté, co člověk přestane psát na zhruba 500 milisekund. Kontrola po každém stisku klávesy může působit dotěrně. Krátká pauza dá člověku čas dokončit myšlenku, než se objeví zpětná vazba.
Vizuální zpětná vazba by měla být okamžitá. Žádné točící se načítání při ověřování. Fajfku nebo chybu ukažte hned. Většina ověření (formát e-mailu, délka hesla, formát PSČ) se kontroluje okamžitě v zařízení. Žádné volání serveru. Ukažte tu rychlost.
Chybové zprávy s vizuálním důrazem
Když někdo odešle formulář s chybou, chybová zpráva se musí objevit tak, aby ji nešlo přehlédnout. Prostý text dole na formuláři snadno přehlédnete. Mikrointerakce udělá chybu nepřehlédnutelnou.
Nejlepší chybová mikrointerakce je kombinace. Pole s chybou dostane červené ohraničení. Text štítku zčervená nebo zesílí. Pod polem se objeví chybová zpráva s červenou ikonou. Nenápadná animace třesení (10 až 20 pixelů doleva a doprava, trvající 300 milisekund) přitáhne pozornost, aniž by byla ruchivá. Třesení říká "hej, tohle je důležité".
Samotná chybová zpráva by měla být jasná a konkrétní. Ne "Neplatný vstup." Raději "E-mailové adresy potřebují znak @." Nebo "Hesla musí mít alespoň 8 znaků." Když lidé vidí chybu, musí přesně vědět, co se pokazilo a jak to opravit.
Červená barva je pro chyby standardem, protože lidé červenou chápou jako "stop" nebo "problém". Nepoužívejte jinou barvu v naději, že ladí se značkou. Rozpoznání červené jako chyby je univerzální. Držte se jí.
Stavy načítání a zpracování
Když někdo klikne na odeslat, formulář pošle data na server. To trvá. Během té doby člověk čeká a přemýšlí. Stalo se něco? Dokončí se to někdy? Mikrointerakce stavu načítání toto ticho vyplní.
Nejjednodušší stav načítání je vypnout tlačítko odeslat a změnit jeho text z "Odeslat" na "Odesílám..." nebo "Načítám...". Tlačítko by mělo také trochu vyblednout nebo zešednout, aby bylo znát, že na něj už nelze kliknout. Tím lidem zabráníte klikat na odeslat opakovaně.
O krok lepší je přidat animaci kolečka. Malá kruhová ikona, která se točí, zatímco se formulář zpracovává. Je to poutavější než statický text a vytváří pocit pohybu a činnosti.
Načasování stavu načítání závisí na tom, jak dlouho odeslání skutečně trvá. U formulářů, které se odešlou za méně než sekundu, může být stav načítání zbytečný. Tlačítko může jen krátce ztmavnout. U formulářů, které trvají dvě až pět sekund (třeba složité zpracování dat), ukažte točící se kolečko. Vyplní čekání a sníží nejistotu.
Kolečko by se mělo točit zhruba jedním celým otočením za sekundu. Rychleji působí zběsile. Pomaleji působí zamrzle. Jedno otočení za sekundu působí jako stálý postup.
Potvrzení úspěchu a zpětná vazba o dokončení
Po úspěšném odeslání formuláře musí uživatel vědět, že to zabralo. Stránka nebo zpráva o úspěchu je zřejmý přístup. Ale mikrointerakce může tuto chvíli udělat příjemnější a zapamatovatelnější.
Zelená fajfka, která se objeví s nenápadnou animací zvětšení (z 80 % na 100 % velikosti během 300 milisekund), signalizuje dokončení. Fajfka působí jako odměna. Říká "povedlo se vám to". V kombinaci se zprávou o úspěchu zeleným textem potvrzuje, že formulář prošel.
Druhým přístupem je ukazatel průběhu, který se po dokončení odeslání naplní na 100 %. Pokud má formulář více kroků, ukazatel nahoře ukazuje, jak daleko se člověk dostal. Po dokončení posledního kroku se ukazatel zcela naplní a zezelená. Je to jako překročit cílovou čáru.
Samotná zpráva o úspěchu by měla být stručná a jasná. Ne "Vaše odeslání bylo naším systémem úspěšně přijato." Raději "Děkujeme. Vaši zprávu jsme dostali." Tón by měl působit osobně a vřele. Člověk dokončil úkol. Uznejte to přímo.
Pokud formulář po úspěchu přesměruje na novou stránku, neodstraňujte formulář okamžitě. Nechte animaci úspěchu přehrát 500 až 800 milisekund před přesměrováním. Dejte lidem chvíli, aby viděli, že uspěli, než je přesunete na další stránku.
Načasování a rychlost mikrointerakcí
Rychlost mikrointerakce určuje, zda působí svižně, nebo loudavě. Ideální rozmezí je 200 až 500 milisekund. To je dost rychle, aby to působilo okamžitě, a dost pomalu, aby to šlo zaznamenat a pochopit.
Změna stavu zaměření by měla být na rychlém konci. 100 až 200 milisekund. To je téměř okamžité, ale oko má právě dost času změnu zaregistrovat.
Zatřesení pole při chybě by mělo trvat kolem 300 milisekund. Je to znatelné, ale ne ruchivé. Rychleji působí šíleně. Pomaleji působí opožděně.
Kolečko načítání nebo animace úspěchu může být pomalejší, 500 až 800 milisekund. To jsou chvíle, kdy člověk očekává čekání. Pomalejší animace působí podstatněji a odměňuje.
Nikdy nepoužívejte na formuláři animace delší než jedna sekunda. Působí to pomalu. Interakce s formulářem by měly být svižné a citlivé. Pokud animace trvá déle než sekundu, lidé si začnou myslet, že se něco rozbilo.
Mikrointerakce testujte na skutečných zařízeních a sítích. Co působí rychle na stolním počítači s optickým připojením, může působit pomalu na telefonu s 4G. Stavte na nejpomalejší pravděpodobný zážitek.
Přístupnost u mikrointerakcí
Někteří lidé animace nevidí. Používají nastavení přístupnosti, které pohyb vypíná. Mikrointerakce, která se spoléhá jen na animaci, pro ně bude neviditelná. Vaše zpětná vazba musí fungovat i bez pohybu.
Barva je nejdůležitějším signálem zpětné vazby. Červené ohraničení u pole s chybou funguje bez ohledu na to, zda se objeví s animací. Zelená fajfka u platného vstupu funguje s animací zvětšení i bez ní. Barva sděluje okamžitě bez pohybu.
Důležitý je také text. Chybová zpráva musí být text, ne jen červená ikona. Stav úspěchu potřebuje text "Váš formulář byl úspěšně odeslán", ne jen fajfku. Když se něco pokazí nebo povede, řekněte to slovy.
Používejte v CSS nastavení prefers-reduced-motion. Pokud si někdo nastavil zařízení na omezení pohybu, animace mu odstraňte nebo zjednodušte. Ponechte barvu a textovou zpětnou vazbu. Ponechte stav zaměření. Odstraňte třesení, zvětšování a točení. Stále dostanou plnou zpětnou vazbu, jen bez pohybu.
Časté chyby v mikrointerakcích formulářů
Mikrointerakce mohou při špatném provedení uškodit. Nejčastější chybou jsou příliš pomalé nebo příliš dlouhé animace. Animace zaměření pole, která trvá 500 milisekund, působí loudavě. Přechod tlačítka odeslat, který trvá dvě sekundy, působí zamrzle. Držte je svižné.
Druhou chybou jsou animace bez jasného účelu. Točící se ikona, která nemá s načítáním nic společného, nebo změna barvy, která nesignalizuje změnu stavu, lidi mate. Každá mikrointerakce by měla odpovídat na otázku nebo označovat konkrétní změnu.
Třetí chybou jsou nekonzistentní mikrointerakce. Stav zaměření na jednom formuláři používá změnu barvy ohraničení. Stav zaměření na jiném formuláři na stejném webu používá změnu pozadí. Lidé si této nekonzistence všimnou a nejsou si jistí, co se děje. Používejte stejný styl mikrointerakcí na všech formulářích na svém webu.
Čtvrtou chybou je přehnané animování. Každé zaměřené pole přinese záři. Každý stisk klávesy spustí zpětnou vazbu. Každý stav najetí myší má pohyb. Formulář místo užitečného začne rušit. Používejte mikrointerakce tam, kde přidávají hodnotu. Tam, kde jsou zbytečné, je vynechte.
Pátou chybou jsou špatné chybové zprávy. Červené pole bez vysvětlujícího textu nechává lidi hádat, co se pokazilo. Vizuální zpětnou vazbu vždy doplňte jasnou, konkrétní chybovou zprávou.
Jak WEMASY pomáhá přidat mikrointerakce do formulářů
Nástroj WEMASY na formuláře obsahuje vestavěné mikrointerakce pro nejběžnější okamžiky formuláře. Když někdo klikne do pole, automaticky se objeví stavy zaměření s barvami vaší značky. Když někdo nechá povinné pole prázdné, zobrazí se chybová zpráva s vizuálním důrazem. Když někdo formulář odešle, objeví se stav načítání, který ukazuje průběh. Když odeslání uspěje, zpráva o úspěchu potvrdí dokončení.
Tyto mikrointerakce si můžete přizpůsobit své značce bez zásahu do kódu. Změňte barvu chybových zpráv. Upravte rychlost animace stavů načítání. Vyberte mezi kolečkem a textem pro stav odesílání. Tato nastavení jsou dostupná v rozhraní nástroje na formuláře.
Ověřování v reálném čase je součástí pro běžné typy polí. Pole pro e-mail ověřují formát při psaní. Pole pro telefon ověřují formát. Pole pro heslo ukazují sílu. Pole pro PSČ kontrolují formát. Tato ověření ukazují fajfky a ikony chyb se změnami barev, všechno vestavěné.
Pro složitější formuláře nebo pokročilé animace WEMASY umožňuje vývojářům přidat vlastní JavaScript. Ale výchozí mikrointerakce pokryjí 95 % případů použití a nevyžadují žádné programování.
Zjistěte, jaké funkce formulářů zahrnuje váš tarif WEMASY.