Pagdadala ng Micro-Pakikipag-ugnay at Animation ng UI sa Buhay sa Pamamagitan ng Nag-develop ng Pakikipagtulungan

Maaari kaming lumikha ng isang kasiya-siyang karanasan para sa mga gumagamit sa pamamagitan ng micro-interaction at UI animation!

Kumusta, ang aking pangalan ay Kyo Kim at ako ay nagtatrabaho bilang isang taga-disenyo ng produkto sa Capital One nang halos dalawang taon. Gumagamit ako ng mga micro-interaksyon at animation sa buong trabaho ko dito, kasama ang ilang mga mobile na mga proyekto na maaaring ginamit mo mismo. Bago ako nagsimulang magtrabaho sa tech, ang aking background ay sa pelikula. Sa pelikula, ang pokus ay tungkol sa pagkukuwento at pag-edit upang lumikha ng isang kwento na nakikisig sa madla; at marami sa mga ito ay nakamit sa pamamagitan ng paggamit ng mga paglilipat. Nakahahanap ako ng mga kasanayang kapaki-pakinabang ngayon habang gumagawa ako ng mga karanasan at kwento para sa mga digital na tool.

Kapag nagdidisenyo ako, iniisip ko ang tungkol sa mga kadahilanan na magbibigay sa mga gumagamit ng isang mahusay, kasiya-siyang karanasan sa mga paglilipat at pagkukuwento.

Para sa isang produkto na mag-alok sa mga gumagamit nito ng isang kasiya-siyang karanasan, dapat itong mag-alok ng higit sa aesthetically-nakalulugod na disenyo at kahanga-hangang mga epekto ng animation.

Hindi alintana kung ang produkto ay batay sa app, batay sa web, o anumang iba pang anyo ng digital na produkto, dapat itong iguhit ang mga gumagamit, maging kasiya-siya para magamit nila, at bigyan sila ng pagkakataong makisali sa isang direkta at makabuluhan paraan.

Ang mga pakikipag-ugnay sa micro ay may kapangyarihan upang gawin ang karanasan ng gumagamit na kasiya-siya at kasiya-siya sa isang paraan na hindi magagawa ng maraming mga elemento ng disenyo. Bago tayo pumasok sa mga pakikipag-ugnay sa micro sa konteksto ng disenyo ng produkto, magsimula tayo sa mga pundasyon.

Ano sila? Bakit ito ay mabuti para sa karanasan ng gumagamit? Bakit dapat isama ang mga designer at developer sa kanilang gawain? Paano magtutulungan ang mga koponan sa disenyo ng produkto upang mapagbuti ang mga ito?

Ano ang Mga Pakikipag-ugnay sa Micro at Bakit Dapat Nating Mag-alaga sa mga Ito?

Ano ang mga micro-interaksyon o mga animation ng UI? Ang mga tao ay madalas na tumutukoy sa kanila bilang mga magagandang animasyon, paggalaw ng mga graphic, o paglipat ng disenyo ng imahe. Gayunpaman, ang mga ito ay higit pa sa na.

Hindi tulad ng iba pang mga anyo ng animation na umiiral lamang upang lumikha ng ilusyon ng paggalaw, ang mga pakikipag-ugnay sa micro na direktang umaakit sa gumagamit, na nagpapagana sa kanya upang makamit ang iba't ibang mga gawain at makipag-ugnay sa produkto sa isang madaling maunawaan at epektibong paraan.

Kung nais nating itali ito sa mga alituntunin ng mahusay na disenyo ng mga system, pinapahusay nito at nagbibigay-daan sa feedback ng system para sa gumagamit. Kung tama nang tama, kukuha ang mga gumagamit ng micro-interaksyon bilang isang mensahe mula sa gumagamit na ito (ang system) ay ginagawa kung ano ang dapat gawin bilang tugon sa kung ano ang kailangan ng gumagamit.

Kahit na hindi mo alam kung ano ang mga micro-interaksyon, nakikipag-ugnay ka sa kanila nang regular. Sa bawat oras na gumagamit ka ng isang app o produkto na nakabase sa web upang maisagawa ang isang partikular na gawain - pagbabasa man ito ng balita, paggawa ng pagbili, paglalaro ng isang laro, paglikha ng isang profile, o pag-aayos ng iyong mga setting at kagustuhan sa abiso - bawat bawat aksyon na iyong ginagawa isang micro-interaksyon. Ang mga pakikipag-ugnay sa micro ay walang putol na pinagtagpi sa platform ng isang produkto, na ginagawang malinaw at naa-access ang kanilang mga pag-andar, na epektibong pagpapabuti ng pangkalahatang karanasan ng gumagamit.

Bagaman ang mga "kilos" na ito ay kumuha ng maraming magkakaibang anyo, kasama ang ilang karaniwang halimbawa:

  • Kapag "ilipat" namin ang isang item sa isang virtual shopping cart.
  • Kapag pumili kami sa pagitan ng dalawang mga pagpipilian sa isang pindutan ng to-tog na CTA.
  • Kapag kami ay "hilahin" upang i-refresh ang isang feed ng balita at makita ang pinakabagong pag-update.
  • Kapag "scroll up & down" kami sa mahabang feed o pahina.

Kapag nagdidisenyo kami ng isang micro-interaksyon, kailangan nating suriin kung ito ay tunay na kinakailangan at mahalaga sa karanasan ng gumagamit. Kung hindi man, ito ay may potensyal na makagambala sa form ng gumagamit gamit ang iyong produkto nang epektibo o maging visual na ingay.

Mga Alituntunin ng Micro-Pakikipag-ugnayan

Mayroong tatlong mga prinsipyo na lagi kong isinasaalang-alang kapag nagdidisenyo ng mga pakikipag-ugnay sa mga micro-interaksyon.

  1. Pagpapatuloy (at Kakayahang)

Ang mga elemento ng pakikipag-ugnay sa Micro ay dapat na banayad upang kapag ang isang gumagamit ay gumawa ng isang aksyon, mayroong isang tuluy-tuloy na daloy sa kanyang karanasan. Halimbawa, kung naglilikha kami ng isang pag-scroll animation sa isang mahabang feed, ang gumagamit ay dapat na nakatuon sa mga nilalaman ng pahina sa halip na ang pag-scroll ng sarili mismo.

2. Mahulaan

Ang kalidad ng mga micro-interaksyon ay may isang elemento ng mahuhulaan na nagbibigay-daan sa gumagamit upang mag-navigate ng isang produkto nang epektibo at mahusay. Ang gumagamit ay maaaring tumpak na mahulaan ang mga epekto ng kanilang mga aksyon, pakiramdam komportable na baligtarin ang mga ito, at tiwala sa kanilang kakayahang gumanap tulad ng inaasahan.

3. Pagbabago

Ang mga fluid transitions sa pagitan ng maraming mga screen at mahusay na tinukoy na mga pagbabagong-anyo ng iba't ibang mga bagay sa loob ng mga ito ay mga pangunahing aspeto ng kalidad ng mga micro-interaksyon. Pinapagana nila ang gumagamit na magkaroon ng isang madaling maunawaan na pag-unawa sa mga ugnayan sa pagitan ng mga screen at ng mga elemento sa loob nito.

Kapag idinisenyo ang pagsunod sa mga alituntuning ito, ang mga micro-interaksyon ay nagbibigay ng konteksto para sa isang disenyo sa pamamagitan ng pagtulong sa mga gumagamit na malaman kung paano makihalubilo dito. Ang isang micro-interaction ay isang panandaliang kaganapan na nakumpleto ang isang solong gawain. Ang mararangal na pinakamaliit na interactive na elemento ng isang website o disenyo ng app, ang mga micro-interaksyon ay ilan sa mga pinakamahalaga dahil nagsisilbi sila ng iba't ibang mga pangunahing pag-andar.

Ang mga nag-trigger (i-tap, swipe, drag, atbp) ay nagsisimula sa bawat isa sa mga aksyon na nakalista sa seksyon sa itaas (pagpapatuloy, pagkakahulaan at pagbabagong-anyo). Gumagawa ang isang aksyon sa isang website o app upang masimulan ang proseso (kahit na ito ay nagpapatuloy pagkatapos ng paunang hakbang). Sinusundan nito ang isang pattern ng call-to-action mula sa isang gumagamit, mga patakaran para sa pakikipag-ugnay na tinukoy ng interface (kung ano ang mangyayari at kung paano), puna mula sa gumagamit (nagtrabaho ba ito o hindi), at mga pattern o mga loop (ginagawa ang aksyon mangyari nang isang beses o ulitin sa isang iskedyul).

-Ang Mga Tagabuo at Disenyo ay Maaaring Magtulungan upang Magdala ng Mga Pakikipag-ugnayan sa Micro sa Buhay

Tulad ng nakikita mo, ang mga micro-interaksyon ay may kritikal na papel sa paghubog ng karanasan ng gumagamit. Dahil dito, sila ay naging isang mas mahalagang bahagi ng aking trabaho bilang isang taga-disenyo ng produkto. Ang pagkakaroon ng nagtrabaho sa iba't ibang mga proyekto sa maraming mga platform at paggamit, napansin ko na hindi lahat ay kinikilala ang halaga ng mga elementong ito o kung paano mabuo nang epektibo ang mga ito. Mas mahalaga, madalas na ang mga miyembro ng koponan ay hindi alam kung paano ipahayag ang kanilang mga ideya sa isa't isa tungkol sa pagdidisenyo ng mga paglilipat at mga pakikipag-ugnay sa micro.

Napagtanto ko ang lahat ng ito ay bumagsak sa komunikasyon - may isang bagay na nawala sa pagsasalin nang ipinaliwanag ko ang aking mga ideya sa disenyo sa aking mga developer. Maaaring narinig mo ang quote na ito mula kay Confucius bago, "Sabihin mo sa akin, at makakalimutan ko. Ipakita mo sa akin, at maaari kong matandaan. Isama mo ako, at maiintindihan ko. ”At ito ay sa pamamagitan ng paglahok kung saan tayo, bilang isang pangkat ng mga nagdidisenyo at nag-develop, ay lumilikha ng magagandang karanasan.

Una, patakbuhin ang isang mabilis na paglalarawan ng proseso ng disenyo ...

Sa isang perpektong sitwasyon, kapag ang isang taga-disenyo ay may ideya para sa isang micro-interaksyon, ang tradisyunal na daloy ng trabaho ay sumusunod sa sumusunod na pagkakasunud-sunod:

  1. Binuo ng taga-disenyo ang mga visual na elemento at mga epekto ng animation upang maisakatuparan ang kanyang ideya.
  2. Inihahatid ng taga-disenyo ang pangwakas na modelo at ang mga salungguhit na konsepto sa iba pang mga miyembro ng koponan.

Ngunit paano kung ang proseso ng disenyo ay hindi maglaro sa kasanayan tulad ng ginagawa nito sa teorya? Paano kung magpapakita kami ng isang storyboard o hindi kumpleto na modelo? O ibang tao sa koponan ang nagdidisenyo ng modelo?

Kapag nangyari ito, ang mga problema ay malamang na lumitaw sa pagtatanghal o pag-unlad. Ang mga problemang ito ay karaniwang nahuhulog sa isa sa tatlong kategorya:

  1. Ang ideya ng animation ay hindi maipapaliwanag nang malinaw.

Kung sinusubukan mong ilarawan ang isang konsepto ng animation na may mga salita o imahe pa rin, maaari kang makakita ng mga grimaces sa mga mukha ng iyong madla. Nangangahulugan ito na sinisikap nilang lubos na maunawaan ang iyong ideya, ngunit hindi nila ito nakuha. Kahit na nauunawaan nila ang pangunahing konsepto, ang larawan na kanilang naisip sa kanilang isip ay malamang na hindi naaayon sa iyong iniisip. Dahil ang mga tao ay may posibilidad na makakita ng gumagalaw na mga imahe, mga imahe pa rin, at mga paglalarawan ng pandiwang sa iba't ibang paraan, umasa sa mga salita o imahe upang maiparating ang ideya ng animasyon na lumilikha ng silid para sa maling impormasyon, at madalas na hindi kinakailangang pag-igting sa mga miyembro ng iyong koponan.

2. Hindi alam ng taga-disenyo kung gumagana nang maayos ang animation hanggang sa suriin nila at subukan ang prototype ng developer.

Kapag ang mga taga-disenyo ay walang mga kasanayan sa prototyping, limitado lamang sila sa pagtula ng kanilang mga ideya sa mga developer sa pamamagitan ng isang storyboard. Kahit na ang isang taga-disenyo ay malakas na naniniwala sa isang modelo ng micro-interaction, hindi niya masasabi kung nagtatrabaho ba ito sa buong potensyal nito hanggang sa makumpleto ng developer ang prototype. Ito ay may problemang para sa isang bilang ng mga kadahilanan, ang pangunahing isa ay ang mataas na posibilidad ng maling impormasyon na ang isang pamamaraan ay nagpapakilala sa proseso. Bilang karagdagan, binubuksan nito ang pintuan upang mag-alinlangan mula sa mga miyembro ng koponan, at humahantong sa mga katanungan tungkol sa pagiging posible ng ideya. Maaari itong magastos sa mga tuntunin ng oras mula sa isang pananaw sa pag-unlad.

3. Ang taga-disenyo at developer ay wala sa parehong pahina

Kapag ang mga taga-disenyo ay gumagawa ng mga animation ng UI o mga pakikipag-ugnay sa micro na sinubukan nilang isama ang mga kumplikadong detalye ng disenyo tulad ng mga pasadyang eases, script, expression, at iba pang mga epekto. Kapag ipinakita ang mga ideyang ito sa mga nag-develop, maaari nilang marinig, "Hindi posible na gawin ito sa aming timeline," o "Hindi namin ito eksaktong pareho ngunit susubukan namin." Sa puntong ito, maaari nilang subukang mag-abala ang iba't ibang mga detalye at teknikal na isyu sa mga nag-develop. Gayunpaman, ang mga talakayang ito ay maaaring magtapos ng pagiging walang bunga kung ang taga-disenyo ay walang isang nagtatrabaho kaalaman sa mga tool o ginagamit ng mga developer ng wika. Ang mga salik na ito ay dapat isaalang-alang kapag pagbabalangkas at pagtalakay sa mga ideya upang ang mga pakikipag-ugnay sa micro ay katugma sa mga setting ng default ng mga developer, pinatataas ang posibilidad na ang pangwakas na produkto ay nakakatugon sa mga pamantayan ng taga-disenyo (at sa iba pa).

Ano ang Ilang Mga Solusyon sa Mga Isyu?

Habang ang lahat ng mga taga-disenyo at developer ay may sariling paraan ng pakikipag-usap tungkol sa kanilang mga konsepto sa animation, nais kong ibahagi ang isa sa mga pamamaraan na ginagamit ng aking koponan. Ang pamamaraang ito ay medyo matagumpay at nagresulta sa mas kaunting mga pagpupulong at mabilis na napabuti ang komunikasyon ng aming koponan.

Ngayon, hindi na namin pinagtatalunan kung isasama man o hindi ang mga micro-interaksyon, kami ay nagsasaliksik ng mga paraan upang mas mapabuti ang mga ito!

Konsepto ng Pakikipag-ugnay ng Balangkas at Pakikipag-ugnay sa Balangkas

"Ang konsepto ng pakikipag-ugnay ng balangkas at gabay sa pakikipag-ugnay ay hindi nag-iiwan ng silid para sa pagpapakahulugan na nagbibigay-daan sa akin upang simulan ang trabaho kaagad at tiwala sa pagtutugma ng pangitain ng taga-disenyo." -Jesse M Majcher / Lead IOS engineer

Ang karaniwang proseso na ginagamit namin upang makipag-usap tungkol sa mga disenyo ng UX ay hindi maayos na isasalin para sa mga animation ng UI. Una, ang mga disenyo at daloy ng UX ay dinisenyo din ng screen sa pamamagitan ng screen at static. Ang mga animation ng UI ay dumadaloy sa kanilang sarili, sila ay likido, at batay sa tiyempo. Kapag lumikha kami ng isang static na disenyo, gumawa kami ng isang magaspang na wireframe upang maunawaan namin ang ideya at talakayin ang daloy. Pinapayagan ka nitong madaling suriin at maayos ang pag-disenyo ng disenyo bago kami lumikha ng pangwakas na bersyon. Sa sandaling sumang-ayon ang bawat miyembro ng koponan na ang disenyo ay handa na ibigay sa mga nag-develop, ang taga-disenyo ay nagbibigay ng tagabuo ng isang gabay na istilo at isang red-line na naglalaman ng mga detalye, specs, at iba pang mahalagang impormasyon tungkol sa disenyo.

Kung gumagamit kami ng isang katulad na proseso para sa mga animation, ang aming proseso ay maaaring maging mas mabilis at mas mahusay.

  1. Konsepto ng Pakikipag-ugnay ng Balangkas (Pag-aaral ng Paggalaw)

Ang konsepto ng pakikipag-ugnay ng balangkas ay katulad sa wireframe na iyong malilikha kapag nagdidisenyo ng daloy, ang pangunahing pagkakaiba ay ang mapaglarong / mai-click na prototype demo. Kung dadalhin natin ito sa isang pulong, ang mga miyembro ng aming koponan ay hindi kailangang gumamit ng kanilang mga guniguni upang maunawaan ang konsepto. Maaaring gamitin ng taga-disenyo ang mapaglarong / mai-click na demo o static story board upang direktang i-refer ang mga elemento ng visual at animation ng disenyo. Bibigyan nito ang bawat isa ng isang malinaw at tumpak na kahulugan ng kanyang ideya. Kaugnay nito, ang mga kasosyo ay maaaring maghatid ng puna na lubos na tiyak at, sa gayon, lubos na mahalaga sa taga-disenyo. Sa parehong oras, ang mga pamamahala ng produkto at mga koponan ng pag-unlad ay makakakuha ng impormasyon na magbibigay-daan sa kanila upang mapagbuti ang kanilang panloob na komunikasyon at mga pagtatantya ng oras para sa proyekto.

2. Patnubay ng Pakikipag-ugnay

Kapag sumang-ayon ang koponan sa konsepto, ang taga-disenyo ay lumilikha ng gabay sa pakikipag-ugnay. Ito ay katulad ng isang gabay sa estilo na binabalangkas nito ang posisyon, pag-ikot, sukat, at tiyempo ng mga elemento. Maaari naming idagdag ang bawat detalye tungkol sa mga animation, na makakatulong sa aming mga kasosyo na maunawaan ito nang malinaw. Kapag ipinakita ng taga-disenyo ang gabay sa pakikipag-ugnay sa kanilang mga kasosyo, maaari siyang maging mas malinaw tungkol sa paggalaw at pagsukat ng konsepto ng animation. Nakatutulong ito para sa pagwawakas sa trabaho sa pamamagitan ng pakikipagtulungan. Tumutulong din ito sa mga taga-disenyo na maging mas maalalahanin sa kanilang disenyo ng animation / micro-interaction.

3. Mga Kasanayang Prototyping para sa Mga Disenyo

Sa aking karanasan, upang itakda ang iyong sarili para sa isang matagumpay na pakikipagtulungan ng disenyo, ang taga-disenyo ng produkto ay dapat na driver ng animation, at dapat magbigay ng suporta ang developer. Nangangahulugan ito na ang taga-disenyo ng produkto ay nagdadala ng malaki sa responsibilidad sa pakikipagtulungan. Hindi lamang sila ang may pananagutan na ipaliwanag ang kanilang mga ideya nang malinaw, dapat nilang ipakita na magagawa nila sa pamamagitan ng pagbibigay ng patunay ng konsepto. Nangangahulugan din ito na ang mga taga-disenyo ng produkto ay kailangang may kakayahang gumawa ng kanilang sariling mga prototypes ng animation. Kung ang isang taga-disenyo ng produkto ay maaaring lumikha ng isang prototype at ipakita ito sa isang pulong, ang talakayan na sumusunod ay magiging mas malinaw at mas kaunting oras, na humahantong sa isang mas epektibong proseso ng komunikasyon sa pangkalahatan.

Kaya, anong mga uri ng mga tool na prototyping ang dapat ipakilala ng mga taga-disenyo? Maraming mga tool sa labas ngunit hindi alam ng lahat kung ano ang pinakamahusay na gumagana para sa mga tiyak na gawain sa micro-interaction. Narito ang aking mga rekomendasyon batay sa aking personal na karanasan sa pagdidisenyo ng mga elementong ito.

Kung pamilyar ka sa pag-coding:

  • Mobile: Xcode, studio sa Android
  • Mobile o Web: Framer
  • Web: CSS animation

Kung nais mong magdisenyo ng isang pakikipag-ugnayan sa pagitan ng isang tulad ng screen na push at isang module:

  • Imbitasyon at Marbel

Kung nais mong lumikha ng mas detalyadong mga pakikipag-ugnay:

  • Prinsipyo, Adobe CC, originami Studio at Pixate

Kung nais mong lumikha ng detalyadong mga pakikipag-ugnay + animation:

  • Pagkatapos ng Mga Epekto

Sa kasalukuyan, fan ako ng paggamit ng After Effect para sa aking prototyping. Kahit na hindi ito interactive (i-click na), ito ang perpektong paraan upang ipakita ang isang konsepto ng animation. Gayundin, walang limitasyon ng epekto at nagagawa mong kontrolin ang paggalaw ng detalye. Posible ring gamitin ito upang makagawa ng isang pakikipag-ugnay sa puwang ng 3D, tulad ng AR at VR.

Nakakatuwang Pakikipag-ugnayan sa Koponan Gumawa para sa Mga Masarap na Produkto

Ang mga pakikipag-ugnay sa Micro ay naging mas mahalaga - kung hindi kritikal - elemento ng web, disenyo ng mobile, at higit pa. Kahit na kinikilala ng parehong mga taga-disenyo at developer ang halaga ng mga animation ng UI at nais na lumikha ng mga ito, madalas silang nagpupumilit na makipagtulungan sa isang mahusay, epektibong paraan. Ito ay tumatagal ng isang malakas na koponan upang maipadala ang mahusay na micro-interaksyon sa oras; ang mga nasabing koponan ay nangangailangan ng malinaw na paglinis ng mga tungkulin, mabisang kasanayan sa komunikasyon, at ang tamang mga tool sa prototyping para sa mga gawain sa kamay.

Upang itakda ang iyong mga micro-interaksyon para sa tagumpay, siguraduhin na ang iyong koponan ay nagtataglay ng mga katangiang ito at makisali sa mga prosesong ito. At good luck sa iyong sariling micro-interaction na paglalakbay!

PAHALAGANG PAGSULAT: Ang mga kuru-kuro na ito ay ang may akda. Maliban kung mapapansin kung hindi man sa post na ito, ang Capital One ay hindi kaakibat, at hindi ito inendorso ng, alinman sa mga kumpanyang nabanggit. Ang lahat ng mga trademark at iba pang intelektuwal na pag-aari na ginamit o ipinapakita ay ang pagmamay-ari ng kani-kanilang mga may-ari. Ang artikulong ito ay © 2017 Capital One.

Para sa higit pa sa mga API, bukas na mapagkukunan, mga kaganapan sa komunidad, at kultura ng developer sa Capital One, bisitahin ang DevExchange, ang aming one-stop na portal ng developer: developer.capitalone.com.