Afavorir la vida de la microinteraccionització i la animació d'interès de la web mitjançant col·laboracions de desenvolupador-dissenyador

Podem crear una experiència deliciosa per als usuaris mitjançant la microinteracció i l'animació de la interfície d'usuari.

Hola, em dic Kyo Kim i treballo com a dissenyador de productes a Capital One des de fa uns dos anys. Durant tot el meu treball he estat utilitzant microinteraccions i animació, inclòs en alguns projectes mòbils que potser heu utilitzat vosaltres mateixos. Abans de començar a treballar en tecnologia, la meva història era el cinema. En el cinema, el focus es basa en la narració de contes i l’edició per crear una història que comprometi el públic; i gran cosa s’aconsegueix mitjançant l’ús de transicions. Actualment trobo útils aquestes habilitats a mesura que creo experiències i històries per a eines digitals.

Quan dissenyo, penso en factors que permetrien als usuaris una experiència fantàstica i divertida amb transicions i narracions.

Perquè un producte ofereixi als seus usuaris una experiència deliciosa, ha d’oferir un disseny més que agradable estèticament i uns efectes d’animació impressionants.

Independentment de si el producte està basat en l’aplicació, basat en la web o qualsevol altra forma de producte digital, ha d’atraure els usuaris, ser agradable per utilitzar-los i donar-los l’oportunitat de relacionar-s’hi de manera directa i significativa. manera.

Les micro-interaccions tenen el poder de fer que l’usuari experimenti una satisfacció i una satisfacció de manera que molts elements de disseny no puguin. Abans d’entrar en microinteraccions en el disseny del producte, comencem pels fonaments bàsics.

Que són ells? Per què és bo per a l’experiència de l’usuari? Per què els dissenyadors i desenvolupadors els han d’incorporar a la seva feina? Com poden treballar els equips de disseny de productes per millorar-los?

Què són les microinteraccions i per què ens hem de preocupar?

Què són les micro-interaccions o animacions d'IU? Les persones sovint es refereixen a ells com a animacions, gràfics de moviment o disseny d'imatges en moviment. Tot i això, són molt més que això.

A diferència d’altres formes d’animació que existeixen únicament per crear la il·lusió de moviment, les micro-interaccions involucren directament l’usuari, permetent-li realitzar diverses tasques i interactuar amb el producte d’una manera intuïtiva i eficaç.

Si volguéssim relacionar això amb els principis del bon disseny de sistemes, això millora i permet la retroalimentació del sistema per a l'usuari. Si es fa correctament, els usuaris adoptaran les microinteraccions com a missatge de l'usuari que ell (el sistema) està fent el que hauria de fer com a resposta al que l'usuari necessita.

Tot i que no sabeu quines són les micro-interaccions, interactueu amb elles de forma regular. Cada vegada que utilitzeu una aplicació o un producte basat en la web per realitzar una tasca determinada, ja sigui llegir una notícia, fer una compra, jugar un joc, crear un perfil o ajustar la vostra configuració i preferències de notificació, cada acció que realitzeu constitueix. una microinteracció. Les micro-interaccions s’integren perfectament a la plataforma d’un producte, fent que les seves funcions siguin transparents i accessibles, millorant eficaçment l’experiència global de l’usuari.

Tot i que aquestes "accions" adopten diverses formes diferents, alguns exemples comuns són:

  • Quan "movem" un article a un carretó de compres virtual.
  • Quan seleccionem entre dues opcions en un botó de commutació similar al CTA.
  • Quan "tirem cap avall" per actualitzar un canal de notícies i veure la darrera actualització.
  • Quan "desplaçem cap amunt i cap avall" a la pàgina de feed o pàgina llarga.

Quan dissenyem una microinteracció, hem d’examinar si és realment necessària i vital per a l’experiència de l’usuari. En cas contrari, pot tenir un potencial per distreure el formulari d’usuari fent servir el producte de manera efectiva o convertir-se en soroll visual.

Principis de les microinteraccions

Hi ha tres principis que sempre tinc en compte a l’hora de dissenyar micro-interaccions.

  1. Continuïtat (i subtilesa)

Els elements de microinteracció han de ser subtils, de manera que, quan un usuari fa una acció, hi ha un flux continu en la seva experiència. Per exemple, si creem una animació de desplaçament en un feed llarg, l’usuari hauria de poder centrar-se en el contingut de la pàgina en lloc de la pròpia animació de desplaçament.

2. Predicció

Les microinteraccions de qualitat tenen un element de predicció que permet a l'usuari navegar per un producte de manera eficaç i eficaç. L’usuari pot predir amb precisió els efectes de les seves accions, se sent còmode per invertir-les i confiat en la seva capacitat d’exercir com s’espera.

3. Transformabilitat

Les transicions fluides entre múltiples pantalles i transformacions ben definides dels diferents objectes són aspectes clau de les microinteraccions de qualitat. Permeten a l'usuari desenvolupar una comprensió intuïtiva de les relacions entre les pantalles i els elements que hi ha dins.

Quan es dissenyen seguint aquests principis, les micro-interaccions proporcionen un context per a un disseny ajudant els usuaris a saber com interactuar amb ell. Una microinteracció és un esdeveniment momentani que completa una única tasca. Pot ser que siguin els elements interactius més petits d’un disseny d’un lloc web o d’una aplicació, les microinteraccions són algunes de les més vitals ja que compleixen una varietat de funcions bàsiques.

Els disparadors (toqueu, feu lliscar, arrossegueu, etc.) inicien totes les accions enumerades a la secció anterior (continuïtat, predicció i transformabilitat). L’usuari realitza una acció en un lloc web o en una aplicació per iniciar el procés (encara que continuï després del pas inicial). Això segueix un patró de crida a l'acció d'un usuari, regles per al compromís determinades per la interfície (què passarà i com), comentaris de l'usuari (va funcionar o no) i patrons o bucles (fa l'acció ocórrer una vegada o repetir en una programació).

-Com els desenvolupadors i els dissenyadors poden treballar junts per donar vida a les microinteraccions

Com podeu veure, les microinteraccions tenen un paper fonamental en la conformació de l’experiència dels usuaris. Per això, s'han convertit en una part cada cop més important del meu treball com a dissenyador de producte. Després d’haver treballat en diversos projectes en múltiples plataformes i usos, he notat que no tothom reconeix el valor d’aquests elements o com crear-los de manera eficaç. Més important encara, sovint els membres de l’equip no saben expressar-se les seves idees les unes a les altres sobre el disseny de transicions i microinteraccions.

Em vaig adonar que tot es reduceva a la comunicació: alguna cosa es va perdre en la traducció quan vaig explicar les meves idees de disseny als meus desenvolupadors. És possible que abans hagueu escoltat aquesta cita de Confuci: “Dimeu-me, i me n’oblidaré. Mostra’m, i potser recordo. Impliqueu-me i ho entendré. ”I és a través de la implicació on, com a equip de dissenyadors i desenvolupadors, creem grans experiències.

En primer lloc, passem per una breu descripció del procés de disseny ...

En una situació ideal, quan un dissenyador es presenta amb una idea per a una microinteracció, el flux de treball tradicional continua en el següent ordre:

  1. El dissenyador desenvolupa els elements visuals i els efectes d’animació necessaris per actualitzar la seva idea.
  2. El dissenyador presenta el model final i els conceptes subjacents als altres membres de l’equip.

Però, i si el procés de disseny no es reprodueix a la pràctica com en teoria? Què passa si presentem un storyboard o un model incomplet? O algú altre de l'equip està dissenyant el model?

Quan això succeeix, és probable que apareguin problemes en la presentació o desenvolupament. Aquests problemes normalment es classifiquen en una de les tres categories:

  1. La idea d’animació no es comunica prou amb claredat.

Si intenteu descriure un concepte d’animació amb paraules o imatges fixes, potser podreu veure grimpades a les cares del públic. Això vol dir que estan fent tot el possible per comprendre la vostra idea, però realment no ho estan aconseguint. Tot i que entenen el concepte bàsic, probablement la imatge que els han mostrat a la seva ment probablement no coincideix amb el que estàs pensant. Com que les persones solen percebre imatges en moviment, imatges fixes i descripcions verbals de maneres diferents, confiar en paraules o imatges per transmetre una idea d’animació crea espai per a la comunicació errònia i sovint la tensió innecessària entre els membres del seu equip.

2. El dissenyador no sap si l’animació funciona bé fins que comproven i comproven el prototip del desenvolupador.

Quan els dissenyadors no tenen habilitats de prototipat, es limiten a presentar les seves idees als desenvolupadors a través d’un storyboard. Tot i que un dissenyador creu fermament en un model de microinteracció, no pot dir si funciona fins a tot el seu potencial fins que el desenvolupador completi el prototip. Això és problemàtic per diverses raons, sent la principal possibilitat que es produeixi una mala comunicació que aquest plantejament introdueixi en el procés. A més, obre la porta al dubte dels membres de l’equip i condueix a preguntes sobre la viabilitat de la idea. Es pot costar en termes de temps des del punt de vista del desenvolupament.

3. El dissenyador i desenvolupador no es troben a la mateixa pàgina

Quan els dissenyadors realitzen animacions d’IU o micro-interaccions, intenten incloure detalls de disseny complexos com ara facilitats personalitzades, scripts, expressions i altres efectes. Quan presenten aquestes idees als desenvolupadors, podrien escoltar: "No és possible fer-ho en la nostra línia de temps" o "No podem fer-ho exactament, però ho intentarem". En aquest moment, podrien intentar desconcertar. es detallen els diferents detalls i problemes tècnics amb els desenvolupadors. Tot i això, aquestes discussions poden acabar sent infructuoses si el dissenyador no té coneixement del funcionament de les eines o llenguatges que desenvolupen els desenvolupadors. Aquests factors s’han de tenir en compte a l’hora de formular i discutir idees perquè les micro-interaccions siguin compatibles amb la configuració predeterminada dels desenvolupadors, augmentant la probabilitat que el producte final compleixi els estàndards del dissenyador (i tots els altres).

Quines són algunes solucions a aquests problemes?

Si bé tots els dissenyadors i desenvolupadors tenen la seva pròpia manera de comunicar-se sobre els seus conceptes d’animació, vull compartir un dels mètodes que està utilitzant el meu equip. Aquest mètode ha tingut força èxit i ha tingut com a resultat menys reunions i ha millorat dràsticament la comunicació del nostre equip.

Ara, ja no discutim sobre si inclouem o no microinterraccions, anem explorant formes de millorar-les.

Concepte d’interacció d’esquelet i guia d’interacció

"El concepte d'interacció d'esquelet i la guia d'interacció no deixa lloc per a la interpretació que em permeti començar a treballar immediatament i estar segura en la concordança de la visió del dissenyador". –Jesse M Majcher / Lead IOS engineer

El procés estàndard que fem servir per comunicar-nos sobre dissenys d'UX no es tradueix bé per a animacions de la interfície d'usuari. En primer lloc, els dissenys i fluxos d'UX continuen sent dissenyats pantalla per pantalla i són estàtics. Les animacions d’UI són fluxos en si mateixos, són fluids i es basen en el temps. Quan creem un disseny estàtic, realitzem un marc gruixut per entendre la idea i discutir el flux. Això ens permet revisar i ajustar fàcilment el disseny abans de crear la versió final. Una vegada que tots els membres de l’equip estiguin d’acord en què el disseny estigui preparat per lliurar als desenvolupadors, el dissenyador proporciona al desenvolupador una guia d’estil i una línia vermella que conté detalls, especificacions i altra informació important sobre el disseny.

Si utilitzem un procés similar per a animacions, el nostre procés pot ser molt més ràpid i millor.

  1. Concepte d'interacció d'esquelet (estudi de moviment)

Un concepte d’interacció d’esquelet és similar al fotograma que crearíeu en dissenyar el flux, la diferència principal és que es tracta d’una demostració de prototips jugable / clicable. Si ho portem a una reunió, els membres del nostre equip no hauran de fer-se servir per imaginar el concepte. El dissenyador pot utilitzar la demostració reproductiva / clicable o el tauler d'històries estàtic per referir directament els elements visuals i d'animació del disseny. Això donarà a tothom un sentit clar i exacte de la seva idea. Al seu torn, els socis poden aportar comentaris altament específics i, per tant, molt valuosos per al dissenyador. Al mateix temps, els equips de gestió i desenvolupament de productes obtindran informació que els permeti millorar les seves comunicacions internes i les seves estimacions de temps per al projecte.

2. Guia d'interacció

Una vegada que l'equip coincideix en el concepte, el dissenyador crea la guia d'interacció. Això és similar a una guia d'estil, ja que descriu la posició, la rotació, l'escala i la sincronització dels elements. Podem afegir tots els detalls sobre les animacions, cosa que ajudarà els nostres companys a entendre-ho amb claredat. Quan el dissenyador mostra la guia d’interacció als seus companys, ell o ella poden ser encara més clars sobre el moviment i la mesura del concepte d’animació. Això és de gran ajuda per finalitzar el treball mitjançant la col·laboració. També ajuda als dissenyadors a tenir més reflexió en el seu disseny d’animació i microinteracció.

3. Habilitats de prototipat per a dissenyadors

Segons la meva experiència, per preparar-te per a una col·laboració de disseny exitosa, el dissenyador de producte hauria de ser el conductor de l’animació i el desenvolupador hauria de proporcionar-los el suport. Això significa que el dissenyador de producte assumeix la major part de la responsabilitat de la col·laboració. No només són els responsables d’explicar les seves idees amb molta claredat, sinó que han de demostrar que són factibles aportant proves de concepte. També vol dir que els dissenyadors de producte han de ser capaços de fabricar prototips d’animació propis. Si un dissenyador de producte pot crear un prototip i presentar-lo durant una reunió, la discussió que es farà a continuació serà més clara i que requereix menys temps, provocant un procés de comunicació més efectiu en general.

Per tant, amb quins tipus d’eines de prototipat s’han de familiaritzar els dissenyadors? Hi ha moltes eines per fora, però no tothom sap què funciona millor per a tasques específiques de microinteracció. Aquí teniu les meves recomanacions basades en la meva experiència personal en el disseny d’aquests elements.

Si no coneixeu la codificació:

  • Mòbil: Xcode, estudi Android
  • Mòbil o web: fotograma
  • Web: animació CSS

Si voleu dissenyar una interacció entre un mòdul i un mòdul:

  • Invision i Marbel

Si voleu crear interaccions més detallades:

  • Principi, Adobe CC, origami Studio i Pixate

Si voleu crear interaccions detallades + animació:

  • Després dels efectes

Actualment, sóc aficionat a utilitzar After Effect per prototips. Tot i que no és interactiu (és a dir, pot fer clic), és la manera perfecta de presentar un concepte d’animació. A més, no hi ha cap limitació d'efectes i podeu controlar el moviment dels detalls. Fins i tot es pot utilitzar per fer una interacció a l’espai 3D, com per exemple, AR i VR.

Les interaccions del equip són delicioses per a productes encantadors

Les microinteraccions s'han convertit en un element cada cop més important, si no que és crític, de la web, del disseny mòbil i molt més. Tot i que tant els dissenyadors com els desenvolupadors reconeixen el valor de les animacions d’UI i estan motivats a crear-los, sovint lluiten per col·laborar d’una manera eficaç i eficaç. Es necessita un equip fort per enviar grans microinteraccions a temps; Aquests equips requereixen una delimitació clara dels rols, habilitats de comunicació efectives i les eines adequades de prototipat per a les tasques que es realitzen.

Per configurar l'èxit de les micro-interaccions, assegureu-vos que el vostre equip tingui aquestes característiques i comprometi amb aquests processos. I molta sort amb el vostre propi viatge de microinteracció.

NOTA DE divulgació: Aquestes opinions són de l’autor. Tret que s’indiqui el contrari en aquesta publicació, Capital One no està afiliada ni aprovada per cap de les empreses mencionades. Totes les marques i altres propietats intel·lectuals que s’utilitzen o es mostren són propietat dels seus respectius propietaris. Aquest article és © 2017 Capital One.

Per obtenir més informació sobre les API, esdeveniments comunitaris de codi obert, i cultura de desenvolupadors a Capital One, visiteu DevExchange, el nostre portal de desenvolupadors únic: developer.capitalone.com.