Lomakkeesi voi toimia täydellisesti. Tiedot käsitellään, lähetykset menevät läpi ja kaikki toimii suunnitellusti. Mutta jos lomake ei reagoi näkyvästi siihen, mitä ihmiset tekevät, he luulevat sen olevan rikki joka tapauksessa. He napsauttavat samaa kenttää kahdesti, koska eivät ole varmoja, rekisteröityikö ensimmäinen napsautus. He ihmettelevät, ilmestyikö virheilmoitus vai menikö lähetys oikeasti läpi. Hämmennys tappaa lomakkeen täyttöasteen nopeammin kuin mikään suunnitteluongelma. Ratkaisu on mikrointeraktiot, pienet animaatiot ja visuaaliset vastaukset, jotka kertovat ihmisille, että heidän toimintonsa onnistui.
Mikrointeraktio on välitön palaute, joka ilmestyy, kun joku käyttää lomakettasi. Reunus syttyy, kun hän napsauttaa kenttää. Virheilmoitus tärähtää hieman herättääkseen huomion. Latauskuvake pyörii, kun lähetystä käsitellään. Valintamerkki ilmestyy, kun syöte on oikein. Nämä animaatiot kestävät vain millisekunteja, mutta ne tekevät tärkeää työtä. Ne vastaavat äänettömään kysymykseen, jonka jokainen lomakkeen käyttäjä esittää jokaisella toiminnolla: tapahtuiko tuosta mitään? Tässä artikkelissa kerrotaan, mitä mikrointeraktiot tekevät, miten ne ajoitetaan hyvin ja miksi ne vaikuttavat suoraan siihen, täyttävätkö ihmiset lomakkeesi vai jättävätkö he sen kesken.
Mitä mikrointeraktiot tekevät lomakkeissa
Mikrointeraktiolla on yksi tehtävä: antaa välitön palaute tietystä toiminnosta. Joku kirjoittaa salasanaa ja vahvuusmittari täyttyy. Joku jättää pakollisen kentän tyhjäksi ja virhe ilmestyy punaisena taustan muutoksena. Joku napsauttaa lähetyspainiketta ja painike muuttuu näyttämään käsittelyn. Mikään näistä ei ole yllätys. Ne ovat odotettuja. Ja ne tapahtuvat alle puolessa sekunnissa.
Mikrointeraktioilla on lomakkeissa neljä tarkoitusta. Ensinnäkin ne vahvistavat, että järjestelmä rekisteröi toiminnon. Lomake tuntuu rikkinäiseltä, jos napsautat eikä mikään muutu. Hienovarainen animaatio kertoo, että toiminto onnistui. Toiseksi ne ohjaavat ihmisiä seuraavaan vaiheeseen. Hehkuva lähetyspainike kertoo, mitä napsauttaa. Virheilmoitus, joka korostaa ongelmakentän, kertoo, mihin keskittyä. Kolmanneksi ne vähentävät epävarmuutta hetkinä, jolloin ei tiedä mitä tapahtuu. Pyörivä kuvake lähetyksen aikana sanoo "jotain tapahtuu, odota". Ilman sitä ihmiset ihmettelevät, jäikö lomake jumiin. Neljänneksi ne vahvistavat syötteen reaaliajassa. Kun valintamerkki näkyy oikean sähköpostiosoitteen kohdalla, ihmiset tietävät onnistuneensa odottamatta lähetystä.
Tärkein asia, jonka mikrointeraktiot tekevät, on vastata yhteen kysymykseen heti. Toimiko se? Kun ihmiset näkevät vastauksen, he jatkavat varmoina. Kun he eivät näe sitä, he epäilevät itseään tai toistavat toimintojaan turhaan.
Kohdistustilat ja aktiivisen kentän näyttäminen
Kohdistustila on mikrointeraktio, joka tapahtuu, kun joku napsauttaa lomakekenttään. Kenttä muuttuu näyttämään, että se on nyt aktiivinen ja valmis syötteelle. Ilman kohdistustilaa ihminen ei välttämättä tiedä, mihin kenttään hän juuri napsautti, varsinkaan mobiilissa tai jos lomakkeessa on paljon kenttiä.
Yksinkertainen kohdistustila on reunuksen värin muutos. Kentän reunus on vaaleanharmaa. Kun kenttä on kohdistettu, siitä tulee brändivärisi tai pehmeä sininen. Tähän menee 100-150 millisekuntia. Tuo nopeus ratkaisee, huomaako muutoksen vai ei. Liian nopea jää huomaamatta. Liian hidas tuntuu tahmealta.
Toinen vaihtoehto on taustavärin muutos. Kentän tausta pysyy valkoisena, kun kenttä on epäaktiivinen. Napsautettaessa se muuttuu hyvin vaaleaksi brändivärisi sävyksi. Vaaleanharmaasta hieman vaaleampaan siniseen. Ei dramaattinen muutos. Juuri sen verran, että erottuu.
Vältä molempia samaan aikaan. Reunuksen väri, taustan muutos, varjo ja hehku yhdessä on liikaa. Valitse yksi ja tee siitä selvä. Kohdistetun kentän pitäisi olla lomakkeen kirkkain asia sillä hetkellä.
Apua voi olla myös paikkamerkkitekstistä, joka katoaa, kun kenttä kohdistetaan. Paikkamerkkiteksti näyttää esimerkin siitä, mitä kirjoittaa. Sähköpostikentässä "example@email.com". Kun joku napsauttaa kirjoittaakseen, paikkamerkki häipyy tehdäkseen tilaa hänen syötteelleen. Tämäkin on mikrointeraktio, vaikka se usein jää huomaamatta.
Reaaliaikainen validointipalaute
Reaaliaikaisessa validoinnissa lomake tarkistaa syötteen kirjoittaessasi ja kertoo, onko se oikein. Sähköpostikenttä tarkistaa jokaisen merkin ja näyttää valintamerkin tai rastin jo ennen kuin olet kirjoittanut loppuun. Salasanakenttä näyttää vahvuuden, kun lisäät merkkejä. Postinumerokenttä vahvistaa, että muoto on oikea.
Mikrointeraktio on tässä valintamerkin tai rastin ilmestyminen ja värin vaihtuminen neutraalista vihreäksi (oikein) tai punaiseksi (väärin). Nämä tapahtuvat heti, kun ihminen kirjoittaa. Ei odotusta. Lähetystä ei tarvita.
Reaaliaikainen validointi vähentää lähetysvirheitä. Jos joku näkee rastin syötteensä vieressä, hän korjaa sen ennen lähetystä. Hän ei täytä koko lomaketta vain kuullakseen lopuksi, että yksi kenttä oli väärin. Tämä vähentää turhautumista ja nostaa lomakkeen täyttöastetta.
Ajoituksella on väliä. Validoinnin pitäisi laueta, kun ihminen on lopettanut kirjoittamisen noin 500 millisekunniksi. Tarkistus jokaisen näppäinpainalluksen jälkeen voi tuntua aggressiiviselta. Lyhyt tauko antaa ihmisen viimeistellä ajatuksensa ennen palautteen ilmestymistä.
Visuaalisen palautteen pitäisi olla välitön. Ei pyörivää latauskuvaketta validoinnin aikana. Näytä valintamerkki tai virhe heti. Useimmat validoinnit (sähköpostin muoto, salasanan pituus, postinumeron muoto) tarkistetaan heti laitteella. Palvelinkutsua ei tarvita. Näytä tämä nopeus.
Virheilmoitukset visuaalisella korostuksella
Kun joku lähettää lomakkeen virheellisenä, virheilmoituksen pitää näkyä tavalla, jota ei voi ohittaa. Lomakkeen alareunassa oleva pelkkä tekstiviesti jää helposti huomaamatta. Mikrointeraktio tekee virheestä mahdottoman ohittaa.
Paras virhemikrointeraktio on yhdistelmä. Virheellisen kentän reunus muuttuu punaiseksi. Kentän otsikkoteksti muuttuu punaiseksi tai lihavoiduksi. Virheilmoitus ilmestyy kentän alle punaisen kuvakkeen kanssa. Hienovarainen tärähdysanimaatio (10-20 pikseliä vasemmalle ja oikealle, kesto 300 millisekuntia) herättää huomion olematta häiritsevä. Tärähdys sanoo "hei, tämä on tärkeää".
Virheilmoituksen itsensä pitää olla selkeä ja täsmällinen. Ei "Virheellinen syöte." Vaan "Sähköpostiosoitteessa pitää olla @-merkki." Tai "Salasanan pitää olla vähintään 8 merkkiä." Kun ihmiset näkevät virheen, heidän pitää tietää tarkasti, mikä meni pieleen ja miten sen korjaa.
Punainen on virheiden vakiovärinä, koska ihmiset ymmärtävät punaisen merkitsevän "seis" tai "ongelma". Älä käytä toista väriä brändiin sopiakseen. Punaisen tunnistaminen virheeksi on yleismaailmallista. Pysy siinä.
Lataus- ja käsittelytilat
Kun joku napsauttaa lähetyspainiketta, lomake lähettää tiedot palvelimelle. Siihen menee aikaa. Sinä aikana ihminen odottaa ja ihmettelee. Tapahtuiko jotain? Valmistuuko se koskaan? Latausmikrointeraktio täyttää tämän hiljaisuuden.
Yksinkertaisin lataustila on poistaa lähetyspainike käytöstä ja vaihtaa sen teksti "Lähetä" muotoon "Lähetetään..." tai "Ladataan...". Painikkeen pitäisi myös himmentyä tai harmaantua osoittaakseen, ettei sitä voi enää napsauttaa. Tämä estää ihmisiä napsauttamasta lähetystä monta kertaa.
Askelta parempi on lisätä pyörivä kuvake. Pieni pyöreä kuvake, joka pyörii lomakkeen käsittelyn ajan. Se on kiinnostavampi kuin staattinen teksti ja luo liikkeen ja toiminnan tunnun.
Lataustilan ajoitus riippuu siitä, kuinka kauan lähetys oikeasti kestää. Lomakkeissa, jotka lähettävät alle sekunnissa, lataustila voi tuntua tarpeettomalta. Painike voi vain tummua hetkeksi. Lomakkeissa, joiden lähetys kestää kahdesta viiteen sekuntia (kuten monimutkainen tietojen käsittely), näytä latauskuvake. Se täyttää odotusajan ja vähentää epävarmuutta.
Kuvakkeen pitäisi pyöriä noin yhden täyden kierroksen sekunnissa. Nopeampi tuntuu hätäiseltä. Hitaampi tuntuu jumiutuneelta. Yksi kierros sekunnissa tuntuu tasaiselta etenemiseltä.
Onnistumisen vahvistus ja valmistumispalaute
Kun lomake on lähetetty onnistuneesti, käyttäjän pitää tietää, että se toimi. Onnistumissivu tai -viesti on ilmeinen tapa. Mikrointeraktio voi kuitenkin tehdä hetkestä tyydyttävämmän ja mieleenpainuvamman.
Vihreä valintamerkki, joka ilmestyy hienovaraisella kasvuanimaatiolla (koko kasvaa 80 prosentista 100 prosenttiin 300 millisekunnissa), viestii valmistumisesta. Valintamerkki tuntuu palkinnolta. Se sanoo "onnistuit". Yhdessä vihreällä tekstillä kirjoitetun onnistumisviestin kanssa se vahvistaa, että lomake meni läpi.
Toinen tapa on edistymispalkki, joka täyttyy 100 prosenttiin, kun lähetys valmistuu. Jos lomakkeessa on useita vaiheita, yläreunan edistymispalkki näyttää, kuinka pitkälle ihminen on edennyt. Kun viimeinen vaihe valmistuu, palkki täyttyy kokonaan ja muuttuu vihreäksi. Se tuntuu maaliviivan ylittämiseltä.
Onnistumisviestin pitäisi olla lyhyt ja selkeä. Ei "Lähetyksesi vastaanotettiin järjestelmässämme onnistuneesti." Vaan "Kiitos. Saimme viestisi." Äänen pitäisi tuntua henkilökohtaiselta ja lämpimältä. Ihminen suoritti tehtävän. Kuittaa se suoraan.
Jos lomake ohjaa onnistumisen jälkeen uudelle sivulle, älä poista lomaketta heti. Anna onnistumisanimaation soida 500-800 millisekuntia ennen ohjausta. Anna ihmisten hetki nähdä onnistuneensa, ennen kuin siirrät heidät seuraavalle sivulle.
Ajoitus ja nopeus mikrointeraktioissa
Mikrointeraktion nopeus ratkaisee, tuntuuko se reagoivalta vai tahmealta. Ihanteellinen alue on 200-500 millisekuntia. Se on tarpeeksi nopea tuntuakseen välittömältä ja tarpeeksi hidas, jotta sen näkee ja ymmärtää.
Kohdistustilan muutoksen pitäisi olla nopeassa päässä. 100-200 millisekuntia. Se on lähes välitön, mutta antaa silmälle juuri tarpeeksi aikaa rekisteröidä muutos.
Kentän tärähdyksen virheessä pitäisi kestää noin 300 millisekuntia. Se on huomattava mutta ei häiritsevä. Nopeampi tuntuu hysteeriseltä. Hitaampi tuntuu viivästyneeltä.
Latauskuvake tai onnistumisanimaatio voi olla hitaampi, 500-800 millisekuntia. Nämä ovat hetkiä, jolloin ihminen odottaa joutuvansa odottamaan. Hitaampi animaatio tuntuu painavammalta ja palkitsevammalta.
Älä koskaan käytä lomakkeessa yli sekunnin kestäviä animaatioita. Se tuntuu hitaalta. Lomakkeen vuorovaikutusten pitäisi tuntua napakoilta ja reagoivilta. Jos animaatio kestää yli sekunnin, ihmiset ihmettelevät, hajosiko jokin.
Testaa mikrointeraktiosi oikeilla laitteilla ja verkoilla. Se, mikä tuntuu nopealta tietokoneella kuituyhteydellä, voi tuntua viiveiseltä puhelimella 4G-yhteydellä. Rakenna hitaimman todennäköisen kokemuksen mukaan.
Saavutettavuus mikrointeraktioissa
Jotkut ihmiset eivät näe animaatioita. He käyttävät saavutettavuusasetuksia, jotka poistavat liikkeen käytöstä. Pelkkään animaatioon nojaava mikrointeraktio on heille näkymätön. Palautteesi täytyy toimia myös ilman liikettä.
Väri on tärkein palautesignaali. Punainen reunus virhekentässä toimii riippumatta siitä, ilmestyykö reunus animaatiolla vai ei. Vihreä valintamerkki oikean syötteen kohdalla toimii kasvuanimaatiolla tai ilman. Väri viestii heti ilman liikettä.
Myös teksti on ratkaisevaa. Virheilmoituksen pitää olla tekstiä, ei pelkkä punainen kuvake. Onnistumistilassa pitää olla tekstinä "Lomakkeesi lähetettiin onnistuneesti", ei pelkkä valintamerkki. Kun jokin menee pieleen tai oikein, sano se sanoilla.
Käytä CSS:n prefers-reduced-motion-asetusta. Jos joku on asettanut laitteensa vähentämään liikettä, poista tai yksinkertaista animaatiot hänen kohdallaan. Säilytä väri- ja tekstipalaute. Säilytä kohdistustila. Poista tärähdys, kasvu ja pyöriminen. He saavat edelleen täyden palautekokemuksen, vain ilman liikettä.
Yleisiä virheitä lomakkeiden mikrointeraktioissa
Mikrointeraktiot voivat kostautua, jos ne tehdään huonosti. Yleisin virhe on liian hitaat tai pitkät animaatiot. Kentän kohdistusanimaatio, joka kestää 500 millisekuntia, tuntuu tahmealta. Lähetyspainikkeen siirtymä, joka kestää kaksi sekuntia, tuntuu jumiutuneelta. Pidä ne napakoina.
Toinen virhe on animaatioiden käyttö ilman selkeää tarkoitusta. Pyörivä kuvake, jolla ei ole mitään tekemistä latauksen kanssa, tai värin muutos, joka ei kerro tilan muutoksesta, hämmentää ihmisiä. Jokaisen mikrointeraktion pitäisi vastata johonkin kysymykseen tai osoittaa tietty muutos.
Kolmas virhe on epäjohdonmukaiset mikrointeraktiot. Yhden lomakkeen kohdistustila käyttää reunuksen värin muutosta. Saman verkkosivuston toisen lomakkeen kohdistustila käyttää taustan muutosta. Ihmiset huomaavat epäjohdonmukaisuuden, ja se tekee heistä epävarmoja siitä, mitä tapahtuu. Käytä samaa mikrointeraktiotyyliä kaikissa verkkosivustosi lomakkeissa.
Neljäs virhe on liiallinen animointi. Jokainen kohdistettu kenttä saa hehkun. Jokainen näppäinpainallus laukaisee palautteen. Jokaisessa hover-tilassa on liikettä. Lomakkeesta tulee häiritsevä avun sijaan. Käytä mikrointeraktioita siellä, missä ne tuovat arvoa. Jätä ne pois, missä ne ovat tarpeettomia.
Viides virhe on huonot virheilmoitukset. Punainen kenttä ilman selittävää tekstiä jättää ihmiset arvailemaan, mikä meni pieleen. Yhdistä visuaalinen palaute aina selkeään ja täsmälliseen virheilmoitukseen.
Miten WEMASY auttaa lisäämään mikrointeraktioita lomakkeisiin
WEMASYn lomakerakentajassa on valmiit mikrointeraktiot yleisimpiin lomakkeen hetkiin. Kun joku napsauttaa kenttää, kohdistustilat ilmestyvät automaattisesti brändiväreilläsi. Kun joku jättää pakollisen kentän tyhjäksi, virheilmoitus näkyy visuaalisella korostuksella. Kun joku lähettää lomakkeen, lataustila näyttää etenemisen. Kun lähetys onnistuu, onnistumisviesti vahvistaa valmistumisen.
Voit muokata näitä mikrointeraktioita brändiisi sopiviksi koskematta koodiin. Vaihda virheilmoitusten väriä. Säädä lataustilojen animaation nopeutta. Valitse lähetystilassa kuvakkeen tai tekstin välillä. Nämä asetukset ovat lomakerakentajan käyttöliittymässä.
Reaaliaikainen validointi on mukana yleisissä kenttätyypeissä. Sähköpostikentät validoivat muodon kirjoittaessa. Puhelinkentät validoivat muodon. Salasanakentät näyttävät vahvuuden. Postinumerokentät tarkistavat muodon. Nämä validoinnit näyttävät valintamerkit ja virhekuvakkeet värinmuutoksineen, kaikki sisäänrakennettuina.
Monimutkaisempia lomakkeita tai edistyneitä animaatioita varten WEMASY sallii kehittäjien lisätä omaa JavaScriptiä. Oletusmikrointeraktiot kattavat kuitenkin 95 % käyttötapauksista, eivätkä ne vaadi koodausta.
Katso, mitkä lomakeominaisuudet kuuluvat WEMASY-tilaukseesi.