Skip to main content

el mundo UX tiene mucho en común con… ¡Disney! Y es que la animación es un factor determinante en la experiencia que el usuario tiene con cualquier producto digital ya que es un valor añadido que lleva el diseño del producto a un nivel superior. De hecho, el próximo mayo, del 7 al 9, Disney organiza un evento de Customer Experience. Podéis encontrar más información aquí. Hoy hablaremos justamente de eso, de principios de animación en productos digitales.  Por lo pronto, tres principios de Disney son puro Customer Experience:

  1. Crear una propuesta estructural común
  2. Entender a los usuarios en su totalidad
  3. Ver el servicio excepcional como un activo económico en lugar de un gasto
Y dos principios de animación que se encuentran también en el mundo UX motion, y que explicamos en este mismo post:
  • Slow in and slow out (easing)
  • Follow through and overlapping (overlay)
Lo que diferencia a la animación de Disney de la animación UI es que, mientras que la primera busca acercarse a movimientos más reales, la segunda busca una mejor usabilidad. Antes de meternos en materia y conocer los principios de animación, explicaremos los cuatro pilares de cualquier principio de animación:
  1. Expectación: este pilar se basa en la percepción del objeto por parte del usuario, así como su comportamiento. Cuanto más nos acerquemos a lo que espera el usuario por parte de estos dos aspectos, mejor.
  2. Narrativa: es la progresión que se realiza durante la experiencia, tanto a nivel temporal como espacial, es decir, las escenas (y su relación entre ellas) que se presentan en el camino a un objetivo.
  3. Continuidad: está directamente relacionado con la narrativa, ya que gracias a la continuidad, esta tiene mayor fluidez y facilita su comprensión. La conexión entre las escenas es la continuidad.
  4. Relación: nos referimos a la relación que hay entre los objetos de la interfaz que facilita la comprensión y la toma de decisiones del usuario.
Y ahora ya sí, os presentamos los principios de la animación UI.

EASING

Easing es el primer principio de animación porque es el más básico. Se basa en el pilar de la expectación, ya que se acerca mucho a la reacción de un elemento al interactuar con él. Tal como hemos avanzado en la introducción, Disney también comparte este principio.

                    

Invision projects por Charles Patterson                                                              Photo viewer interaction por Divan Ra

OFFSET & DELAY

Offset & delay es de las animaciones que más se acercan a la actitud humana, y es que ayuda al usuario a encontrar más naturalidad en la interacción de los elementos (por ello se basa en la expectación). Al igual que el anterior, este principio también se comparte en la animación de Disney.

           

                                 

Hotel App reviews por Alex Kruchkov                                                                       Job board interaction por Catalin Vasile

MASKING

Masking es el cambio de forma (o de máscara, es decir, el contenedor que lo contiene) por el que pasa un elemento durante la interacción. Esta microinteracción le da continuidad y narrativa a la usabilidad.                                                                         Event cards iOS interaction por Divan Raj                                                    Search animation por Julián Muñoz

PARENTING

El parenting es un tipo de animación que genera una dependencia entre la interacción del usuario y el resultado que se visualiza. Podemos ver un ejemplo en nuestra introducción, en la que conforme se puntúa mejor, el corazón se regenera. La relación es el pilar en que se basa esta animación.  

                              

Xore – Solar system por Anton Skvortsov                                                          Feedback Emoji Animation por Prateek gupta        

 

OVERLAY

La animación overlay es aquélla con la que el elemento puede descubrir otras funcionalidades escondidas a raíz de interactuar con él. Esta animación da continuidad y narrativa a la experiencia.

                    

Swipe & delete interaction por Divan Raj                                                           Microinteract. for to-do list por Jakub Antalík

 

TRANSFORMATION

La transformación es de los principios más obvios cuando hablamos de animación: la mejor manera de reflejar la progresión de un elemento a otro es la transformación, ya que ubica al usuario y le ayuda a entender cómo ha llegado ahí. En el segundo ejemplo también podemos ver otro principio: el cambio de valor.

                              

Open & Close por Adip Nayak                                                                               GIF for the Timeline App por Sergey Valiukh

OBSCURATION

La obscuración se utiliza mucho cuando, en una misma pantalla, se quiere ‘parar el tiempo’, es decir, realizar una acción en paralelo que puede o bien cambiar el estado de lo que se estaba realizando, o bien ir a otra sección. Es por ello que se basa en la continuidad espacial, porque el usuario sabe dónde se encuentra y sabe a dónde va.

                                 

Mobile Blog Search Concept por Vinny Tran                                                             Travel app – rating por 7ninjas

PARALLAX

La animación parallax es muy común, sobre todo en páginas web, ya que ofrece la visualización del contenido de un modo distinto al tradicional scroll, y da la oportunidad de una experiencia visual muy buena si se juega con los elementos y su superposición.                                                   Exploring The North Face por Eddie Lobanovskiy                                             Why Slack motion por Gene Ross Como veis, hay diversos principios de animación con los que poder nutrir nuestros productos de una mejor usabilidad. Hemos mencionado los que, para nosotros, son los más importantes, pero hay otros, como clonar, cambio de valor o Dolly&Zoom. Sin embargo, no olvidéis que ‘Menos es más’, como dijo un tal Van der Rohe.   Nuestra SlashGirl Laura González, UX Specialist, es la autora de este post.]]>

Deja una respuesta