Giver mikro-interaktion & UI-animation til live gennem udviklere – designer-samarbejder

Vi kan skabe en dejlig oplevelse for brugerne gennem mikrointeraktion og UI-animation!

Hej, jeg hedder Kyo Kim og jeg har arbejdet som produktdesigner hos Capital One i cirka to år. Jeg har brugt mikrointeraktioner og animationer i hele mit arbejde her, inklusive på nogle mobilprojekter, du måske har brugt dig selv. Før jeg begyndte at arbejde i tech, var min baggrund i film. I film handler fokus om historiefortælling og redigering for at skabe en historie, der engagerer publikum; og meget af det opnås ved brug af overgange. Jeg finder disse evner nyttige i dag, når jeg skaber oplevelser og historier til digitale værktøjer.

Når jeg designer, tænker jeg på faktorer, der vil give brugerne en god, dejlig oplevelse med overgange og historiefortælling.

For at et produkt kan tilbyde sine brugere en dejlig oplevelse, skal det tilbyde mere end æstetisk tiltalende design og imponerende animationseffekter.

Uanset om produktet er app-baseret, webbaseret eller nogen anden form for digitalt produkt, skal det trække brugerne ind, være sjovt for dem at bruge og give dem muligheden for at engagere sig i det direkte og meningsfuldt vej.

Mikrointeraktioner har magten til at gøre brugeroplevelsen dejlig og tilfredsstillende på en måde, som mange designelementer ikke kan. Før vi går i gang med mikrointeraktioner i forbindelse med produktdesign, lad os starte med det grundlæggende.

Hvad er de? Hvorfor er det godt for brugeroplevelsen? Hvorfor skulle designere og udviklere integrere dem i deres arbejde? Hvordan kan produktdesignteam arbejde sammen for at forbedre dem?

Hvad er mikrointeraktioner, og hvorfor skal vi bryde os om dem?

Hvad er mikrointeraktioner eller UI-animationer? Folk omtaler ofte dem som smukke animationer, bevægelsesgrafik eller design af bevægende billeder. De er dog meget mere end det.

I modsætning til andre former for animation, der udelukkende findes for at skabe en illusion af bevægelse, involverer mikrointeraktioner direkte brugeren, hvilket gør ham / hende i stand til at udføre en række forskellige opgaver og interagere med produktet på en intuitiv og effektiv måde.

Hvis vi skulle binde dette tilbage til principper for god systemdesign, forbedrer dette og muliggør systemfeedback til brugeren. Hvis det gøres korrekt, vil brugerne tage mikrointeraktioner som en meddelelse fra brugeren om, at det (systemet) gør, hvad det skal gøre som svar på, hvad brugeren har brug for.

Selv hvis du ikke ved, hvad mikrointeraktioner er, samarbejder du regelmæssigt med dem. Hver gang du bruger en app eller et web-baseret produkt til at udføre en bestemt opgave - hvad enten det drejer sig om at læse nyhederne, foretage et køb, spille et spil, oprette en profil eller justere dine indstillinger og meddelelsespræferencer - udgør hver enkelt handling, du foretager, en mikro-interaktion. Mikrointeraktioner er problemfrit vævet ind i et produkts platform, hvilket gør deres funktioner gennemsigtige og tilgængelige, hvilket effektivt forbedrer brugerens samlede oplevelse.

Selvom disse "handlinger" antager en række forskellige former, inkluderer nogle almindelige eksempler:

  • Når vi "flytter" en vare til en virtuel indkøbsvogn.
  • Når vi vælger mellem to indstillinger på en CTA-lignende vippeknap.
  • Når vi "trækker ned" for at opdatere et nyhedsfeed og se den seneste opdatering.
  • Når vi “ruller op og ned” i lang feed eller side.

Når vi designer et mikrointeraktion, er vi nødt til at undersøge, om det virkelig er nødvendigt og vigtigt for brugerens oplevelse. Ellers har det potentialet til at distrahere brugerformularen ved hjælp af dit produkt effektivt eller blive visuel støj.

Principper for mikrointeraktioner

Der er tre principper, som jeg altid overvejer, når jeg designer mikrointeraktioner.

  1. Kontinuitet (og subtilitet)

Mikrointeraktionselementer skal være subtile, så når en bruger foretager en handling, er der en kontinuerlig strøm i hans / hendes oplevelse. For eksempel, hvis vi opretter en rulleanimation i en lang feed, skal brugeren være i stand til at fokusere på indholdet på siden i stedet for selve rulleanimationen.

2. Forudsigelighed

Mikrointeraktioner af høj kvalitet har et element af forudsigelighed, der gør det muligt for brugeren at navigere et produkt effektivt og effektivt. Brugeren kan præcist forudsige virkningerne af deres handlinger, føle sig godt tilpas med at vende dem og være sikker på deres evne til at udføre som forventet.

3. Transformabilitet

Væskeovergange mellem flere skærme og veldefinerede transformationer af de forskellige objekter inden i dem er centrale aspekter af mikro-interaktioner af høj kvalitet. De gør det muligt for brugeren at udvikle en intuitiv forståelse af forholdet mellem skærme og elementerne i dem.

Når mikro-interaktioner er designet efter disse principper, skabes et kontekst for et design ved at hjælpe brugerne med at vide, hvordan de interagerer med det. En mikrointeraktion er en øjeblikkelig begivenhed, der afslutter en enkelt opgave. Det er sandsynligt, at de mindste interaktive elementer i et websteds- eller appdesign er mikrointeraktioner nogle af de mest vigtige, da de tjener en række kernefunktioner.

Triggere (tryk, svej, træk osv.) Starter hver enkelt af de handlinger, der er anført i afsnittet ovenfor (kontinuitet, forudsigelighed og transformerbarhed). Brugeren udfører en handling på et websted eller en app for at starte processen (selvom den fortsætter efter det første trin). Dette følger et mønster af opfordring til handling fra en bruger, regler for engagement som bestemt af grænsefladen (hvad der vil ske og hvordan), feedback fra brugeren (virkede det eller ej) og mønstre eller sløjfer (gør handlingen sker en gang eller gentages på en tidsplan).

-Hvordan udviklere og designere kan arbejde sammen for at bringe mikro-interaktioner til live

Som du kan se, har mikrointeraktioner en kritisk rolle i udformningen af ​​brugeroplevelsen. På grund af dette er de blevet en stadig vigtigere del af mit arbejde som produktdesigner. Efter at have arbejdet på forskellige projekter på tværs af flere platforme og anvendelser, har jeg bemærket, at ikke alle anerkender værdien af ​​disse elementer, eller hvordan man skaber dem effektivt. Vigtigere er det, at teammedlemmer ofte ikke ved, hvordan de udtrykker deres ideer til hinanden om design af overgange og mikrointeraktioner.

Jeg indså, at det hele kogte ned til kommunikation - noget gik tabt i oversættelsen, da jeg forklarede mine designideer til mine udviklere. Du har muligvis hørt dette citat fra Confucius før, ”Fortæl mig, og jeg vil glemme. Vis mig, så husker jeg måske. Involver mig, så vil jeg forstå. ”Og det er gennem inddragelse, hvor vi som et team af designere og udviklere skaber store oplevelser.

Lad os først køre gennem en hurtig beskrivelse af designprocessen ...

I en ideel situation, når en designer opfinder en idé til et mikrointeraktion, fortsætter den traditionelle arbejdsgang i følgende rækkefølge:

  1. Designeren udvikler de visuelle elementer og animationseffekter, der er nødvendige for at aktualisere sin idé.
  2. Designeren præsenterer den endelige model og dens underliggende koncepter for de andre teammedlemmer.

Men hvad nu hvis designprocessen ikke spiller ud i praksis, som den gør i teorien? Hvad hvis vi præsenterer et storyboard eller en ufuldstændig model? Eller designer en anden på holdet modellen?

Når dette sker, vil der sandsynligvis opstå problemer i præsentation eller udvikling. Disse problemer falder typisk ind i en af ​​tre kategorier:

  1. Animationsideen kommunikeres ikke klart nok.

Hvis du prøver at beskrive et animationskoncept med ord eller stillbilleder, kan du muligvis se grimaser på dit publikums ansigter. Det betyder, at de prøver deres bedste for at forstå din idé, men de får ikke rigtig den. Selv hvis de forstår det grundlæggende koncept, er det billede, de har fremført i deres sind, sandsynligvis ikke i overensstemmelse med det, du forestiller dig. Fordi folk har en tendens til at opfatte bevægelige billeder, stillbilleder og verbale beskrivelser på forskellige måder, skaber man stole på ord eller billeder for at formidle animationsidee plads til miskommunikation og ofte unødvendig spænding blandt medlemmerne af dit team.

2. Designeren ved ikke, om animationen fungerer godt, indtil de kontrollerer og tester udviklerens prototype.

Når designere ikke har prototypefærdigheder, er de begrænset til at give deres ideer til udviklere via et storyboard. Selv hvis en designer stærkt tror på en mikro-interaktionsmodel, kan han eller hun ikke sige, om den fungerer til sit fulde potentiale, indtil udvikleren har afsluttet prototypen. Dette er problematisk af flere årsager, idet den primære er den store sandsynlighed for forkert kommunikation, som en sådan tilgang introducerer i processen. Derudover åbner det døren til tvivl fra teamets medlemmer og fører til spørgsmål om idéens gennemførlighed. Dette kan være dyrt med hensyn til tid fra et udviklingsperspektiv.

3. Designeren og udvikleren er ikke på den samme side

Når designere laver UI-animationer eller mikrointeraktioner, prøver de at inkludere komplekse designdetaljer som brugerdefinerede letter, scripts, udtryk og andre effekter. Når de præsenterer disse ideer for udviklere, kan de muligvis høre, "Det er ikke muligt at lave dette på vores tidslinje," eller "Vi kan ikke gøre det nøjagtigt det samme, men vi vil prøve." På dette tidspunkt kan de muligvis forsøge at hash redegør for de forskellige detaljer og tekniske problemer med udviklerne. Imidlertid kan disse diskussioner ende med at være frugtløse, hvis designeren ikke har et kendskab til de værktøjer eller sprog, som udviklere bruger. Disse faktorer skal tages i betragtning, når man formulerer og diskuterer ideer, så mikrointeraktionerne er kompatible med udviklerens standardindstillinger, hvilket øger sandsynligheden for, at det endelige produkt opfylder designerens (og alle andres) standarder.

Hvad er nogle af disse løsninger?

Mens alle designere og udviklere har deres egen måde at kommunikere om deres animationskoncepter på, ønsker jeg at dele en af ​​de metoder, mit team bruger. Denne metode har været ret succesrig og har resulteret i færre møder og har drastisk forbedret vores teams kommunikation.

Nu diskuterer vi ikke længere, om vi skal inkludere mikrointeraktioner eller ej, vi undersøger måder at gøre dem endnu bedre på!

Koncept- og interaktionsguide til skelet-interaktion

”Konceptet med skeletinteraktion og interaktionsguide giver ikke plads til fortolkning, som gør det muligt for mig at starte arbejdet med det samme og være sikker på at matche designerens vision.” –Jesse M Majcher / Lead IOS-ingeniør

Den standardproces, vi bruger til at kommunikere om UX-design, oversættes ikke godt til UI-animationer. For det første er UX-design og -strømme stadig designet skærm for skærm og er statiske. UI-animationer er strømme i sig selv, de er flydende og baseret på timing. Når vi opretter et statisk design, laver vi en grov wireframe, så vi kan forstå ideen og diskutere flowet. Dette giver os mulighed for let at revidere og finjustere designet, inden vi opretter den endelige version. Når hvert teammedlem er enig i, at designet er klar til at aflevere til udviklerne, giver designeren udvikleren en stilguide og en rød linje, der indeholder detaljer, specifikationer og anden vigtig information om designet.

Hvis vi brugte en lignende proces til animationer, var vores proces muligvis meget hurtigere og bedre.

  1. Skeleton interaction concept (bevægelsesundersøgelse)

Et skeletinteraktionskoncept svarer til den wireframe, du ville oprette, når du designer flow, den største forskel er, at dette er en spillbar / klikbar prototype-demo. Hvis vi bringer dette til et møde, er vores teammedlemmer ikke nødt til at bruge deres fantasi til at forstå konceptet. Designeren kan bruge det playable / clickable demo eller statiske storyboard til direkte at henvise til de visuelle og animerede elementer i designet. Dette giver alle en klar og præcis fornemmelse af hans / hendes idé. På sin side kan partnerne levere feedback, der er meget specifik og således meget værdifuld for designeren. Samtidig får produktstyrings- og udviklingsholdene oplysninger, der gør det muligt for dem at forbedre deres interne kommunikation og tidsestimater for projektet.

2. Interaktionsvejledning

Når teamet er enige om konceptet, opretter designeren interaktionsguiden. Dette ligner en stilguide, idet den skitserer elementernes position, rotation, skala og timing. Vi kan tilføje enhver detalje om animationerne, som vil hjælpe vores partnere med at forstå det tydeligt. Når designeren viser interaktionsguiden til deres partnere, kan han eller hun være endnu klarere med hensyn til bevægelse og måling af animationskonceptet. Dette er meget nyttigt til at afslutte arbejdet gennem samarbejde. Det hjælper også designerne med at være mere tankevækkende i deres animation / mikro-interaktion design.

3. Prototypefærdigheder for designere

Efter min erfaring, for at indstille dig til et vellykket designsamarbejde, skal produktdesigneren være driveren for animationen, og udvikleren skulle yde support. Dette betyder, at produktdesigneren bærer hovedparten af ​​ansvaret i partnerskabet. De er ikke kun ansvarlige for at forklare deres ideer meget tydeligt, de skal vise, at de er gennemførlige ved at fremlægge bevis for konceptet. Det betyder også, at produktdesignere skal være i stand til at lave deres egne animationsprototyper. Hvis en produktdesigner kan oprette en prototype og præsentere den under et møde, vil den følgende diskussion være mere klar og mindre tidskrævende, hvilket fører til en mere effektiv kommunikationsproces generelt.

Så hvilke slags prototyperingsværktøjer skal designere gøre sig bekendt med? Der er mange værktøjer derude, men ikke alle ved, hvad der fungerer bedst til specifikke mikrointeraktionsopgaver. Her er mine anbefalinger baseret på min personlige erfaring med at designe disse elementer.

Hvis du er bekendt med kodning:

  • Mobil: Xcode, Android-studio
  • Mobil eller web: Framer
  • Web: CSS-animation

Hvis du vil designe en interaktion mellem et skærmlignende push og et modul:

  • Invision og Marbel

Hvis du vil oprette mere detaljerede interaktioner:

  • Princip, Adobe CC, origami Studio og Pixate

Hvis du vil oprette detaljerede interaktioner + animation:

  • After Effects

I øjeblikket er jeg fan af at bruge After Effect til min prototype. Selvom det ikke er interaktivt (dvs. klikbart), er det den perfekte måde at præsentere et animationskoncept på. Der er heller ingen begrænsning af effekten, og du er i stand til at kontrollere detaljsbevægelse. Det er endda muligt at bruge det til at skabe en interaktion i 3D-rum, som for AR og VR.

Dejlige teaminteraktioner Gør til dejlige produkter

Mikrointeraktioner er blevet et stadig vigtigere - hvis ikke kritisk - element af web, mobil design og mere. Selv hvis både designere og udviklere anerkender værdien af ​​UI-animationer og er motiverede til at skabe dem, kæmper de ofte for at samarbejde på en effektiv og effektiv måde. Det kræver et stærkt team at sende store mikrointeraktioner til tiden; sådanne teams kræver en klar afgrænsning af roller, effektive kommunikationsevner og de rigtige prototype-værktøjer til de aktuelle opgaver.

For at indstille dine mikrointeraktioner til succes, skal du sørge for, at dit team har disse egenskaber og engagerer sig i disse processer. Og held og lykke med din egen mikrointeraktionsrejse!

OPGIVELSE AF BESKRIVELSE: Disse udtalelser er forfatterens. Medmindre andet er angivet i dette indlæg, er Capital One ikke tilknyttet eller er godkendt af nogen af ​​de nævnte virksomheder. Alle varemærker og anden intellektuel ejendom der bruges eller vises, er deres respektive ejers ejerskab. Denne artikel er © 2017 Capital One.

For mere om API'er, open source, community events og udviklerkultur på Capital One, kan du besøge DevExchange, vores one-stop udviklingsportal: Developer.capitalone.com.