Krypton Solid

Animación funcional en diseño UX

Animación funcional en diseño UX

Este artículo contiene muchos ejemplos de videos que muestran animaciones funcionales. Por lo tanto, la carga puede llevar más tiempo en conexiones lentas.

Un buen diseñador de UX puede explicar fácilmente la lógica detrás de cada decisión en un concepto de diseño. Esto incluye la arquitectura de la información, la jerarquía de contenido, el flujo y las suposiciones realizadas.

Tarde o temprano, la animación se introducirá en el concepto de estructura alámbrica, y luego tomar decisiones de diseño o explicarlas se volverá más difícil. Razones como «¡Será genial!» o «Está de moda» o «emocionante» son exactamente las áreas en las que un diseño comienza a perder fuerza. Las animaciones merecen un terreno mucho mejor en nuestras consideraciones de diseño. Deberíamos estar justificados al definir animaciones y explicar su propósito, de la misma manera que explicamos todos los demás elementos en un diseño.

¿Qué es la animación funcional?

La animación funcional es una animación sutil que incorporamos en un diseño de interfaz de usuario como parte de nuestro proceso.

A diferencia de la animación hecha por Disney Studios o la animación hecha para juegos de computadora, la animación funcional tiene un propósito claro y lógico. Su propósito es servir un concepto de diseño al respaldar la solución que estamos tratando de transmitir. La animación funcional es otra herramienta más en nuestro arsenal de diseño de UX.

En un mundo perfecto, deberíamos poder validar la animación funcional frente a un conjunto bien definido de propósitos lógicos. Si cierta animación en nuestro diseño sigue un propósito lógico, entonces es una animación funcional válida y su existencia en nuestro diseño probablemente esté justificada. Pero si no se ajusta a ningún propósito, entonces podría ser redundante y debe reconsiderarse.

En el último año, mientras trabajaba en varios proyectos, reuní una familia de nueve propósitos lógicos que hoy me ayudan a validar la animación funcional. Me di cuenta de que al examinar una animación bien definida, puedo encajarla fácilmente en uno o más grupos de esta familia.

También funciona al revés: cuando una animación no se ajusta a un propósito funcional, generalmente también se siente incómoda o molesta. A continuación se muestran los grupos familiares que he recopilado hasta ahora. Espero que los encuentre útiles para validar su propia animación de diseño.

Orientación

La dirección ilumina la estructura. En este grupo, encontramos animaciones que juegan un papel en nuestra navegación, arrojando luz sobre la arquitectura de información del sitio web. La lógica detrás de este tipo de animación es mantener el sentido de orientación del usuario y ayudarlo a comprender el cambio que acaba de ocurrir en el diseño de la página, qué ha desencadenado el cambio y cómo iniciar el cambio nuevamente más adelante si es necesario.

Un ejemplo clásico es un botón que alterna contenido oculto. Al hacer clic en él, aparece un panel oculto. Y cuando cierra el panel, vuelve a encogerse en el botón de acción.

La primera vez, un usuario no puede predecir realmente una interacción que está a punto de suceder. La animación de apertura del panel oculto que aumenta de tamaño ayuda al usuario a mantenerse orientado y no sentir que ha abandonado la página o que el contenido se ha desvanecido repentinamente. Mantienen el control de todo lo que está sucediendo. La animación de cierre ayuda al usuario a asociar el panel que se contrae con el botón de acción, por lo que la próxima vez recordará cómo abrir el panel nuevamente.

Propósito lógico: Evite una transición sorprendente y oriente al usuario.

Videos de ejemplo

Misma ubicación, nueva acción

Una regla de usabilidad bien conocida es ser coherente tanto en el diseño como en el contenido de un sitio web. Un sitio web coherente es predecible y, por lo tanto, se puede aprender. Esta regla se aplica a los botones de acción, entre otras cosas.

En determinados casos, nos vemos obligados a diseñar un botón de acción cuya funcionalidad cambia bajo determinadas condiciones. Por lo general, vemos esto en diseños donde el espacio general es limitado. Por lo tanto, un usuario que haya aprendido la funcionalidad de un botón de acción puede necesitar aprender una nueva funcionalidad.

Los botones «Guardar» y «Editar» son probablemente el ejemplo más común de botones intercambiables. Pero este es un caso fácil porque, si bien las acciones son contradictorias, tienen el mismo contexto. En otras situaciones, cuando las dos acciones no tienen una relación aparente inmediata, nos enfrentamos a un desafío de usabilidad. Ahí es donde la animación funcional puede ayudar.

Propósito lógico: Enfatice un cambio funcional en un botón de acción.

Videos de ejemplo

Acercarse

La tercera familia tiene algunas similitudes con el grupo de orientación que vimos anteriormente. En estas animaciones, el usuario selecciona un elemento de una lista para ampliar su vista detallada (que supera la vista de lista) y puede volver a la vista de lista completa.

Normalmente vemos esto en galerías de imágenes, tarjetas y selectores de elementos. Un usuario seleccionará un elemento e inmediatamente verá la pantalla detallada que está asociada con esa selección.

El desafío aquí es asegurarse de que el usuario sienta que todavía tiene el control y permanece en el contexto dado. La animación funcional suele ser imprescindible en esta situación.

Al examinar numerosas animaciones funcionales en este grupo familiar, he notado un patrón común que, cuando se implementa con precisión, mejora la efectividad de la animación:

  1. El estado inicial es la lista original de elementos.
  2. Cada elemento se designa con una pista visual única, como un color dominante, un símbolo, un título en negrita o una imagen en miniatura.
  3. Cuando el usuario hace una selección, se crea una nueva página y la señal visual seleccionada se reubica en una posición dominante prominente. Por ejemplo, toda la página puede estar coloreada con el color único de un elemento; el símbolo del elemento se expandiría y se colocaría en el título de la página; el nombre del elemento se agrandaría y aparecería en el título de la página.
  4. Aparece un botón de acción notable para descartar en la nueva página, como «Cancelar», «Cerrar», «Atrás» o «x».

Propósito lógico: Asocie una miniatura con su vista detallada.

Videos de ejemplo

Sugerencia visual

Las sugerencias visuales ayudan a los usuarios a comprender mejor cómo interactuar con la interfaz de un producto. Es especialmente necesario en diseños que contienen un objeto poco convencional o un método de navegación único.

Este tipo de animación funcional se detecta fácilmente cuando abrimos una página y de repente se activa una animación rápida y única que demuestra cómo opera cierta funcionalidad en el diseño.

Propósito lógico: Sugerencia para exhibir una funcionalidad poco convencional o una acción oculta.

Videos de ejemplo

Crédito de video: Michael Martinho
Crédito de video: www.buildinamsterdam.com
Crédito de video: Dejan Markovic

Destacar

Este grupo familiar ayuda a los usuarios en esas situaciones desafortunadas en las que es necesario superar un diseño ruidoso.

Los diseñadores generalmente se esfuerzan por evitar diseños ruidosos, que cargan la pantalla con diversas piezas de contenido textual y visual que compiten entre sí por la atención del usuario.

Una forma de minimizar el ruido en una interfaz es eliminar el desorden. Sin embargo, a veces esta tarea no es tan trivial. Piense en un sitio web de noticias cuyos propietarios quieran eliminar noticias textuales o imágenes de la página de inicio.

El movimiento, por su naturaleza, tiene el nivel más alto de prominencia en una interfaz de usuario. Ni los párrafos de texto ni las imágenes estáticas pueden competir con el movimiento. Podemos aprovechar esto con este grupo de animación funcional. Sin embargo, recuerde que aumentar el ruido de la interfaz al agregar un objeto con un mayor nivel de prominencia es una pendiente resbaladiza.

En el ejemplo de animación a continuación, vemos que la adición de un artículo al carrito de compras no se nota lo suficiente debido al fondo abarrotado. Entonces, se necesita animación.

Propósito lógico: Capte la atención del usuario y supere un diseño ruidoso.

Videos de ejemplo

Crédito de video: www.Photojojo.com

Simulación

A veces, durante el análisis de diseño y las entrevistas con los usuarios, encontramos que los usuarios tienen una necesidad que solo podemos abordar con una simulación personalizada.

Para estos casos especiales, crearíamos una animación funcional personalizada. En el siguiente ejemplo, los análisis de fútbol se presentan de una manera con la que las cifras, los números, las tablas y los gráficos nunca podrían competir. En el segundo ejemplo, el usuario puede monitorear las temperaturas en un mapa de acuerdo con el tiempo y la geografía, un caso de uso particular que difícilmente podría abordarse de otra manera.

Propósito lógico: Simule temas que de otro modo serían difíciles de transmitir.

Videos de ejemplo

Crédito de video: Monterosa

Comentarios visuales

La retroalimentación visual es extremadamente importante en el diseño de la interfaz de usuario. En la vida real, los botones, controles y objetos responden a nuestra interacción, y así es como la gente espera que funcionen las cosas.

Pero recuerde que la animación funcional en este grupo familiar debe ser muy sutil y debe diseñarse de manera receptiva. La retroalimentación de botones se usa ampliamente en todas las interfaces, por lo que el uso de animaciones funcionales donde realmente no es necesario causará más daño que bien. En los dispositivos táctiles, la animación funcional puede ser más beneficiosa como sustituto de los efectos de rollover.

Propósito lógico: Reconoce la acción del usuario.

Videos de ejemplo

Crédito de video: Diseño de material de Google

Estado del sistema

Este grupo tiene que ver con el control. Para el usuario, el control significa conocer y comprender su contexto actual en el sistema en un momento dado.

La animación funcional proporciona monitoreo en tiempo real del estado del sistema, lo que permite al usuario comprender rápidamente cuándo comenzó una acción, el tiempo restante y exactamente cuándo terminó. Quizás la primera animación funcional que cumplió esta función en los sitios web HTML es el GIF giratorio, que todavía se utiliza en muchas interfaces para indicar una acción en curso.

Las animaciones funcionales efectivas en este grupo familiar suelen seguir este patrón:

  1. Muestre comentarios claros para indicar que el proceso se ha iniciado.
  2. Presente comentarios continuos mientras el proceso está en progreso.
  3. Estime la finalización del proceso (un paso, por cierto, donde fallan los hilanderos).
  4. Muestre comentarios claros de que el proceso ha terminado.

Una animación muy conocida en este grupo es «desplegar hacia abajo para actualizar», que inicia un proceso de actualización de contenido en dispositivos móviles. Examine la implementación de estas animaciones en varias aplicaciones, y pronto notará que las animaciones que no cumplen completamente con los cuatro pasos establecidos anteriormente se sienten mal. Por ejemplo, la incertidumbre que surge de la falta de una retroalimentación clara de que un proceso ha terminado podría hacer que el usuario inicie la acción de actualización nuevamente.

Propósito lógico: Imparte una sensación de control en un proceso lineal.

Videos de ejemplo

Crédito de video: Aplicación Yik Yak

Herramienta de marketing

Este grupo tiene que ver con el marketing, ¡y tiene algunas animaciones divertidas! Mientras que los ocho grupos anteriores de nuestra familia de animaciones son bastante lógicos, ¡este está lleno de emociones!

Supongamos que necesitamos indicar el comportamiento de un producto, resaltar una característica en particular, promover una capacidad única o incluso agrupar los valores y el estilo de una marca en un producto.

En cualquiera de estos escenarios, una animación puede ser útil para la estrategia de marketing de la empresa. Es posible que el enfoque no esté claramente centrado en el usuario, pero definitivamente tiene un propósito funcional.

Propósito lógico: Respalde los valores de marca de una empresa o resalte las fortalezas de un producto.

Videos de ejemplo

Crédito de video: Creativedash
Crédito de video: www.Bellroy.com

Resumen

Cuando se trata de proporcionar placer o deleite en nuestros sitios web y aplicaciones, las animaciones contribuyen mucho. Pero recuerda siempre que deben ser funcional primero.

Aarron Walter de MailChimp escribe sobre la jerarquía de las necesidades de los usuarios en su libro Diseñar para la emoción. Es similar a la jerarquía de necesidades de Maslow, pero en lugar de describir nuestras necesidades personales, Aarron describe nuestras necesidades como usuarios. La jerarquía de Walter posiciona la necesidad funcional como la base de la pirámide, mientras que la necesidad de placer está arriba, y es aplicable solo si la base se ha satisfecho. En este artículo me he ocupado únicamente de esta base funcional, sin entrar en aspectos de placer y deleite, que merecen un artículo propio.

Hasta ahora, he compilado una familia de nueve reglas. Estas nueve reglas se adaptan bien a todas las animaciones que he encontrado hasta ahora. Me ayudan a evaluar las animaciones que veo en las interfaces y son un conjunto sólido de principios rectores para decidir cómo agregar animaciones a un diseño de estructura alámbrica. Espero que te sirvan en tu proceso de diseño de la misma forma que me sirven a mí.

Sin embargo, esta investigación está en progreso. Entonces, la próxima vez que encuentre una animación funcional, continúe y pruébela contra uno de estos nueve grupos. Si no encaja perfectamente con ninguno de ellos y la animación tiene un propósito claro, compártelo con nosotros, ¡quizás hayas encontrado la décima familia de reglas!

Otras lecturas en Smashing:

Deja un comentario