Breng micro-interactie en UI-animatie tot leven door samenwerking tussen ontwikkelaars en ontwerpers

We kunnen een heerlijke ervaring voor gebruikers creëren door middel van micro-interactie en UI-animatie!

Hallo, mijn naam is Kyo Kim en ik werk nu ongeveer twee jaar als productontwerper bij Capital One. Ik heb tijdens mijn hele werk hier micro-interacties en animaties gebruikt, ook op sommige mobiele projecten die je misschien zelf hebt gebruikt. Voordat ik in de techniek begon te werken, was mijn achtergrond in de film. In film draait alles om verhalen vertellen en bewerken om een ​​verhaal te creëren dat het publiek boeit; en veel daarvan wordt bereikt door het gebruik van overgangen. Ik vind die vaardigheden vandaag nuttig als ik ervaringen en verhalen voor digitale hulpmiddelen creëer.

Wanneer ik aan het ontwerpen ben, denk ik aan factoren die gebruikers een geweldige, heerlijke ervaring met overgangen en verhalen kunnen geven.

Wil een product zijn gebruikers een heerlijke ervaring bieden, dan moet het meer bieden dan een esthetisch aantrekkelijk ontwerp en indrukwekkende animatie-effecten.

Ongeacht of het product app-gebaseerd, web-gebaseerd of een andere vorm van digitaal product is, het moet de gebruikers aantrekken, plezierig zijn voor hen om te gebruiken en hen de mogelijkheid bieden om er direct en zinvol mee te werken manier.

Micro-interacties hebben de kracht om de gebruikerservaring aangenaam en bevredigend te maken op een manier die veel ontwerpelementen niet kunnen. Voordat we in op micro-interacties gaan in de context van productontwerp, laten we beginnen met de basisprincipes.

Wat zijn zij? Waarom is het goed voor de gebruikerservaring? Waarom zouden ontwerpers en ontwikkelaars ze in hun werk opnemen? Hoe kunnen productontwerpteams samenwerken om ze te verbeteren?

Wat zijn micro-interacties en waarom zouden we ons om hen moeten bekommeren?

Wat zijn micro-interacties of UI-animaties? Mensen noemen ze vaak mooie animaties, bewegende beelden of bewegende afbeeldingen. Ze zijn echter veel meer dan dat.

In tegenstelling tot andere vormen van animatie die alleen bestaan ​​om de illusie van beweging te creëren, betrekken micro-interacties de gebruiker rechtstreeks, waardoor deze een verscheidenheid aan taken kan uitvoeren en op een intuïtieve en effectieve manier met het product kan communiceren.

Als we dit zouden koppelen aan principes van goed systeemontwerp, verbetert en maakt dit systeemfeedback voor de gebruiker mogelijk. Indien correct gedaan, zullen gebruikers micro-interacties als een bericht van de gebruiker nemen dat het (het systeem) doet wat het zou moeten doen in reactie op wat de gebruiker nodig heeft.

Zelfs als u niet weet wat micro-interacties zijn, gaat u regelmatig met ze om. Elke keer dat u een app of een webgebaseerd product gebruikt om een ​​bepaalde taak te volbrengen - of het nu gaat om het lezen van nieuws, het doen van een aankoop, het spelen van een game, het maken van een profiel of het aanpassen van uw instellingen en meldingsvoorkeuren - een micro-interactie. Micro-interacties worden naadloos verweven in het platform van een product, waardoor hun functies transparant en toegankelijk zijn, waardoor de algehele ervaring van de gebruiker effectief wordt verbeterd.

Hoewel deze 'acties' verschillende vormen aannemen, zijn enkele veelvoorkomende voorbeelden:

  • Wanneer we een artikel naar een virtuele winkelwagen "verplaatsen".
  • Wanneer we kiezen tussen twee opties op een CTA-achtige schakelknop.
  • Wanneer we "naar beneden trekken" om een ​​nieuwsfeed te vernieuwen en de nieuwste update te bekijken.
  • Wanneer we "omhoog en omlaag scrollen" in een lange feed of pagina.

Wanneer we een micro-interactie ontwerpen, moeten we onderzoeken of dit echt noodzakelijk en van vitaal belang is voor de ervaring van de gebruiker. Anders kan het de gebruikersvorm afleiden door uw product effectief te gebruiken of visuele ruis worden.

Principes van micro-interacties

Er zijn drie principes waar ik altijd rekening mee houd bij het ontwerpen van micro-interacties.

  1. Continuïteit (en subtiliteit)

Micro-interactie-elementen moeten subtiel zijn, zodat wanneer een gebruiker een actie uitvoert, er een continue stroom in zijn / haar ervaring is. Als we bijvoorbeeld een schuivende animatie in een lange feed maken, moet de gebruiker zich kunnen concentreren op de inhoud van de pagina in plaats van op de schuivende animatie zelf.

2. Voorspelbaarheid

Hoogwaardige micro-interacties hebben een element van voorspelbaarheid waarmee de gebruiker effectief en efficiënt door een product kan navigeren. De gebruiker kan de effecten van zijn acties nauwkeurig voorspellen, zich comfortabel voelen om ze om te keren en vertrouwen hebben in hun vermogen om te presteren zoals verwacht.

3. Transformeerbaarheid

Vloeibare overgangen tussen meerdere schermen en goed gedefinieerde transformaties van de verschillende objecten erin zijn belangrijke aspecten van hoogwaardige micro-interacties. Ze stellen de gebruiker in staat een intuïtief begrip te ontwikkelen van de relaties tussen schermen en de elementen erin.

Wanneer ontworpen volgens deze principes, bieden micro-interacties context voor een ontwerp door gebruikers te helpen weten hoe ze ermee moeten omgaan. Een micro-interactie is een tijdelijke gebeurtenis die een enkele taak voltooit. Ongetwijfeld de kleinste interactieve elementen van een website of app-ontwerp, micro-interacties zijn enkele van de meest vitale omdat ze een verscheidenheid aan kernfuncties dienen.

Triggers (tikken, vegen, slepen, enz.) Initiëren alle acties die in het bovenstaande gedeelte worden vermeld (continuïteit, voorspelbaarheid en transformeerbaarheid). De gebruiker voert een actie uit op een website of app om het proces te starten (zelfs als het doorgaat na de eerste stap). Dit volgt een patroon van call-to-action van een gebruiker, regels voor betrokkenheid zoals bepaald door de interface (wat zal er gebeuren en hoe), feedback van de gebruiker (werkte het of niet), en patronen of loops (doet de actie één keer gebeuren of volgens een schema herhalen).

-Hoe ontwikkelaars en ontwerpers kunnen samenwerken om micro-interacties tot leven te brengen

Zoals u ziet, spelen micro-interacties een cruciale rol bij het vormgeven van de gebruikerservaring. Hierdoor zijn ze een steeds belangrijker onderdeel geworden van mijn werk als productontwerper. Na aan verschillende projecten op meerdere platforms en toepassingen te hebben gewerkt, heb ik gemerkt dat niet iedereen de waarde van deze elementen erkent of hoe ze effectief kunnen worden gemaakt. Wat nog belangrijker is, is dat teamleden vaak niet weten hoe ze hun ideeën aan elkaar moeten uiten met betrekking tot het ontwerpen van overgangen en micro-interacties.

Ik realiseerde me dat het allemaal neerkwam op communicatie - er ging iets verloren in de vertaling toen ik mijn ontwerpideeën aan mijn ontwikkelaars uitlegde. Misschien heb je dit citaat van Confucius al eerder gehoord: 'Vertel het me en ik zal het vergeten. Laat het me zien en ik herinner het me misschien. Betrek me, en ik zal het begrijpen. ”En het is door betrokkenheid waar we, als een team van ontwerpers en ontwikkelaars, geweldige ervaringen creëren.

Laten we eerst een korte beschrijving van het ontwerpproces doornemen ...

In een ideale situatie, wanneer een ontwerper op het idee komt voor een micro-interactie, verloopt de traditionele workflow in deze volgorde:

  1. De ontwerper ontwikkelt de visuele elementen en animatie-effecten die nodig zijn om zijn / haar idee te realiseren.
  2. De ontwerper presenteert het uiteindelijke model en de onderliggende concepten aan de andere teamleden.

Maar wat als het ontwerpproces in de praktijk niet verloopt zoals in theorie? Wat als we een storyboard of een onvolledig model presenteren? Of is iemand anders in het team bezig met het ontwerpen van het model?

Wanneer dit gebeurt, zullen zich waarschijnlijk problemen voordoen bij de presentatie of ontwikkeling. Deze problemen vallen meestal in een van de volgende drie categorieën:

  1. Het animatie-idee wordt niet duidelijk genoeg gecommuniceerd.

Als u een animatieconcept met woorden of stilstaande beelden probeert te beschrijven, ziet u mogelijk grimassen op de gezichten van uw publiek. Dit betekent dat ze hun best doen om uw idee te begrijpen, maar ze begrijpen het niet echt. Zelfs als ze het basisconcept begrijpen, is het beeld dat ze in hun gedachten hebben opgeroepen waarschijnlijk niet consistent met wat u voor ogen heeft. Omdat mensen de neiging hebben om bewegende beelden, stilstaande beelden en verbale beschrijvingen op verschillende manieren waar te nemen, creëert het vertrouwen op woorden of beelden om animatie-ideeën over te brengen ruimte voor miscommunicatie en vaak onnodige spanning tussen de leden van uw team.

2. De ontwerper weet niet of de animatie goed werkt totdat hij het prototype van de ontwikkelaar controleert en test.

Wanneer ontwerpers geen prototypevaardigheden hebben, zijn ze beperkt tot het presenteren van hun ideeën aan ontwikkelaars via een storyboard. Zelfs als een ontwerper sterk gelooft in een micro-interactiemodel, kan hij of zij niet zeggen of het optimaal werkt totdat de ontwikkelaar het prototype heeft voltooid. Dit is om een ​​aantal redenen problematisch, de belangrijkste is de grote kans op miscommunicatie die een dergelijke aanpak in het proces introduceert. Bovendien opent het de deur om te twijfelen aan leden van het team en leidt het tot vragen over de haalbaarheid van het idee. Vanuit ontwikkelingsperspectief kan dit kostbaar zijn in termen van tijd.

3. De ontwerper en ontwikkelaar staan ​​niet op dezelfde pagina

Wanneer ontwerpers UI-animaties of micro-interacties maken, proberen ze complexe ontwerpdetails op te nemen, zoals aangepaste eases, scripts, expressies en andere effecten. Bij het presenteren van deze ideeën aan ontwikkelaars, zouden ze kunnen horen: "Het is niet mogelijk om dit in onze tijdlijn te maken," of "We kunnen het niet precies hetzelfde maken, maar we zullen het proberen." Op dit punt proberen ze misschien hash uit de verschillende details en technische problemen met de ontwikkelaars. Deze discussies kunnen echter vruchteloos zijn als de ontwerper geen praktische kennis heeft van de tools of talen die ontwikkelaars gebruiken. Met deze factoren moet rekening worden gehouden bij het formuleren en bespreken van ideeën, zodat de micro-interacties compatibel zijn met de standaardinstellingen van de ontwikkelaar, waardoor de kans groter wordt dat het eindproduct voldoet aan de normen van de ontwerper (en van iedereen).

Wat zijn enkele oplossingen voor deze problemen?

Hoewel alle ontwerpers en ontwikkelaars hun eigen manier van communiceren over hun animatieconcepten hebben, wil ik een van de methoden delen die mijn team gebruikt. Deze methode is behoorlijk succesvol geweest en heeft geleid tot minder vergaderingen en heeft de communicatie van ons team drastisch verbeterd.

Nu hebben we niet langer ruzie over het al dan niet opnemen van micro-interacties, we onderzoeken manieren om ze nog beter te maken!

Skeleton Interaction Concept & Interaction Guide

"Het skelet-interactieconcept en de interactiegids laten geen ruimte voor interpretatie waardoor ik meteen aan het werk kan en vol vertrouwen de visie van de ontwerper kan matchen." - Jesse M Majcher / Lead IOS-ingenieur

Het standaardproces dat we gebruiken om over UX-ontwerpen te communiceren, vertaalt zich niet goed in UI-animaties. Ten eerste worden UX-ontwerpen en -stromen nog steeds scherm voor scherm ontworpen en zijn ze statisch. UI-animaties zijn stromen op zichzelf, ze zijn vloeiend en gebaseerd op timing. Wanneer we een statisch ontwerp maken, maken we een ruw draadframe zodat we het idee kunnen begrijpen en de stroom kunnen bespreken. Hiermee kunnen we het ontwerp eenvoudig herzien en verfijnen voordat we de definitieve versie maken. Zodra elk teamlid ermee instemt dat het ontwerp klaar is om aan de ontwikkelaars te worden overhandigd, biedt de ontwerper de ontwikkelaar een stijlgids en een rode lijn met details, specificaties en andere belangrijke informatie over het ontwerp.

Als we een vergelijkbaar proces voor animaties zouden gebruiken, zou ons proces veel sneller en beter kunnen zijn.

  1. Skeleton Interaction Concept (Motion study)

Een skeletinteractieconcept is vergelijkbaar met het draadframe dat u zou maken bij het ontwerpen van flow, het belangrijkste verschil is dat dit een speelbare / klikbare prototype-demo is. Als we dit naar een vergadering brengen, hoeven onze teamleden hun verbeeldingskracht niet te gebruiken om het concept te begrijpen. De ontwerper kan de speelbare / klikbare demo of het statische storyboard gebruiken om rechtstreeks naar de visuele en animatie-elementen van het ontwerp te verwijzen. Dit geeft iedereen een duidelijk en nauwkeurig beeld van zijn / haar idee. Op hun beurt kunnen de partners feedback geven die zeer specifiek is en dus zeer waardevol voor de ontwerper. Tegelijkertijd krijgen de productmanagement- en ontwikkelingsteams informatie waarmee ze hun interne communicatie en tijdschattingen voor het project kunnen verbeteren.

2. Interactiehandleiding

Zodra het team het concept eens is, maakt de ontwerper de interactiegids. Dit is vergelijkbaar met een stijlgids omdat het de positie, rotatie, schaal en timing van de elementen schetst. We kunnen elk detail over de animaties toevoegen, waardoor onze partners het duidelijk kunnen begrijpen. Wanneer de ontwerper de interactiegids aan hun partners toont, kan hij of zij nog duidelijker zijn over de beweging en meting van het animatieconcept. Dit is zeer nuttig voor het voltooien van het werk door samenwerking. Het helpt de ontwerpers ook om bedachtzamer te zijn in hun animatie / micro-interactie-ontwerp.

3. Prototypingvaardigheden voor ontwerpers

Mijn ervaring is dat de productontwerper, als u zich wilt voorbereiden op een succesvolle ontwerpsamenwerking, de aansturing van de animatie moet zijn en de ontwikkelaar de ondersteuning moet bieden. Dit betekent dat de productontwerper het grootste deel van de verantwoordelijkheid in het partnerschap draagt. Ze zijn niet alleen verantwoordelijk voor het zeer helder uitleggen van hun ideeën, ze moeten ook aantonen dat ze haalbaar zijn door een proof of concept te leveren. Het betekent ook dat productontwerpers in staat moeten zijn om hun eigen animatie-prototypes te maken. Als een productontwerper een prototype kan maken en dit tijdens een vergadering kan presenteren, zal de volgende discussie duidelijker en minder tijdrovend zijn, wat leidt tot een effectiever communicatieproces in het algemeen.

Met wat voor prototyping-tools moeten ontwerpers zich dus vertrouwd maken? Er zijn veel tools beschikbaar, maar niet iedereen weet wat het beste werkt voor specifieke micro-interactietaken. Hier zijn mijn aanbevelingen op basis van mijn persoonlijke ervaring met het ontwerpen van deze elementen.

Als u bekend bent met codering:

  • Mobiel: Xcode, Android-studio
  • Mobiel of web: Framer
  • Web: CSS-animatie

Als u een interactie tussen een schermachtige push en een module wilt ontwerpen:

  • Invision en Marbel

Als u meer gedetailleerde interacties wilt maken:

  • Principe, Adobe CC, origami Studio en Pixate

Als u gedetailleerde interacties + animatie wilt maken:

  • After Effects

Momenteel ben ik een fan van het gebruik van After Effect voor mijn prototyping. Zelfs als het niet interactief is (d.w.z. klikbaar), is het de perfecte manier om een ​​animatieconcept te presenteren. Er is ook geen beperking van het effect en u kunt de detailbeweging regelen. Het is zelfs mogelijk om het te gebruiken om een ​​interactie in 3D-ruimte te maken, zoals voor AR en VR.

Heerlijke teaminteracties zorgen voor heerlijke producten

Micro-interacties zijn een steeds belangrijker - zo niet kritisch - element van web, mobiel ontwerp en meer geworden. Zelfs als zowel ontwerpers als ontwikkelaars de waarde van UI-animaties erkennen en gemotiveerd zijn om ze te maken, worstelen ze vaak om op een efficiënte, effectieve manier samen te werken. Er is een sterk team voor nodig om geweldige micro-interacties op tijd te verzenden; dergelijke teams vereisen een duidelijke afbakening van rollen, effectieve communicatievaardigheden en de juiste prototypingtools voor de taken die voor de hand zijn.

Om uw micro-interacties tot een succes te maken, moet u ervoor zorgen dat uw team deze kenmerken bezit en zich met deze processen bezighoudt. En veel geluk met je eigen micro-interactiereis!

OPENBAARHEIDSVERKLARING: Deze meningen zijn die van de auteur. Tenzij anders vermeld in deze functie, is Capital One niet gelieerd aan, noch wordt het onderschreven door een van de genoemde bedrijven. Alle handelsmerken en andere intellectuele eigendommen die worden gebruikt of weergegeven zijn eigendom van hun respectieve eigenaars. Dit artikel is © 2017 Capital One.

Ga voor meer informatie over API's, open source, community-evenementen en ontwikkelaarscultuur bij Capital One naar DevExchange, onze one-stop ontwikkelaarsportaal: developer.capitalone.com.