Mikro-sąveikos ir vartotojo sąsajos animacijos atnaujinimas per kūrėjų ir dizainerių bendradarbiavimą

Naudodamiesi mikro sąveika ir UI animacija, galime sukurti vartotojams puikią patirtį!

Sveiki, mano vardas Kyo Kim ir aš maždaug dvejus metus dirbau „Capital One“ gaminių dizaineriu. Visame savo darbe naudojuosi mikro sąveikomis ir animacija, taip pat ir kai kuriuose mobiliuosiuose projektuose, kuriuos galbūt naudojote patys. Prieš pradėdamas dirbti technologijos srityje, mano darbas buvo kino srityje. Filme pagrindinis dėmesys skiriamas pasakojimui ir redagavimui, siekiant sukurti istoriją, kuri sudomintų auditoriją; ir daug to pasiekiama naudojant perėjimus. Manau, kad šie įgūdžiai yra naudingi šiandien, kai kuriu patirtį ir istorijas skaitmeninėms priemonėms.

Kurdamas dizainą galvoju apie veiksnius, kurie vartotojams suteiktų puikių, žavių įspūdžių iš perėjimų ir pasakojimų.

Kad produktas vartotojams pasiūlytų puikią patirtį, jis turi pasiūlyti ne tik estetinį dizainą ir įspūdingus animacijos efektus.

Nepriklausomai nuo to, ar produktas yra pagrįstas programomis, žiniatinkliu ar kitokios formos skaitmeniniu produktu, jis turi patraukti vartotojus, būti malonus jiems naudoti ir suteikti jiems galimybę tiesiogiai ir prasmingai su juo bendrauti. būdas.

Mikro-sąveika gali padaryti vartotojo patirtį žavinga ir patenkinanti tokiu būdu, kurio daugelis dizaino elementų negali. Prieš pradėdami vykdyti mikro-sąveiką gaminio projektavimo kontekste, pradėkime nuo pagrindų.

Kas jie tokie? Kodėl tai naudinga vartotojui? Kodėl dizaineriai ir kūrėjai turėtų juos įtraukti į savo darbą? Kaip gaminių projektavimo komandos gali dirbti kartu, kad jas patobulintų?

Kas yra mikro-sąveika ir kodėl mums jie turėtų rūpėti?

Kas yra mikro sąveika ar vartotojo sąsajos animacija? Žmonės dažnai juos vadina gražia animacija, judesio grafika ar judančio vaizdo dizainu. Tačiau jų yra kur kas daugiau.

Skirtingai nuo kitų animacijos formų, egzistuojančių vien tam, kad būtų sukurta judesio iliuzija, mikro-sąveika tiesiogiai įtraukia vartotoją, suteikdama jam galimybę atlikti įvairias užduotis ir sąveikauti su produktu intuityviai ir veiksmingai.

Jei tai susietume su gero sistemų projektavimo principais, tai pagerintų ir įgalintų sistemos grįžtamąjį ryšį vartotojui. Jei tai bus padaryta teisingai, vartotojai imsis mikro-sąveikos kaip vartotojo pranešimo, kad jis (sistema) daro tai, ką turėtų daryti reaguodamas į tai, ko vartotojui reikia.

Net jei nežinote, kas yra mikroįveikimas, reguliariai su jais bendraujate. Kiekvieną kartą, kai naudojate programą ar žiniatinklio produktą, kad atliktumėte tam tikrą užduotį - ar tai būtų naujienų skaitymas, pirkimas, žaidimas, profilio sukūrimas, ar nustatymų ar pranešimų nuostatų koregavimas - kiekvienas jūsų atliktas veiksmas yra mikro sąveika. Mikrointerakcijos yra vientisai sujungtos į produkto platformą, todėl jų funkcijos tampa skaidrios ir prieinamos, efektyviai pagerinant bendrą vartotojo patirtį.

Nors šie „veiksmai“ yra įvairių formų, keletas bendrų pavyzdžių yra šie:

  • Kai „perkeliame“ prekę į virtualų pirkinių krepšelį.
  • Kai pasirenkame vieną iš CTA tipo perjungimo mygtuko parinkčių.
  • Kai mes „atsitraukiame“ atnaujinti naujienų kanalą ir pamatyti naujausią naujinį.
  • Kai „slinkome aukštyn ir žemyn“ ilgame sklaidos kanale ar puslapyje.

Kurdami mikro sąveiką, turime išsiaiškinti, ar ji yra tikrai būtina ir gyvybiškai svarbi vartotojo patirčiai. Priešingu atveju tai gali atitraukti vartotojo formą veiksmingai naudojant jūsų gaminį arba tapti vizualiniu triukšmu.

Mikro-sąveikos principai

Yra trys principai, į kuriuos visada atsižvelgiu kurdamas mikroįveikimą.

  1. Tęstinumas (ir subtilumas)

Mikro-sąveikos elementai turėtų būti subtilūs, kad, kai vartotojas atliktų veiksmą, jo patirtis vyktų nuolat. Pvz., Jei mes sukuriame slinkties animaciją per ilgą sklaidos kanalą, vartotojas turėtų sugebėti sutelkti dėmesį į puslapio turinį, o ne į pačią slinkties animaciją.

2. Numatomumas

Kokybiška mikrointerakcija turi numatomumo elementą, leidžiantį vartotojui efektyviai ir efektyviai naršyti produktą. Vartotojas gali tiksliai nuspėti savo veiksmų padarinius, jaustis patogiai juos pakeisdamas ir įsitikinęs savo sugebėjimu atlikti, kaip tikėtasi.

3. Transformabilumas

Skysčių perėjimai tarp kelių ekranų ir aiškiai apibrėžtos įvairių juose esančių objektų transformacijos yra pagrindiniai kokybės mikro-sąveikos aspektai. Jie vartotojui suteikia galimybę intuityviai suprasti ryšį tarp ekranų ir juose esančių elementų.

Projektuojant pagal šiuos principus, mikro-sąveika sukuria kontekstą projektui, padėdami vartotojams žinoti, kaip su juo sąveikauti. Mikrointerakcija yra momentinis įvykis, užbaigiantis vieną užduotį. Be abejo, kad mažiausi interaktyvūs svetainės ar programos elementai, labai maža sąveika yra vieni svarbiausių, nes jie atlieka įvairias pagrindines funkcijas.

Paleidikliai (bakstelėjimas, perbraukimas, vilkimas ir tt) inicijuoja visus veiksmus, išvardytus aukščiau esančiame skyriuje (tęstinumas, nuspėjamumas ir transformabilumas). Norėdami pradėti procesą, vartotojas atlieka veiksmą svetainėje ar programoje (net jei jis tęsiasi atlikus pradinį veiksmą). Tai atliekama pagal vartotojo raginimą veikti modelį, įtraukimo taisykles, kurias nustato sąsaja (kas atsitiks ir kaip), grįžtamąjį ryšį iš vartotojo (ar jis veikė, ar ne), modelius ar kilpas (ar veiksmas įvykti vieną kartą arba pakartoti pagal tvarkaraštį).

-Kaip kūrėjai ir dizaineriai gali dirbti kartu, kad pritrauktų mikro sąveiką į gyvenimą

Kaip matote, labai maža sąveika vaidina svarbų vaidmenį formuojant vartotojo patirtį. Dėl šios priežasties jie tapo vis svarbesne mano, kaip gaminio dizainerio, dalimi. Dirbdamas prie įvairių projektų įvairiose platformose ir naudodamas juos, pastebėjau, kad ne visi supranta šių elementų vertę arba kaip juos efektyviai sukurti. Dar svarbiau, kad dažnai komandos nariai nežino, kaip išreikšti vieni kitiems savo idėjas, susijusias su perėjimų ir mikro-sąveikų projektavimu.

Supratau, kad visa tai sietina su bendravimu - kai kas buvo prarasta vertime, kai savo kūrėjams paaiškinau savo dizaino idėjas. Turbūt anksčiau girdėjote šią Konfucijaus citatą: „Pasakyk man, ir aš pamiršiu. Parodyk man, ir aš galbūt atsimenu. Įtraukite mane, ir aš suprasiu. “Ir būtent mes, būdami dizainerių ir kūrėjų komanda, sukuriame puikią patirtį dalyvaudami.

Pirmiausia trumpai aprašykime projektavimo procesą ...

Idealioje situacijoje, kai dizaineris sugalvoja mikro-sąveikos idėją, tradicinė darbo eiga vyksta tokia tvarka:

  1. Dizaineris kuria vizualinius elementus ir animacijos efektus, reikalingus savo idėjai aktualizuoti.
  2. Dizaineris pristato galutinį modelį ir jo pagrindines koncepcijas kitiems komandos nariams.

O kas, jei projektavimo procesas neatlieka praktikos, kaip tai daroma teoriškai? Kas būtų, jei pateiktume siužetinę siužetą ar neišsamų modelį? Arba kažkas kitas komandos narys kuria modelį?

Kai tai atsitiks, gali kilti problemų pateikiant ar tobulinant. Paprastai šios problemos skirstomos į vieną iš trijų kategorijų:

  1. Animacijos idėja nėra pakankamai aiškiai perteikta.

Jei bandysite apibūdinti animacijos sąvoką žodžiais ar nejudančiais vaizdais, auditorijos veiduose galite pamatyti grimasas. Tai reiškia, kad jie stengiasi kuo geriau suprasti jūsų idėją, bet iš tikrųjų jos nesupranta. Net jei jie supranta pagrindinę sąvoką, jų mintyse užfiksuotas vaizdas tikriausiai neatitinka jūsų įsivaizduojamo vaizdo. Kadangi žmonės judančius vaizdus, ​​nejudančius vaizdus ir žodinius aprašymus linkę suvokti skirtingai, pasikliaudami žodžiais ar vaizdais, norėdami perteikti animacijos idėją, sukuriate erdvę nesusikalbėjimui ir dažnai bereikalingai įtampai tarp jūsų komandos narių.

2. Dizaineris nežino, ar animacija veikia gerai, kol nepatikrins ir neišbandys kūrėjo prototipo.

Kai dizaineriai neturi prototipų kūrimo įgūdžių, jie apsiriboja savo idėjų kūrėjams pateikimu per siužetinę liniją. Net jei dizaineris tvirtai tiki mikro-sąveikos modeliu, jis / ji negali pasakyti, ar jis veikia visu pajėgumu, kol kūrėjas neužbaigs prototipo. Tai kelia problemų dėl daugelio priežasčių, iš kurių viena yra didelė klaidingo bendravimo tikimybė, kurią toks požiūris įveda į procesą. Be to, tai atveria duris abejoti komandos nariais ir sukelia klausimų apie idėjos įgyvendinamumą. Iš plėtros perspektyvos tai gali brangiai kainuoti.

3. Dizaineris ir kūrėjas nėra tame pačiame puslapyje

Kai dizaineriai kuria UI animacijas ar mikro-sąveikas, jie bando įtraukti sudėtingas dizaino detales, tokias kaip pasirinktiniai rinkiniai, scenarijai, išraiškos ir kiti efektai. Pateikdami šias idėjas kūrėjams, jie gali išgirsti: „Neįmanoma to padaryti mūsų laiko juostoje“ arba „Mes negalime to padaryti lygiai taip pat, bet bandysime“. Šiuo metu jie gali bandyti maišyti išsiaiškinkite įvairias detales ir technines problemas, susijusias su kūrėjais. Tačiau šios diskusijos gali baigtis bevaisėmis, jei dizaineris neturi darbinių žinių apie kūrėjų naudojamas priemones ar kalbas. Į šiuos veiksnius reikėtų atsižvelgti formuojant ir aptariant idėjas, kad mikro sąveika būtų suderinama su kūrėjų numatytaisiais nustatymais, padidindama tikimybę, kad galutinis produktas atitiks dizainerio (ir visų kitų) standartus.

Kokie yra keletas šių problemų sprendimų?

Nors visi dizaineriai ir kūrėjai turi savo būdą komunikuoti apie savo animacijos koncepcijas, norėčiau pasidalinti vienu iš metodų, kuriuos naudoja mano komanda. Šis metodas buvo gana sėkmingas, todėl buvo surengta mažiau susitikimų ir drastiškai pagerėjo mūsų komandos bendravimas.

Dabar mes nebesiginčijame dėl to, ar įtraukti mikroįveikimą, ar ne, mes ieškome būdų, kaip padaryti juos dar geresnius!

Skeleto sąveikos koncepcija ir sąveikos vadovas

„Skeleto sąveikos koncepcija ir sąveikos vadovas nepalieka erdvės interpretacijai, leidžiančiai man nedelsiant pradėti dirbti ir pasitikėti dizainerio vizija.“ - Jesse M Majcher / vadovaujanti IOS inžinierė

Įprastas procesas, kurį naudojame komunikuodami apie UX dizainus, UI animacija nėra gerai verčiami. Pirmiausia, UX dizainas ir srautai vis dar yra sukurti pagal ekraną ir yra statiški. UI animacijos yra srautai savaime, jie yra sklandūs ir pagrįsti laiku. Kurdami statinį dizainą, mes darome grubų vielos rėmą, kad galėtume suprasti idėją ir aptarti srautą. Tai leidžia mums lengvai peržiūrėti ir patikslinti dizainą prieš sukurdami galutinę versiją. Kai kiekvienas komandos narys sutinka, kad dizainas yra paruoštas kūrėjams, dizaineris pateikia kūrėjui stiliaus vadovą ir raudoną liniją, kurioje yra detalių, specifikacijų ir kitos svarbios informacijos apie dizainą.

Jei animacijai naudotume panašų procesą, mūsų procesas gali būti daug greitesnis ir geresnis.

  1. Skeleto sąveikos koncepcija (judesio tyrimas)

Skeleto sąveikos koncepcija yra panaši į vielos rėmą, kurį galėtumėte sukurti kurdami srautą, pagrindinis skirtumas yra tas, kad tai yra grojama / spustelėjama prototipo demonstracinė versija. Jei pateiksime tai į susitikimą, komandos nariams nereikės pasitelkti savo fantazijos, kad suprastumėte koncepciją. Dizaineris gali naudoti grojamą / spustelėjamą demonstracinę versiją arba statinę pasakojimo lentą, kad tiesiogiai nurodytų dizaino vaizdinius ir animacijos elementus. Tai leis visiems aiškiai ir tiksliai suprasti savo idėją. Savo ruožtu partneriai gali pateikti labai specifinį ir dizaineriui ypač vertingą grįžtamąjį ryšį. Tuo pačiu metu produktų valdymo ir kūrimo komandos gaus informaciją, kuri leis pagerinti vidinę komunikaciją ir projekto laiką.

2. Sąveikos vadovas

Kai komanda susitaria dėl idėjos, dizaineris sukuria sąveikos vadovą. Tai yra panašu į stiliaus vadovą tuo, kad jame išdėstoma elementų padėtis, pasukimas, mastelis ir laikas. Galime pridėti kiekvieną detalę apie animacijas, tai padės mūsų partneriams aiškiai suprasti. Kai dizaineris parodo sąveikos vadovą savo partneriams, jis ar ji gali dar aiškiau pasakyti apie animacijos koncepcijos judėjimą ir matavimą. Tai labai naudinga baigiant darbą bendradarbiaujant. Tai taip pat padeda dizaineriams būti labiau apgalvotiems kuriant animaciją / mikro-sąveiką.

3. Dizainerių prototipų kūrimo įgūdžiai

Mano patirtis rodo, kad norint sukurti sėkmingą bendradarbiavimą dizaino srityje, gaminio dizaineris turėtų būti animacijos variklis, o kūrėjas turėtų suteikti palaikymą. Tai reiškia, kad didžiąją dalį atsakomybės partnerystėje prisiima produkto dizaineris. Jie ne tik yra atsakingi už tai, kad labai aiškiai paaiškina savo idėjas, bet ir turi parodyti, kad jie yra įgyvendinami pateikiant koncepcijos įrodymą. Tai taip pat reiškia, kad gaminių dizaineriai turi sugebėti sukurti savo animacijos prototipus. Jei produkto dizaineris gali sukurti prototipą ir pristatyti jį susitikimo metu, tai sekanti diskusija bus aiškesnė ir užima mažiau laiko, o tai lems efektyvesnį bendravimo procesą.

Taigi, su kokiomis prototipų kūrimo priemonėmis dizaineriai turėtų susipažinti? Yra daugybė priemonių, tačiau ne visi žino, kas geriausiai tinka atliekant konkrečias mikro-sąveikos užduotis. Čia pateikiamos mano rekomendacijos, pagrįstos mano asmenine patirtimi kuriant šiuos elementus.

Jei esate susipažinęs su kodavimu:

  • Mobilusis: „Xcode“, „Android“ studija
  • Mobilusis arba žiniatinklis: „Framer“
  • Internetas: CSS animacija

Jei norite suprojektuoti sąveiką tarp ekrano pavidalo paspaudimo ir modulio:

  • Invizija ir Marbelis

Jei norite sukurti išsamesnę sąveiką:

  • Principas, „Adobe CC“, „origami Studio“ ir „Pixate“

Jei norite sukurti išsamią sąveiką + animaciją:

  • Poveikiai

Šiuo metu esu mėgėjas naudoti „After Effect“ savo prototipams kurti. Net jei jis nėra interaktyvus (t. Y. Spustelėjamas), jis yra puikus būdas pateikti animacijos koncepciją. Be to, efektas nėra ribojamas ir jūs galite valdyti detalių judėjimą. Tai netgi įmanoma naudoti, norint atlikti sąveiką 3D erdvėje, pavyzdžiui, AR ir VR.

Džiuginanti komandos sąveika sukuria puikius produktus

Mikro-sąveika tapo vis svarbesniu, jei ne kritišku, interneto, mobiliojo dizaino ir dar daugiau elementu. Net jei dizaineriai ir kūrėjai pripažįsta UI animacijų vertę ir yra motyvuoti jas kurti, jie dažnai stengiasi bendradarbiauti efektyviai, efektyviai. Tam, kad laiku atsiųstų puikią mikro-sąveiką, reikia stiprios komandos; tokioms komandoms reikia aiškiai apibrėžti vaidmenis, efektyvius bendravimo įgūdžius ir tinkamas prototipų kūrimo priemones, skirtas šioms užduotims atlikti.

Jei norite, kad jūsų mikro-sąveika būtų sėkminga, įsitikinkite, kad jūsų komanda turi šias savybes ir įsitraukia į šiuos procesus. Ir sėkmės jūsų pačių kelionėje į mikroįveikimą!

ATSKLEIDIMO PAREIŠKIMAS: Šios nuomonės yra tos pačios autorės. Jei šiame pranešime nenurodyta kitaip, „Capital One“ nėra susijusi su jokia iš paminėtų bendrovių ir jai jos nepatvirtina. Visi naudojami ar rodomi prekių ženklai ir kita intelektinė nuosavybė priklauso jų savininkams. Šis straipsnis yra © 2017 „Capital One“.

Norėdami sužinoti daugiau apie API, atvirojo kodo, bendruomenės renginius ir kūrėjų kultūrą „Capital One“, apsilankykite „DevExchange“, mūsų vieno langelio kūrėjų portale: developer.capitalone.com.