Oživitev mikro-interakcije in animacije uporabniškega vmesnika s sodelovanjem razvijalcev in oblikovalcev

Uporabnikom lahko ustvarimo prijetno izkušnjo z mikro interakcijo in animacijo uporabniškega vmesnika!

Živjo, moje ime je Kyo Kim in približno dve leti delam kot oblikovalec izdelkov v podjetju Capital One. Tukaj v svojem delu uporabljam mikro interakcije in animacijo, tudi pri nekaterih mobilnih projektih, ki ste jih morda uporabili sami. Preden sem začel delati v tehniki, sem se ukvarjal s filmom. V filmu je poudarek na pripovedovanju zgodb in urejanju, da se ustvari zgodba, ki pritegne občinstvo; in veliko tega se doseže z uporabo prehodov. Danes se mi zdijo te veščine koristne, ko ustvarjam izkušnje in zgodbe za digitalna orodja.

Pri oblikovanju razmišljam o dejavnikih, ki bi uporabnikom nudili odlično, prijetno izkušnjo s prehodi in pripovedovanjem zgodb.

Da bi izdelek svojim uporabnikom ponudil čudovito izkušnjo, mora ponuditi več kot estetsko prijeten dizajn in impresivne animacijske učinke.

Ne glede na to, ali izdelek temelji na aplikacijah, spletni ali kakšni drugi obliki digitalnega izdelka, mora uporabnike vključiti, jim biti všeč za uporabo in jim dati možnost, da se z njim neposredno in smiselno ukvarjajo. način.

Mikro interakcije lahko naredijo uporabniško izkušnjo čudovito in zadovoljujočo na način, ki ga mnogi oblikovalni elementi ne zmorejo. Preden se lotimo mikro interakcij v okviru oblikovanja izdelkov, začnimo z osnovami.

Kaj so oni? Zakaj je to dobro za uporabniško izkušnjo? Zakaj bi jih oblikovalci in razvijalci vključili v svoje delo? Kako lahko skupine za oblikovanje izdelkov sodelujejo pri njihovem izboljšanju?

Kaj so mikro-interakcije in zakaj bi jih morali skrbeti za njih?

Kaj so mikro interakcije ali animacije uporabniškega vmesnika? Ljudje jih pogosto označujejo kot simpatične animacije, gibalne grafike ali gibljive slike. Vendar pa so veliko več kot to.

Za razliko od drugih oblik animacije, ki obstajajo zgolj zato, da ustvarijo iluzijo gibanja, mikro interakcije uporabnika neposredno vključijo, kar mu omogoča, da na različne načine in na interaktiven in učinkovit način opravi različne naloge.

Če bi to povezali z načeli dobre zasnove sistemov, to izboljšuje in omogoča sistemske povratne informacije za uporabnika. Če se pravilno opravi, bodo uporabniki sprejeli mikro interakcije kot sporočilo uporabnika, da (sistem) počne tisto, kar bi moral, kot odgovor na to, kar uporabnik potrebuje.

Tudi če ne veste, kaj so mikro-interakcije, z njimi redno sodelujete. Vsakič, ko za izvajanje določene naloge uporabite aplikacijo ali spletni izdelek - naj bo to branje novic, nakup, igranje igre, ustvarjanje profila ali prilagajanje nastavitev in nastavitev obveščanja - vsako posamezno dejanje, ki ga naredite, pomeni mikro interakcija. Mikro interakcije so brezhibno vpletene v platformo izdelka, s čimer so njihove funkcije pregledne in dostopne, kar učinkovito izboljšuje uporabnikovo splošno izkušnjo.

Čeprav imajo te "akcije" različne oblike, nekateri pogosti primeri vključujejo:

  • Ko izdelek »premaknemo« v virtualno nakupovalno košarico.
  • Ko na preklopnem gumbu, podobnem CTA, izbiramo med dvema možnostma.
  • Ko "potegnemo navzdol", da osvežimo novice in si ogledujemo zadnjo posodobitev.
  • Ko se "pomikamo navzgor in navzdol" v dolgem viru ali strani.

Ko oblikujemo mikro interakcijo, moramo preučiti, ali je resnično potrebna in ključna za uporabnikovo izkušnjo. V nasprotnem primeru lahko odvrne uporabniški obrazec z uporabo vašega izdelka ali postane vizualni hrup.

Načela mikro-interakcij

Obstajajo tri načela, ki jih vedno upoštevam pri načrtovanju mikro-interakcij.

  1. Kontinuiteta (in subtilnost)

Elementi mikro-interakcije morajo biti subtilni, tako da kadar uporabnik ukrepa, v svoji izkušnji neprekinjeno poteka. Če na primer ustvarimo drsno animacijo v dolgem viru, bi se moral uporabnik osredotočiti na vsebino strani, ne pa na samo animacijo drsenja.

2. Predvidljivost

Kakovostne mikro interakcije imajo element predvidljivosti, ki uporabniku omogoča učinkovito in učinkovito navigacijo po izdelku. Uporabnik lahko natančno napove učinke svojih dejanj, se počuti udobno nazaj, in prepričan je v svojo sposobnost izvedbe, kot je pričakoval.

3. Preoblikovanje

Prehodi tekočin med več zasloni in dobro definirane transformacije različnih predmetov znotraj njih so ključni vidiki kakovostnih mikro interakcij. Uporabniku omogočajo intuitivno razumevanje odnosov med zasloni in elementi znotraj njih.

Mikro interakcije so zasnovane v skladu s temi načeli in zagotavljajo kontekst zasnove, tako da uporabnikom pomagajo vedeti, kako z njim komunicirati. Mikro interakcija je trenutni dogodek, ki zaključi eno samo nalogo. Mikro interakcije so najpomembnejši najmanjši interaktivni elementi zasnove spletnega mesta ali aplikacij med najpomembnejšimi, saj služijo različnim jedrskim funkcijam.

Sprožilci (tapkanje, povlecite, povlecite itd.) Sprožijo vsaka dejanja, navedena v zgornjem razdelku (kontinuiteta, predvidljivost in preoblikovanje). Uporabnik izvede spletno mesto ali aplikacijo za zagon postopka (tudi če se nadaljuje po začetnem koraku). Sledi vzorec uporabnika, ki poziva k dejanju, pravila za sodelovanje, ki jih določa vmesnik (kaj se bo zgodilo in kako), povratne informacije uporabnika (ali je delovalo ali ne) ter vzorci ali zanke (ali dejanje zgodi se enkrat ali se ponovi v urniku).

-Kako lahko razvijalci in oblikovalci sodelujejo, da oživijo mikro interakcije

Kot vidite, imajo mikro-interakcije kritično vlogo pri oblikovanju uporabniške izkušnje. Zaradi tega postajajo vse pomembnejši del mojega oblikovalca izdelkov. Ko sem delal na različnih projektih na več platformah in načinih uporabe, sem opazil, da vsi ne prepoznajo vrednosti teh elementov ali kako jih učinkovito ustvariti. Še pomembneje je, da pogosto člani skupine ne vedo, kako drug drugemu izraziti svoje zamisli glede oblikovanja prehodov in mikro interakcij.

Zavedel sem se, da se je vse skupaj omejilo na komunikacijo - nekaj se je izgubilo v prevodu, ko sem razvijal svoje oblikovalske ideje svojim razvijalcem. Morda ste že prej slišali ta Konfucijev citat: »Povej mi in pozabil bom. Pokaži mi in morda se spomnim. Vključite me in razumel bom. "In prav s sodelovanjem si kot skupina oblikovalcev in razvijalcev ustvarjamo odlične izkušnje.

Najprej pojdimo skozi kratek opis postopka oblikovanja ...

V idealnih razmerah, ko oblikovalec oblikuje idejo za mikro-interakcijo, tradicionalni potek poteka v naslednjem vrstnem redu:

  1. Oblikovalec razvije vizualne elemente in učinke animacije, potrebne za uresničitev svoje ideje.
  2. Oblikovalec predstavi končni model in njegove osnovne koncepte ostalim članom skupine.

Kaj pa, če se postopek načrtovanja v praksi ne odvija tako kot v teoriji? Kaj pa, če bomo predstavili knjigo zgodb ali nepopoln model? Ali pa je nekdo drug iz ekipe oblikoval model?

Ko se to zgodi, se verjetno pojavijo težave pri predstavitvi ali razvoju. Te težave običajno spadajo v eno od treh kategorij:

  1. Ideja o animaciji ni sporočena dovolj jasno.

Če poskušate z besedami ali slikami opisati koncept animacije, lahko na obrazih svoje publike opazite grimase. To pomeni, da se trudijo, da bi razumeli vašo idejo, vendar je v resnici ne uresničujejo. Četudi razumejo osnovni koncept, je slika, ki so si jo pričarali v glavah, verjetno v nasprotju s tistim, kar si zamislite. Ker ljudje ponavadi zaznavajo gibljive slike, fotografije in besedne opise na različne načine, zanašanje na besede ali slike za prenos ideje o animaciji ustvarja prostor za slabo komuniciranje in pogosto nepotrebno napetost med člani vaše ekipe.

2. Oblikovalec ne ve, ali animacija deluje dobro, dokler ne preverijo in preizkusijo prototipa razvijalca.

Ko oblikovalci nimajo veščin za izdelavo prototipov, so svoje ideje omejili na to, da razvijalcem predstavijo svoje ideje prek knjižne plošče. Tudi če oblikovalec močno verjame v model mikro-interakcije, ne more povedati, ali deluje v polni meri, dokler razvijalec ne bo dokončal prototipa. To je problematično iz več razlogov, glavni pa je velika verjetnost napačnega komuniciranja, ki ga takšen pristop uvaja v postopek. Poleg tega odpira vrata dvomom članov ekipe in vodi do vprašanj o izvedljivosti ideje. To je lahko časovno drago z vidika razvoja.

3. Oblikovalec in razvijalec nista na isti strani

Ko oblikovalci ustvarjajo animacije uporabniškega vmesnika ali mikro interakcije, poskušajo vključiti zapletene podrobnosti oblikovanja, kot so enostavna olajšava, skripte, izrazi in drugi učinki. Ko razvijalcem predstavijo te ideje, bodo morda slišali: "Tega ni mogoče narediti v naši časovnici" ali "Ne moremo narediti popolnoma enakega, ampak poskusili bomo." razkrijte različne podrobnosti in tehnične težave z razvijalci. Vendar pa se lahko te razprave končajo brez uspeha, če oblikovalec ne pozna delovnih orodij ali jezikov, ki jih razvijejo razvijalci. Te dejavnike je treba upoštevati pri oblikovanju in razpravljanju o idejah, tako da so mikro interakcije združljive s privzetimi nastavitvami razvijalcev, kar povečuje verjetnost, da bo končni izdelek izpolnjeval oblikovalske (in vse druge) standarde.

Kakšne so rešitve za te težave?

Medtem ko imajo vsi oblikovalci in razvijalci svoj način komuniciranja o svojih animacijskih konceptih, želim deliti eno od metod, ki jih uporablja moja ekipa. Ta metoda je bila zelo uspešna in je povzročila manj sestankov ter drastično izboljšala komunikacijo naše ekipe.

Zdaj se ne prerekujemo več, ali vključiti mikro interakcije ali ne, raziskujemo načine, kako jih še izboljšati!

Koncept interakcije okostja in vodnik za interakcijo

"Koncept interakcije okostja in vodnik za interakcijo ne pušča prostora za interpretacijo, ki mi omogoča, da takoj začnem delati in se prepričati v uskladitev s oblikovalčevo vizijo." –Jesse M Majcher / vodilni inženir IOS

Standardni postopek, ki ga uporabljamo za komuniciranje o UX dizajnih, ne pomeni dobro za UI animacije. Najprej so modeli UX in pretoki še vedno zasnovani po zaslonu in so statični. Animacije uporabniškega vmesnika so tokovi sami po sebi, so tekoči in temeljijo na časovni razporeditvi. Ko ustvarjamo statično zasnovo, naredimo grob okvir, da bomo razumeli idejo in razpravljali o poteku. To nam omogoča enostavno revizijo in natančno prilagoditev zasnove, preden ustvarimo končno različico. Ko se vsak član ekipe strinja, da je dizajn pripravljen predati razvijalcem, oblikovalec razvijalcu zagotovi vodnik po slogu in rdečo črto, ki vsebuje podrobnosti, značilnosti in druge pomembne informacije o dizajnu.

Če bi za animacije uporabili podoben postopek, bi bil lahko naš postopek veliko hitrejši in boljši.

  1. Koncept interakcije okostja (študija gibanja)

Koncept interakcije okostja je podoben žičnemu okvirju, ki bi ga ustvarili pri načrtovanju pretoka. Glavna razlika je v tem, da je to prototip, ki ga je mogoče igrati in / na katerega je mogoče klikniti. Če to pripeljemo na sestanek, članom naše ekipe ne bo treba uporabiti domišljije, da bi razumeli koncept. Oblikovalec lahko s pomočjo igralne / klikljive demo ali statične zgodbene plošče neposredno nakaže vizualne in animacijske elemente zasnove. To bo vsem dalo jasen in točen občutek njegove ideje. Partnerji lahko tako oblikovalcu posredujejo povratne informacije, ki so zelo specifične in s tem zelo dragocene. Obenem bodo ekipe za upravljanje izdelkov in razvojne skupine pridobile informacije, ki jim bodo omogočile izboljšanje njihovih notranjih komunikacij in ocene časa za projekt.

2. Vodnik za interakcijo

Ko se ekipa strinja s konceptom, oblikovalec ustvari vodnik za interakcijo. To je podobno stilskemu vodiču, saj opisuje položaj, vrtenje, lestvico in časovno razporeditev elementov. Vsaki podrobnosti o animacijah lahko dodamo, kar nam bo pomagalo, da jo bodo partnerji jasno razumeli. Ko oblikovalec prikaže vodnik za interakcijo svojim partnerjem, je lahko še bolj jasen glede gibanja in merjenja koncepta animacije. To je zelo koristno za dokončno delo s sodelovanjem. Oblikovalcem pomaga tudi bolj premišljeni v svoji zasnovi animacije / mikro interakcije.

3. Spretnosti oblikovanja prototipov za oblikovalce

Po mojih izkušnjah naj bi bil oblikovalec izdelkov gonilnik animacije, oblikovalec pa mu mora zagotoviti podporo. To pomeni, da oblikovalec izdelkov nosi večino odgovornosti v partnerstvu. Ne samo, da so odgovorni za to, da svoje ideje razložijo zelo nazorno, ampak morajo pokazati, da so izvedljivi z dokazilom o konceptu. Pomeni tudi, da morajo biti oblikovalci izdelkov sposobni izdelati svoje lastne prototipe za animacijo. Če lahko oblikovalec izdelkov ustvari prototip in ga predstavi med sestankom, bo razprava, ki sledi, bolj jasna in manj zamudna, kar bo privedlo do učinkovitejšega komunikacijskega procesa na splošno.

Torej, s katerimi vrstami orodij za oblikovanje prototipov bi se morali oblikovalci seznaniti? Obstaja veliko orodij, vendar vsi ne vedo, kaj najbolje deluje pri določenih nalogah za mikro interakcijo. Tu so moja priporočila, ki temeljijo na mojih osebnih izkušnjah oblikovanja teh elementov.

Če poznate kodiranje:

  • Mobilni telefon: Xcode, Android studio
  • Mobilno ali spletno: Framer
  • Splet: animacija CSS

Če želite zasnovati interakcijo med zaslonskim potiskom in modulom:

  • Invision in Marbel

Če želite ustvariti podrobnejše interakcije:

  • Princip, Adobe CC, origami Studio in Pixate

Če želite ustvariti podrobne interakcije + animacijo:

  • Po učinkih

Trenutno sem ljubitelj uporabe After Effect za izdelavo prototipov. Tudi če ni interaktiven (t.i. ki ga je mogoče klikniti), je to popoln način predstavitve animacijskega koncepta. Prav tako ni učinka omejevanja in lahko nadzorujete gibanje podrobnosti. Lahko ga celo uporabite za interakcijo v 3D prostoru, na primer za AR in VR.

Prijetna timska interakcija poskrbi za čudovite izdelke

Mikro interakcije so postale vse bolj pomemben - če že ne kritičen - element spleta, mobilnega oblikovanja in še več. Četudi tako oblikovalci kot razvijalci prepoznajo vrednost animacij uporabniškega vmesnika in so motivirani za njihovo ustvarjanje, se pogosto trudijo sodelovati na učinkovit in učinkovit način. Potrebna je močna ekipa, da pravočasno pošlje velike mikro-interakcije; take ekipe zahtevajo jasno razmejitev vlog, učinkovite komunikacijske veščine in primerna orodja za izdelavo prototipov za naloge.

Če želite mikro-interakcije nastaviti za uspeh, se prepričajte, da ima vaša skupina te lastnosti in sodeluje s temi procesi. In veliko sreče z lastnim potovanjem v mikro-interakciji!

IZJAVA RAZKRITJA: Ta mnenja so mnenja avtorja. Če v tej objavi ni drugače navedeno, Capital One ni povezana z nobeno od omenjenih družb. Vse blagovne znamke in druge intelektualne lastnine, ki se uporabljajo ali prikazujejo, so last lastnih lastnikov. Ta članek je © 2017 Capital One.

Če želite več informacij o API-jih, odprtem kodu, dogodkih v skupnosti in kulturi razvijalcev v Capital One, obiščite DevExchange, naš portal za vse na enem mestu: developer.capitalone.com.