El movimiento en el mundo del diseño se utiliza para describir las relaciones espaciales, la funcionalidad y la intención con belleza y fluidez. El movimiento puede sonar como un gran concepto, pero cuando se utiliza eficazmente es sutil y natural. El movimiento reflexivo en el diseño puede mejorar la experiencia del usuario sobre elementos de diseño tradicionales.
Así que hablemos acerca de los fundamentos del diseño de movimiento, por qué y cuándo desea usarlo en su interfaz de usuario y cómo puede ayudarlo a mejorar su UX.
Diseño basado en movimiento.
El diseño basado en movimiento cuenta historias de cómo se organiza una aplicación y qué se puede hacer. El movimiento impulsa la interfaz de usuario completamente: redefine la navegación y crea una experiencia más natural añadiendo un nuevo nivel de profundidad al diseño de la interacción. Por cada botón pulsado y la transición de pantalla, hay una historia y un buen diseño basado en movimiento le ayuda a contarlo.
Todos queremos contar una gran historia interactiva en pequeñas pantallas y el movimiento nos da el poder de hacerlo.
Crédito de la imagen: Dribbble.
¿Por qué es importante el movimiento?
Cuando los usuarios interactúan con su producto, pueden hacer las siguientes preguntas:
-¿Qué es lo más importante aquí?
¿Cómo sé qué hacer después?
¿Cómo sé que he completado mi tarea?
Preguntas como ésta podrían revelar oportunidades para usarse en nuestro proyecto de movimiento y en base a ella mejorar nuestra experiencia. El movimiento optimizado en UX, percibe y responde a las preguntas:
– Impulsa la atención del usuario y sugiere lo que sucederá si un usuario completa un clic / g esto.
– Le ayuda a orientar a los usuarios dentro de la interfaz y proporciona un enfoque guiado entre las vistas.
– Proporciona una retroalimentación visual.
Además, de eso, el diseño basado en el movimiento trae otra cosa importante en UX: una experiencia en deleite. Todos apreciamos el valor del producto humano, y en gran medida diferenciamos sobre lo frío y racional. Es por eso que los diseñadores deben experimentar y encontrar soluciones que se sientan más naturales y evoque una conexión emocional.
Lenguaje de movimiento.
El movimiento nos permite comunicar mejor la interacción, facilitando al usuario su comprensión. Los elementos de diseño basados en el movimiento se pueden ver en una variedad de formas, incluyendo transiciones, animaciones e incluso en la textura para imitar la profundidad 3D.
El principal desafío con el movimiento es hacer algo que no distraiga a los usuarios de lo que están tratando de hacer.
Atención de los usuarios.
Los movimientos pueden llamar la atención del usuario en un área específica – o ayudar a distraerse de ella. El diseño de buen movimiento hace que la interfaz de usuario sea más predecible y más fácil de navegar. Puede ayudar al ojo a ver de dónde viene un nuevo objeto o dónde va un objeto oculto y también le da al espectador una pista de lo que está por suceder.
Haga qué sus botones y paneles respondan a la interacción de los usuarios de una manera deliciosa y notable.
Crédito de la imagen: Dribbble.
El movimiento en diseño UX, haga qué la interfaz de usuario sea lógicamente espacial.
Los cambios de estado en la interfaz de usuario a menudo implican cortes duros por defecto, lo que puede hacerlos difíciles de seguir. En la ciencia cognitiva esto se llama ceguera del cambio – cuando el cambio repentino en el estímulo visual se introduce y el usuario no lo nota. Los usuarios necesitan entender de dónde vienen las cosas y dónde pueden encontrarlas de nuevo para qué no se sientan difíciles de cortar. Simplemente porque los cortes duros no existen en el mundo real.
El diseño de movimiento llena la brecha de comprensión definiendo las relaciones espaciales entre pantallas y elementos. Ayuda a las personas a orientarse dentro de la interfaz y establecer relaciones visuales. En el ejemplo siguiente, durante la transición, el usuario es guiado a la siguiente vista y la superficie se transforma para comunicar la jerarquía:
Diseñe capas de interfaz de usuario consistentes que permitan transiciones espacialmente significativas. Las transiciones correctamente creadas pueden orientar a una comprensión más rápida para él usuario.
Crédito de la imagen: Dribbble.
Acciones de confirmación.
El movimiento refuerza las acciones que un usuario está realizando. Para cada botón pulsado y la transición de la pantalla, hay una oportunidad de utilizar un movimiento-diseño. La respuesta visual puede aumentar el compromiso y deleitar al usuario. Por ejemplo, veamos cómo puede ayudar la animación al introducir una contraseña incorrecta en iOS:
Apple iOS utiliza una animación de movimiento horizontal al negar una contraseña. Cuando los usuarios notan la animación, entienden instantáneamente la acción.
A primera vista, la animación de sacudidas en la entrada de la contraseña incorrecta parece tardar más tiempo que al instante muestre una insignia de error. Sin embargo, en realidad, un usuario puede pasar un par de segundos tratando de localizar el mensaje de error para averiguar lo que salió mal, en lugar de notar la animación y la comprensión instantánea del problema.
Expresa placer.
El movimiento puede hacer que su experiencia de usuario sea verdaderamente deliciosa y memorable. Como diseñador, usted debe traer un poco de sí mismo en el diseño y encantar su diseño basado en el movimiento con un atractivo único que la gente va a amar y recordar. Al proponer un movimiento sutil en el diseño, puede hacer que los usuarios sientan que están interactuando con algo que tiene una personalidad.
Incluso pequeños elementos UI como los iconos animados en su diseño puede traer alegría.
Crédito de la imagen: Dribbble.
Conclusión.
El movimiento es el siguiente nivel de tecnología. Es una forma natural de interactuar con las cosas y es absolutamente crítico para él diseño del futuro. Tenemos que decirles adiós a las interfaz de usuario estático y crear interfaz que sean mucho más humanas y vivas. La creación de un lenguaje de movimiento para su aplicación reforzará su marca y complementará su diseño.
Sobre el autor: Nick Babich es un desarrollador de software y autor de un blog dedicado a la usabilidad.