Din formular virker måske perfekt. Dataene bliver behandlet, indsendelserne går igennem, og alt fungerer, som det skal. Men hvis formularen ikke reagerer synligt på det, folk gør, tror de alligevel, at den er i stykker. De klikker to gange i samme felt, fordi de er i tvivl om, at det første klik blev registreret. De ved ikke, om der kom en fejlbesked, eller om indsendelsen faktisk gik igennem. Forvirring dræber andelen af udfyldte formularer hurtigere end noget designproblem. Løsningen er mikrointeraktioner: de små animationer og visuelle svar, der viser folk, at deres handling virkede.
En mikrointeraktion er den øjeblikkelige respons, der kommer, når nogen bruger din formular. En kant lyser op, når de klikker i et felt. En fejlbesked ryster en smule for at fange opmærksomheden. En spinner drejer rundt, mens indsendelsen behandles. Et flueben dukker op, når det indtastede er rigtigt. De her animationer varer kun få millisekunder, men de gør et vigtigt stykke arbejde. De svarer på det stille spørgsmål, som alle, der udfylder en formular, stiller ved hver handling: Gjorde det noget? Her gennemgår vi, hvad mikrointeraktioner gør, hvordan du timer dem, og hvorfor de har direkte betydning for, om folk udfylder din formular eller giver op undervejs.
Hvad mikrointeraktioner gør i formularer
En mikrointeraktion har ét job: at give øjeblikkelig respons på en bestemt handling. Nogen skriver en adgangskode, og en styrkemåler fyldes op. Nogen lader et obligatorisk felt stå tomt, og en fejl dukker op med en rød baggrund. Nogen klikker på send, og knappen skifter for at vise, at den arbejder. Ingen af de her interaktioner er en overraskelse. De forventes. Og de sker på under et halvt sekund.
Mikrointeraktioner har fire formål i formularer. For det første bekræfter de, at systemet har registreret handlingen. En formular føles i stykker, når du klikker, og intet ændrer sig. En diskret animation fortæller, at handlingen virkede. For det andet viser de vej til næste trin. En send-knap, der lyser, viser, hvad du skal klikke på. En fejlbesked, der fremhæver det forkerte felt, viser, hvor du skal kigge. For det tredje dæmper de uro i usikre øjeblikke. En spinner, der drejer under indsendelsen, siger "der sker noget, vent lidt". Uden den spekulerer folk på, om formularen er frosset. For det fjerde godkender de det indtastede med det samme. Et flueben, når en e-mailadresse er gyldig, viser folk, at de har gjort det rigtigt, uden at de skal sende først.
Det vigtigste, mikrointeraktioner gør, er at svare med det samme på ét spørgsmål. Virkede det? Når folk kan se svaret, går de videre med tillid. Når de ikke kan, tvivler de på sig selv eller gentager deres handlinger uden grund.
Fokustilstande og at vise, hvilket felt der er aktivt
En fokustilstand er en mikrointeraktion, der sker, når nogen klikker ind i et formularfelt. Feltet ændrer sig, så man kan se, at det nu er aktivt og klar til at tage imod tekst. Uden en fokustilstand ved man måske ikke, hvilket felt man netop har klikket i, især på mobil eller hvis formularen har mange felter tæt på hinanden.
En enkel fokustilstand er en ændring af kantens farve. Feltet har en lysegrå kant. Når det har fokus, bliver den til din brandfarve eller en blød blå. Det tager 100 til 150 millisekunder. Den hastighed er forskellen på, om man lægger mærke til det, eller ej. Er det for hurtigt, overser folk det. Er det for langsomt, føles det trægt.
En anden mulighed er et skift i baggrundsfarven. Feltets baggrund er hvid, når det ikke er aktivt. Når der klikkes, bliver den en meget lys nuance af din brandfarve. Lysegrå til en smule lysere blå. Ikke en dramatisk ændring. Bare nok til at skille sig ud.
Undgå begge dele på én gang. Farveskift på kanten plus skift i baggrunden plus skygge plus glød er for meget. Vælg én og gør den tydelig. Feltet med fokus skal være det mest iøjnefaldende på formularen i det øjeblik.
Pladsholdertekst, der forsvinder, når feltet får fokus, kan også hjælpe. Pladsholderteksten viser et eksempel på, hvad der skal skrives. "eksempel@mail.dk" i et e-mailfelt. Når nogen klikker for at skrive, toner pladsholderen ud, så der er plads til det, de skriver. Det er også en mikrointeraktion, selvom den ofte overses.
Validering i realtid
Validering i realtid er, når formularen tjekker det indtastede, mens du skriver, og fortæller dig, om det er rigtigt. Et e-mailfelt tjekker hvert tegn og viser et flueben eller et kryds, før du overhovedet er færdig med at skrive. Et felt til adgangskode viser styrken, mens du tilføjer tegn. Et felt til postnummer bekræfter, at formatet er rigtigt.
Mikrointeraktionen her er, at fluebenet eller krydset dukker op, og at farven skifter fra neutral til grøn (rigtigt) eller rød (forkert). Det sker med det samme, mens personen skriver. Ingen ventetid. Ingen indsendelse nødvendig.
Validering i realtid giver færre fejl ved indsendelsen. Hvis nogen ser et kryds ved det, de har skrevet, retter de det, før de trykker på send. De udfylder ikke hele formularen for til sidst at få at vide, at ét felt var forkert. Det sparer frustration og giver flere udfyldte formularer.
Timingen betyder noget. Valideringen bør starte, når personen har holdt pause med at skrive i cirka 500 millisekunder. Hvis der tjekkes efter hvert eneste tastetryk, kan det føles påtrængende. En kort pause lader personen gøre tanken færdig, før responsen dukker op.
Den visuelle respons skal være øjeblikkelig. Ingen drejende indlæser, mens der valideres. Vis fluebenet eller fejlen med det samme. De fleste valideringer (format på e-mail, længde på adgangskode, format på postnummer) bliver tjekket med det samme på enheden. Der er intet kald til en server. Vis den hurtighed.
Fejlbeskeder med visuel fremhævning
Når nogen sender en formular med en fejl, skal fejlbeskeden vises på en måde, man ikke kan overse. En enkel tekst nederst i formularen er let at overse. En mikrointeraktion gør fejlen umulig at ignorere.
Den bedste mikrointeraktion ved en fejl er en kombination. Feltet med fejlen får en rød kant. Teksten på feltet bliver rød eller fed. Fejlbeskeden dukker op under feltet med et rødt ikon. En diskret rystende animation (10 til 20 pixel frem og tilbage, der varer 300 millisekunder) fanger opmærksomheden uden at være grov. Rystelsen siger: "hey, det her er vigtigt."
Selve fejlbeskeden skal være klar og præcis. Ikke "Ugyldigt input." Men "E-mailadresser skal have et @." Eller "Adgangskoder skal være på mindst 8 tegn." Når folk ser en fejl, skal de vide præcis, hvad der gik galt, og hvordan de retter det.
Rød er standard til fejl, fordi folk forstår rød som "stop" eller "problem". Brug ikke en anden farve i håb om at passe til dit brand. At rød betyder fejl, forstår alle. Hold dig til den.
Indlæsning og behandling
Når nogen klikker på send, sender formularen data til en server. Det tager tid. I den tid venter personen og undrer sig. Er der sket noget? Bliver den nogensinde færdig? En mikrointeraktion ved indlæsning fylder den tavshed ud.
Den enkleste form er at gøre send-knappen inaktiv og skifte teksten fra "Send" til "Sender..." eller "Indlæser...". Knappen bør også blive lidt blegere eller grå for at vise, at man ikke kan klikke på den længere. Så undgår du, at folk klikker på send flere gange.
Et skridt bedre er at tilføje en spinner. Et lille rundt ikon, der drejer, mens formularen behandles. Det er mere levende end statisk tekst og giver en følelse af bevægelse og aktivitet.
Hvor længe indlæsningen vises, afhænger af, hvor lang tid indsendelsen faktisk tager. Ved formularer, der sendes på under et sekund, kan det føles unødvendigt at vise en indlæsning. Knappen kan bare blive mørk et kort øjeblik. Ved formularer, der tager to til fem sekunder (som en tung databehandling), skal du vise spinneren. Den fylder ventetiden ud og dæmper uroen.
Spinneren bør dreje cirka én hel omgang i sekundet. Hurtigere virker hektisk. Langsommere virker frosset. Én omgang i sekundet føles som jævn fremdrift.
Bekræftelse af succes og afslutning
Når en formular er sendt, skal brugeren vide, at det lykkedes. En side eller besked om succes er den oplagte løsning. Men en mikrointeraktion kan gøre øjeblikket mere tilfredsstillende og nemmere at huske.
Et grønt flueben, der dukker op med en diskret animation, hvor det vokser (fra 80 % til 100 % størrelse på 300 millisekunder), viser, at det er gjort. Fluebenet føles som en belønning. Det siger: "du gjorde det." Sammen med en besked i grøn tekst bekræfter det, at formularen gik igennem.
En anden mulighed er en statuslinje, der fyldes helt op til 100 %, når indsendelsen er færdig. Hvis formularen har flere trin, viser en statuslinje øverst, hvor langt personen er nået. Når det sidste trin er færdigt, fyldes linjen helt og bliver grøn. Det føles som at krydse målstregen.
Selve beskeden om succes skal være kort og klar. Ikke "Din indsendelse er modtaget af vores system." Men "Tak. Vi har fået din besked." Tonen skal være personlig og varm. Personen har løst en opgave. Anerkend det direkte.
Hvis formularen sender videre til en ny side efter succes, så fjern ikke formularen med det samme. Lad animationen af succes spille i 500 til 800 millisekunder, før du sender videre. Giv folk et øjeblik til at se, at det lykkedes, før de flyttes til næste side.
Timing og hastighed i mikrointeraktioner
Hastigheden på en mikrointeraktion afgør, om den føles hurtig eller træg. Det ideelle er 200 til 500 millisekunder. Det er hurtigt nok til at føles øjeblikkeligt og langsomt nok til at kunne ses og forstås.
Et skift i fokustilstand bør ligge i den hurtige ende. 100 til 200 millisekunder. Det er næsten øjeblikkeligt, men giver øjet lige tid nok til at opfatte ændringen.
En rystelse af feltet ved en fejl bør vare omkring 300 millisekunder. Det kan ses, men er ikke grovt. Hurtigere virker manisk. Langsommere virker forsinket.
En spinner eller en animation af succes kan være langsommere, 500 til 800 millisekunder. Det er øjeblikke, hvor personen forventer at vente. En langsommere animation føles mere solid og givende.
Brug aldrig animationer på over ét sekund i en formular. Det føles langsomt. Formularer skal føles hurtige og lydhøre. Hvis en animation tager over et sekund, undrer folk sig over, om noget er gået i stykker.
Test dine mikrointeraktioner på rigtige enheder og netværk. Det, der føles hurtigt på en computer med fiber, kan føles langsomt på en telefon med 4G. Byg til den langsomste oplevelse, der er sandsynlig.
Tilgængelighed i mikrointeraktioner
Nogle mennesker ser ikke animationer. De bruger indstillinger for tilgængelighed, der slår bevægelse fra. En mikrointeraktion, der kun bygger på animation, er usynlig for dem. Din respons skal også virke uden bevægelse.
Farve er det vigtigste signal. En rød kant på et felt med fejl virker, uanset om kanten kommer med animation eller ej. Et grønt flueben ved gyldigt input virker med eller uden en animation, hvor det vokser. Farve fortæller det med det samme uden bevægelse.
Tekst er også afgørende. En fejlbesked skal være tekst, ikke kun et rødt ikon. Succes skal stå som tekst: "Din formular blev sendt", ikke kun som et flueben. Når noget går galt eller godt, så sig det med ord.
Brug indstillingen prefers-reduced-motion i CSS. Hvis nogen har sat deres enhed til at mindske bevægelse, så fjern eller forenkl animationer for dem. Behold farve og tekst. Behold fokustilstanden. Fjern rystelsen, væksten og drejningen. De får stadig den fulde respons, bare uden bevægelse.
Typiske fejl i mikrointeraktioner i formularer
Mikrointeraktioner kan slå tilbage, hvis de er dårligt lavet. Den mest almindelige fejl er animationer, der er for langsomme eller for lange. En animation af fokus på et felt, der tager 500 millisekunder, føles træg. Et skift på send-knappen, der varer to sekunder, føles frosset. Hold dem hurtige.
En anden fejl er animationer uden et klart formål. Et ikon, der drejer uden at have noget med indlæsning at gøre, eller et farveskift, der ikke viser en ændring i tilstanden, forvirrer folk. Hver mikrointeraktion skal svare på et spørgsmål eller vise en bestemt ændring.
En tredje fejl er mikrointeraktioner, der ikke passer sammen. Fokustilstanden på den ene formular bruger et farveskift på kanten. På en anden formular på samme hjemmeside bruger den et skift i baggrunden. Folk lægger mærke til den uens opførsel, og det gør dem usikre på, hvad der sker. Brug den samme stil til mikrointeraktioner i alle formularer på din hjemmeside.
En fjerde fejl er for meget animation. Hvert felt med fokus giver en glød. Hvert tastetryk udløser respons. Hver svævetilstand har bevægelse. Så bliver formularen forstyrrende i stedet for hjælpsom. Brug mikrointeraktioner, hvor de gør gavn. Lad være, hvor de er unødvendige.
En femte fejl er dårlige fejlbeskeder. Et rødt felt uden en forklarende tekst får folk til at gætte, hvad der gik galt. Kombinér altid visuel respons med en klar og præcis fejlbesked.
Sådan hjælper WEMASY dig med at tilføje mikrointeraktioner til formularer
WEMASY's formularbygger har indbyggede mikrointeraktioner til de mest almindelige øjeblikke i en formular. Når nogen klikker i et felt, kommer fokustilstanden automatisk med dine brandfarver. Når nogen lader et obligatorisk felt stå tomt, vises en fejlbesked med visuel fremhævning. Når nogen sender en formular, vises en indlæsning, der viser fremdriften. Når indsendelsen lykkes, bekræfter en besked, at den er gennemført.
Du kan tilpasse de her mikrointeraktioner til dit brand uden at røre ved kode. Skift farven på fejlbeskeder. Justér animationens hastighed ved indlæsning. Vælg mellem en spinner eller tekst, mens formularen sendes. Indstillingerne findes i formularbyggeren.
Validering i realtid er med til de almindelige felttyper. E-mailfelter tjekker formatet, mens du skriver. Telefonfelter tjekker formatet. Felter til adgangskode viser styrken. Felter til postnummer tjekker formatet. Valideringerne viser flueben og fejlikoner med farveskift, alt sammen indbygget.
Til mere komplekse formularer eller avancerede animationer kan udviklere tilføje eget JavaScript i WEMASY. Men de indbyggede mikrointeraktioner dækker 95 % af tilfældene og kræver ingen kode.
Se, hvilke formularfunktioner der er med i din WEMASY-plan.