El artículo sobre motion menos espectacular del mundo

por Toni Obra — UI/UX designer en Optimyzet

11/06/2018

Lo primero que me gustaría decir es que como diseñadores de experiencias deberíamos entender el diseño de una interfaz como el diseño de una experiencia y no solo el diseño de pantallas bonitas. Nuestros resultados, además de bonitos o espectaculares, también son agradables, sencillos, confortables, excitantes. Son los sentimientos que provocamos en una persona con nuestra interfaz, independientemente de la pantalla en la que se encuentre. Si lo piensas, es bonito. Y es por esto que el motion es una herramienta muy potente para diseñar e intentar provocar estos sentimientos. Es transversal a toda la experiencia y debe aportar coherencia y armonía como una linea gráfica bien aplicada en su totalidad.

Vemos con mucha frecuencia abusos de animaciones muy espectaculares, pero que pueden provocar una peor experiencia de usuario, dificultando procesos o distrayendo del objetivo final. Por eso me parece interesante explicar de qué forma el motion, además de ser una mejora estética, puede ayudar al usuario a entender mejor una interfaz.

Ayuda a entender el contexto durante la navegación

Durante la navegación, en una app por ejemplo, las pantallas tienen diferentes jerarquías y diferentes funciones. Mediante transiciones podemos hacer que el usuario entienda bien en que pantalla está, como ha llegado a ella y como puede volver. En este ejemplo vamos a ver una transición de un listado de cards al detalle de un artículo.

Habréis visto que la card no tiene la misma estructura en los dos ejemplos y esto es a lo que me refería con diseñar experiencias. La decisión de la estructura de una card debe ir más allá de la apariencia de esta. Pensemos en cómo se va a comportar esta card a lo largo de la experiencia. Si sé que esta card va a dirigirme a un detalle, ya pienso como va a ser esa transición para que sea lo más fácil posible de comprender y, lo tendré en cuenta a la hora de tomar decisiones de diseño en los wireframes.

Representar qué consecuencias ha tenido una determinada acción del usuario

Muchas veces el usuario realiza acciones pero no tiene la certeza de que hayan comportado algún cambio. Por ejemplo, puedes aplicar unos filtros pero nada te indica si estos filtros han modificado tus resultados. O a la hora de aplicar un descuento, puedes tener dudas, ¿se habrá aplicado bien? ¿Me vendrán con historias raras como un vale para la próxima compra? Por esto, el motion nos ayuda a resaltar en la pantalla estos cambios tan importantes. Así eliminamos dudas al usuario rebajando considerablemente su nivel de estrés al utilizar la interfaz.

Ayuda a entender el comportamiento de un elemento

El motion puede indicarnos, con antelación, qué va a pasar si interactuamos con algún elemento, de esta forma evitamos la sensación de incertidumbre y aumentaremos la conversión. Se trata de mostrar cómo se comporta un elemento, de alguna forma se inicia un proceso que el usuario puede continuar con más facilidad por inercia.

En el caso de un chatbot, por ejemplo, es algo relativamente nuevo y ni el literal “Chatbot” ni el icono más común, aún se relacionan fácilmente con esta herramienta. Por lo que podemos ayudar al usuario facilitándole pistas muy evidentes al hacer hover sobre este elemento. Podemos mostrar una transformación anunciando lo que será la estructura del elemento para que pueda reconocerlo rápidamente, es como una semievolución antes de convertirse en el chatbot. Y una vez hace click, como hemos comentado en el otro punto, es importante que se mantenga la estructura y la apariencia lo máximo posible.

Guiar el recorrido visual del usuario

El motion nos permite gestionar y guiar la atención del usuario al cargar una página. Él quiere realizar una tarea y nosotros queremos ponérselo fácil, reduciendo al máximo sus niveles de estrés durante su experiencia.

Si mostramos un listado, el hecho de que los elementos aparezcan en orden, hace que el usuario perciba con mucha más facilidad que se trata de una lista de “cosas”. De forma intuitiva su vista sigue la dirección del listado, visualiza los ítems en su orden y entiende mejor que haciendo scroll el listado continúa. Probablemente pensaréis: “Hombre, como si el usuario no fuera a entender que es un listado solo por mostrarlo de golpe…” y sí, evidentemente que lo entenderá pero estas pequeñas mejoras en la presentación de la información suponen un menor estrés para el usuario y esto se traduce en una mayor conversión y una mejor relación con la marca. A todos nos cae mejor la gente que nos hace la vida más fácil, todos estamos más a gusto cuando todo fluye y no hay que hacer esfuerzos innecesarios.

Pero bueno, no quiero transmitir que las transiciones espectaculares y tantas otras animaciones no sean buenas, de hecho lo son, a mi me encantan, pero también creo que, cuando diseñamos una interfaz, estas deberían estar al servicio de una mejor experiencia y no al revés, perjudicando la simplicidad de un proceso por estar al servicio de la espectacularidad.

Originally published at www.optimyzet.com.