Lehet, hogy az űrlapod tökéletesen működik. Az adatot feldolgozza, a beküldések átmennek, minden úgy működik, ahogy megtervezték. De ha az űrlapod vizuálisan nem reagál arra, amit az emberek tesznek, akkor is elromlottnak fogják hinni. Kétszer kattintanak ugyanarra a mezőre, mert nem biztosak benne, hogy az első kattintás megtörtént. Elgondolkodnak, megjelent-e hibaüzenet, vagy a beküldés tényleg átment-e. A zavar gyorsabban öli meg az űrlapkitöltési arányt, mint bármilyen tervezési gond. A megoldás a mikro-interakció: azok a kis animációk és vizuális válaszok, amelyek elmondják az embereknek, hogy a műveletük sikerült.
A mikro-interakció az az azonnali visszajelzés, amely megjelenik, amikor valaki interakcióba lép az űrlapoddal. A szegély kigyullad, amikor rákattintanak egy mezőre. A hibaüzenet kissé megrázkódik, hogy felhívja a figyelmet. A pörgő jelző forog, amíg a beküldésük feldolgozódik. Pipa jelenik meg, amikor a bevitelük helyes. Ezek az animációk csak ezredmásodpercekig tartanak, de fontos munkát végeznek. Megválaszolják azt a néma kérdést, amelyet minden űrlaphasználó feltesz minden műveletnél: Csinált ez valamit? Ez a cikk bemutatja, mit tesznek a mikro-interakciók, hogyan időzítsd őket hatékonyan, és miért hatnak közvetlenül arra, hogy az emberek befejezik-e az űrlapodat, vagy félúton elhagyják.
Mit tesznek a mikro-interakciók az űrlapokban?
A mikro-interakciónak egy feladata van: azonnali visszajelzést adni egy adott műveletre. Valaki beír egy jelszót, és kitöltődik az erősségjelző. Valaki üresen hagy egy kötelező mezőt, és hibaüzenet jelenik meg piros háttérváltással. Valaki a beküldésre kattint, és a gomb megváltozik, hogy mutassa a feldolgozást. Ezek az interakciók nem meglepetések. Várhatók. És fél másodpercnél rövidebb idő alatt történnek.
A mikro-interakciók négy célt szolgálnak az űrlapokban. Először megerősítik, hogy a rendszer rögzítette a műveletet. Az űrlap elromlottnak érződik, ha kattintasz, és semmi nem változik. Egy finom animáció elmondja, hogy a művelet sikerült. Másodszor a következő lépés felé terelik az embereket. A fénylő beküldő gomb megmondja, mire kell kattintani. A hibás mezőt kiemelő hibaüzenet megmondja, hová kell figyelni. Harmadszor csökkentik a szorongást a bizonytalan pillanatokban. Az űrlapbeküldés közben forgó jelző azt mondja: „történik valami, várj”. Nélküle az emberek azon tűnődnek, hogy lefagyott-e az űrlap. Negyedszer valós időben ellenőrzik a bevitelt. Ha pipát mutatsz egy érvényes e-mail-címnél, az emberek beküldés előtt tudják, hogy jól csinálták.
A legfontosabb dolog, amit a mikro-interakciók tesznek: azonnal megválaszolnak egyetlen kérdést. Működött? Ha valaki látja a választ, magabiztosan halad tovább. Ha nem látja, kételkedik magában, vagy feleslegesen megismétli a műveleteit.
Fókuszállapotok: megmutatni, melyik mező az aktív
A fókuszállapot olyan mikro-interakció, amely akkor történik, amikor valaki egy űrlapmezőbe kattint. A mező megváltozik, hogy megmutassa, hogy most aktív és beviteli kész. Fókuszállapot nélkül előfordulhat, hogy a személy nem tudja, melyik mezőbe kattintott, különösen mobilon, vagy ha az űrlap zsúfolt sok mezővel.
Az egyszerű fókuszállapot a szegély színének változása. A mezőnek világosszürke szegélye van. Fókuszban a márkaszínedre vagy halvány kékre vált. Ez 100-150 ezredmásodpercet vesz igénybe. Ez a sebesség a különbség az észrevehető és a láthatatlan között. Túl gyors, és az emberek elmulasztják. Túl lassú, és ténfergősnek érződik.
A második lehetőség a háttérszín váltása. A mező háttere fehér marad, amikor inaktív. Kattintáskor a márkaszíned nagyon világos árnyalata lesz. Világosszürkéből kissé világosabb kékbe. Nem drámai változás. Épp elég, hogy kitűnjön.
Kerüld mindkét változtatást egyszerre. A szegélyszín plusz háttérváltás plusz árnyék plusz fény túl sok. Válassz egyet, és legyen egyértelmű. A fókuszban lévő mező legyen a legfényesebb dolog az űrlapon abban a pillanatban.
Segíthet az a helyőrző szöveg is, amely eltűnik, amikor a mező fókuszba kerül. A helyőrző szöveg példát mutat arra, mit írj be. „pelda@email.hu” egy e-mail mezőben. Amikor valaki gépelni kezd, a helyőrző elhalványul, hogy helyet adjon a bevitelnek. Ez is mikro-interakció, bár gyakran figyelmen kívül hagyják.
Valós idejű ellenőrzési visszajelzés
A valós idejű ellenőrzés az, amikor az űrlap gépelés közben ellenőrzi a bevitelt, és megmondja, helyes-e. Az e-mail mező minden karaktert ellenőriz, és pipát vagy X-et mutat, mielőtt befejeznéd a gépelést. A jelszó mező az erősséget mutatja, ahogy karaktereket adsz hozzá. Az irányítószám mező megerősíti, hogy a formátum helyes.
A mikro-interakció itt a pipa vagy az X megjelenése, és a színváltás semlegesről zöldre (helyes) vagy pirosra (helytelen). Ezek azonnal megtörténnek, ahogy a személy gépel. Nincs várakozás. Nem kell beküldés.
A valós idejű ellenőrzés csökkenti a beküldési hibákat. Ha valaki X-et lát a bevitele mellett, kijavítja, mielőtt a beküldésre kattintana. Nem tölti ki az egész űrlapot, hogy a végén megmondják neki, hogy egy mező hibás volt. Ez megspórolja a bosszúságot, és növeli az űrlapkitöltési arányt.
Az időzítés számít. Az ellenőrzésnek azután kell indulnia, hogy a személy nagyjából 500 ezredmásodpercre abbahagyja a gépelést. Ha minden egyes billentyűleütés után ellenőrzöl, az agresszívnak érződhet. A rövid szünet lehetővé teszi, hogy a személy befejezze a gondolatát, mielőtt a visszajelzés megjelenik.
A vizuális visszajelzésnek azonnalinak kell lennie. Nincs pörgő betöltésjelző ellenőrzés közben. Mutasd azonnal a pipát vagy a hibát. A legtöbb ellenőrzés (e-mail formátum, jelszóhossz, irányítószám-formátum) azonnal megtörténik az eszközön. Nincs szerverhívás. Mutasd meg ezt a sebességet.
Hibaüzenetek vizuális kiemeléssel
Amikor valaki hibával küld be egy űrlapot, a hibaüzenetnek úgy kell megjelennie, hogy ne lehessen elmulasztani. Egy egyszerű szöveges üzenet az űrlap alján könnyen figyelmen kívül hagyható. A mikro-interakció lehetetlenné teszi a hiba figyelmen kívül hagyását.
A legjobb hiba-mikro-interakció kombináció. A hibás mező piros szegélyt kap. A felirat szövege piros vagy félkövér lesz. A hibaüzenet a mező alatt jelenik meg piros ikonnal. Egy finom megrázkódás-animáció (10-20 pixel balra és jobbra, 300 ezredmásodpercig tartva) felhívja a figyelmet anélkül, hogy zavaró lenne. A megrázkódás azt mondja: „hé, ez fontos”.
A hibaüzenet legyen világos és konkrét. Nem „Érvénytelen bevitel”. Hanem „Az e-mail-címnek tartalmaznia kell a @ jelet.” Vagy „A jelszó legalább 8 karakter legyen.” Amikor az emberek hibát látnak, pontosan tudniuk kell, mi romlott el, és hogyan javíthatják.
A piros szín a hibák szabványa, mert az emberek a pirosat „állj” vagy „probléma” jelzésként értik. Ne használj más színt abban a reményben, hogy illeszkedik a márkádhoz. A piros hibaként való felismerése egyetemes. Maradj ennél.
Betöltési és feldolgozási állapotok
Amikor valaki a beküldésre kattint, az űrlap adatot küld egy szervernek. Ez időbe telik. Ez alatt az idő alatt a személy vár és tűnődik. Történt valami? Befejeződik valaha? A betöltési állapot mikro-interakció kitölti ezt a csendet.
A legegyszerűbb betöltési állapot, hogy letiltod a beküldő gombot, és a szövegét „Küldés”-ről „Küldés folyamatban...” vagy „Betöltés...” feliratra változtatod. A gomb legyen kissé halvány vagy szürke is, jelezve, hogy már nem kattintható. Ez megakadályozza, hogy az emberek többször a beküldésre kattintsanak.
Egy lépéssel jobb, ha forgó jelző animációt adsz hozzá. Egy kis körkörös ikon, amely forog, amíg az űrlap feldolgoz. Ez vonzóbb a statikus szövegnél, és a mozgás és a tevékenység érzetét kelti.
A betöltési állapot időzítése attól függ, mennyi ideig tart valójában a beküldés. Az egy másodpercnél rövidebb idő alatt beküldött űrlapoknál a betöltési állapot feleslegesnek érződhet. A gomb egyszerűen rövid időre elsötétülhet. A kettő-öt másodpercig tartó űrlapoknál (például összetett adatfolyamat) mutass betöltési jelzőt. Kitölti a várakozási időt, és csökkenti a szorongást.
A jelző nagyjából másodpercenként egy teljes fordulatot tegyen. A gyorsabb kapkodónak érződik. A lassabb lefagyottnak. A másodpercenkénti egy fordulat egyenletes haladásnak tűnik.
Sikeres beküldés megerősítése és befejezési visszajelzés
Miután az űrlap sikeresen beküldődött, a felhasználónak tudnia kell, hogy sikerült. A sikeroldal vagy üzenet az egyértelmű megoldás. De egy mikro-interakció még kielégítőbbé és emlékezetesebbé teheti ezt a pillanatot.
Az a zöld pipa, amely finom növekedési animációval jelenik meg (80%-ról 100%-os méretre nő 300 ezredmásodperc alatt), befejezést jelez. A pipa jutalomnak érződik. Azt mondja: „sikerült”. Zöld szövegű sikerüzenettel együtt megerősíti, hogy az űrlap átment.
A második megközelítés egy folyamatjelző, amely 100%-ra telik, amikor a beküldés befejeződik. Ha az űrlapnak több lépése van, a tetején lévő folyamatjelző megmutatja, meddig jutott a személy. Amikor az utolsó lépés befejeződik, a sáv teljesen megtelik, és zöldre vált. Ez olyan érzés, mint átlépni a célvonalat.
Maga a sikerüzenet legyen rövid és világos. Nem „A beküldésedet rendszerünk sikeresen fogadta.” Hanem „Köszönjük. Megkaptuk az üzenetedet.” A hangnem legyen személyes és meleg. A személy elvégzett egy feladatot. Ismerd el közvetlenül.
Ha az űrlap sikeres beküldés után új oldalra irányít át, ne tüntesd el azonnal az űrlapot. Hagyd a siker-animációt 500-800 ezredmásodpercig lejátszódni az átirányítás előtt. Adj az embereknek egy pillanatot, hogy lássák, sikerült, mielőtt a következő oldalra viszed őket.
Időzítés és sebesség a mikro-interakciókban
A mikro-interakció sebessége határozza meg, hogy reszponzívnak vagy lomhának érződik. Az ideális tartomány 200-500 ezredmásodperc. Ez elég gyors ahhoz, hogy azonnalinak érződjön, és elég lassú ahhoz, hogy észrevegyék és megértsék.
A fókuszállapot-váltás legyen a gyors végen. 100-200 ezredmásodperc. Ez majdnem azonnali, de épp elég időt hagy a szemnek a változás észlelésére.
A mező megrázkódása hibánál nagyjából 300 ezredmásodperc legyen. Ez észrevehető, de nem zavaró. A gyorsabb őrültnek érződik. A lassabb késettnek.
A betöltési jelző vagy a siker-animáció lehet lassabb, 500-800 ezredmásodperc. Ezek olyan pillanatok, ahol a személy várakozásra számít. A lassabb animáció tartalmasabbnak és jutalmazóbbnak érződik.
Soha ne használj egy másodpercnél hosszabb animációt egy űrlapon. Ez lassúnak érződik. Az űrlap-interakcióknak frissnek és reszponzívnak kell lenniük. Ha egy animáció egy másodpercnél tovább tart, az emberek azon tűnődnek, hogy elromlott-e valami.
Teszteld a mikro-interakcióidat valódi eszközökön és hálózatokon. Ami asztali gépen, üvegszálas kapcsolattal gyorsnak érződik, az 4G-s telefonon lassúnak tűnhet. A legvalószínűbb leglassabb élményre építs.
Hozzáférhetőség a mikro-interakciókban
Egyes emberek nem látják az animációkat. Olyan hozzáférhetőségi beállításokat használnak, amelyek kikapcsolják a mozgást. Az a mikro-interakció, amely csak az animációra támaszkodik, láthatatlan lesz számukra. A visszajelzésednek mozgás nélkül is működnie kell.
A szín a legfontosabb visszajelzési jel. A hibás mező piros szegélye működik akkor is, ha a szegély animációval jelenik meg, és akkor is, ha nem. Az érvényes bevitelnél a zöld pipa működik növekedési animációval vagy anélkül. A szín mozgás nélkül, azonnal kommunikál.
A szöveg is kritikus. A hibaüzenetnek szövegnek kell lennie, nem csak piros ikonnak. A siker állapotnak szöveg kell: „Az űrlapod sikeresen beküldve”, nem csak pipa. Amikor valami rosszul vagy jól sül el, mondd ki szavakkal.
Használd a CSS prefers-reduced-motion beállítását. Ha valaki úgy állította be az eszközét, hogy csökkentse a mozgást, távolítsd el vagy egyszerűsítsd számára az animációkat. Tartsd meg a szín- és szövegvisszajelzést. Tartsd meg a fókuszállapotot. Vedd ki a megrázkódást, a növekedést, a forgást. Így is megkapják a teljes visszajelzési élményt, csak mozgás nélkül.
Gyakori hibák az űrlapok mikro-interakcióiban
A mikro-interakciók visszaüthetnek, ha rosszul csinálod őket. A leggyakoribb hiba a túl lassú vagy túl hosszú animáció. Az a mezőfókusz-animáció, amely 500 ezredmásodpercig tart, lomhának érződik. Az a beküldő gomb átmenet, amely két másodpercig tart, lefagyottnak. Tartsd frissen.
A második hiba az animáció világos cél nélkül. Egy olyan forgó ikon, amelynek semmi köze a betöltéshez, vagy egy olyan színváltás, amely nem jelez állapotváltozást, összezavarja az embereket. Minden mikro-interakciónak meg kell válaszolnia egy kérdést, vagy konkrét változást kell jeleznie.
A harmadik hiba a következetlen mikro-interakció. Az egyik űrlap fókuszállapota szegélyszín-váltást használ. Ugyanazon a weboldalon egy másik űrlap fókuszállapota háttérváltást. Az emberek észreveszik ezt a következetlenséget, és bizonytalanná teszi őket abban, mi történik. Használd ugyanazt a mikro-interakciós stílust a weboldalad összes űrlapján.
A negyedik hiba a túlanimálás. Minden fókuszba került mezőnél izzás. Minden billentyűleütés visszajelzést vált ki. Minden fölé vitel állapotnak van mozgása. Az űrlap zavaróvá válik segítő helyett. Használj mikro-interakciókat ott, ahol értéket adnak. Hagyd ki ott, ahol felesleges.
Az ötödik hiba a gyenge hibaüzenet. Egy piros mező magyarázó szöveg nélkül találgatásra hagyja az embereket, mi romlott el. Mindig párosítsd a vizuális visszajelzést világos, konkrét hibaüzenettel.
Hogyan segít a WEMASY a mikro-interakciók hozzáadásában az űrlapokhoz?
A WEMASY űrlapszerkesztője beépített mikro-interakciókat tartalmaz a leggyakoribb űrlap-pillanatokra. Amikor valaki egy mezőre kattint, a fókuszállapotok automatikusan megjelennek a márkaszíneiddel. Amikor valaki üresen hagy egy kötelező mezőt, a hibaüzenet vizuális kiemeléssel jelenik meg. Amikor valaki beküld egy űrlapot, betöltési állapot jelenik meg a haladás jelzésére. Amikor a beküldés sikerül, sikerüzenet erősíti meg a befejezést.
Ezeket a mikro-interakciókat a márkádhoz szabhatod kódolás nélkül. Változtasd meg a hibaüzenetek színét. Állítsd a betöltési állapotok animációs sebességét. Válassz a forgó jelző vagy a szöveg között a beküldési állapothoz. Ezek a beállítások az űrlapszerkesztő felületén érhetők el.
A valós idejű ellenőrzés a gyakori mezőtípusoknál benne van. Az e-mail mezők gépelés közben ellenőrzik a formátumot. A telefonmezők ellenőrzik a formátumot. A jelszó mezők erősséget mutatnak. Az irányítószám mezők ellenőrzik a formátumot. Ezek az ellenőrzések pipákat és hibaikonokat mutatnak színváltással, mindez beépítve.
Az összetettebb űrlapokhoz vagy fejlett animációkhoz a WEMASY lehetővé teszi, hogy a fejlesztők egyedi JavaScriptet adjanak hozzá. De az alapértelmezett mikro-interakciók az esetek 95%-át lefedik, és nem igényelnek kódolást.
Nézd meg, mely űrlapfunkciók tartoznak a WEMASY csomagodba.