Gör mikro-interaktion & UI-animering till liv genom utvecklare – Designer-samarbeten

Vi kan skapa en härlig upplevelse för användare genom mikrointeraktion och UI-animering!

Hej, jag heter Kyo Kim och jag har jobbat som produktdesigner på Capital One i ungefär två år. Jag har använt mikrointeraktioner och animering under hela mitt arbete här, inklusive på vissa mobilprojekt som du kanske har använt själv. Innan jag började arbeta inom tech var min bakgrund film. I film handlar allt om berättelser och redigering för att skapa en berättelse som engagerar publiken; och mycket av detta uppnås genom användning av övergångar. Jag tycker att dessa färdigheter är användbara idag när jag skapar upplevelser och berättelser för digitala verktyg.

När jag planerar tänker jag på faktorer som skulle ge användarna en fantastisk och härlig upplevelse med övergångar och berättelser.

För att en produkt ska kunna erbjuda sina användare en härlig upplevelse måste den erbjuda mer än estetiskt tilltalande design och imponerande animationseffekter.

Oavsett om produkten är appbaserad, webbaserad eller någon annan form av digital produkt, måste den dra användarna in, vara rolig för dem att använda och ge dem möjlighet att engagera sig i det direkt och meningsfullt sätt.

Mikrointeraktioner har kraften att göra användarupplevelsen förtjusande och tillfredsställande på ett sätt som många designelement inte kan. Innan vi går in på mikrointeraktioner i samband med produktdesign, låt oss börja med grunderna.

Vad är dem? Varför är det bra för användarupplevelsen? Varför ska designers och utvecklare integrera dem i deras arbete? Hur kan produktdesignteam arbeta tillsammans för att förbättra dem?

Vad är mikrointeraktioner och varför ska vi bry oss om dem?

Vad är mikrointeraktioner eller UI-animationer? Folk hänvisar ofta till dem som vackra animationer, rörelsegrafik eller design av rörliga bilder. Men de är mycket mer än så.

Till skillnad från andra former av animering som endast finns för att skapa en illusion av rörelse, engagerar mikro-interaktioner direkt användaren, vilket gör att han / hon kan utföra en mängd olika uppgifter och interagera med produkten på ett intuitivt och effektivt sätt.

Om vi ​​binder tillbaka detta till principerna för god systemdesign, förbättras och möjliggör systemåterkoppling för användaren. Om det görs korrekt kommer användarna att ta mikro-interaktioner som ett meddelande från användaren om att det (systemet) gör vad det ska göra som svar på vad användaren behöver.

Även om du inte vet vad mikrointeraktioner är, engagerar du dem regelbundet. Varje gång du använder en app eller webbaserad produkt för att utföra en viss uppgift - vare sig det är att läsa nyheterna, göra ett köp, spela ett spel, skapa en profil eller justera dina inställningar och meddelandepreferenser - utgör varje enskild handling du gör en mikro-interaktion. Mikrointeraktioner vävs sömlöst i en produkts plattform, vilket gör deras funktioner öppna och tillgängliga, vilket effektivt förbättrar användarens totala upplevelse.

Även om dessa "åtgärder" antar ett antal olika former inkluderar några vanliga exempel:

  • När vi "flyttar" ett objekt till en virtuell kundvagn.
  • När vi väljer mellan två alternativ på en CTA-liknande vippknapp.
  • När vi "drar ner" för att uppdatera ett nyhetsflöde och se den senaste uppdateringen.
  • När vi “bläddrar upp och ner” i lång feed eller sida.

När vi utformar en mikrointeraktion måste vi undersöka om det verkligen är nödvändigt och viktigt för användarens upplevelse. Annars har det potentialen att distrahera användarformuläret genom att använda din produkt effektivt eller bli visuellt brus.

Principer för mikrointeraktioner

Det finns tre principer som jag alltid tänker på när jag utformar mikrointeraktioner.

  1. Kontinuitet (och subtilitet)

Mikrointeraktionselement bör vara subtila så att när en användare gör en åtgärd finns det ett kontinuerligt flöde i hans / hennes upplevelse. Om vi ​​till exempel skapar en rullande animering i ett långt flöde, bör användaren kunna fokusera på innehållet på sidan snarare än själva rullande animationen.

2. Förutsägbarhet

Mikrointeraktioner av hög kvalitet har ett element av förutsägbarhet som gör det möjligt för användaren att navigera en produkt effektivt och effektivt. Användaren kan exakt förutsäga effekterna av sina handlingar, känna sig bekväm att vända dem och vara säker på sin förmåga att utföra som förväntat.

3. Transformabilitet

Vätskeövergångar mellan flera skärmar och väl definierade transformationer av de olika objekten inom dem är viktiga aspekter av mikro-interaktioner av hög kvalitet. De gör det möjligt för användaren att utveckla en intuitiv förståelse av förhållandena mellan skärmar och elementen inom dem.

När de är utformade enligt dessa principer ger mikrointeraktioner sammanhang för en design genom att hjälpa användare att veta hur de ska interagera med den. En mikrointeraktion är en kortvarig händelse som fullbordar en enda uppgift. Det är säkert de minsta interaktiva elementen i en webbplats- eller appdesign, mikro-interaktioner är några av de viktigaste eftersom de tjänar olika kärnfunktioner.

Triggers (knacka, svepa, dra osv) initierar alla åtgärder som anges i avsnittet ovan (kontinuitet, förutsägbarhet och transformerbarhet). Användaren utför en åtgärd på en webbplats eller app för att starta processen (även om den fortsätter efter det första steget). Detta följer ett mönster av uppmaning från en användare, regler för engagemang som bestäms av gränssnittet (vad som kommer att hända och hur), feedback från användaren (fungerade det eller inte) och mönster eller slingor (gör åtgärden hända en gång eller upprepa enligt ett schema).

-Hur utvecklare och designers kan arbeta tillsammans för att få mikro-interaktioner till liv

Som ni ser har mikrointeraktioner en avgörande roll för att utforma användarupplevelsen. På grund av detta har de blivit en allt viktigare del av mitt arbete som produktdesigner. Efter att ha arbetat med olika projekt på flera plattformar och användningsområden har jag lagt märke till att inte alla känner igen värdet på dessa element eller hur man skapar dem effektivt. Ännu viktigare är att teammedlemmar ofta inte vet hur man uttrycker sina idéer till varandra när det gäller att utforma övergångar och mikrointeraktioner.

Jag insåg att det hela kokade ner till kommunikation - något förlorades i översättningen när jag förklarade mina designidéer till mina utvecklare. Du kanske har hört detta citat från Confucius tidigare, "Säg mig, och jag kommer att glömma. Visa mig, och jag kanske kommer ihåg. Involvera mig, så kommer jag att förstå. ”Och det är genom engagemang där vi, som ett team av designers och utvecklare, skapar fantastiska upplevelser.

Först, låt oss gå igenom en snabb beskrivning av designprocessen ...

I en idealisk situation, när en designer tar upp en idé för en mikro-interaktion, fortsätter det traditionella arbetsflödet i följande ordning:

  1. Designern utvecklar de visuella elementen och animeringseffekterna som krävs för att aktualisera sin idé.
  2. Designern presenterar den slutliga modellen och dess underliggande koncept för de andra teammedlemmarna.

Men vad händer om designprocessen inte spelar ut i praktiken som i teorin? Vad händer om vi presenterar en storyboard eller en ofullständig modell? Eller utformar någon annan i teamet modellen?

När detta händer kommer det troligt att uppstå problem i presentation eller utveckling. Dessa problem ingår vanligtvis i en av tre kategorier:

  1. Animationsidén kommuniceras inte tydligt nog.

Om du försöker beskriva ett animationskoncept med ord eller stillbilder kan du se grimaser på dina publikers ansikten. Det betyder att de försöker sitt bästa för att förstå din idé, men de får inte riktigt den. Även om de förstår det grundläggande konceptet, är den bild som de har tänkt på i sinnen troligtvis inte i överensstämmelse med vad du föreställer dig. Eftersom människor tenderar att uppleva rörliga bilder, stillbilder och verbala beskrivningar på olika sätt, förlitar sig på ord eller bilder för att förmedla animationsidé skapar utrymme för felkommunikation och ofta onödig spänning bland medlemmarna i ditt team.

2. Designern vet inte om animeringen fungerar bra förrän de kontrollerar och testar utvecklarens prototyp.

När designers inte har prototyperfärdigheter är de begränsade till att släppa sina idéer till utvecklare via en storyboard. Även om en designer starkt tror på en mikrointeraktionsmodell kan han eller hon inte säga om den fungerar till dess fulla potential förrän utvecklaren har slutfört prototypen. Detta är problematiskt av ett antal skäl, varav den främsta är den stora sannolikheten för felkommunikation som en sådan metod introducerar i processen. Dessutom öppnar det dörren till tvivel från medlemmarna i teamet och leder till frågor om idéens genomförbarhet. Detta kan vara kostsamt när det gäller tid ur ett utvecklingsperspektiv.

3. Designer och utvecklare finns inte på samma sida

När designers gör UI-animationer eller mikrointeraktioner försöker de inkludera komplexa designdetaljer som anpassade lättnader, skript, uttryck och andra effekter. När de presenterar dessa idéer för utvecklare kan de höra: "Det är inte möjligt att göra det i vår tidslinje" eller "Vi kan inte göra det exakt samma, men vi kommer att försöka." På det här laget kan de försöka hash ta reda på de olika detaljerna och tekniska problemen med utvecklarna. Emellertid kan dessa diskussioner hamna fruktlösa om designern inte har kunskap om de verktyg eller språk som utvecklare använder. Dessa faktorer bör beaktas när man formulerar och diskuterar idéer så att mikrointeraktioner är kompatibla med utvecklarens standardinställningar, vilket ökar sannolikheten för att den slutliga produkten uppfyller designerns (och alla andras) standarder.

Vad är några lösningar på dessa problem?

Medan alla designers och utvecklare har sitt eget sätt att kommunicera om sina animationskoncept, vill jag dela en av metoderna som mitt team använder. Denna metod har varit ganska framgångsrik och har resulterat i färre möten och har förbättrat vårt teams kommunikation drastiskt.

Nu diskuterar vi inte längre om vi ska inkludera mikrointeraktioner eller inte, vi undersöker sätt att göra dem ännu bättre!

Skeleton Interaction Concept & Interaction Guide

”Skelettinteraktionskonceptet och interaktionsguiden lämnar inget utrymme för tolkning som gör att jag kan börja arbeta omedelbart och vara säker på att matcha designerns vision.” –Jesse M Majcher / Lead IOS ingenjör

Standardprocessen vi använder för att kommunicera om UX-design översätter inte bra för UI-animationer. Först och främst är UX-design och flöden fortfarande designade skärm för skärm och är statiska. UI-animationer är flöden i sig själva, de är flytande och baserade på timing. När vi skapar en statisk design skapar vi en grov trådram så att vi kan förstå idén och diskutera flödet. Detta gör att vi enkelt kan revidera och finjustera designen innan vi skapar den slutliga versionen. När varje teammedlem samtycker till att designen är redo att delas ut till utvecklarna, ger designern utvecklaren en stilguide och en röd linje som innehåller detaljer, specifikationer och annan viktig information om designen.

Om vi ​​använde en liknande process för animationer, kan vår process vara mycket snabbare och bättre.

  1. Skelettinteraktionskoncept (rörelsestudie)

Ett skelettinteraktionskoncept liknar den trådram som du skulle skapa när du utformar flöde, den största skillnaden är att detta är en spelbar / klickbar prototyp-demo. Om vi ​​tar detta till ett möte, behöver våra teammedlemmar inte använda sina fantasi för att förstå konceptet. Konstruktören kan använda den spelbara / klickbara demonstrationen eller statiska storyboard för att direkt referera till de visuella och animerade elementen i designen. Detta ger alla en tydlig och korrekt känsla av sin idé. I sin tur kan partnerna leverera feedback som är mycket specifik och därmed mycket värdefull för designern. Samtidigt kommer produktstyrning och utvecklingsteam att få information som gör det möjligt för dem att förbättra sin interna kommunikation och tidsberäkningar för projektet.

2. Interaktionsguide

När teamet är överens om konceptet skapar designern interaktionsguiden. Detta liknar en stilguide genom att den beskriver elementens position, rotation, skala och tidpunkt. Vi kan lägga till varje detalj om animationerna, vilket hjälper våra partners att förstå det tydligt. När designern visar interaktionsguiden till sina partners kan han eller hon bli ännu tydligare om rörelsen och mätningen av animationskonceptet. Detta är mycket användbart för att slutföra arbetet genom samarbete. Det hjälper också designers att vara mer tankeväckande i sin animering / mikro-interaktion design.

3. Prototypningsfärdigheter för designers

Enligt min erfarenhet, för att skapa dig själv för ett framgångsrikt designsamarbete, bör produktdesignern vara drivrutinen för animationen och utvecklaren borde ge stödet. Detta innebär att produktdesignern bär huvuddelen av ansvaret i partnerskapet. De är inte bara ansvariga för att förklara sina idéer mycket tydligt, de måste visa att de är genomförbara genom att tillhandahålla bevis på konceptet. Det betyder också att produktdesigners måste kunna skapa sina egna animationsprototyper. Om en produktdesigner kan skapa en prototyp och presentera den under ett möte kommer diskussionen som följer att bli mer tydlig och mindre tidskrävande, vilket leder till en mer effektiv kommunikationsprocess totalt sett.

Så, vilka typer av prototypningsverktyg bör designers bekanta sig med? Det finns många verktyg där ute, men inte alla vet vad som fungerar bäst för specifika mikrointeraktionsuppgifter. Här är mina rekommendationer baserade på min personliga erfarenhet av att utforma dessa element.

Om du är bekant med kodning:

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

Om du vill utforma en interaktion mellan en skärmliknande push och en modul:

  • Invision och Marbel

Om du vill skapa mer detaljerade interaktioner:

  • Princip, Adobe CC, origami Studio och Pixate

Om du vill skapa detaljerade interaktioner + animering:

  • Bieffekter

För närvarande är jag ett fan av att använda After Effect för min prototyper. Även om det inte är interaktivt (dvs. klickbart) är det det perfekta sättet att presentera ett animationskoncept. Det finns inte heller någon begränsning av effekten och du kan kontrollera detaljrörelsen. Det är till och med möjligt att använda det för att skapa en interaktion i 3D-rymden, som för AR och VR.

Härliga teaminteraktioner gör för underbara produkter

Mikrointeraktioner har blivit ett allt viktigare - om inte kritiskt - element i webb, mobildesign och mer. Även om både designers och utvecklare känner igen värdet av UI-animationer och är motiverade att skapa dem, kämpar de ofta för att samarbeta på ett effektivt och effektivt sätt. Det krävs ett starkt team för att skicka stora mikrointeraktioner i tid; sådana team kräver tydlig avgränsning av roller, effektiva kommunikationsförmågor och rätt prototypningsverktyg för uppgifterna.

För att sätta upp dina mikro-interaktioner för framgång, se till att ditt team har dessa egenskaper och engagerar sig i dessa processer. Och lycka till med din egen mikrointeraktionsresa!

UTSLÄPPNING: Dessa åsikter är författarens. Såvida inget annat anges i detta inlägg, är Capital One inte anslutet till eller stöds av något av de nämnda företagen. Alla varumärken och annan immateriell egendom som används eller visas är deras respektive ägare. Den här artikeln är © 2017 Capital One.

För mer om API: er, öppen källkod, community-evenemang och utvecklarkultur på Capital One, besök DevExchange, vår utvecklingsportal med ett enda stopp: Developer.capitalone.com.