L’article sobre motion menys espectacular del món

El primer que m’agradaria dir és que com a dissenyadors d’experiències hauríem d’entendre el disseny d’una interfície com el disseny d’una experiència i no solament el disseny de pantalles boniques. Els nostres resultats, a més de bonics o espectaculars, també són agradables, senzills, confortables, excitants. Són els sentiments que provoquem en una persona amb la nostra interfície, independentment de la pantalla en la qual es trobi. Si ho penses, és bonic. I és per això que el motion és una eina molt potent per dissenyar i intentar provocar aquests sentiments. És transversal a tota l’experiència i ha d’aportar coherència i harmonia com una línia gràfica ben aplicada íntegrament.

Veiem amb molta freqüència abusos d’animacions molt espectaculars, però que poden provocar una pitjor experiència d’usuari, dificultant processos o distraient de l’objectiu final. Per això em sembla interessant explicar de què forma el motion, a més de ser una millora estètica, pot ajudar a l’usuari a entendre millor una interfície.

Ajuda a entendre el context durant la navegació

Durant la navegació, en una app per exemple, les pantalles tenen diferents jerarquies i diferents funcions. Mitjançant transicions podem fer que l’usuari entengui bé a quina pantalla està, com ha arribat a ella i com pot tornar. En aquest exemple veurem una transició d’un llistat de cards al detall d’un article.

Haureu vist que la card no té la mateixa estructura en els dos exemples i això és al que em referia amb dissenyar experiències. La decisió de l’estructura d’una card ha d’anar més enllà de l’aparença d’aquesta. Pensem en com es comportarà aquesta card al llarg de l’experiència. Si sé que aquesta card em dirigirà a un detall, ja penso com haurà de ser aquesta transició perquè sigui el més fàcil possible d’entendre i, ho tindré en compte a l’hora de prendre decisions de disseny en els wireframes.

Representar quines conseqüències ha tingut una determinada acció de l’usuari

Moltes vegades l’usuari realitza accions però no té la certesa que hagin comportat cap canvi. Per exemple, pots aplicar uns filtres però res t’indica si aquests filtres han modificat els teus resultats. O per exemple a l’hora d’aplicar un descompte, pots tenir dubtes, s’haurà aplicat bé? Em vindran amb històries rares com un val per a la propera compra? Per això, el motion ens ajuda a ressaltar a la pantalla aquests canvis tan importants. Així eliminem dubtes a l’usuari rebaixant considerablement el seu nivell d’estrès utilitzant la interfície.

Ajuda a entendre el comportament d’un element

El motion pot indicar-nos, amb antelació, què passarà si interactuem amb algun element, d’aquesta forma evitem la sensació d’incertesa i augmentarem la conversió. Es tracta de mostrar com es comporta un element, d’alguna forma s’inicia un procés que l’usuari pot continuar amb més facilitat per inèrcia.

En el cas d’un chatbot, per exemple, és alguna cosa relativament nova i ni el literal “Chatbot” ni la icona més comuna, encara es relacionen fàcilment amb aquesta eina. Així que podem ajudar a l’usuari facilitant-li pistes molt evidents al fer hover sobre aquest element. Podem mostrar una transformació anunciant el que serà l’estructura de l’element perquè pugui reconèixer-ho ràpidament, és com una semievolució abans de convertir-se en el chatbot. I una vegada fa clic, com hem comentat en l’altre punt, és important que es mantingui l’estructura i l’aparença el màxim possible.

Guiar el recorregut visual de l’usuari

El motion ens permet gestionar i guiar l’atenció de l’usuari al carregar una pàgina. Ell vol realitzar una tasca i nosaltres volem posar-li-ho fàcil, reduint al màxim els seus nivells d’estrès durant la seva experiència.

Si mostrem un llistat, el fet que els elements apareguin en ordre, fa que l’usuari percebi amb molta més facilitat que es tracta d’una llista de “coses”. De forma intuïtiva la seva vista segueix la direcció del llistat, visualitza els ítems en el seu ordre i entén millor que fent scroll el llistat continua. Probablement pensareu: “Home, com si l’usuari no entengués que és un llistat només per mostrar-ho de cop…” i sí, evidentment que ho entendrà però aquestes petites millores en la presentació de la informació suposen un menor estrès per a l’usuari i això es tradueix en una major conversió i una millor relació amb la marca. A tots ens cau millor la gent que ens fa la vida més fàcil, tots estem més a gust quan tot flueix i no cal fer esforços innecessaris.

Però bé, no vull transmetre que les transicions espectaculars i tantes altres animacions no siguin bones, de fet ho són, a mi m’encanten, però també crec que, quan dissenyem una interfície, aquestes haurien d’estar al servei d’una millor experiència i no a l’inrevés, perjudicant la simplicitat d’un procés per estar al servei de l’espectacularitat.

Toni Obra
UI/UX designer a Optimyzet