Gi mikro-interaksjon & UI-animasjon til live gjennom utviklere – designersamarbeid

Vi kan skape en herlig opplevelse for brukere gjennom mikro-interaksjon og UI-animasjon!

Hei, jeg heter Kyo Kim og har jobbet som produktdesigner hos Capital One i omtrent to år. Jeg har brukt mikro-interaksjoner og animasjon gjennom arbeidet mitt her, inkludert på noen mobilprosjekter du kanskje har brukt selv. Før jeg begynte å jobbe i tech, var bakgrunnen min i film. I film handler fokuset om historiefortelling og redigering for å skape en historie som engasjerer publikum; og mye av det oppnås ved bruk av overganger. Jeg finner de ferdighetene nyttige i dag når jeg lager erfaringer og historier for digitale verktøy.

Når jeg designer, tenker jeg på faktorer som vil gi brukerne en flott og herlig opplevelse med overganger og historiefortelling.

For at et produkt skal tilby sine brukere en herlig opplevelse, må det tilby mer enn estetisk tiltalende design og imponerende animasjonseffekter.

Uansett om produktet er appbasert, nettbasert eller noen annen form for digitalt produkt, må det trekke brukerne inn, være morsomt for dem å bruke, og gi dem muligheten til å engasjere seg i det på en direkte og meningsfull måte vei.

Mikrointeraksjoner har makt til å gjøre brukeropplevelsen herlig og tilfredsstillende på en måte som mange designelementer ikke kan. La oss starte med det grunnleggende før vi begynner på mikrointeraksjoner i forbindelse med produktdesign.

Hva er de? Hvorfor er det bra for brukeropplevelsen? Hvorfor skal designere og utviklere integrere dem i arbeidet sitt? Hvordan kan produktdesignteam samarbeide for å forbedre dem?

Hva er mikrointeraksjoner, og hvorfor skal vi bry oss om dem?

Hva er mikrointeraksjoner eller UI-animasjoner? Folk omtaler dem ofte som pene animasjoner, bevegelsesgrafikk eller bevegelig bildedesign. Imidlertid er de mye mer enn det.

I motsetning til andre former for animasjon som bare består for å skape en illusjon av bevegelse, engasjerer mikrointeraksjoner brukeren direkte, slik at han / hun kan utføre en rekke oppgaver og samhandle med produktet på en intuitiv og effektiv måte.

Hvis vi skulle knytte dette tilbake til prinsippene for god systemdesign, forbedrer og muliggjør systemfeedback for brukeren. Hvis det gjøres riktig, vil brukerne ta mikro-interaksjoner som en melding fra brukeren om at den (systemet) gjør det den skal gjøre som svar på det brukeren trenger.

Selv om du ikke vet hva mikrointeraksjoner er, samarbeider du med dem regelmessig. Hver gang du bruker en app eller nettbasert produkt for å utføre en bestemt oppgave - enten det er å lese nyhetene, gjøre et kjøp, spille et spill, lage en profil eller justere innstillingene og varslingsinnstillingene - utgjør hver enkelt handling du gjør et mikro-samspill. Mikrointeraksjoner er sømløst vevd inn i et produkts plattform, noe som gjør funksjonene deres transparente og tilgjengelige, og forbedrer brukerens samlede opplevelse effektivt.

Selv om disse "handlingene" har en rekke forskjellige former, inkluderer noen vanlige eksempler:

  • Når vi “flytter” en vare til en virtuell handlekurv.
  • Når vi velger mellom to alternativer på en CTA-lignende vippeknapp.
  • Når vi "trekker ned" for å oppdatere en nyhetsfeed og se den siste oppdateringen.
  • Når vi “blar opp og ned” i lang innmating eller side.

Når vi designer et mikrointeraksjon, må vi undersøke om det virkelig er nødvendig og viktig for brukerens opplevelse. Ellers har det potensialet til å distrahere brukerformen ved å bruke produktet ditt effektivt eller bli visuell støy.

Prinsipper for mikrointeraksjoner

Det er tre prinsipper som jeg alltid vurderer når jeg designer mikrointeraksjoner.

  1. Kontinuitet (og subtilitet)

Mikrointeraksjonselementer skal være subtile slik at når en bruker gjør en handling, er det en kontinuerlig flyt i opplevelsen. Hvis vi for eksempel lager en rulleanimasjon i en lang innmating, skal brukeren kunne fokusere på innholdet på siden i stedet for selve rulleanimasjonen.

2. Forutsigbarhet

Mikrointeraksjoner av høy kvalitet har et element av forutsigbarhet som gjør det mulig for brukeren å navigere i et produkt effektivt og effektivt. Brukeren kan nøyaktig forutsi effekten av handlingene sine, føle seg komfortabel med å reversere dem og være trygg på sin evne til å utføre som forventet.

3. Transformerbarhet

Fluidoverganger mellom flere skjermer og veldefinerte transformasjoner av de forskjellige objektene i dem er sentrale aspekter ved mikro-interaksjoner av høy kvalitet. De gjør det mulig for brukeren å utvikle en intuitiv forståelse av forholdet mellom skjermbilder og elementene i dem.

Når mikrointeraksjoner utformes etter disse prinsippene, gir kontekst for et design ved å hjelpe brukerne til å vite hvordan de skal samhandle med det. En mikro-interaksjon er en momentan hendelse som fullfører en enkelt oppgave. Det er uten tvil de minste interaktive elementene på et nettsted- eller app-design, mikro-interaksjoner er noen av de mest viktige siden de tjener en rekke kjernefunksjoner.

Utløsere (trykk, sveip, dra osv.) Initierer alle handlingene som er oppført i avsnittet ovenfor (kontinuitet, forutsigbarhet og transformerbarhet). Brukeren utfører en handling på et nettsted eller en app for å starte prosessen (selv om den fortsetter etter det første trinnet). Dette følger et mønster av oppfordring til handling fra en bruker, regler for engasjement som bestemmes av grensesnittet (hva som vil skje og hvordan), tilbakemelding fra brukeren (virket det eller ikke), og mønstre eller løkker (gjør handlingen skje en gang eller gjenta på en plan).

-Hvordan utviklere og designere kan samarbeide for å bringe mikro-interaksjoner til liv

Som du ser har mikrointeraksjoner en kritisk rolle i utformingen av brukeropplevelsen. På grunn av dette har de blitt en stadig viktigere del av mitt arbeid som produktdesigner. Etter å ha jobbet med forskjellige prosjekter på tvers av flere plattformer og bruksområder, har jeg lagt merke til at ikke alle erkjenner verdien av disse elementene eller hvordan de kan skape dem effektivt. Enda viktigere er at teammedlemmer ofte ikke vet hvordan de skal uttrykke ideene sine til hverandre angående utforming av overganger og mikrointeraksjoner.

Jeg skjønte at det hele kokte ned til kommunikasjon - noe gikk tapt i oversettelsen da jeg forklarte designideene mine til utviklerne mine. Du har kanskje hørt dette sitatet fra Confucius før, “Si meg, og jeg vil glemme. Vis meg, så husker jeg kanskje det. Involver meg, så vil jeg forstå. ”Og det er gjennom involvering der vi som et team av designere og utviklere skaper gode opplevelser.

Først, la oss løpe gjennom en rask beskrivelse av designprosessen ...

I en ideell situasjon, når en designer kommer med en ide om et mikro-samspill, fortsetter den tradisjonelle arbeidsflyten i følgende rekkefølge:

  1. Designeren utvikler de visuelle elementene og animasjonseffektene som er nødvendige for å aktualisere ideen.
  2. Designeren presenterer den endelige modellen og dens underliggende konsepter for de andre teammedlemmene.

Men hva om designprosessen ikke spiller ut i praksis som i teorien? Hva om vi presenterer et storyboard eller en ufullstendig modell? Eller er det noen andre på laget som designer modellen?

Når dette skjer, vil det sannsynligvis oppstå problemer i presentasjon eller utvikling. Disse problemene faller vanligvis inn i en av tre kategorier:

  1. Animasjonsideen blir ikke kommunisert tydelig nok.

Hvis du prøver å beskrive et animasjonskonsept med ord eller stillbilder, kan du se grimaser på ansiktene til publikum. Dette betyr at de prøver sitt beste for å forstå ideen din, men at de ikke får det til. Selv om de forstår det grunnleggende konseptet, er det sannsynligvis at bildet de har tryllet frem, ikke er i samsvar med det du ser for deg. Fordi folk har en tendens til å oppfatte bevegelige bilder, stillbilder og verbale beskrivelser på forskjellige måter, er det å stole på ord eller bilder for å formidle animasjonsideer rom for feilkommunikasjon, og ofte unødvendig spenning blant medlemmene i teamet ditt.

2. Designeren vet ikke om animasjonen fungerer bra før de sjekker og tester utviklerens prototype.

Når designere ikke har ferdigheter med prototyping, er de begrenset til å gi ideene sine til utviklere via et storyboard. Selv om en designer har stor tro på en mikro-interaksjonsmodell, kan han eller hun ikke si om den fungerer til sitt fulle potensial før utvikleren har fullført prototypen. Dette er problematisk av flere årsaker, den viktigste er den store sannsynligheten for feilkommunikasjon som en slik tilnærming introduserer i prosessen. I tillegg åpner det døren til tvil fra medlemmene av teamet, og fører til spørsmål om ideenes gjennomførbarhet. Dette kan være kostbart med tanke på tid fra et utviklingsperspektiv.

3. Designeren og utvikleren er ikke på samme side

Når designere lager UI-animasjoner eller mikrointeraksjoner, prøver de å inkludere komplekse designdetaljer som tilpassede forenklinger, skript, uttrykk og andre effekter. Når de presenterer disse ideene for utviklere, kan de høre: "Det er ikke mulig å lage dette på vår tidslinje," eller "Vi kan ikke gjøre det nøyaktig det samme, men vi vil prøve." På dette tidspunktet kan de prøve å hasj ut forskjellige detaljer og tekniske problemer med utviklerne. Imidlertid kan disse diskusjonene ende opp med å bli fruktløse hvis designeren ikke har arbeidskunnskap om verktøyene eller språkene utviklere bruker. Disse faktorene bør tas i betraktning når du formulerer og diskuterer ideer, slik at mikrointeraksjonene er kompatible med utviklerens standardinnstillinger, noe som øker sannsynligheten for at det endelige produktet oppfyller designeren (og alle andres) standarder.

Hva er noen løsninger på disse problemene?

Mens alle designere og utviklere har sin egen måte å kommunisere om animasjonskonseptene sine på, vil jeg dele en av metodene teamet mitt bruker. Denne metoden har vært ganske vellykket og har resultert i færre møter og har forbedret teamets kommunikasjon drastisk.

Nå krangler ikke lenger om vi skal inkludere mikrointeraksjoner eller ikke, vi undersøker måter å gjøre dem enda bedre på!

Skeleton Interaction Concept & Interaction Guide

"Skjelettinteraksjonskonseptet og samhandlingsguiden gir ikke rom for tolkning som gjør at jeg kan starte arbeidet umiddelbart og være trygg på å samsvare designerens visjon." –Jesse M Majcher / Lead IOS engineer

Standardprosessen vi bruker for å kommunisere om UX-design, kan ikke oversettes godt for brukergrensesnitt-animasjoner. For det første er UX-design og -flyt fremdeles designet skjerm for skjerm og er statiske. UI-animasjoner er strømmer i seg selv, de er flytende og basert på timing. Når vi lager et statisk design, lager vi en grov trådramme slik at vi kan forstå ideen og diskutere flyten. Dette lar oss enkelt revidere og finjustere designet før vi lager den endelige versjonen. Når hvert teammedlem er enig i at designen er klar til å levere ut til utviklerne, gir designeren utvikleren en stilguide og en rød linje som inneholder detaljer, spesifikasjoner og annen viktig informasjon om designen.

Hvis vi brukte en lignende prosess for animasjoner, kan prosessen vår være mye raskere og bedre.

  1. Skjelettinteraksjonskonsept (bevegelsesstudie)

Et skjelettinteraksjonskonsept ligner på wireframe du ville opprette når du utformer flyt. Hovedforskjellen er at dette er en spillbar / klikkbar prototypdemo. Hvis vi tar dette med på et møte, trenger ikke teammedlemmene å bruke fantasiene sine for å forstå konseptet. Designeren kan bruke spillbar / klikkbar demo eller statisk storyboard for å direkte referere til de visuelle og animasjonselementene i designet. Dette vil gi alle en klar og nøyaktig følelse av ideen sin. På sin side kan partnerne levere tilbakemeldinger som er svært spesifikke og dermed svært verdifulle for designeren. Samtidig vil produktstyrings- og utviklingsteamene få informasjon som gjør dem i stand til å forbedre sin interne kommunikasjon og tidsestimater for prosjektet.

2. Samhandlingsguide

Når teamet er enige om konseptet, lager designeren interaksjonsguiden. Dette ligner på en stilguide ved at den skisserer plasseringen, rotasjonen, skalaen og tidspunktet for elementene. Vi kan legge til alle detaljer om animasjonene, noe som vil hjelpe våre partnere å forstå det tydelig. Når designeren viser samhandlingsguiden til partnerne sine, kan han eller hun være enda tydeligere om bevegelsen og målingen av animasjonskonseptet. Dette er veldig nyttig for å avslutte arbeidet gjennom samarbeid. Det hjelper også designerne med å være mer gjennomtenkt i animasjons- / mikro-interaksjonsdesignet.

3. Prototyping ferdigheter for designere

Etter min erfaring, for å stille deg opp for et vellykket designsamarbeid, bør produktdesigneren være driveren for animasjonen, og utvikleren bør gi støtten. Dette betyr at produktdesigneren bærer hoveddelen av ansvaret i partnerskapet. Ikke bare er de ansvarlige for å forklare ideene sine veldig tydelig, de må vise at de er gjennomførbare ved å gi et bevis på konseptet. Det betyr også at produktdesignere må være i stand til å lage sine egne prototyper av animasjon. Hvis en produktdesigner kan lage en prototype og presentere den under et møte, vil diskusjonen som følger bli mer oversiktlig og mindre tidkrevende, noe som vil føre til en mer effektiv kommunikasjonsprosess generelt.

Så, hva slags prototypingverktøy bør designere gjøre seg kjent med? Det er mange verktøy der ute, men ikke alle vet hva som fungerer best for spesifikke mikrointeraksjonsoppgaver. Her er anbefalingene mine basert på min personlige erfaring med å utforme disse elementene.

Hvis du er kjent med koding:

  • Mobil: Xcode, Android-studio
  • Mobil eller nett: Framer
  • Nett: CSS-animasjon

Hvis du vil designe et samspill mellom en skjermlignende push og en modul:

  • Invision og Marbel

Hvis du vil lage mer detaljerte interaksjoner:

  • Prinsipp, Adobe CC, origami Studio og Pixate

Hvis du vil lage detaljerte interaksjoner + animasjon:

  • Etter effekter

For øyeblikket er jeg en fan av å bruke After Effect til prototypingen. Selv om det ikke er interaktivt (dvs. klikkbart), er det den perfekte måten å presentere et animasjonskonsept. Det er heller ingen begrensning av effekten, og du er i stand til å kontrollere detaljbevegelse. Det er til og med mulig å bruke det til å lage et samspill i 3D-rom, som for AR og VR.

Herlige teaminteraksjoner sørger for herlige produkter

Mikrointeraksjoner har blitt et stadig viktigere - om ikke kritisk - element i web, mobil design og mer. Selv om både designere og utviklere gjenkjenner verdien av UI-animasjoner og er motivert for å lage dem, sliter de ofte med å samarbeide på en effektiv og effektiv måte. Det krever et sterkt team å sende gode mikrointeraksjoner i tide; slike team krever klar avgrensning av roller, effektive kommunikasjonsevner og de rette prototypingverktøyene for oppgavene.

For å konfigurere mikrointeraksjonene dine for å lykkes, må du forsikre deg om at teamet ditt har disse egenskapene og involverer seg i disse prosessene. Og lykke til med din egen mikro-interaksjonsreise!

OPPLYSNINGER om avsløring: Disse meningene er av forfatteren. Med mindre annet er nevnt i dette innlegget, er Capital One ikke tilknyttet, og heller ikke godkjent av noen av selskapene som er nevnt. Alle varemerker og annen intellektuell eiendom som brukes eller vises, er eierskapet til deres respektive eiere. Denne artikkelen er © 2017 Capital One.

For mer om API-er, open source, community events og utviklerkultur på Capital One, besøk DevExchange, vår one-stop utviklerportal: Developer.capitalone.com.