Oživljavanje animacije mikro interakcije i korisničkog sučelja kroz suradnju programera i dizajnera

Korisnicima možemo stvoriti ugodno iskustvo putem mikro-interakcije i UI animacije!

Bok, ja se zovem Kyo Kim i radim kao dizajner proizvoda u Capital Oneu oko dvije godine. Koristim mikro interakcije i animaciju tijekom svog rada ovdje, uključujući na nekim mobilnim projektima koje biste i sami mogli upotrijebiti. Prije nego što sam počeo raditi u tehnici, moja pozadina je bila u filmu. U filmu je fokus na pripovijedanju i uređivanju kako bi se stvorila priča koja privlači publiku; a mnogo toga se postiže korištenjem prijelaza. Danas su mi te vještine korisne dok stvaram iskustva i priče za digitalne alate.

Prilikom dizajniranja razmišljam o čimbenicima koji će korisnicima pružiti sjajno i ugodno iskustvo s prijelazima i pripovijedanjem priča.

Da bi proizvod ponudio svojim korisnicima ugodno iskustvo, mora ponuditi više nego estetski ugodan dizajn i impresivne animacijske efekte.

Bez obzira je li proizvod zasnovan na aplikacijama, web-mjestu ili bilo kojem drugom obliku digitalnog proizvoda, on mora korisnike privući, biti im ugodni za upotrebu i pružiti im priliku da se izravno i smisleno druže s njim. put.

Mikro interakcije imaju moć korisničkog iskustva učiniti ugodnim i zadovoljavajućim na način na koji to mnogi elementi dizajna ne mogu. Prije nego što uđemo u mikro-interakcije u kontekstu dizajna proizvoda, započnimo s osnovama.

Što su oni? Zašto je to dobro za korisničko iskustvo? Zašto bi ih dizajneri i programeri trebali uključiti u svoj posao? Kako dizajnerski timovi proizvoda mogu zajedno raditi na poboljšanju?

Što su mikro-interakcije i zašto bismo se o njima trebali brinuti?

Što su mikro interakcije ili UI animacije? Ljudi ih često nazivaju lijepim animacijama, grafikom pokreta ili dizajnom pokretnih slika. Međutim, oni su puno više od toga.

Za razliku od drugih oblika animacije koji postoje samo za stvaranje iluzije kretanja, mikro-interakcije izravno angažiraju korisnika, omogućujući mu / joj izvršavanje različitih zadataka i interakciju s proizvodom na intuitivan i učinkovit način.

Ako bismo ovo povezali s načelima dobrog dizajna sustava, ovo poboljšava i omogućava povratne informacije o sustavu za korisnika. Ako se izvrši ispravno, korisnici će uzimati mikro-interakcije kao poruku korisnika da on (sustav) radi ono što bi trebao raditi kao odgovor na ono što korisniku treba.

Čak i ako ne znate što su mikro-interakcije, s njima se redovito bavite. Svaki put kada koristite aplikaciju ili web-bazirani proizvod za postizanje određenog zadatka - bilo da čitate vijesti, kupujete, igrate igru, kreirate profil ili prilagođavate svoje postavke i postavke obavijesti - svaka pojedina pojedinačna akcija predstavlja mikro-interakcija. Mikro interakcije neprimjetno su utkane u platformu proizvoda, čineći njihove funkcije transparentnim i dostupnim, učinkovito poboljšavajući korisnikov ukupni doživljaj.

Iako ove „radnje“ imaju nekoliko različitih oblika, neki uobičajeni primjeri uključuju:

  • Kad "premjestimo" stavku u virtualnu košaricu.
  • Kad odaberemo dvije mogućnosti na preklopnom gumbu nalik CTA-i.
  • Kad se "povučemo" za osvježavanje vijesti i vidjeti najnovije ažuriranje.
  • Kad se "pomičemo gore-dolje" u dugom feedu ili stranici.

Kada dizajniramo mikro interakciju, trebamo ispitati je li ona zaista potrebna i od vitalnog značaja za korisnikovo iskustvo. Inače, on može potencijalno učinkovito odvratiti korisnički obrazac koristeći vaš proizvod ili postati vizualni šum.

Načela mikro-interakcija

Tri su načela koja uvijek uzimam u obzir prilikom dizajniranja mikro interakcija.

  1. Kontinuitet (i suptilnost)

Elementi mikro-interakcije trebaju biti suptilni, tako da kada korisnik izvrši akciju, neprekidno struji u svom iskustvu. Na primjer, ako stvaramo animaciju za pomicanje u dugom feedu, korisnik bi se trebao moći usredotočiti na sadržaj stranice, a ne na samu animaciju pomicanja.

2. predvidivost

Kvalitetne mikro-interakcije imaju element predvidljivosti koji korisniku omogućuje učinkovitu i učinkovitu navigaciju po proizvodu. Korisnik može precizno predvidjeti učinke svojih postupaka, osjećati se ugodno preokrenuvši ih i uvjeren u sposobnost izvođenja kako je i očekivano.

3. Transformabilnost

Prelazi tekućina između više zaslona i dobro definirane transformacije različitih objekata unutar njih ključni su aspekti kvalitetnih mikro interakcija. Korisniku omogućuju intuitivno razumijevanje odnosa između ekrana i elemenata unutar njih.

Kada su dizajnirani na temelju tih načela, mikro interakcije pružaju kontekst dizajnu pomažući korisnicima da znaju kako da komuniciraju s njim. Mikro-interakcija je trenutni događaj koji dovršava jedan zadatak. Navodno najmanji interaktivni elementi dizajna web stranica ili aplikacija, mikro-interakcije su neke od najvažnijih jer služe raznim temeljnim funkcijama.

Okidači (dodirnite, prelazite prstom, prevucite itd.) Pokreću svaku radnju navedenu u gornjem odjeljku (kontinuitet, predvidljivost i transformabilnost). Korisnik izvršava radnju na web mjestu ili u aplikaciji za pokretanje postupka (čak i ako se nastavi nakon početnog koraka). Ovo slijedi obrazac poziva korisnika na radnju, pravila za angažman kako je određeno sučelje (što će se dogoditi i kako), povratne informacije od korisnika (je li to radilo ili ne) i obrasci ili petlje (radi li se o radnji dogoditi se jednom ili ponoviti na rasporedu).

-Kako programeri i dizajneri mogu raditi zajedno kako bi oživjeli mikro-interakcije

Kao što vidite, mikro-interakcije imaju ključnu ulogu u oblikovanju korisničkog iskustva. Zbog toga su postale sve važniji dio mog rada kao dizajnera proizvoda. Radeći na raznim projektima na više platformi i načina, primijetio sam da ne prepoznaju svi vrijednosti ovih elemenata ili kako ih učinkovito stvoriti. Ono što je još važnije, često članovi tima ne znaju kako izraziti svoje ideje jedni drugima u vezi s dizajniranjem prijelaza i mikro interakcija.

Shvatio sam da se sve svodilo na komunikaciju - nešto se izgubilo u prijevodu kada sam svojim programerima objasnio ideje o dizajnu. Možda ste čuli ovaj Konfucijev citat i prije: „Reci mi i zaboravit ću. Pokažite mi, a možda se sjećam. Uključite me i razumjet ću. “I upravo kroz sudjelovanje mi kao tim dizajnera i programera stvaramo sjajna iskustva.

Prvo, prođite kroz kratki opis procesa dizajniranja ...

U idealnoj situaciji, kada dizajner dođe do ideje za mikro-interakciju, tradicionalni tijek rada odvija se sljedećim redoslijedom:

  1. Dizajner razvija vizualne elemente i efekte animacije potrebne za aktiviranje svoje ideje.
  2. Dizajner ostalim članovima tima predstavlja konačni model i njegove temeljne koncepte.

Ali što ako se proces dizajniranja ne odvija u praksi kao u teoriji? Što ako predstavljamo ploču s knjigama ili nekompletni model? Ili netko drugi u timu dizajnira model?

Kad se to dogodi, vjerovatno će se pojaviti problemi u prezentaciji ili razvoju. Ovi problemi obično spadaju u tri kategorije:

  1. Ideja animacije nije priopćena dovoljno jasno.

Ako pokušavate opisati koncept animacije riječima ili fotografijama, na licima vaše publike možete vidjeti grimase. To znači da se trude najbolje kako bi razumjeli vašu ideju, ali zapravo je ne shvaćaju. Čak i ako razumiju osnovni koncept, slika koju su im začinili u glavi vjerojatno nije u skladu s onim što zamislite. Budući da ljudi imaju tendenciju da na pokretne slike, slike i verbalne opise percipiraju na različite načine, oslanjanje na riječi ili slike za prenošenje ideje o animaciji stvara prostor za pogrešnu komunikaciju i često nepotrebnu napetost među članovima vašeg tima.

2. Dizajner ne zna radi li animacija dobro dok ne provjere i testiraju prototip programera.

Kada dizajneri nemaju vještine za izradu prototipa, oni su ograničeni na to da ideje predstave programerima putem ploče s knjigama. Čak i ako dizajner snažno vjeruje u model mikro-interakcije, on ili ona ne mogu reći radi li s punim potencijalom sve dok programer ne dovrši prototip. To je problematično iz više razloga, od kojih je glavni vjerojatnost pogrešne komunikacije da takav pristup uvodi u postupak. Osim toga, otvara vrata sumnji kod članova tima i dovodi u pitanje o izvedivosti ideje. Iz perspektive razvoja ovo može biti skupo s obzirom na vrijeme.

3. Dizajner i programer nisu na istoj stranici

Kada dizajneri izrađuju UI animacije ili mikro interakcije, pokušavaju uključiti složene detalje dizajna poput prilagođenih olakšica, skripti, izraza i drugih efekata. Prezentirajući ove ideje programerima, oni bi mogli čuti: "To nije moguće učiniti na našoj vremenskoj traci" ili "Ne možemo to učiniti potpuno isto, ali pokušat ćemo." U ovom trenutku, oni bi mogli pokušati baciti raznim detaljima i tehničkim problemima s programerima. Međutim, ove rasprave mogu završiti besplodno ako dizajner nema dobro znanje o alatima ili jezicima koje programeri koriste. Ove čimbenike treba uzeti u obzir prilikom formuliranja i rasprave ideja kako bi mikro-interakcije bile kompatibilne sa zadanim postavkama programera, povećavajući vjerojatnost da će konačni proizvod udovoljiti standardima dizajnera (i svih ostalih).

Koja su rješenja za ova pitanja?

Iako svi dizajneri i programeri imaju svoj način komuniciranja o svojim animacijskim konceptima, želim podijeliti jednu od metoda koje moj tim koristi. Ova metoda je bila prilično uspješna i rezultirala je manjim brojem sastanaka i drastično je poboljšala komunikaciju našeg tima.

Sada se više ne svađamo oko toga treba li uključiti ili ne mikro interakcije, istražujemo načine kako ih još poboljšati!

Koncept interakcije kostura i vodič za interakciju

„Koncept interakcije kostura i vodič za interakciju ne ostavlja prostora za interpretaciju koja mi omogućava da odmah započnem rad i budem sigurna u usklađivanje s dizajnerskom vizijom.“ - Jesse M Majcher / Lead IOS inženjer

Standardni postupak koji koristimo za komunikaciju o UX dizajnima ne znači dobro za UI animacije. Kao prvo, UX dizajni i protoci su i dalje dizajnirani po zaslonu i statični su. UI animacije su tokovi sami po sebi, fluidni su i temelje se na vremenu. Kad stvorimo statički dizajn, napravimo grubi žični okvir kako bismo mogli razumjeti ideju i raspravljati o toku. To nam omogućuje jednostavnu reviziju i fino podešavanje dizajna prije nego što stvorimo konačnu verziju. Nakon što se svaki član tima složi da je dizajn spreman da preda programerima, dizajner pruža programeru vodič za stil i crvenu liniju koja sadrži detalje, specifikacije i druge važne informacije o dizajnu.

Ako bismo upotrijebili sličan postupak za animacije, naš bi postupak mogao biti puno brži i bolji.

  1. Koncept interakcije skeleta (studija pokreta)

Koncept interakcije kostura sličan je žičanom okviru koji biste stvorili pri dizajniranju protoka, glavna razlika je u tome što je to prototip prototipa koji se može igrati / kliknuti. Ako to dovedemo na sastanak, članovi našeg tima neće morati koristiti svoju maštu da bi shvatili koncept. Dizajner može upotrijebiti demo ili statičku priču koja se može kliknuti za igranje i izravno na vizualne i animacijske elemente dizajna. To će svakome dati jasan i točan smisao njegove ideje. Zauzvrat, partneri mogu pružiti povratne informacije koje su vrlo specifične i stoga vrlo vrijedne za dizajnera. U isto vrijeme, timovi za upravljanje proizvodima i razvojni timovi dobit će informacije koje će im omogućiti poboljšanje interne komunikacije i procjene vremena za projekt.

2. Vodič za interakciju

Jednom kada se tim složi oko koncepta, dizajner kreira vodič za interakciju. To je slično stilskom vodiču po tome što prikazuje položaj, rotaciju, mjerilo i vremenski raspored elemenata. Možemo dodati svaki detalj o animacijama, što će pomoći našim partnerima da to jasno razumiju. Kad dizajner pokaže vodič za interakciju svojim partnerima, on ili ona mogu biti još jasniji u pogledu kretanja i mjerenja animacijskog koncepta. To je vrlo korisno za finaliziranje rada kroz suradnju. Također pomaže dizajnerima da budu pažljiviji u dizajnu animacija / mikro-interakcija.

3. Vještine izrade prototipa za dizajnere

Prema mom iskustvu, kako biste se postavili za uspješnu dizajnersku suradnju, dizajner proizvoda trebao bi biti pokretač animacije, a programer bi trebao pružiti podršku. To znači da dizajner proizvoda snosi glavninu odgovornosti u partnerstvu. Ne samo da su odgovorni za objašnjavanje svojih ideja vrlo jasno, već moraju pokazati da su izvedivi pružanjem dokaza o konceptu. To također znači da dizajneri proizvoda moraju biti sposobni izrađivati ​​vlastite prototipove animacija. Ako dizajner proizvoda može stvoriti prototip i predstaviti ga tijekom sastanka, rasprava koja slijedi bit će jasnija i manje vremena, što će dovesti do ukupnog učinkovitijeg procesa komunikacije.

Dakle, s kojim bi se alatima za izradu prototipa trebali dizajneri upoznati? Postoji mnogo alata vani, ali ne znaju svi koji najbolje rade za određene zadatke mikro-interakcije. Evo mojih preporuka na temelju mog osobnog iskustva dizajniranja ovih elemenata.

Ako ste upoznati s kodiranjem:

  • Mobilni telefon: Xcode, Android studio
  • Mobilni ili Web: Framer
  • Web: CSS animacija

Ako želite dizajnirati interakciju između zaslona nalik zaslonu i modula:

  • Invision i Marbel

Ako želite stvoriti detaljnije interakcije:

  • Princip, Adobe CC, origami Studio i Pixate

Ako želite stvoriti detaljne interakcije + animaciju:

  • Nakon efekata

Trenutno sam ljubitelj korištenja After Effect-a za izradu prototipa. Čak i ako nije interaktivan (tj. Koji se može kliknuti), to je savršen način predstavljanja koncepta animacije. Također, nema ograničenja učinka i vi ste u mogućnosti kontrolirati kretanje detalja. Čak je moguće koristiti i za interakciju u 3D prostoru, poput AR-a i VR-a.

Prijatne timske interakcije čine za ukusne proizvode

Mikro interakcije postaju sve važniji - ako ne i kritični - element weba, mobilnog dizajna i još mnogo toga. Čak i ako i dizajneri i programeri prepoznaju vrijednost UI animacija i motivirani su za njihovo stvaranje, često se bore za suradnju na učinkovit i učinkovit način. Potreban je jak tim da na vrijeme isporuče sjajne mikro-interakcije; takvi timovi zahtijevaju jasno određivanje uloga, učinkovite komunikacijske vještine i prave alate za izradu prototipa za zadatke koji se obavljaju.

Da biste postavili mikro-interakcije za uspjeh, pobrinite se da vaš tim posjeduje ove karakteristike i sudjeluje u tim procesima. Sretno u vlastitom putovanju mikro-interakcije!

IZJAVA O IZLAGANJU: ​​Ova mišljenja su mišljenja autora. Ako u ovom postu nije drugačije navedeno, Capital One nije povezana s niti jednom od spomenutih tvrtki. Svi zaštićeni znakovi i ostala intelektualna svojstva koja se koriste ili prikazuju vlasništvo su njihovih vlasnika. Ovaj je članak © 2017 Capital One.

Da biste saznali više o API-jima, otvorenom izvoru, događajima u zajednici i kulturi za razvojne programere u Capital Oneu, posjetite DevExchange, naš portal za one-stop programere: developer.capitalone.com.