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

Na prihajajočem tekmovanju DIGGIT, ki velja za prestižno priznanje na področju digitalnih komunikacij, bo kot član žirije sodeloval Denis Jakin, direktor poslovnega razvoja v digitalni agenciji W3B. Njegova vloga bo ključna pri iskanju in nagrajevanju projektov, ki ne le...
Orodje je človekov podaljšek roke, s katerim lažje opravlja svoje delo. Kako uporabno je orodje, se kaže predvsem v načinu upravljanja in izkoriščanja le-tega pri uspešnosti izvajanja svojega dela. Ena od osrednjih nalog vodje projektov je (kot je že iz...
V svetu grafičnega oblikovanja, kjer kreativnost in tehnološki napredek tvorita neprestano dinamično tkivo, se pričakuje, da bo leto 2024 prineslo ključne spremembe in navdihujoče inovacije. Grafično oblikovanje ni več zgolj estetski element, temveč postaja trend in prepoznavnost blagovnih znamk....