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:
- Crear una propuesta estructural común
- Entender a los usuarios en su totalidad
- Ver el servicio excepcional como un activo económico en lugar de un gasto
- Slow in and slow out (easing)
- Follow through and overlapping (overlay)
- 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.
- 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.
- 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.
- 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.
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.
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.
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.
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.
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.
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.
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.]]>
