Motion design graphics
Lo normal en tecnología, en los automóviles, en los electrodomésticos es que se modernicen, que evolucionan. Muchas veces es muy difícil determinar cómo evolucionan, puede ser mayor facilidad de uso o simplemente que los factores que realzan la belleza van cambiando con el tiempo.
No pasa distinto con la interfaz de los programas. Hemos tenido grandes cambios, desde una interfaz de caracteres a una interfaz gráfica, pero hoy, lo que se considera mejor desde el punto de vista de amigabilidad con el usuario son pantallas con interfaz de usuario que tengan movimientos.
Cuando hablamos de motion graphic o diseño de movimiento, lo asociamos a los videos explicativos de alguna herramienta nueva que nace en internet, videos de larga duración, animaciones de alto impacto visual de creativos de renombre queriendo mostrar sus habilidades artísticas, o simplemente de los famosos GIFs animados que utilizamos y vemos a diario. Desde que los teléfonos inteligentes se sumaron y el uso de aplicaciones móviles ha ido en aumento, el uso del diseño de movimiento ha sido cada vez más frecuente en muchos de los aspectos del diseño de experiencias de usuario en páginas web y aplicaciones móviles.
Si bien es cierto que su implementación no tan vital en importancia para el funcionamiento de los desarrollos web o móvil, nos ayuda a mejorar aspectos importantes de usabilidad en el diseño.
No pasa distinto con la interfaz de los programas. Hemos tenido grandes cambios, desde una interfaz de caracteres a una interfaz gráfica, pero hoy, lo que se considera mejor desde el punto de vista de amigabilidad con el usuario son pantallas con interfaz de usuario que tengan movimientos.
Cuando hablamos de motion graphic o diseño de movimiento, lo asociamos a los videos explicativos de alguna herramienta nueva que nace en internet, videos de larga duración, animaciones de alto impacto visual de creativos de renombre queriendo mostrar sus habilidades artísticas, o simplemente de los famosos GIFs animados que utilizamos y vemos a diario. Desde que los teléfonos inteligentes se sumaron y el uso de aplicaciones móviles ha ido en aumento, el uso del diseño de movimiento ha sido cada vez más frecuente en muchos de los aspectos del diseño de experiencias de usuario en páginas web y aplicaciones móviles.
Si bien es cierto que su implementación no tan vital en importancia para el funcionamiento de los desarrollos web o móvil, nos ayuda a mejorar aspectos importantes de usabilidad en el diseño.
Qué es el motion design?
Motion design, viene de motion design graphics; el término Motion Graphics viene del inglés y lo traducimos como «gráficos en movimiento» es decir, un vídeo o animación digital que combina diferentes elementos gráficos (imágenes, fotografías, títulos, colores y diseño). Se define como una animación gráfica multimedia en movimiento.
El motion design debe estar integrado, pensado desde la fase de concepción del UI/UX o sea de la interfaz de usuario o interfaz cliente. Esto es, porque no es simplemente cargar de animaciones una página, sino que el movimiento tiene que significar algo, tener un propósito y mantenerse integralmente a lo largo de toda la aplicación. Ahora, la apariencia de los objetos ya no es lo más importante, la forma en que se mueven los elementos lo es tanto o más.
La gente disfruta viendo e interactuando con cuentos animados. Se puede atraer a los clientes manteniendo la interfaz sencilla mediante la combinación de una interfaz gráfica de usuario minimalista con funciones especiales y de aspecto interesante. Sin embargo, con el paso del tiempo será cada vez mayor el número de animaciones que se podrán encontrar en Internet. Una imagen estática o un texto plano no pueden contar la historia de una marca, a diferencia de lo que ocurre con un efecto de movimiento.
Cómo analizar la usabilidad en el Motion Design?
Según artículos especializados, existen cuatro pilares básicos sobre los que se apoya el diseño de movimiento para reforzar la usabilidad de los productos digitales:
1) Intra-continuidad: la continuidad dentro de una escena y
2) Inter-continuidad: la continuidad dentro de una serie de escenas que conforman la experiencia total del usuario.
Patrones para el movimiento
A continuación comentamos algunos de los patrones que la bibliografía o artículos especializados recomiendan considerar para el uso de una aplicación:
Los patrones de transición de navegación, deben ser simples y coherente y deben diseñarse adecuadamente.
El diseño de movimiento proporciona orientación al usuario mediante el uso de animaciones para decirle dónde debe focalizar su atención en cada momento, qué hacer a continuación o qué es lo más importante dentro de la interfaz. Estos movimientos hacen que la navegación parezca más natural y menos abstracta. El Motion Design le da vida a la interfaz mientras mantiene el contexto en todo momento.
Hay casos donde el diseño de movimiento se utiliza para entretener o distraer a los usuarios a medida que el status de un objeto o página, pasa a al siguiente estado.
Como usar las animaciones en el diseño de interfaces
A continuación, vamos a mostrar algunos casos de uso:
1.- Para mejorar la usabilidad
Al hacer clic en algún botón, el usuario espera ver una respuesta luego de su acción, esto hace que la experiencia del usuario sea óptima y que sienta que realmente está interactuando con la web o aplicación.
2.- Para aumentar la velocidad de las interacciones
Los usuarios buscan que la información sea inmediata, obtener respuestas lo antes posible es lo que mantiene a los usuarios contentos y las animaciones cumplen con este propósito, o es lo que les hacemos creer. Los tiempos de carga pueden arruinar totalmente la experiencia del consumidor y mostrar toda la información al momento puede llegar a ser complicado en algunos casos. El uso de animaciones puede ayudarnos a ganar tiempo mientras todos los datos se cargan antes de mostrarlos en pantalla.
3.- Mejorar la marca
Además del logotipo y el color, también se puede definir la actitud de una marca, ya sea si es divertida, elegante, profesional o conservadora. Las animaciones pueden definir la personalidad de esa marca, así como las personas nos definimos al hablar, caminar o al actuar. 4.- Animaciones para embellecer El diseño de movimiento puede mejorar la estética de páginas de errores, por ejemplo, la página 404 podría dejar de ser una página negativa y transformarse en una no tan desagradable con alguna animación que despierte el interés del usuario a seguir navegando.
Tendencias en motion design
A nivel de tendencias, aquí hay que observar mucho hacia dónde va el diseño en cada año, en el 2021 ya se veía un camino hacia el minimalismo y usar una paleta de colores limitada. Para el 2022 se ha visto la utilización de las siguientes tendencias:
Cenco y las APPs
Como ya podemos ir previendo existen muchas bibliotecas de animación que son de repositorios de código abierto de terceros y contienen archivos de animación prefabricados, gratuitos para usar en proyectos personales y comerciales. Por lo general, estos ajustes preestablecidos de animación son solo CSS y/o códigos basados en JavaScript. Por lo tanto, la utilización eficaz y eficiente de estos archivos de biblioteca basados en código requerirá algunos conocimientos básicos y comprensión de los lenguajes de programación HTML/CSS y JavaScript.
A manera de nombrar dos ejemplos:
En Cenco hemos desarrollado algunas aplicaciones donde ya manejamos este cambio hacia una interfaz mas móvil y los invitamos a que nos contacten o nos refieran si desean aplicaciones con UI de última generación. Vamos hacia dónde va el mundo.