V zadnjih letih so spletna mesta postala animirana in interaktivna do te mere, da lahko ustvarjajo slabo uporabniško izkušnjo. Pri Webflow napovedujejo odmik od teh divje animiranih spletnih strani in pojavljanje vedno bolj domiselnih mikrointerakcij.
Pri oblikovanju izdelka (spletne strani ali aplikacije) obstaja namreč več načinov za izboljšanje uporabniške izkušnje, vključno z definiranjem person, dobro strukturirano informacijsko arhitekturo in premišljeno napisano vsebino. Dobra uporabniška izkušnja pa nastane tudi s pomočjo dodelanih podrobnosti, kot so premišljeno zasnovane interakcije. Te podrobnosti so mikrointerakcije.
Kaj so mikrointerakcije?
Mikrointerakcije so majhni, interaktivni elementi na spletnem mestu, ki se odzivajo na dejanja uporabnikov, kot je premikanje miške nad gumbom ali klik na ikono. So pogosto subtilne, vendar dodajo občutek vključenosti in povečajo intuitivnost uporabe, s čimer pripomorejo k boljši uporabniški izkušnji.
Smiselne mikrointerakcije z vključitvijo zabavnih in za uporabnika pomembnih interakcij dopolnjujejo (namesto prevladujejo) vsebino in obliko spletnega mesta.
Včasih mikrointerakcij uporabnik niti ne opazi, vendar zaradi subtilnih podrobnosti izdelek postane prijetnejši in lažji za uporabo ter s tem izboljša uporabniško izkušnjo.
Kako delujejo mikrointerakcije
Dan Saffer – avtor knjige »Microinteractions: Designing with Details« razčleni mikrointerakcije na štiri dele: sprožilec (trigger), pravilo (rule), povratna informacija (feedback) ter zanke in načini (loops and modes).
Oglejmo si vsakega podrobneje.
TRIGGER
Sprožilec je prvi del mikrointerakcije. Lahkoga sproži uporabnik ali sistem.
Sprožilec, ki ga sproži uporabnik, lahko vključuje klikanje, vlečenje, pritisk gumba ali drsenje.
Sprožilec, ki ga sproži sistem, se lahko zgodi, ko so izpolnjene določene kvalifikacije in se sistem odloči prikazati obvestilo, pojavno okno ali animacijo.
RULE
Pravilo določa naslednje dejanje po tem, ko uporabnik ali sistem sproži mikrointerakcijo. Kaj se zgodi potem, ko uporabnik klikne ikono? Bo to odprlo animacijo? Ali bo to uporabnika odjavilo iz njegovega računa?
Pravila morajo biti uporabniku logična. Ko uporabnik klikne ikono aplikacije svetilke, pričakuje, da se bo svetilka prižgala. To pravilo velja tudi za mikrointerakcije, ki jih sproži sistem.
FEEDBACK
Povratne informacije uporabnike obveščajo o tem, kaj se dogaja med mikrointerakcijami. Eden najboljših primerov povratnih informacij uporabnikov je postopek plačila z inline validacijo.
Uporaba vgrajenega preverjanja pomaga uporabnikom takoj vedeti, kdaj so storili kaj narobe. Na primer, ko so izpolnili napačno številko kartice.
To je prikazano kot rdeča barva obrobe za označevanje napak in zelena barva obrobe za obveščanje uporabnika o uspehu.
LOOPS AND MODES
Zanke in načini določajo metapravila mikrointerakcij in kako se spreminjajo po večkratni uporabi. Na primer, v e-trgovini se lahko gumb »Kupite zdaj« spremeni v »Nadaljujte z nakupovanjem«, ko je uporabnik izdelek že kupil.
Primeri
1. Gumbi
2. Povleci za osvežitev strani (pull to refresh)
3. Podrsaj (swipe)
4. Delitev na družbenih omrežjih (Social share)
Primeri v praksi
1. Dinamično nalaganje strani aplikacije Figma
2. Igrificirane animacije v Asani
3. Gifi zmagoslavja – Mailchimp
Zaključek
Mikrointerakcije so lahko zelo kratke, skoraj neopazne, pa vendar imajo učinek na uporabniško izkušnjo. Že ena dobra animacija ali zvočni učinek lahko pritegne uporabnika in ga pridobi na svojo stran. Take ”malenkosti” in podrobnosti štejejo in me vedno znova navdušujejo.
