Razumijevanje mikrointerakcija u dizajnu mobilnih aplikacija

Upotrebljivost je jedna od ključnih komponenti dizajn mobilnog korisničkog sučelja. Velika upotrebljivost često uključuje microinteractions koji su mali odgovori i ponašanja iz sučelja diktirati kako treba koristiti korisničko sučelje. Te mikrointerakcije definiraju ponašanje, potiču angažman i pomažu korisnicima da vizualiziraju kako bi sučelje trebalo funkcionirati.

Digitalna sučelja su posrednici među korisnicima i njihovi željeni ciljevi. Dizajneri sučelja stvaraju iskustva koja pomažu korisnicima obavljati određene zadatke. Primjerice, aplikacija popisa zadataka ima sučelje koje pomaže korisnicima da organiziraju svoje zadatke. Baš kao i Facebook aplikacija daje korisnicima sučelje za interakciju sa svojim Facebook računom.

U ovom ću vodiču dalje istraživati mikrointerakcije za mobilne aplikacije. Male interakcije mogu izgledati trivijalne, ali mogu imati ogroman utjecaj o kvaliteti korisničkog iskustva. Kada se radi pravilno, mikrointerakcije se osjećaju kao pravi dio sveobuhvatnog mobilnog korisničkog iskustva.

Moć mikrointerakcija

U većini slučajeva cilj je mikrointerakcije pružiti povratnu informaciju na temelju radnje korisnika. To može pomoći korisnicima vizualizirajte kako se sučelje pomiče ili ponaša, iako je čisto digitalni na ravnom zaslonu.

Mikrointerakcije imaju moć jer one stvoriti iluzorno iskustvo. Klizači za uključivanje / isključivanje se zapravo ne kreću kao fizički prekidači, ali se mogu pojaviti da se kreću ovako kroz animacije.

U ovom postu pronašao sam nevjerojatan citat o velikoj vrijednosti mikrointerakcija za mobilne aplikacije:

“Najbolji proizvodi rade dvije stvari: značajke i detalje. Značajke su ono što privlači ljude na vaš proizvod. Detalji su ono što ih zadržava tamo. I detalji su ono što zapravo čini našu aplikaciju istaknutom od konkurencije.”

sitni detalji može izgledati beznačajno sa stajališta razvoja, ali s gledišta korisničkog iskustva oni su istinski napravi razliku između korisničkog sučelja aplikacije OK i izvanrednog korisničkog sučelja aplikacije.

Velika mikrointerakcija čini korisnika osjećati se nagrađeno za poduzimanje akcije. Te akcije mogu biti ponovljen i ukorijenjena u ponašanje korisnika. Oni mogu naučiti kako koristiti aplikaciju temeljenu na tim manjim mikrointerakcijama. Kada korisnik izvrši ponašanje, ovi mali interakcije signaliziraju "da, možete stupiti u interakciju sa mnom!"

Pogledajte primjere pronađene u Googleovim specifikacijama dizajna materijala. Dokumentacija zapravo ima cijeli odjeljak posvećen kretanju materijala. Prostorni odnosi veliki dio ove jednadžbe, ali gibanje može diktirati više od prostornih odnosa.

Ovdje su najčešće upotrebe animacije i pokreta u dizajnu mobilnog korisničkog sučelja / UX-a:

• Vođenje korisnika između različitih stranica
• Vođenje korisnika kroz sučelje za poučavanje određenih ponašanja
• Predlaže akcije / ponašanja koja se mogu poduzeti na bilo kojoj stranici

Mobilne aplikacije imaju mnogo manje prostora na zaslonu od web stranica. To može dovesti do poteškoća u poučavanju korisnika o korištenju aplikacije. Ali to može biti iznenađujuće jednostavno ako znate kako pravilno implementirati mikrointerakcije.

Kako funkcioniraju mikrointerakcije

Pojedinačna mikrointerakcija pokreće se kad god se korisnik uključi s jednim dijelom sučelja. Većina mikrointerakcija je animirani odgovori na korisnikovu gestu. Dakle, kretanje pomicanjem će reagirati drugačije nego na slavinu ili zvrčka.

Blink UX učinio je sjajan post o malim detaljima mikrointerakcija. Ove male animacije trebaju slijediti a predvidljiv proces koje korisnik može naučiti za svaku interakciju u aplikaciji.

Mikrointerakcije vode korisnike kroz sučelje nudeći odgovore na ponašanja. Jednom kada korisnik zna da se klizač za uključivanje / isključivanje može pomaknuti, oni znaju da je interaktivan. Na temelju odgovora, oni će također znati je li postavka uključena ili isključena. Kada gumb izgleda kao korisnik može kliknuti instinktivno zna mogu komunicirati s njom.

Prema UXPin-u, svaka osnovna mikrointerakcija može se podijeliti u četiri koraka, ali sam sažela proces tri koraka.

1. Radnja - korisnik nešto čini poput pokreta, povlačenja, dodirnite i zadržite ili neke druge interakcije.
2. reakcija - sučelje odgovara na temelju onoga što se mora dogoditi. Prevlačenje zaslona može se vratiti u povijest preglednika, ili dodirivanje klizača ON / OFF može isključiti postavku.
3. Povratne informacije - to je ono što korisnik zapravo vidi kao rezultat interakcije. Kada korisnik povuče natrag u mobilnom pregledniku, može se pojaviti na prethodnoj stranici i pojaviti se "na vrhu" zaslona. Klizač za uključivanje / isključivanje može glatko kliziti ili povećati kada se pritisne zaslon.

Ove vrlo male radnje mogu se postići bez animacije, ali velike mikrointerakcije nude a realan osjećaj na plosko digitalno sučelje, koje uglavnom dolazi u obliku realistične animacijske efekte. Oni udišu život u sučelje i potiču interakciju korisnika.

Potražite detalje

Ako pogledate manje dijelove dizajna, shvatit ćete kako aplikacija treba reagirati na određeno ponašanje.

Povucite za osvježavanje je dobar primjer sada popularne mikrointerakcije. To nije bio sastavni dio iOS-a kada je prvi put pokrenut, ali mnoge aplikacije su uzele ovu ideju i počele se s njom kretati. Sada povlačite za osvježavanje je dobro poznato ponašanje koje većina korisnika zna da koristi prilikom pregledavanja korisničkog sučelja feeda. Isto se može reći i za izbornike mobilnih hamburgera koji su se divlje razvili u popularnosti.

Napravite svaku mikrointerakciju realan i jednostavan. Nemojte pretjerati s animacijama jer mogu postaju dosadni ako su previše detaljni i često ih koriste. Korisnik ne želi da se iskre pojavljuju svaki put kad dodirnu ikonu izbornika. Postići ravnotežu s istinskom vrijednošću koja komunicira kako bi sučelje trebalo raditi bez pretjerivanja.

Gledajući neke primjere

Mislim da je najbolji način da se nešto nauči to što radimo, a drugi najbolji način je proučavanje rada drugih. Prikupio sam malu šaku UI / UX animacije mikrointerakcija od talentiranih korisnika Dribbblea da vam pokažu kako to izgleda u pravom modelu.

Svaka će aplikacija biti različita i imati različite potrebe na temelju onoga što aplikacija radi. Na kraju većina korisnika želi istu stvar: aplikaciju koja je intuitivan i pruža kvalitetno korisničko iskustvo s mikrointerakcijama u odnosu na ponašanje korisnika.

1. Uživajte u aplikaciji za animirani događaj

Prvi primjer je izvanredna animacija kartica koju je stvorio Ivan Martynenko. Primijetit ćete nekoliko mikrointerakcija u ovom dizajnu, osobito kartanje swiping i kretanje kroz detalje.

Kada dodirnete karticu, ona postaje veća. A kada dodirnete gumb Pretplati, fotografija profila korisnika klizi u popis pretplatnika. Sve se osjeća vrlo intuitivno i sasvim prirodno za sučelje.

2. Interaktivni zaslon vježbanja

Ova kreativna mobilna animacija vježbi dolazi od dizajnera Vitalija Rubtsova. To demonstrira korisnika spremanje njihova vježba za jedan skup squatova.

Primijetite da svaka animacija ima isto elastični odskočni efekt kada se izbornici otvaraju i zatvaraju. Isto vrijedi i kada je aktivnost označena kao "Gotovo". Dosljednost ključna je za mikrointerakcije jer se svi trebaju osjećati spojen na isto sučelje.

3. Mikrointerakcije aplikacije App

Kratka, slatka i do točke. Mislim da ovo najbolje opisuje mikrointerakcije aplikacija za pretraživanje koje je dizajnirao Lukas Horak. Svaka je animacija brzo, ali još uvijek vidljivo.

Ovako biste trebali dizajnirati mikrointerakcije izbjegavajte prekomjernu složenost. Ako bi se sučelje brže učitavalo bez animacije, zašto bi se onda mučilo? Brze animacije zadržite korisnika koji se kreće bez obuzdavanja iskustva.

4. Mikrointerakcija kondicijskog cilja

Mislim da je Jakub Antalà ?? â € œk stvarno pogodio ovog iz parka sa svojom mikrofinakcijom u cilju fitnessa. Svi zasloni imaju taj osjećaj jiggly jell-o jer Oblici se kreću tako fluidno.

Ipak, sučelje se također osjeća čvrste i korisne. Pokazuje se da mikrointerakcije oblikovane sa svrhom još uvijek mogu biti zabavne i zabavne, ali i funkcionalne i pragmatične.

5. Povucite za osvježavanje animacije

Evo jedne od mojih apsolutnih omiljenih animacija koje je sastavio tim u Ramotionu. Ovo ne samo oponaša tekućinu s potezanjem, ali animacijom odgovora glatko povezuje od kapljice tekućine u krug punjenja.

Ovaj mnogo pažnje posvećeno detaljima je ono što donosi istinsku ljepotu u mikrointerakcijama mobilnih aplikacija.

6. Tab Microinteraction

Widgeti s karticama prilično su uobičajene za mobilne aplikacije zbog manjih zaslona. Stvarno mi se sviđa ova mikrointerakcija koju je stvorio John Noussis, iako mislim da bi bila učinkovitija bržom brzinom, ali sama animacija je veličanstvena i dobro osmišljena..

Strelica sidra tabulatora klizi desno baš kao što se novi sadržaj odbija s desne strane. To daje iluziju cijeli se zaslon fizički pomiče nadesno. Animacija je izvrsna, ali budući da je tako spora, mislim da bi se većina korisnika nakon nekoliko dana ljutila.

7. Prethodno umetanje animacije

Nisam mnogo govorio o tome učitavanje barova u ovom postu, ali oni su jednako vrijedni za cjelokupno iskustvo. Većina korisnika ne želi čekati na učitavanje podataka, ali definitivno ne žele buljiti u prazan zaslon dok se učitava.

Bret Kurtz je učinio ovaj zadivljujući zaslon koji je bio zabavan i informativan. Korisnik zapravo može biti zabavljati gledajući ovu malu animaciju. Također mogu biti uvjeravanja da je aplikacija i dalje učitava svoje podatke i nije se srušio.

Završavati

Svi ovi primjeri sjajno pokazuju vrijednost mikrointerakcija. Mobilne aplikacije dobivaju mnogo veću vrijednost od mikrointerakcija, jer korisnici fizički dodirnite zaslone prstima. Korisnici ne dodiruju svoje monitore na radnoj površini ili zaslone prijenosnih računala, ali svatko dodiruje njihove pametne telefone jer je zadano stanje interaktivnosti.

To je mnogo više osobnog iskustva, zbog čega dizajn mobilne aplikacije može biti takav nijansirani proces. Kada se radi pravilno, može se izgraditi i dodavanje velikih mobilnih mikrointerakcija snažno iluzorno korisničko iskustvo iz piksela i kretanja.