Motion Design en productos digitales: ¿por qué importa?
El movimiento de los elementos se ha convertido en una parte esencial para ayudar a las personas a interactuar
Cuando se habla de Motion Design, se hace referencia al diseño en movimiento, es decir, a transmitir un mensaje de manera visual y animada; y realizarlo es un arte que, bien ejecutado en un producto digital, ayuda a crear piezas de contenido de alto impacto. En el artículo de hoy te explico por qué.
Aunque existen varios sinónimos para esta rama del diseño, como Motion Graphic, Animation y otros, la realidad es que todos se refieren a lo mismo y persiguen el mismo objetivo: transformar información en material visual y con movimiento. Por esto es ideal para comunicar de forma simple y atractiva.
Ahora te doy más detalles.😉
¿Qué es el Motion Design?
El Motion Design es un elemento crucial para lograr que las personas interactúen con los productos digitales de manera intuitiva y simplificada, ya que aporta la sensación de interacción con objetos físicos a través de una pantalla de cualquier dispositivo y permite que la presentación sea más llamativa para ellas, consiguiendo así, captar su atención.
¿Cuál es la importancia del Motion Design y para qué sirve?
Aunado a lo anterior, los beneficios que esta disciplina aporta al desarrollo de productos digitales son:
- Crea una narrativa: sirve para explicar y ayudar a saber cómo llegar y salir de las diferentes secciones que forman parte de la interfaz.
- Conecta: crea una conexión de ideas y conceptos de manera coherente.
- Tiene un impacto: no solo consiste es adicionar algo, sino que requiere de una profunda consideración durante todo el proceso de diseño para ayudar a las personas a entender mejor el producto.
Ahora, si bien el objetivo principal del Motion Design es transmitir mensajes de una forma visual y creativa, lo cierto es que su utilidad no se limita a esto. También le sirve a un producto digital para:
Contar historias
Le facilita a las personas entender el flujo de la conversación, pues se convierte en una guía. Un claro ejemplo es cuando se les da a entender (mostrándoles un elemento animando) que después de llenar un formulario, su información está siendo procesado.
Facilitar su uso
Independientemente del tipo de producto que se esté desarrollando, incluir gráficos en movimiento puede hacerlo más intuitivo. Un argumento como “puedo agregarlos después”, a veces sale más caro.
Optimizar la usabilidad
El Motion Design ayuda a las personas a entender qué pasa con los gestos y transiciones que ven en pantalla y sobre todo, a concretar acciones específicas, motivo por las cuales han decidido usar ese producto digital.
Ideas erróneas sobre el Motion Design
Como ya mencioné, el Motion Design sirve para dotar de movimiento a imágenes estáticas y transformar ideas difíciles en mensajes simples y claros. Por eso puedo decir que se comete un error cuando:
- Es una ocurrencia tardía: cuando la intención de aplicarlo surge demasiado tarde en equipos de empresas emergentes de ritmo rápido.
- No se considera importante o no se quiere aplicar: cuando se piensa que es un gasto en tiempo y dinero. Excluirlo solo le dificultará a las personas comprender lo que pase durante el proceso de interacción.
- No es un aspecto central: cuando no es parte de la experiencia ni se toma en cuenta durante la creación de un producto digital.
¿Qué aporta el Motion Design a la usabilidad?
Debido a que el Motion Design le permite a las personas comprender todo lo que sucede dentro del entorno digital en el que estén participando, se dice que influye directamente en el grado de usabilidad de un producto.
En este sentido, las ventajas que le aporta a la usabilidad son:
- Hace que el proceso de diseño sea más intuitivo, de principio a fin.
- Ayuda a las personas a conectar conceptos con rapidez y hasta de forma divertida.
- Le agrega personalidad al diseño del producto. No es solo una animación (como Pixar, Disney, etc.).
- Es una interfaz (UI). No solo sirve para deleitar.
- Influye en el comportamiento, ya que mejora la experiencia de uso.
- Asegura que las personas experimenten lo que esperan. Los elementos de Motion Design deben hacer lo que esperan ver.
- Permite que exista una consistencia entre el flujo de las personas (user flow) y la coherencia real general de UX (microinteracciones).
- Su comportamiento crea una progresión lógica de los eventos.
- Mejora las relaciones entre los atributos estéticos, espaciales y jerárquicos de la interfaz.
El Motion Design y los modelos mentales
“Un modelo mental es lo que el usuario piensa sobre un sistema como puede ser tu producto digital”.
Esta es una frase de Norman Nielsen y tiene toda la razón, pues siempre hay que tener en mente las necesidades de las personas cuando interactúan con el producto. Así que te recomiendo ponerlo en práctica.
Lo que hacen al usarlo por primera vez es tratar de encontrarle un sentido porque cada una tiene sus propios modelos mentales. Por ello, es fundamental respetarlos y diseñar un producto centrado en lo que buscan, y lo más usable posible.
Sobre la metodología y los principios del Motion Design
Antes de finalizar este artículo, también quiero compartirte algo sobre la metodología y los principios de este tipo de diseño. 👇
Comportamiento esqueumórfico
Se basa en que creamos conexiones con la mente de las personas e imitamos comportamientos, como por ejemplo: recoger algo, tocar el agua o algún líquido, crear conexiones tridimensionales (hacia arriba o hacia abajo) y tener gestos, sutiles y otros no tanto.
Reglas
Hay oportunidades en las que las personas saben y otras donde desconocen. Por lo que es necesario tener presente que todas sus experiencias (UX) tienen y seguirán teniendo un estado continuo de cambio.
Señales interactivas y visuales
Esto consiste en que:
- Las señales visuales en los diseños generan un tipo de causa y efecto.
- El Motion Design se alinea o crea conflicto con esas señales visuales.
Principios
Finalmente, las normas bajo las que se rige el Motion Design son:
- Easing (continuidad): el comportamiento del objeto se alinea a lo que las personas esperan (contrario: animación lineal).
- Compensación y retraso: es relación entre los objetos al iniciar una escena. Se refiere a la jerarquía.
- Parenting: es la relación entre el espacio y la jerarquía temporal (múltiples elementos).
- Transformación: prepara a las personas para el cambio en la narrativa de los objetos (progresión).
- Cambio de valor: crea una dinámica y mantiene la relación entre la narrativa y el objeto a cambiar (se le agrega algo importante).
- Masking: se refiere a lo que se ve y a lo que se decide esconder.
- Overlay: esconde o revela los elementos, según las necesidades.
- Cloning: crea una relación narrativa entre los elementos que aparecen y desaparecen (reacciones).
- Oscurecimiento: le permite a quienes usen un producto digital, ubicarse espacialmente en relación al objeto o escena que no es la principal (menús, pop ups, contraseñas, etc.).
- Parallax: crea jerarquía espacial cuando la interfaz necesita scroll.
- Dimensionalidad: crea modelos mentales. Implica diferentes lados de un elemento UI (cambios y transformaciones) y algunos ejemplos son: efecto origami, flotar objetos, entre otros.
- Doll and zoom: preserva la continuidad espacial de la narrativa entre los diferentes elementos y escenas.
Diseña mejores productos digitales
Ahora que ya conoces más sobre los impactos del Motion Design, intégralo a tus procesos de UI/UX y obtén mejores resultados en tu producto. Es un arte que no solo consiste en cargar de animaciones a una página, sino que tiene el propósito de ayudar a las personas a cumplir sus objetivos.
Además, es una tendencia hacia la que se dirige el diseño de interfaces, pues actualmente la apariencia de los objetos ya no es lo más importante, la forma en que se mueven los elementos sí.
¿Quieres leer más temas relacionados? 👉Visita el blog de Nowports Tech👈
