Mikrointeraktsioonide ja kasutajaliidese animatsioonide elavdamine arendajate ja disainerite koostöö kaudu

Saame luua kasutajatele veetleva kogemuse mikrointeraktsioonide ja kasutajaliidese animatsioonide abil!

Tere, minu nimi on Kyo Kim ja ma olen umbes kaks aastat töötanud Capital One'is tootedisainerina. Olen kogu oma töö jooksul kasutanud mikrointeraktsioone ja animatsioone, sealhulgas mõnel mobiiliprojektil, mida olete võinud ise kasutada. Enne kui hakkasin tehnika alal tööle, oli mu taust filmis. Filmis keskendutakse kõik jutuvestmisele ja monteerimisele, et luua lugu, mis köidab publikut; ja suur osa sellest saavutatakse üleminekute abil. Leian, et need oskused on tänapäeval kasulikud, kui loon elamusi ja lugusid digitaalsete tööriistade jaoks.

Kujundades mõtlen teguritele, mis annaksid kasutajatele suurepärase ja veetleva kogemuse üleminekute ja jutuvestmise kaudu.

Selleks, et toode pakuks oma kasutajatele veetlevat kogemust, peab see pakkuma enamat kui esteetiliselt meeldivat disaini ja muljetavaldavaid animatsiooniefekte.

Sõltumata sellest, kas toode on rakendusepõhine, veebipõhine või mõni muu digitaalse toote vorm, peab see meelitama kasutajaid, olema neile kasutamiseks nauditav ja andma neile võimaluse sellega otseselt ja sisuliselt suhelda. tee.

Mikrointeraktsioonid on võimelised muutma kasutajakogemust veetlevaks ja rahuldust pakkuvaks viisil, mida paljud kujunduselemendid ei suuda. Enne kui hakkame tegelema mikrointeraktsioonidega tootedisaini kontekstis, alustame põhialustega.

Mis need on? Miks see on kasutajakogemusele kasulik? Miks peaksid disainerid ja arendajad neid oma töösse kaasama? Kuidas saavad tootedisaini meeskonnad nende parendamiseks koostööd teha?

Mis on mikrointeraktsioonid ja miks peaksime neist hoolima?

Mis on mikrointeraktsioonid või kasutajaliidese animatsioonid? Inimesed viitavad neile sageli kui kaunitele animatsioonidele, liikumisgraafikale või liikuva pildi kujundusele. Neid on siiski palju enamat.

Erinevalt teistest animatsiooni vormidest, mis eksisteerivad üksnes liikumise illusiooni loomiseks, kaasab mikrointeraktsioon kasutaja otse, võimaldades tal täita mitmesuguseid ülesandeid ning suhelda tootega intuitiivsel ja tõhusal viisil.

Kui siduda see hea süsteemidisaini põhimõtetega, suurendab ja võimaldab see süsteemis tagasisidet kasutajale. Kui see on õigesti tehtud, võtavad kasutajad mikrotoiminguid kasutaja sõnumina, et ta (süsteem) teeb vastuseks kasutaja vajadustele seda, mida ta peaks tegema.

Isegi kui te ei tea, mis on mikrotoimingud, suhtlete nendega regulaarselt. Iga kord, kui kasutate rakendust või veebipõhist toodet konkreetse ülesande täitmiseks - olgu selleks uudiste lugemine, ostu sooritamine, mängu mängimine, profiili loomine või seadete ja teavituseelistuste kohandamine -, moodustab iga teie tehtud üksiktoiming mikro-interaktsioon. Mikrointeraktsioonid on sujuvalt toote platvormiks kootud, muutes nende funktsioonid läbipaistvaks ja juurdepääsetavaks, parandades tõhusalt kasutaja üldist kogemust.

Ehkki need „toimingud” esinevad mitmel erineval kujul, on mõned levinumad näited järgmised:

  • Kui me "teisaldame" kauba virtuaalsesse ostukorvi.
  • Kui valime CTA-laadse lülitusnupu kahe valiku vahel.
  • Kui me tõmbame alla uudisvoo värskendamiseks ja värskeima värskenduse vaatamiseks.
  • Kui me pikemas söödas või lehel üles ja alla kerime.

Mikrointeraktsiooni kavandamisel peame uurima, kas see on kasutaja kogemuste jaoks tõesti vajalik ja ülioluline. Vastasel juhul võib see teie toodet tõhusalt kasutavat vormi häirida või visuaalseks müraks.

Mikrointeraktsioonide põhimõtted

Seal on kolm põhimõtet, mida ma alati mikrotehingute kavandamisel arvesse võtan.

  1. Järjepidevus (ja peenus)

Mikrointeraktsiooni elemendid peaksid olema peened, nii et kui kasutaja teeb toimingu, siis tema kogemus voolab pidevalt. Näiteks kui loome kerimisanimatsiooni pika vooga, peaks kasutajal olema võimalus keskenduda lehe sisule, mitte kerimisanimatsioonile endale.

2. Prognoositavus

Kvaliteetsel mikrointeraktsioonil on etteaimatavuse element, mis võimaldab kasutajal toote abil tõhusalt ja tõhusalt navigeerida. Kasutaja oskab täpselt ennustada oma tegevuse tagajärgi, tunda end mugavalt seda tagurdades ja olla kindel oma võimes ootuspäraselt toimida.

3. Transformeeritavus

Kvaliteetsete mikrotoimingute võtmeaspektid on vedelike üleminekud mitme ekraani vahel ja nendes asuvate erinevate objektide täpselt määratletud muundumised. Need võimaldavad kasutajal arendada intuitiivset arusaama ekraanide ja nendes olevate elementide vahelistest suhetest.

Neid põhimõtteid järgides pakuvad mikrointeraktsioonid kujunduse konteksti, aidates kasutajatel teada saada, kuidas sellega suhelda. Mikrointeraktsioon on hetkeline sündmus, mis täidab ühe ülesande. Vaieldamatult väikseimad interaktiivsed elemendid veebisaidi või rakenduse kujunduses on mikrolülide interaktsioonid ülimalt olulised, kuna need täidavad mitmesuguseid põhifunktsioone.

Päästikud (koputamine, pühkimine, lohistamine jne) algatavad kõik ülaltoodud jaotises loetletud toimingud (järjepidevus, ennustatavus ja teisendatavus). Protsessi alustamiseks teeb kasutaja toimingu veebisaidil või rakenduses (isegi kui see jätkub pärast esimest sammu). See järgib kasutaja tegevusele kutsumise mustrit, liidese poolt kindlaksmääratud kaasamise reegleid (mis juhtub ja kuidas), tagasisidet kasutajalt (kas see töötas või mitte) ja mustreid või silmuseid (kas toiming toimub juhtuda üks kord või korrata ajakavas).

-Kuidas arendajad ja disainerid saavad teha koostööd mikrointeraktsioonide ellu viimiseks

Nagu näete, on mikro-interaktsioonidel kasutajakogemuse kujundamisel kriitiline roll. Seetõttu on neist saanud üha olulisem osa minu tööst tootedisainerina. Olles töötanud mitmetel platvormidel ja erinevatel kasutusaladel olevate projektide kallal, olen märganud, et mitte kõik ei mõista nende elementide väärtust või seda, kuidas neid tõhusalt luua. Veelgi olulisem on see, et sageli ei tea meeskonnaliikmed, kuidas oma ideid üksteisele üleminekute kavandamise ja mikrotoiminguid väljendada.

Mõistsin, et see kõik langes kommunikatsioonini - tõlkimisel läks midagi kaduma, kui ma oma arendajatele oma disainiideid selgitasin. Võib-olla olete seda Konfutsiuse tsitaati juba varem kuulnud: “Öelge mulle ja ma unustan. Näita mulle ja ma võib-olla mäletan. Kaasake mind ja ma saan sellest aru. ”Ja just kaasamise kaudu loome me disainerite ja arendajate meeskonnana suurepäraseid kogemusi.

Kõigepealt tutvustame disainiprotsessi kiire kirjeldusega ...

Ideaalses olukorras, kui disainer pakub välja mikrointeraktsiooni idee, toimub traditsiooniline töövoog järgmises järjekorras:

  1. Kujundaja töötab välja visuaalsed elemendid ja animatsiooniefektid, mis on vajalikud tema idee realiseerimiseks.
  2. Kujundaja tutvustab teistele meeskonnaliikmetele lõppmudelit ja selle aluseks olevaid kontseptsioone.

Aga mis siis, kui disainiprotsess ei toimu praktikas nii, nagu see teoreetiliselt toimub? Mis saab siis, kui esitleme süžeeskeemi või mittetäielikku mudelit? Või kujundab mudelit keegi meeskonnast?

Kui see juhtub, tekivad tõenäoliselt probleemid esitluse või arendamisega. Need probleemid jagunevad tavaliselt ühte kolmest kategooriast:

  1. Animatsiooni ideed ei edastata piisavalt selgelt.

Kui proovite kirjeldada animatsiooni kontseptsiooni sõnade või stoppkaadrite abil, võite oma publiku nägudel näha grimasse. See tähendab, et nad proovivad teie ideest aru saada, kuid nad ei saa seda tegelikult kätte. Isegi kui nad saavad põhikontseptsioonist aru, on pilt, mida nad oma mõtetes võluvad, tõenäoliselt vastuolus teie kujutletavaga. Kuna inimesed kipuvad liikuvaid pilte, stoppkaadreid ja suulisi kirjeldusi tajuma erineval viisil, loob animatsiooniidee edastamine sõnadele või piltidele tuginedes ruumi valesti suhtlemiseks ja sageli teie meeskonna liikmete jaoks tarbetuks pingeks.

2. Kujundaja ei tea, kas animatsioon töötab hästi, kuni nad kontrollivad ja testivad arendaja prototüüpi.

Kui disaineritel pole prototüüpimisoskust, piirduvad nad oma ideede arendamisega süžeeskeemi kaudu arendajatele. Isegi kui disainer usub kindlalt mikrointeraktsiooni mudelisse, ei saa ta öelda, kas see töötab täies mahus, kuni arendaja on prototüübi valmis saanud. See on problemaatiline mitmel põhjusel, millest esmane on selline valesti suhtlemise tõenäosus, mida selline lähenemisviis protsessi sisestab. Lisaks avab see ukse meeskonna liikmete kahtlustele ja tekitab küsimusi idee teostatavuse kohta. See võib arengu seisukohast olla ajaliselt kulukas.

3. Kujundaja ja arendaja ei asu samal lehel

Kui disainerid teevad kasutajaliidese animatsioone või mikrointeraktsioone, püüavad nad kaasata keerulisi disaini üksikasju, nagu kohandatud lihtsustused, skriptid, avaldised ja muud efektid. Neid ideid arendajatele tutvustades võivad nad kuulda: “Seda pole meie ajajoonel võimalik teha” või “Me ei saa seda täpselt sama moodi teha, aga proovime.” Praegu võivad nad proovida räsi arendajatega mitmesuguseid üksikasju ja tehnilisi probleeme. Need arutelud võivad aga osutuda viljatuks, kui disaineril pole tööalaseid teadmisi tööriistade või keelte kohta, mida arendajad kasutavad. Neid tegureid tuleks ideede sõnastamisel ja arutamisel arvestada, nii et mikrointeraktsioonid oleksid ühilduvad arendaja vaikesätetega, suurendades tõenäosust, et lõpptoode vastab kujundaja (ja kõigi teiste) standarditele.

Millised on mõned lahendused nendele probleemidele?

Ehkki kõigil disaineritel ja arendajatel on oma animatsioonikontseptsioonide kohta oma suhtlusviis, soovin jagada ühte meetodit, mida minu meeskond kasutab. See meetod on olnud üsna edukas ja selle tulemuseks on vähem koosolekuid ning see on meie meeskonna suhtlust märkimisväärselt parandanud.

Nüüd ei vaidle me enam selle üle, kas lisada mikrotoiminguid või mitte, uurime võimalusi nende paremaks muutmiseks!

Skeleti interaktsiooni kontseptsioon ja koostoimimisjuhend

“Skeleti interaktsiooni kontseptsioon ja interaktsiooni juhend ei jäta tõlgendamisruumi, mis võimaldaks mul kohe tööle asuda ja olla kindel, et sobib disainerite visiooniga.” - Jesse M Majcher / juhtiv IOS-i insener

Standardprotsess, mida kasutame UX-kujunduste suhtlemiseks, ei tõlgi UI-animatsioonide puhul hästi. Esiteks, UX-i kujundused ja vood on endiselt ekraanilt ekraanilt kujundatud ja staatilised. Kasutajaliidese animatsioonid on iseenesest vood, need on sujuvad ja põhinevad ajastus. Staatilise kujunduse loomisel teeme töötlemata traatraami, et saaksime ideest aru saada ja voolu arutada. See võimaldab meil enne lõpliku versiooni loomist disaini hõlpsalt üle vaadata ja seda viimistleda. Kui iga meeskonnaliige on nõus, et kujundus on arendajatele valmis, edastab disainer arendajale stiilijuhendi ja punase joone, mis sisaldab detaile, tehnilisi andmeid ja muud olulist teavet kujunduse kohta.

Kui kasutaksime sarnast protsessi animatsioonide jaoks, võib meie protsess olla palju kiirem ja parem.

  1. Luustiku koostoime kontseptsioon (liikumisuuring)

Skeleti interaktsiooni kontseptsioon sarnaneb juhtraami abil, mille voo kujundamisel looksite, peamine erinevus seisneb selles, et see on mängitav / klõpsatav prototüübi demo. Kui toome selle koosolekule, ei pea meie meeskonna liikmed kontseptsiooni mõistmiseks oma kujutlusvõimet kasutama. Kujundaja saab kasutada mängitavat / klõpsatavat demo või staatilist storyboardi disaini visuaalsete ja animatsioonielementide otseseks viitamiseks. See annab kõigile oma idee selge ja täpse ülevaate. Partnerid saavad omakorda anda tagasisidet, mis on väga konkreetne ja seega disainerile väga väärtuslik. Samal ajal saavad tootehaldus- ja arendusmeeskonnad teavet, mis võimaldab neil parandada oma sisemist kommunikatsiooni ja projekti ajaprognoose.

2. Koostoime juhend

Kui meeskond on kontseptsioonis kokku leppinud, loob disainer interaktsiooni juhendi. See sarnaneb stiilijuhendiga selle poolest, et kirjeldab elementide asukohta, pöörlemist, ulatust ja ajastamist. Saame lisada iga detaili animatsioonide kohta, mis aitab meie partneritel seda selgelt mõista. Kui disainer näitab oma partneritele interaktsiooni juhendit, saab ta animatsiooni kontseptsiooni liikumise ja mõõtmise osas veelgi selgemaks. See on töö lõpuleviimisel koostöö kaudu väga kasulik. See aitab ka disaineritel olla animatsiooni / mikrointeraktsiooni kujundamisel läbimõeldum.

3. Disainerite prototüüpimisoskused

Minu kogemuse kohaselt peaks eduka disainikoostöö ettevalmistamiseks olema toote kujundaja animatsiooni ajend ja arendaja peaks seda toetama. See tähendab, et suurema osa partnerluse vastutusest kannab tootedisainer. Nad ei vastuta mitte ainult oma ideede väga selge selgitamise eest, vaid peavad näitama, et need on teostatavad kontseptsiooni tõestamise kaudu. See tähendab ka, et tootedisainerid peavad olema võimelised ise animatsiooni prototüüpe valmistama. Kui tootedisainer suudab prototüübi luua ja selle koosoleku ajal esitleda, on järgnev arutelu selgem ja aeganõudvam, mis viib üldise kommunikatsiooniprotsessi tulemuslikumaks.

Milliste prototüüpimisriistadega peaksid disainerid tutvuma? Seal on palju tööriistu, kuid mitte kõik ei tea, mis sobib konkreetsete mikrointeraktsiooni toimingute jaoks kõige paremini. Siin on minu soovitused, mis põhinevad minu isiklikul kogemusel nende elementide kujundamisel.

Kui olete kodeerimisega tuttav:

  • Mobiil: Xcode, Androidi stuudio
  • Mobiil või veeb: Framer
  • Veeb: CSS-i animatsioon

Kui soovite kujundada interaktsiooni ekraanitaolise tõuke ja mooduli vahel:

  • Invisioon ja Marbel

Kui soovite luua üksikasjalikumaid interaktsioone:

  • Põhimõte, Adobe CC, origami Studio ja Pixate

Kui soovite luua üksikasjalikke interaktsioone + animatsioone:

  • Järelmõjud

Praegu olen fänn, kes kasutab oma prototüüpide loomiseks After Effect'i. Isegi kui see pole interaktiivne (st klõpsatav), on see ideaalne viis animatsioonikontseptsiooni esitamiseks. Samuti pole mõju piiratud ja saate juhtida detaili liikumist. Seda on isegi võimalik kasutada 3D-ruumis interaktsiooni loomiseks, näiteks AR ja VR puhul.

Rõõmustav meeskondlik interaktsioon loob rõõmustavaid tooteid

Mikro interaktsioonid on muutunud üha olulisemaks - kui mitte kriitiliseks - veebi, mobiilse disaini ja muu elemendiks. Isegi kui nii disainerid kui ka arendajad tunnistavad kasutajaliidese animatsioonide väärtust ja on motiveeritud neid looma, näevad nad sageli vaeva tõhusa ja tulemusliku koostöö nimel. Suurepärase mikrointeraktsiooni õigeaegseks saatmiseks on vaja tugevat meeskonda; sellised meeskonnad vajavad rollide selget piiritlemist, tõhusaid suhtlemisoskusi ja õigeid prototüüpimisvahendeid antud ülesannete jaoks.

Mikrointeraktsioonide õnnestumiseks ettevalmistamiseks veenduge, et teie meeskonnal oleksid need omadused ja et nad oleksid nende protsessidega kursis. Ja palju õnne teie enda mikro-interaktsiooni teekonnal!

AVALIKUSTAMISE AVALDUS: Need arvamused on autori arvamused. Kui selles postituses ei ole märgitud teisiti, pole Capital One seotud ega kuulu ühegi nimetatud äriühinguga. Kõik kasutatavad või kuvatavad kaubamärgid ja muu intellektuaalomand on nende vastavate omanike omanduses. See artikkel on © 2017 Capital One.

Lisateavet Capital One'i API-de, avatud lähtekoodiga sündmuste, kogukonnaürituste ja arendajakultuuri kohta leiate DevExchange-st, meie ühest kohast pärit arendajaportaalist: developer.capitalone.com.