Razumevanje mikrointerakcij v oblikovanju mobilnih aplikacij

Uporabnost je ena ključnih sestavin oblikovanje mobilnega uporabniškega vmesnika. Velika uporabnost pogosto vključuje mikrointerakcije ki so majhni odzivi in ​​vedenja iz vmesnika narekuje, kako je treba uporabiti uporabniški vmesnik. Te mikrointerakcije definirajo vedenje, spodbujajo sodelovanje in pomagajo uporabnikom vizualizirati, kako naj vmesnik deluje.

Digitalni vmesniki so posredniki med uporabniki in njihovimi želenimi cilji. Oblikovalci vmesnikov ustvarjajo izkušnje, ki pomagajo uporabnikom opravlja določene naloge. Na primer, aplikacija za seznam opravil ima vmesnik, ki uporabnikom omogoča organiziranje njihovih nalog. Tako kot Facebook aplikacija daje uporabnikom vmesnik za interakcijo s svojim Facebook računom.

V tem priročniku se bom poglobil naprej mikrointerakcije za mobilne aplikacije. Majhne interakcije se lahko zdijo trivialne, lahko pa imajo velik vpliv o kakovosti uporabnikove izkušnje. Ko se pravilno izvedejo, se mikrointerakcije počutijo kot pravi del izkušnje mobilnih uporabnikov.

Moč mikrointerakcij

V večini primerov je cilj mikrointerakcije, da zagotovite povratne informacije na podlagi dejanja uporabnika. To lahko pomaga uporabnikom vizualizirajte, kako se vmesnik premika ali obnaša, čeprav je popolnoma digitalno na ravnem zaslonu.

Mikrointerakcije imajo moč, ker ustvariti iluzorno izkušnjo. Drsniki za vklop / izklop se ne premikajo kot fizična stikala, vendar se zdi, da se premikajo skozi animacije.

V tem postu sem našel neverjetno citat, ki obravnava izjemno vrednost mikrointerakcij za mobilne aplikacije:

“Najboljši izdelki dobro delajo dve stvari: značilnosti in podrobnosti. Značilnosti so tisto, kar privablja ljudi na vaš izdelek. Podrobnosti so tisto, kar jih zadržuje. In podrobnosti so, kaj pravzaprav naša aplikacija izstopa iz naše konkurence.”

The majhne podrobnosti z razvojnega vidika se zdi nepomembno, vendar z vidika uporabniške izkušnje resnično naredite razliko med uporabniškim vmesnikom aplikacije OK in izjemnim uporabniškim vmesnikom aplikacije.

Velika mikrointerakcija naredi uporabnika se počutite nagrajene za ukrepanje. Ti ukrepi so lahko ponovi in uporabnikovo vedenje. Naučijo se, kako uporabiti aplikacijo, ki temelji na teh manjših mikrointerakcijah. Ko uporabnik izvede obnašanje, ti majhni interakcijski signali "da, lahko interakcijo z mano!"

Oglejte si primere, ki jih najdete v Googlovih specifikacijah za zasnovo materialov. Dokumentacija dejansko vsebuje celoten oddelek, namenjen premikanju materiala. Prostorski odnosi so velik del te enačbe, vendar gibanje lahko narekuje več kot le prostorske odnose.

Tukaj so najpogostejše uporabe animacije in gibanja v oblikovanju mobilnega uporabniškega vmesnika / UX:

• Vodenje uporabnikov med različnimi stranmi
• Vodenje uporabnikov prek vmesnika za poučevanje določenih vedenja
• Predlaganje dejanj / vedenja, ki jih lahko uporabite na kateri koli strani

Mobilne aplikacije imajo veliko manj prostora na zaslonu kot spletne strani. To lahko privede do težav pri poučevanju uporabnikov o uporabi aplikacije. Ampak to je lahko presenetljivo preprosto, če veste, kako pravilno izvajati mikrointerakcije.

Kako delujejo mikrointerakcije

Posamezna mikrointerakcija se sproži, kadar uporabnik sodeluje z enim delom vmesnika. Večina mikrointerakcij je animirani odgovori na gesto uporabnika. Tako se bo gibanje gibanja odzvalo drugače kot na pipo ali na film.

Blink UX je naredil odličen post o manjših podrobnostih mikrointerakcij. Te majhne animacije morajo slediti a predvidljiv proces ki jih uporabnik lahko nauči za vsako interakcijo v aplikaciji.

Mikrointerakcije vodijo uporabnike preko vmesnika ponujanje odgovorov na vedenje. Ko uporabnik ve, da se drsnik za vklop / izklop lahko premakne, vedo, da je to interaktivno. Na podlagi odgovora bodo vedeli tudi, ali je nastavitev vklopljena ali izklopljena. Ko je gumb videti, lahko kliknete uporabnika instinktivno ve z njim lahko sodelujejo.

Glede na UXPin se lahko vsaka osnovna mikrointerakcija razgradi v štiri korake, vendar sem postopek povzel v tri korake.

1. Ukrep - uporabnik nekaj počne kot flick, swipe, tapnite in zadržite ali kakšno drugo interakcijo.
2. Reakcija - vmesnik se odzove na podlagi tega, kar se mora zgoditi. Previjanje zaslona se lahko premakne nazaj v zgodovino brskalnika ali pa se drsnik ON / OFF izklopi.
3. Povratne informacije - to je tisto uporabnik dejansko vidi kot rezultat interakcije. Ko se uporabnik pomakne nazaj v mobilni brskalnik, se lahko zgodi, da se prejšnja stran prikaže "na vrhu" zaslona. Drsnik za vklop / izklop lahko gladko drsi ali se poveča, ko pritisnete na zaslon.

Ti zelo majhni ukrepi se lahko izvedejo brez animacije, a velike mikrointerakcije ponujajo a realističen občutek na ravni digitalni vmesnik, ki večinoma prihaja v obliki realistične animacijske učinke. Ti vdihujejo življenje v vmesnik in spodbujajo večjo interakcijo med uporabniki.

Poiščite podrobnosti

Če pogledate manjše dele modela, boste razumeli, kako naj se aplikacija odzove na določeno vedenje.

Povlecite za osvežitev je dober primer zdaj priljubljene mikrointerakcije. Ko je bil prvič predstavljen, ni bil sestavni del sistema iOS, vendar je veliko aplikacij vzelo to idejo in se začelo z njo. Zdaj je za osvežitev dobro znano vedenje, ki ga večina uporabnikov ve, da ga lahko uporabijo pri brskanju po uporabniškem vmesniku vira. Enako lahko rečemo o mobilnih menijih hamburgerjev, ki so divje rasli v priljubljenosti.

Naredite vsako mikrointerakcijo realistična in preprosta. Ne pretiravajte z animacijami, ker lahko postane dolgočasno če so preveč podrobni in se pogosto uporabljajo. Uporabnik ne želi, da se pojavijo iskrice vsakič, ko se dotakne ikone menija. Izenačite z resnično vrednostjo, ki komunicira kako naj vmesnik deluje brez pretiravanja.

Pogled na nekatere primere

Mislim, da je najboljši način, da se nekaj naučimo, to početi, drugi najboljši način pa je študij dela drugih. Zbral sem majhno peščico Animacije za mikrointerakcijo UI / UX od nadarjenih Dribbble uporabnikov, da vam pokaže, kako ti izgledajo v resničnem modelu.

Vsaka aplikacija bo drugačna in ima različne potrebe glede na to, kaj aplikacija počne. Na koncu večina uporabnikov želi isto stvar: app, ki je intuitivno in zagotavlja kakovostno uporabniško izkušnjo z mikrointerakcijami glede na vedenje uporabnikov.

1. Uporabniški vmesnik aplikacije Animirani dogodek

Prvi primer je čudovita animacijska funkcija kartice, ki jo je ustvaril Ivan Martynenko. Opazil boš peščica mikrointerakcij v tej zasnovi, predvsem karticam, ki se premikajo in premikajo skozi podrobnosti.

Ko tapnete kartico, se ta poveča. In ko se dotaknete gumba Naroči, se fotografija uporabnikovega profila uvrsti na seznam naročnikov. Vse se počuti zelo intuitivno in povsem naravno za vmesnik.

2. Interaktivni zaslon vadbe

Ta kreativna mobilna animacija za vadbo prihaja iz oblikovalca Vitalija Rubcova. Demotira uporabnika, ki shrani svojo vadbo za en niz čepov.

Obvestilo o vsaki animaciji je enako elastični učinek odboja ko se meniji odprejo in zaskočijo. To velja tudi, če je dejavnost označena kot "Končano".. Doslednost je ključnega pomena za mikrointerakcije, ker se morajo vsi počutiti povezan z istim vmesnikom.

3. Iskanje mikro aplikacij

Kratka, sladka in do točke. Mislim, da to najbolje opisuje mikrointerakcije teh iskalnih aplikacij, ki jih je oblikoval Lukas Horak. Vsaka animacija je hitro, vendar še vedno opazno.

Tako bi morali oblikovati mikrointerakcije da bi se izognili preveliki kompleksnosti. Če bi se vmesnik brez animacije hitreje nalagal, zakaj bi se ga trudil dodati? Hitre animacije uporabniku omogočite, da se premika, ne da bi obogatil izkušnjo.

4. Mikrofinanciranje kondicije

Mislim, da je Jakub Antalà   ¬ a-k resnično zadel to iz parka s svojo mikrointerakcijo v fitnes cilju. Zasloni imajo vse to občutek jiggly jell-o, ker oblike se gibljejo tako tekoče.

Vendar je vmesnik tudi občutek trdna in uporabna. Pokazalo se je, da so mikrointerakcije, ustvarjene z namenom, še vedno zabavne in zabavne, pa tudi funkcionalne in pragmatične.

5. Povlecite, da osvežite animacijo

Tukaj je ena od mojih najljubših animacij, ki jih je ekipa na Ramotion ustvarila za osvežitev. To ne samo posnema tekočino s potegom, vendar z animacijo odziva gladko povezuje od brizganja tekočine v nakladalni krog.

To veliko pozornosti do podrobnosti je tisto, kar prinaša pravo lepoto v mikrointerakcijah mobilnih aplikacij.

6. Zavihek Microinteraction

Pripomočki z zavihki precej pogosti za mobilne aplikacije zaradi manjših zaslonov. Zelo mi je všeč ta mikrointerakcija, ki jo je ustvaril John Noussis, čeprav mislim, da bi bila bolj učinkovita pri hitrejši hitrosti, vendar je sama animacija veličastna in premišljena.

Puščica za sidro zavihti desno, prav tako kot nova vsebina, ki se odbija od desne strani. Daje iluzijo celoten zaslon fizično premika na desno. Animacija je odlična, a ker je tako počasna, mislim, da se bo večina uporabnikov po nekaj dneh razjezila.

7. Prednapetostna animacija

Nisem veliko povedal polnilne palice v tej objavi, vendar so prav tako dragocene za celotno izkušnjo. Večina uporabnikov ne želi čakati na nalaganje podatkov, vendar zagotovo ne želijo gledati na prazen zaslon, medtem ko se nalaga.

Bret Kurtz je naredil to osupljivo prednapenjanje, ki je zabavno in informativno. Uporabnik je dejansko lahko zabavali gledal to malo animacijo ponovite. Lahko so tudi pomirjen da je vloga še vedno nalagajo njihove podatke in se ni zrušil.

Zavijanje

Vsi ti primeri odlično prikazujejo vrednost mikrointerakcij. Mobilne aplikacije dobijo veliko večjo vrednost od mikrointerakcij, ker uporabniki fizično dotikanje zaslonov s prsti. Uporabniki se ne dotaknejo svojih monitorjev na namizju ali zaslonov prenosnih računalnikov, toda vsi se dotaknejo svojih pametnih telefonov, ker je privzeto stanje interaktivnosti.

Je veliko več osebnih izkušenj, zato je lahko oblikovanje mobilnih aplikacij takšno proces. Ko je pravilno opravljeno, lahko dodamo veliko mobilnih mikrointerakcij zmogljiva iluzorna uporabniška izkušnja iz pik in gibanja.