Mikro-mijiedarbības un lietotāja saskarnes animācijas uzlabošana, izmantojot izstrādātāju un dizaineru sadarbību

Mēs varam radīt apburošu pieredzi lietotājiem, izmantojot mikro mijiedarbību un UI animāciju!

Sveiki, mans vārds ir Kyo Kim, un es apmēram divus gadus strādāju par produktu dizaineru Capital One. Visu savu darbu šeit esmu izmantojis mikro-mijiedarbību un animāciju, tostarp dažos mobilajos projektos, kurus jūs, iespējams, esat izmantojis pats. Pirms sāku strādāt tehnoloģiju jomā, mana pieredze bija kino. Filmā galvenā uzmanība tiek pievērsta stāstu stāstīšanai un rediģēšanai, lai izveidotu stāstu, kas iesaistītu auditoriju; un daudz kas no tā tiek panākts, izmantojot pārejas. Šīs prasmes man šodien ir noderīgas, veidojot pieredzi un stāstus digitālajiem rīkiem.

Projektējot es domāju par faktoriem, kas lietotājiem sniegtu lielisku, apburošu pieredzi saistībā ar pārejām un stāstīšanu.

Lai produkts lietotājiem piedāvātu apburošu pieredzi, tam jāpiedāvā vairāk nekā estētiski patīkams dizains un iespaidīgi animācijas efekti.

Neatkarīgi no tā, vai produkts ir balstīts uz lietotnēm, tīmeklī vai kāda cita veida digitālu produktu, tam lietotājiem ir jāiesaistās, viņiem ir jābūt patīkamiem to izmantošanā un jādod viņiem iespēja tieši un jēgpilni iesaistīties tajā. veids.

Mikro mijiedarbība ir tāda, kas padara lietotāju pieredzi apburošu un apmierinošu tādā veidā, kā daudzi dizaina elementi to nevar. Pirms mēs iedziļināmies mikro mijiedarbībā produktu dizaina kontekstā, sāksim ar pamatiem.

Kas viņi ir? Kāpēc tas ir noderīgs lietotāja pieredzei? Kāpēc dizaineriem un izstrādātājiem tos vajadzētu iekļaut savā darbā? Kā produktu dizaina komandas var strādāt kopā, lai tās uzlabotu?

Kas ir mikro mijiedarbība un kāpēc mums vajadzētu par viņiem rūpēties?

Kas ir mikro mijiedarbība vai lietotāja interfeisa animācijas? Cilvēki tos bieži dēvē par glītām animācijām, kustības grafikām vai kustīgu attēlu noformējumu. Tomēr to ir daudz vairāk.

Atšķirībā no citiem animācijas veidiem, kas pastāv tikai un vienīgi, lai radītu kustības ilūziju, mikro-mijiedarbība tieši piesaista lietotāju, ļaujot viņam veikt dažādus uzdevumus un intuitīvi un efektīvi mijiedarboties ar produktu.

Ja mēs to sasaistītu ar labu sistēmu projektēšanas principiem, tas uzlabo un nodrošina sistēmas atgriezenisko saiti lietotājam. Ja tas tiek izdarīts pareizi, lietotāji izmantos mikro-mijiedarbību kā ziņojumu no lietotāja, ka tas (sistēma) dara to, kas tam jādara, atbildot uz to, kas lietotājam nepieciešams.

Pat ja jūs nezināt, kas ir mikro mijiedarbība, jūs regulāri iesaistāties tajās. Katru reizi, kad izmantojat lietotni vai tīmekļa produktu, lai veiktu noteiktu uzdevumu - vai tas būtu jaunumu lasīšana, pirkuma veikšana, spēles spēlēšana, profila izveidošana vai iestatījumu un paziņojumu preferenču pielāgošana - katra jūsu veiktā darbība mikro mijiedarbība. Mikro mijiedarbība tiek nemanāmi ieausta produkta platformā, padarot to funkcijas caurspīdīgas un pieejamas, efektīvi uzlabojot lietotāja kopējo pieredzi.

Lai arī šīs “darbības” notiek dažādos veidos, daži izplatīti piemēri ir šādi:

  • Kad mēs “pārvietojam” preci uz virtuālu iepirkumu grozu.
  • Kad mēs izvēlamies starp divām iespējām CTA līdzīgai pārslēgšanas pogai.
  • Kad mēs “atvelkamies”, lai atsvaidzinātu ziņu plūsmu un redzētu jaunāko atjauninājumu.
  • Kad mēs “ritinām uz augšu un uz leju” garajā plūsmā vai lapā.

Izstrādājot mikro-mijiedarbību, mums jāpārbauda, ​​vai tā ir patiešām nepieciešama un būtiska lietotāja pieredzei. Pretējā gadījumā tas var novērst lietotāju veidolu, efektīvi izmantojot jūsu produktu, vai kļūt par vizuālu troksni.

Mikro-mijiedarbības principi

Ir trīs principi, kurus es vienmēr ņemu vērā, izstrādājot mikro-mijiedarbību.

  1. Nepārtrauktība (un smalkums)

Mikro-mijiedarbības elementiem jābūt smalkiem, lai, lietotājam veicot darbību, viņa pieredzē notiktu nepārtraukta plūsma. Piemēram, ja mēs veidojam ritinošu animāciju garā plūsmā, lietotājam jāspēj koncentrēties uz lapas saturu, nevis pašu ritinošo animāciju.

2. Paredzamība

Kvalitatīvai mikro mijiedarbībai ir paredzamības elements, kas ļauj lietotājam efektīvi un produktīvi orientēties produktā. Lietotājs var precīzi paredzēt savas darbības ietekmi, justies ērti to pagriežot un būt pārliecināts par savām spējām veikt kā paredzēts.

3. Pārveidojamība

Šķidruma pārejas starp vairākiem ekrāniem un labi definētas dažādu objektu pārvērtības tajos ir galvenie kvalitātes mijiedarbības aspekti. Tie lietotājam ļauj intuitīvi izprast attiecības starp ekrāniem un tajos esošajiem elementiem.

Izstrādājot pēc šiem principiem, mikro-mijiedarbība nodrošina dizaina kontekstu, palīdzot lietotājiem zināt, kā ar to mijiedarboties. Mikro-mijiedarbība ir īslaicīgs notikums, kas pabeidz vienu uzdevumu. Iespējams, ka vismazākie interaktīvie vietnes vai lietotnes dizaina elementi ir ļoti svarīgi, lai mikro-mijiedarbība būtu nozīmīgākā, jo tā pilda dažādas pamatfunkcijas.

Aktivizētāji (pieskaršanās, vilkšana, vilkšana utt.) Iniciē visas darbības, kas uzskaitītas iepriekšējā sadaļā (nepārtrauktība, paredzamība un pārveidojamība). Lietotājs veic darbību vietnē vai lietotnē, lai sāktu procesu (pat ja tas turpinās pēc sākotnējās darbības). Tas notiek pēc lietotāja aicinājuma uz darbību modeļa, iesaistes noteikumiem, ko nosaka interfeiss (kas notiks un kā notiks), atsauksmes no lietotāja (vai tas darbojās vai nē) un modeļiem vai cilpām (vai darbība tiek veikta) notikt vienreiz vai atkārtot pēc grafika).

-Kā izstrādātāji un dizaineri var strādāt kopā, lai panāktu mikro-mijiedarbību dzīvē

Kā redzat, mikro mijiedarbībai ir izšķiroša loma lietotāja pieredzes veidošanā. Tādēļ viņi ir kļuvuši par aizvien nozīmīgāku daļu no mana darba kā izstrādātāju dizains. Strādājot pie dažādiem projektiem dažādās platformās un lietojumos, esmu ievērojis, ka ne visi apzinās šo elementu vērtību vai to, kā tos efektīvi izveidot. Vēl svarīgāk ir tas, ka bieži komandas locekļi nezina, kā savstarpēji izteikt savas idejas par pāreju un mikro-mijiedarbību plānošanu.

Es sapratu, ka tas viss ir saziņa - tulkojumā kaut kas tika zaudēts, kad izstrādātājiem paskaidroju savas dizaina idejas. Jūs, iespējams, jau iepriekš esat dzirdējis šo Konfūcija citātu: “Sakiet man, un es aizmirsīšu. Parādi man, un es varbūt atcerēšos. Iesaistiet mani, un es sapratīšu. ”Un tieši iesaistoties mēs kā dizaineru un izstrādātāju komanda izveidojam lielisku pieredzi.

Vispirms apskatīsim īsu projektēšanas procesa aprakstu ...

Ideālā situācijā, kad dizaineris nāk klajā ar ideju par mikro-mijiedarbību, tradicionālā darbplūsma notiek šādā secībā:

  1. Dizainers izstrādā vizuālos elementus un animācijas efektus, kas nepieciešami viņa idejas aktualizēšanai.
  2. Dizainers iepazīstina pārējos komandas locekļus ar galīgo modeli un tā pamatā esošajām koncepcijām.

Bet ko tad, ja projektēšanas process praktiski nespēlē tā, kā tas notiek teorētiski? Ko darīt, ja mēs parādīsim scenogrāfiju vai nepilnīgu modeli? Vai arī kāds cits komandas loceklis izstrādā modeli?

Kad tas notiek, iespējams, rodas problēmas prezentācijā vai izstrādē. Šīs problēmas parasti iedala vienā no trim kategorijām:

  1. Animācijas ideja nav pietiekami skaidra.

Ja mēģināt aprakstīt animācijas jēdzienu ar vārdiem vai nekustīgiem attēliem, auditorijas sejās var parādīties grimases. Tas nozīmē, ka viņi cenšas visu iespējamo, lai izprastu jūsu ideju, bet viņi to īsti neizmanto. Pat ja viņi saprot pamatjēdzienu, attēls, ko viņi uzbur viņu prātā, iespējams, neatbilst jūsu iecerētajam. Tā kā cilvēki mēdz uztvert kustīgus attēlus, nekustīgus attēlus un vārdiskus aprakstus dažādos veidos, paļaušanās uz vārdiem vai attēliem, lai nodotu animācijas ideju, rada telpu nepareizai saziņai un bieži vien nevajadzīgai spriedzei jūsu komandas locekļu starpā.

2. Dizaineris nezina, vai animācija darbojas labi, līdz viņš pārbauda un testē izstrādātāja prototipu.

Kad dizaineriem nav prototipu veidošanas iemaņu, viņi aprobežojas ar savu ideju virzīšanu izstrādātājiem, izmantojot scenogrāfiju. Pat ja dizainers ir pārliecināts par mikro-mijiedarbības modeli, viņš vai viņa nevar pateikt, vai tas darbojas pilnībā, līdz izstrādātājs ir pabeidzis prototipu. Tas ir problemātisks vairāku iemeslu dēļ, no kuriem galvenais ir nepareizas saziņas iespējamība, ko šāda pieeja ievieš procesā. Turklāt tas paver iespējas šaubīties no komandas locekļiem un rada jautājumus par idejas iespējamību. No attīstības viedokļa tas var dārgi izmaksāt laiku.

3. Dizainers un izstrādātājs neatrodas vienā lapā

Kad dizaineri veido UI animācijas vai mikro mijiedarbību, viņi mēģina iekļaut sarežģītas dizaina detaļas, piemēram, pielāgotos atvieglojumus, skriptus, izteicienus un citus efektus. Iepazīstinot ar izstrādātājiem šīs idejas, viņi var dzirdēt: “To nav iespējams izdarīt mūsu laika skalā” vai “Mēs nevaram to padarīt tieši tādu, bet mēs mēģināsim.” Šajā brīdī viņi var mēģināt sajaukt uzzināt dažādas detaļas un tehniskās problēmas ar izstrādātājiem. Tomēr šīs diskusijas var beigties bez rezultātiem, ja dizainerim nav darba zināšanu par izstrādātāju izmantotajiem rīkiem vai valodām. Šie faktori ir jāņem vērā, formulējot un apspriežot idejas, lai mikro-mijiedarbība būtu saderīga ar izstrādātāju noklusējuma iestatījumiem, palielinot varbūtību, ka galaprodukts atbildīs dizainera (un visu citu) standartiem.

Kādi ir daži risinājumi šiem jautājumiem?

Lai gan visiem dizaineriem un izstrādātājiem ir savs veids, kā sazināties par savām animācijas koncepcijām, es vēlos pastāstīt par vienu no metodēm, ko mana komanda izmanto. Šī metode ir bijusi diezgan veiksmīga, un tās rezultātā ir notikušas mazāk sanāksmju, un tā ir ievērojami uzlabojusi mūsu komandas komunikāciju.

Tagad mēs vairs nestrīdamies par to, vai iekļaut mikro mijiedarbību vai ne, mēs pētām veidus, kā tās vēl labāk uzlabot!

Skeleta mijiedarbības koncepcija un mijiedarbības ceļvedis

“Skeleta mijiedarbības koncepcija un mijiedarbības ceļvedis neatstāj vietu interpretācijai, kas man ļauj nekavējoties sākt darbu un būt pārliecinātai par dizainera redzes saskaņošanu.” - Džesija M Majčere / galvenā IOS inženiere

Standarta process, ko mēs izmantojam, lai sazinātos par UX dizainu, UI animācijām nav labs tulkojums. Pirmkārt, UX dizains un plūsmas joprojām tiek veidotas ekrānā un ir statiskas. UI animācijas pašas par sevi ir plūsmas, tās ir mainīgas un balstītas uz laiku. Veidojot statisku dizainu, mēs izgatavojam aptuvenu stiepļu rāmi, lai mēs varētu saprast ideju un apspriest plūsmu. Tas ļauj mums viegli pārskatīt un precīzi pielāgot dizainu pirms galīgās versijas izveidošanas. Kad katrs komandas loceklis piekrīt, ka dizains ir gatavs nodot izstrādātājiem, dizainers izstrādātājam nodrošina stila rokasgrāmatu un sarkano līniju, kurā ir detaļas, specifikācijas un cita svarīga informācija par dizainu.

Ja animācijām mēs izmantotu līdzīgu procesu, mūsu process varētu būt daudz ātrāks un labāks.

  1. Skeleta mijiedarbības koncepcija (kustības pētījums)

Skeleta mijiedarbības koncepcija ir līdzīga režģam, ko jūs izveidotu, izstrādājot plūsmu, galvenā atšķirība ir tā, ka šī ir demonstrējama / noklikšķināma prototipa demonstrācija. Ja mēs to ievedīsim sanāksmē, mūsu komandas locekļiem nevajadzēs izmantot viņu iztēli, lai saprastu koncepciju. Dizaineris var izmantot atskaņojamo / klikšķināmo demonstrāciju vai statisko stāstu dēli, lai tieši norādītu uz dizaina vizuālajiem un animācijas elementiem. Tas ikvienam ļaus skaidri un precīzi izprast savu ideju. Partneri, savukārt, var sniegt atgriezenisko saiti, kas ir ļoti specifiska un tādējādi ļoti vērtīga dizaineram. Tajā pašā laikā produktu vadības un attīstības komandas iegūs informāciju, kas viņiem ļaus uzlabot projekta iekšējo komunikāciju un laika aprēķinus.

2. Mijiedarbības ceļvedis

Kad komanda vienojas par koncepciju, dizainers izveido mijiedarbības rokasgrāmatu. Tas ir līdzīgs stila ceļvedim, jo ​​tajā ir aprakstīts elementu novietojums, rotācija, mērogs un laiks. Mēs varam pievienot katru detaļu par animācijām, kas palīdzēs mūsu partneriem to skaidri saprast. Kad dizainers rāda mijiedarbības ceļvedi saviem partneriem, viņš vai viņa var būt vēl skaidrāks par animācijas koncepcijas kustību un izmērīšanu. Tas ir ļoti noderīgi, lai pabeigtu darbu, sadarbojoties. Tas arī palīdz dizaineriem būt pārdomātākiem animācijas / mikro-mijiedarbības dizainā.

3. Dizaineru prasme veikt prototipēšanu

Pēc manas pieredzes, lai uzstādītu sevi veiksmīgai dizaina sadarbībai, animācijas virzītājspēks ir produkta dizainers, un izstrādātājam ir jāsniedz atbalsts. Tas nozīmē, ka lielāko daļu partnerības atbildības uzņemas produkta dizainers. Viņi ir ne tikai atbildīgi par savu ideju ļoti skaidru izskaidrošanu, bet arī viņiem ir jāparāda, ka tie ir realizējami, iesniedzot koncepcijas pierādījumus. Tas arī nozīmē, ka produktu dizaineriem jāspēj izgatavot paši savus animācijas prototipus. Ja produkta dizainers var izveidot prototipu un prezentēt to sanāksmes laikā, tad sekojošā diskusija būs skaidrāka un mazāk laikietilpīga, kā rezultātā komunikācijas process kopumā būs efektīvāks.

Ar kādiem prototipēšanas rīkiem dizaineriem vajadzētu iepazīties? Tur ir daudz rīku, taču ne visi zina, kas vislabāk der īpašiem mikro-mijiedarbības uzdevumiem. Šie ir mani ieteikumi, kuru pamatā ir mana personīgā pieredze, veidojot šos elementus.

Ja esat pazīstams ar kodēšanu:

  • Mobilais: Xcode, Android studija
  • Mobilais vai Web: Framer
  • Web: CSS animācija

Ja vēlaties izveidot mijiedarbību starp ekrānam līdzīgu push un moduli:

  • Invizija un Marbela

Ja vēlaties izveidot detalizētāku mijiedarbību:

  • Princips, Adobe CC, origami Studio un Pixate

Ja vēlaties izveidot detalizētu mijiedarbību + animāciju:

  • Pēc efektiem

Pašlaik es esmu ventilatoru, kas izmanto After Effect, lai izveidotu savu prototipu. Pat ja tas nav interaktīvs (t.i., noklikšķināms), tas ir ideāls veids, kā parādīt animācijas koncepciju. Turklāt efekts nav ierobežots, un jūs varat kontrolēt detaļu kustību. To pat ir iespējams izmantot, lai izveidotu mijiedarbību 3D telpā, piemēram, AR un VR.

Apburoša komandas mijiedarbība nodrošina apburošus produktus

Mikro-mijiedarbība ir kļuvusi par aizvien nozīmīgāku - ja pat ne kritisku - tīmekļa, mobilā dizaina u. C. Elementu. Pat ja gan dizaineri, gan izstrādātāji atzīst UI animāciju vērtību un ir motivēti tās radīt, viņi bieži cīnās par efektīvu un rezultatīvu sadarbību. Lai savlaicīgi nosūtītu lielisku mikro-mijiedarbību, nepieciešama spēcīga komanda; šādām komandām ir nepieciešama skaidra lomu noteikšana, efektīvas komunikācijas prasmes un pareizie prototipu veidošanas rīki, kas nepieciešami attiecīgajiem uzdevumiem.

Lai jūsu mikro-mijiedarbība būtu veiksmīga, pārliecinieties, vai jūsu komandai piemīt šīs īpašības un ir iesaistīta šajos procesos. Un veiksmi jūsu pašu mikro-mijiedarbības ceļojumā!

PAZIŅOJUMS PAR ATKLĀŠANU: Šie ir autora viedokļi. Ja vien šajā amatā nav norādīts citādi, Capital One nav saistīts ar nevienu no minētajiem uzņēmumiem un to neapstiprina. Visas izmantotās vai attēlotās preču zīmes un cits intelektuālais īpašums ir to attiecīgo īpašnieku īpašumā. Šis raksts ir © 2017 Capital One.

Lai uzzinātu vairāk par API, atvērtā pirmkoda, kopienas pasākumiem un izstrādātāju kultūru Capital One, apmeklējiet DevExchange, mūsu vienas pieturas izstrādātāju portālu: developer.capitalone.com.