Principios de UI Animation: Disney is Dead

Se predijo que la fotografía sería la muerte de la pintura (Daguerrotipo temprano)

(Si desea recibir mis artículos sobre animación de interfaz de usuario por correo electrónico y agregarlos a mi boletín, haga clic aquí).

Un nuevo medio

Cuando Paul Delaroche se encontró con un Daguerrotipo en algún momento alrededor de 1839, declaró: "¡Desde hoy, la pintura está muerta!"

Hasta ese momento, la única forma de documentar visualmente el mundo externo era mediante el uso de un medio aplicado a una superficie a mano. Siglos de artesanía en varias disciplinas habían resultado en el descubrimiento de numerosos principios y técnicas en varios medios. En todas las culturas, y a medida que avanzaban las eras, el estilo y el lenguaje visual de cómo las representaciones visuales "deberían verse" evolucionaron: los patrones de diseño originales.

Los primeros fotógrafos, que intentaban hacer que sus imágenes se parecieran a las pinturas populares de la época, a menudo usaban una combinación de técnicas de iluminación e impresión para suavizar sus imágenes y crear un aspecto pictórico. Su comprensión de lo que el medio de la fotografía era capaz, estaba íntimamente vinculada, influenciada y limitada por su comprensión del mundo de la pintura.

Pasaron casi cien años antes de que fotógrafos como Ansel Adams, Imogen Cunningham, Edward Weston y otros en el 'Grupo f / 64' hicieran avances significativos en el lenguaje visual que diferencia a la fotografía de la pintura como un medio único, con su propio visual. lenguaje y principios, y al hacerlo, revolucionaron el dominio de la fotografía.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney resolvió un problema diferente

Afortunadamente, nos encontramos en tal revolución en la animación de la interfaz de usuario.

En 1981, Ollie Johnston y Frank Thomas lanzaron Disney Animation: the Illusion of Life e introdujeron lo que ahora se conocen como los "12 principios básicos de la animación". Estos principios resolvieron el problema de cómo crear un "movimiento realista" que ocurre cuando los cuerpos orgánicos moverse y reaccionar en el espacio físico (los principios también cubren cosas como el momento emocional y el atractivo del personaje).

Animación de interfaz de usuario, como parte de la experiencia del usuario tiene apenas 20 años y todavía está en su infancia. A medida que surgió el dominio de la animación UI, las únicas herramientas disponibles para describir cómo se comporta la interfaz de usuario a tiempo fueron los 12 principios de animación. Al igual que los primeros fotógrafos intentaron comprender la fotografía a través de las reglas de la pintura, los diseñadores intentaron comprender la animación de la interfaz de usuario a través de las reglas de la animación de Disney.

En la superficie, esto es comprensible ya que existe cierto grado de superposición. El movimiento facilitado, uno de los 12 principios de animación, refuerza la sensación de "corrección" a través del movimiento, algo que es fundamental para la experiencia del usuario. Sin facilitar, la animación de la interfaz de usuario se siente torpe y extraña.

El desglose completo es evidente cuando uno mira más de cerca los 12 principios en el contexto de la interfaz de usuario.

Squash and Stretch otorga peso y flexibilidad a los objetos, algo que es la excepción y no la regla en las interfaces de usuario.

La anticipación crea la sensación de que algo está a punto de suceder y también es casi inútil cuando se trata de experiencias de usuario. Funciona solo de forma limitada para micro interacciones y estados de botón seleccionados.

La puesta en escena se refiere al diseño de la animación, que tiene sentido para una caricatura de Disney porque los personajes están constantemente en movimiento, pero en la experiencia del usuario, esto se considera simplemente como "el diseño".

Straight Ahead Action y Pose to Pose son menos principios que enfoques para el proceso de dibujo / animación real: puede crear una animación más fluida si dibuja cuadros continuos, o usar pose para posar para configurar algunos cuadros clave y completar los espacios en blanco . En las experiencias de los usuarios, este proceso apenas se traduce, a menos que ocurra una animación cuadro por cuadro real. De forma predeterminada, independientemente de la herramienta que esté utilizando, casi toda la animación de la interfaz de usuario se crea utilizando fotogramas clave.

La acción de seguimiento y superposición tiene que ver con seguir las leyes de la física y la inercia, y cómo responden los cuerpos físicos, los cuales tienen poco que ver con las interfaces de usuario, a menos que cuente con el siguiente principio, que es el más útil en el grupo .

Slow In y Slow Out dice que los objetos necesitan tiempo para acelerar y reducir la velocidad. Esto es extremadamente relevante ya que el 100% de la animación de la interfaz de usuario debe emplear este principio. Se conoce comúnmente como "flexibilización" y es extremadamente importante.

El arco (requerido para reproducir el movimiento físico) es casi inútil para la animación de la interfaz de usuario, y también es la excepción más que la regla.

La acción secundaria es útil y es excelente para las transiciones de pantalla y para configurar la jerarquía visual.

El tiempo es relevante al dibujar personajes, pero en las interfaces de usuario, donde el movimiento debe ser nítido para sentirse receptivo, me parece mejor confiar en la facilidad para diseñar la sensación de la interacción, en lugar de la duración.

La exageración se relaciona con el grado de realismo o caricatura, nuevamente, apenas relevante para la animación de la interfaz de usuario, ya que el diseño está predeterminado.

El dibujo sólido es igualmente discutible ya que la animación de la interfaz de usuario se ocupa del comportamiento de los objetos de la interfaz a lo largo del tiempo, no del diseño real de los objetos en sí.

La apelación también habla del tratamiento visual, una vez más no relevante para el comportamiento de la interfaz con el tiempo.

En conclusión

Entonces la pregunta sigue siendo: ¿por qué los 12 principios básicos de la animación no describen con precisión la animación de la interfaz de usuario?

El desglose se puede entender mejor con la simple observación: la animación de la interfaz de usuario no obedece las mismas reglas ni tiene los mismos principios que los cuerpos orgánicos que se mueven en el espacio físico. La animación de la interfaz de usuario es un medio distinto, tan distinto como la fotografía de la pintura, con características superpuestas (tanto la fotografía como la pintura son composiciones visuales estáticas que dependen de la luz y la composición) pero son medios fundamentalmente diferentes.

En pocas palabras, los 12 principios básicos de la animación no se aplican a la animación de la interfaz de usuario porque están resolviendo un problema diferente.

En los próximos artículos, exploraré cuáles son estos principios de animación de interfaz de usuario, qué problema resuelven los principios de animación de interfaz de usuario, cómo los principios son diferentes de las técnicas y cómo puede diseñar y utilizar la animación de interfaz de usuario en sus proyectos actuales y futuros para impactar la usabilidad y crear experiencias de usuario más convincentes y efectivas.