Mikrointerakcije

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.

Vir: https://userpilot.com/blog/micro-interaction-examples/

Eva Šarec
Eva Šarec
Grafična oblikovalka, ki jo najbolj zanima motion design oziroma 2D animacija. Verjame, da oblikovanje ni samo v podrobnostih in natančno postavljenih pikslih (seveda je to glavna sestavina), ampak tudi v seznamih in kljukicah na njih. Ustvarjalost je njen način življenja, ki se kaže v vsakodnevnih malenkostih. Najbolj navdušena je, ko se prebija skozi nove izzive in tekom tega nabira novo znanje.

Naročite se na #hashtag e-novice!

* obvezno polje

Privolim, da lahko W3B, d.o.o. moje osebne podatke obdeluje za naslednje namene:

Enkrat mesečno prejmete e-novice. Dovolite, da vaš e-naslov uporabimo za pošiljanje e-novic skladno s pogoji varstva osebnih podatkov. Odjavite se lahko kadarkoli.

Novo na #hashtag.si

Z več kot pol milijarde uporabnikov, ki vsak mesec obiščejo Pinterest, in osupljivimi 10 milijardami ustvarjenih boardov po vsem svetu, se lahko strinjamo, da je Pinterest postal glavno središče za iskanje navdiha. Sedaj pa je Pinterest svojim uporabnikom še...
Figma UI  Ena najbolj izpostavljenih tem letošnje konference je bila vpeljava umetne inteligence (v nadaljevanju UI) v orodje.  Samodejno ustvarjanje dizajna: z enostavnim vnosom besedila je mogoče ustvariti oz. generirati mockup uporabniškega vmesnika za spletno stran ali aplikacijo. Ta funkcija naj...
Razumeti moramo jezik UI (umetne inteligence) ...  Kako sploh UI deluje pri generiranju vsebin? V enostavnih besedah, umetna inteligenca deluje na osnovi obsežnih jezikovnih modelov, ki se učijo iz ogromnih količin podatkov. Ti modeli uporabljajo algoritme za analizo besedil in...