Animación para UX: Dándole alma a la experiencia - Agencia Digital
Animación para UX: Dándole alma a la experiencia

Academia Digital / Agosto 28, 2019

Animación para UX: Dándole alma a la experiencia

Comparte

Como animador de educación y profesional del diseño UX, te diré algo: la Animación para UX es fantástica. Partamos desde el principio, porque desde cortometrajes independientes hasta las películas de Disney Pixar, es sabido que el movimiento otorga persuasión, fisicalidad y estilo.

Ahora pensemos un momento: ¿Qué tan increíble sería traer aquella magia a tus productos y servicios digitales? ¿Imaginas un simple sitio web como un verdadero espectáculo?

Animación UX
¡Boom!

Independiente si pensaste una idea o no, ahorita te comparto algunos ejemplos fabulosos de los diseños más cool que he encontrado.

Animación para UX: fortaleciendo temáticas

Diseño de Turik para un servicio de energía innovativa.

En el primero, la animación apoya la temática del sitio para acentuar la jerarquía del contenido. Además, invita a preguntarnos “¿Qué pasará si pongo el ratón sobre esto?”, lo que viene a ser la exploración, un factor importante de los productos físicos y digitales.

Donald Norman en The Design of Everyday Things, establece los dos principios del diseño de interacción:

  1. Affordances: todas las posibilidades materiales que ofrece un objeto para reconocer su uso.
  2. Signifiers o Significantes: elementos que comunican donde sucede la acción.

Estos dos conceptos se expresan a través del movimiento de los componentes de una interfaz. ¿Cuáles crees que son? Pues botones, transiciones, barras o deslizaderos, etcétera.

Animación UX, causalidad y estilo

La Animación UX también satisface los Golfos de Ejecución y Evaluación de Norman, conceptos que hablaré en el futuro. En pocas palabras, trata sobre cómo nosotros actuamos y reflexionamos al momento de realizar acciones.

Diseño de Jakub Antalík.

Aquí apreciamos las microinteracciones que afectan un proceso de descarga. En vez de solo ir desde A hacia B, este trabajo entrega personalidad a un elemento que se comporta de manera artificial, dando un aire moderno a la transición. ¡Qué satisfactorio es estirar y apretar!

Pero calma. No hay que conformarnos con las típicas transiciones; demos un paso más. Es que a mi parecer, lo importante es desarrollar comportamientos lógicos y con identidad.

Cuando estás animando entre los estados, evalúa si tienes elementos que se comparten y pueden ser conectados. Una buena animación usa transiciones como empujar o deslizar arriba para mostrar contenido. Una animación increíble establece la conexión entre los estados

Pablo Stanley, Diseñador en Invision.

Hasta el alma, pero con moderación

Diseño de Den Klenkov.

Si lo amas, déjalo ir. Es verdad que las animaciones enriquecen el diseño de interfaces, sin embargo, no hay que abusar de ellas. ¿Mi recomendación? Alcanzar el balance entre peso/tamaño y belleza estética.

La moderación es una virtud y por lo mismo, debe ser aplicada en el proceso de diseño. Comparto estos pasos claves, que han funcionado muy bien para la app Zova, que fue galardonada en los Apple Design Award 2016:

  • Paso 1: Crea capas. Esto implicará que el equipo incluya desde un comienzo las animaciones en disposición de los elementos.
  • Paso 2: Haz mock ups con movimiento en una línea de tiempo, así ya sabrás que el concepto y la animación UX funciona.
    • También resulta útil para comunicarse con los ingenieros y stakeholders. Le enseñas de manera gráfica para dónde va el bote.
  • Paso 3: Prototipa tus animaciones. El objetivo es hacer en código algo que aún no es parte del producto final, lo que te dará más tiempo para trabajar tus animaciones todas chévere.
  • Paso 4: ¡It’s showtime! Sube tu producto cuando esté terminado.

¿Quieres saber más?

Si te interesa la animación puedes aprender mucho más de la obra The Animator’s Survival Kit de Richard Williams, la biblia de los principios de animación.

Y si eres angloparlante, te recomiendo el muy cool e-book Design Animation Handbook de DesignBetter. ¿Why? Porque sido una gran guía para ampliar mis conocimientos de animación en el diseño de experiencia de usuario.

Espero que hayas disfrutado el artículo. ¡Ahora ponte a animar!

Por Óscar Cruz, diseñador de experiencia usuario y colaborador de Agencia Digital.