Ditt formulär kanske fungerar perfekt. Datan behandlas, svaren går igenom och allt fungerar som tänkt. Men om formuläret inte svarar visuellt på det människor gör tror de ändå att det är trasigt. De klickar på samma fält två gånger, osäkra på om det första klicket registrerades. De undrar om ett felmeddelande dök upp eller om svaret verkligen skickades. Förvirring sänker andelen som fyller i klart ett formulär snabbare än något designproblem. Lösningen är mikrointeraktioner, de små animationerna och visuella svaren som visar att en åtgärd fungerade.
En mikrointeraktion är den omedelbara återkopplingen som visas när någon interagerar med ditt formulär. En kantlinje tänds när någon klickar på ett fält. Ett felmeddelande skakar lite för att dra till sig uppmärksamhet. En snurrande symbol roterar medan svaret skickas. En bock dyker upp när inmatningen är rätt. De här animationerna tar bara några millisekunder, men de gör ett avgörande jobb. De svarar på den tysta frågan som alla som fyller i ett formulär ställer vid varje handling: Hände det något? Den här artikeln går igenom vad mikrointeraktioner gör, hur du timar dem effektivt och varför de direkt påverkar om människor fyller i klart ditt formulär eller ger upp halvvägs.
Vad mikrointeraktioner gör i formulär
En mikrointeraktion har en uppgift: att ge omedelbar återkoppling på en viss handling. Någon skriver ett lösenord och en styrkemätare fylls. Någon lämnar ett obligatoriskt fält tomt och ett fel visas med en röd bakgrundston. Någon klickar på skicka och knappen ändras för att visa att något pågår. Ingen av de här interaktionerna är en överraskning. De är förväntade. Och de sker på mindre än en halv sekund.
Mikrointeraktioner har fyra syften i formulär. För det första bekräftar de att systemet registrerade handlingen. Ett formulär känns trasigt när du klickar och inget förändras. En diskret animation visar att handlingen fungerade. För det andra leder de människor mot nästa steg. En skickaknapp som lyser visar vad du ska klicka på. Ett felmeddelande som markerar det felaktiga fältet visar var du ska fokusera. För det tredje minskar de oro i osäkra stunder. En symbol som snurrar medan formuläret skickas säger "något pågår, vänta". Utan den undrar människor om formuläret har hängt sig. För det fjärde bekräftar de inmatningen i realtid. Att visa en bock när en e-postadress är giltig visar att man gjort rätt utan att behöva vänta tills formuläret skickas.
Det viktigaste mikrointeraktioner gör är att direkt svara på en enda fråga. Fungerade det? När människor kan se svaret går de vidare med självförtroende. När de inte kan det tvivlar de på sig själva eller upprepar sina handlingar i onödan.
Fokusstatus och att visa vilket fält som är aktivt
Fokusstatus är en mikrointeraktion som sker när någon klickar i ett formulärfält. Fältet ändras för att visa att det nu är aktivt och redo för inmatning. Utan fokusstatus vet man kanske inte vilket fält man just klickade i, särskilt på mobilen eller om formuläret är fullt av fält.
En enkel fokusstatus är att kantlinjens färg ändras. Fältet har en ljusgrå kantlinje. När det är i fokus blir den din varumärkesfärg eller en mjuk blå. Det tar 100 till 150 millisekunder. Den hastigheten är skillnaden mellan märkbart och osynligt. Går det för fort missar man det. Går det för långsamt känns det trögt.
Ett andra alternativ är att bakgrundsfärgen ändras. Fältets bakgrund är vit när det är inaktivt. När man klickar blir den en mycket ljus ton av din varumärkesfärg. Ljusgrått till en något ljusare blå. Ingen dramatisk förändring. Bara tillräckligt för att sticka ut.
Undvik att göra båda samtidigt. Kantfärg plus bakgrundsändring plus skugga plus sken blir för mycket. Välj ett och gör det tydligt. Fältet i fokus ska vara det starkaste på formuläret just då.
En platshållartext som försvinner när fältet får fokus kan också hjälpa. Platshållartexten visar ett exempel på vad man ska skriva. "exempel@epost.se" i ett e-postfält. När någon klickar för att skriva tonas platshållaren ut och ger plats åt inmatningen. Även det är en mikrointeraktion, fast den ofta förbises.
Validering i realtid
Validering i realtid innebär att formuläret kontrollerar inmatningen medan du skriver och talar om om den är rätt. Ett e-postfält kontrollerar varje tecken och visar en bock eller ett kryss innan du ens har skrivit klart. Ett lösenordsfält visar styrkan när du lägger till tecken. Ett postnummerfält bekräftar att formatet är rätt.
Mikrointeraktionen här är att bocken eller krysset dyker upp och att färgen skiftar från neutral till grön (rätt) eller röd (fel). Det sker direkt medan personen skriver. Ingen väntan. Ingen inskickning krävs.
Validering i realtid minskar felen vid inskickning. Om någon ser ett kryss bredvid sin inmatning rättar personen det innan hen klickar på skicka. Man fyller inte i hela formuläret bara för att få veta i slutet att ett fält var fel. Det sparar irritation och ökar andelen som fyller i klart formuläret.
Tidpunkten spelar roll. Valideringen bör starta när personen har slutat skriva i ungefär 500 millisekunder. Att kontrollera efter varje enskilt tangenttryck kan kännas påträngande. En kort paus låter personen tänka klart innan återkopplingen dyker upp.
Den visuella återkopplingen ska vara omedelbar. Ingen snurrande laddningssymbol medan valideringen pågår. Visa bocken eller felet direkt. De flesta valideringar (e-postformat, lösenordslängd, postnummerformat) kontrolleras direkt på enheten. Inget serveranrop behövs. Visa den snabbheten.
Felmeddelanden med visuell betoning
När någon skickar ett formulär med ett fel måste felmeddelandet visas så att det inte går att missa. Ett enkelt textmeddelande längst ned i formuläret är lätt att förbise. En mikrointeraktion gör felet omöjligt att ignorera.
Den bästa mikrointeraktionen för fel är en kombination. Fältet med felet får en röd kantlinje. Etikettens text blir röd eller fet. Felmeddelandet visas under fältet med en röd ikon. En diskret skakanimation (10 till 20 pixlar åt vänster och höger, i 300 millisekunder) drar till sig uppmärksamhet utan att störa. Skakningen säger "hej, det här är viktigt."
Själva felmeddelandet ska vara tydligt och specifikt. Inte "Ogiltig inmatning." Utan "E-postadresser måste innehålla ett @-tecken." Eller "Lösenord måste vara minst 8 tecken." När människor ser ett fel behöver de veta exakt vad som blev fel och hur de rättar det.
Färgen röd är standard för fel eftersom människor förstår rött som "stopp" eller "problem". Använd inte en annan färg i hopp om att matcha ditt varumärke. Att röd betyder fel är allmänt känt. Håll dig till det.
Laddnings- och bearbetningsstatus
När någon klickar på skicka skickar formuläret data till en server. Det tar tid. Under tiden väntar personen och undrar. Hände något? Blir det någonsin klart? En mikrointeraktion för laddningsstatus fyller tystnaden.
Den enklaste laddningsstatusen är att inaktivera skickaknappen och ändra texten från "Skicka" till "Skickar..." eller "Laddar...". Knappen bör också bli något blekare eller gråare för att visa att den inte längre går att klicka på. Det hindrar människor från att klicka på skicka flera gånger.
Ett steg bättre är att lägga till en snurrande animation. En liten rund ikon som roterar medan formuläret bearbetas. Det engagerar mer än statisk text och ger en känsla av rörelse och aktivitet.
Hur länge laddningsstatusen visas beror på hur lång tid inskickningen faktiskt tar. För formulär som skickas på under en sekund kan en laddningsstatus kännas onödig. Knappen kan helt enkelt bli mörk en kort stund. För formulär som tar två till fem sekunder (till exempel en komplex databehandling) visar du laddningssymbolen. Den fyller väntetiden och minskar oron.
Symbolen bör rotera ungefär ett varv per sekund. Snabbare känns jäktigt. Långsammare känns som att den har fastnat. Ett varv per sekund känns som jämn framfart.
Bekräftelse av lyckad inskickning
När ett formulär har skickats måste användaren veta att det fungerade. En bekräftelsesida eller ett meddelande är det givna sättet. Men en mikrointeraktion kan göra stunden mer tillfredsställande och minnesvärd.
En grön bock som dyker upp med en diskret tillväxtanimation (från 80 % till 100 % av storleken under 300 millisekunder) visar att det är klart. Bocken känns som en belöning. Den säger "det gick bra." Tillsammans med ett bekräftelsemeddelande i grön text bekräftar den att formuläret gick igenom.
Ett andra sätt är en förloppsindikator som fylls till 100 % när inskickningen är klar. Om formuläret har flera steg visar en förloppsindikator högst upp hur långt personen har kommit. När sista steget är klart fylls indikatorn helt och blir grön. Det känns som att passera mållinjen.
Själva bekräftelsemeddelandet ska vara kort och tydligt. Inte "Din inskickning har mottagits av vårt system." Utan "Tack. Vi har fått ditt meddelande." Tonen ska kännas personlig och varm. Personen har klarat av en uppgift. Bekräfta det direkt.
Om formuläret skickar vidare till en ny sida efter lyckad inskickning, ta inte bort formuläret direkt. Låt bekräftelseanimationen spelas i 500 till 800 millisekunder innan omdirigeringen. Ge människor en stund att se att det gick bra innan du flyttar dem till nästa sida.
Timing och hastighet i mikrointeraktioner
Hastigheten på en mikrointeraktion avgör om den känns responsiv eller seg. Idealet ligger mellan 200 och 500 millisekunder. Det är snabbt nog för att kännas omedelbart och långsamt nog för att synas och förstås.
En ändring av fokusstatus bör ligga i det snabba facket. 100 till 200 millisekunder. Det är nästan omedelbart men ger ögat precis tillräckligt med tid att registrera ändringen.
En skakning av fältet vid fel bör ta cirka 300 millisekunder. Det är märkbart men inte störande. Snabbare känns hetsigt. Långsammare känns fördröjt.
En laddningssymbol eller en bekräftelseanimation kan vara långsammare, 500 till 800 millisekunder. Det är stunder då personen räknar med att vänta. En långsammare animation känns mer påtaglig och belönande.
Använd aldrig animationer som är längre än en sekund i ett formulär. Det känns segt. Interaktioner i formulär ska kännas snabba och responsiva. Om en animation tar mer än en sekund undrar människor om något har gått sönder.
Testa dina mikrointeraktioner på riktiga enheter och nätverk. Det som känns snabbt på en stationär dator med fiber kan kännas segt på en mobil med 4G. Bygg för den långsammaste upplevelse som är sannolik.
Tillgänglighet i mikrointeraktioner
Vissa människor ser inte animationer. De använder tillgänglighetsinställningar som stänger av rörelse. En mikrointeraktion som bara bygger på animation blir osynlig för dem. Din återkoppling måste fungera utan rörelse också.
Färg är den viktigaste signalen. En röd kantlinje på ett fält med fel fungerar oavsett om kantlinjen visas med animation eller inte. En grön bock vid giltig inmatning fungerar med eller utan tillväxtanimation. Färg förmedlar budskapet direkt utan rörelse.
Text är också avgörande. Ett felmeddelande måste vara text, inte bara en röd ikon. En bekräftelse måste ha texten "Ditt formulär har skickats" och inte bara en bock. När något går fel eller rätt, säg det med ord.
Använd inställningen prefers-reduced-motion i CSS. Om någon har ställt in sin enhet på mindre rörelse, ta bort eller förenkla animationerna. Behåll färg- och textåterkopplingen. Behåll fokusstatusen. Ta bort skakningen, tillväxten och snurran. Personen får fortfarande hela återkopplingen, bara utan rörelse.
Vanliga misstag med mikrointeraktioner i formulär
Mikrointeraktioner kan slå tillbaka om de görs dåligt. Det vanligaste misstaget är att använda animationer som är för långsamma eller för långa. En animation för fokus på ett fält som tar 500 millisekunder känns trög. En övergång på skickaknappen som tar två sekunder känns som att den har hängt sig. Håll dem snabba.
Ett andra misstag är animationer utan tydligt syfte. En snurrande ikon som inte har med laddning att göra, eller ett färgskifte som inte signalerar någon ändring i status, förvirrar människor. Varje mikrointeraktion ska svara på en fråga eller visa en specifik förändring.
Ett tredje misstag är inkonsekventa mikrointeraktioner. Fokusstatusen i ett formulär använder en ändrad kantfärg. Fokusstatusen i ett annat formulär på samma webbplats använder en ändrad bakgrund. Människor märker inkonsekvensen och blir osäkra på vad som händer. Använd samma stil för mikrointeraktioner i alla formulär på din webbplats.
Ett fjärde misstag är att animera för mycket. Varje fält i fokus ger ett sken. Varje tangenttryck utlöser återkoppling. Varje hovringsläge har rörelse. Formuläret blir distraherande i stället för hjälpsamt. Använd mikrointeraktioner där de tillför värde. Hoppa över dem där de är onödiga.
Ett femte misstag är dåliga felmeddelanden. Ett rött fält utan förklarande text får människor att gissa vad som blev fel. Para alltid ihop visuell återkoppling med ett tydligt, specifikt felmeddelande.
Så hjälper WEMASY dig att lägga till mikrointeraktioner i formulär
WEMASY:s formulärbyggare har inbyggda mikrointeraktioner för de vanligaste ögonblicken i ett formulär. När någon klickar på ett fält visas fokusstatus automatiskt med dina varumärkesfärger. När någon lämnar ett obligatoriskt fält tomt visas ett felmeddelande med visuell betoning. När någon skickar ett formulär visas en laddningsstatus som visar förloppet. När inskickningen lyckas bekräftar ett meddelande att det är klart.
Du kan anpassa de här mikrointeraktionerna efter ditt varumärke utan att röra någon kod. Ändra färgen på felmeddelanden. Justera animationshastigheten för laddningsstatus. Välj mellan en snurrande symbol eller text för inskickningsstatus. De här inställningarna finns i formulärbyggarens gränssnitt.
Validering i realtid ingår för vanliga fälttyper. E-postfält kontrollerar formatet medan du skriver. Telefonfält kontrollerar formatet. Lösenordsfält visar styrka. Postnummerfält kontrollerar formatet. De här valideringarna visar bockar och felikoner med färgskiften, allt inbyggt.
För mer komplexa formulär eller avancerade animationer låter WEMASY utvecklare lägga till egen JavaScript. Men standardmikrointeraktionerna täcker 95 % av användningsfallen och kräver ingen kodning.
Se vilka formulärfunktioner som ingår i din WEMASY-plan.