Dando vida a la micro interacción y la animación de la interfaz de usuario a través de colaboraciones desarrollador-diseñador

¡Podemos crear una experiencia deliciosa para los usuarios a través de micro interacción y animación UI!

Hola, mi nombre es Kyo Kim y he trabajado como diseñador de productos en Capital One durante aproximadamente dos años. He estado utilizando micro interacciones y animaciones a lo largo de mi trabajo aquí, incluso en algunos proyectos móviles que podría haber utilizado usted mismo. Antes de comenzar a trabajar en tecnología, mi experiencia era en cine. En el cine, el enfoque se centra en contar y editar historias para crear una historia que atraiga a la audiencia; y gran parte de eso se logra mediante el uso de transiciones. Hoy encuentro útiles esas habilidades al crear experiencias e historias para herramientas digitales.

Cuando estoy diseñando, pienso en los factores que les darían a los usuarios una experiencia excelente y encantadora con las transiciones y la narración de historias.

Para que un producto ofrezca a sus usuarios una experiencia agradable, debe ofrecer más que un diseño estéticamente agradable e impresionantes efectos de animación.

Independientemente de si el producto está basado en la aplicación, en la web o en cualquier otra forma de producto digital, debe atraer a los usuarios, disfrutar de su uso y darles la oportunidad de participar de manera directa y significativa camino.

Las micro interacciones tienen el poder de hacer que el usuario experimente una experiencia agradable y satisfactoria de una manera que muchos elementos de diseño no pueden. Antes de entrar en micro interacciones en el contexto del diseño del producto, comencemos con los fundamentos.

¿Qué son? ¿Por qué es bueno para la experiencia del usuario? ¿Por qué deberían los diseñadores y desarrolladores incorporarlos a su trabajo? ¿Cómo pueden los equipos de diseño de productos trabajar juntos para mejorarlos?

¿Qué son las micro interacciones y por qué deberíamos preocuparnos por ellas?

¿Qué son las micro interacciones o animaciones de UI? Las personas a menudo se refieren a ellos como animaciones bonitas, gráficos en movimiento o diseño de imágenes en movimiento. Sin embargo, son mucho más que eso.

A diferencia de otras formas de animación que existen únicamente para crear la ilusión de movimiento, las micro interacciones involucran directamente al usuario, lo que le permite realizar una variedad de tareas e interactuar con el producto de una manera intuitiva y efectiva.

Si tuviéramos que vincular esto con los principios del buen diseño de sistemas, esto mejora y permite la retroalimentación del sistema para el usuario. Si se hace correctamente, los usuarios tomarán micro interacciones como un mensaje del usuario de que él (el sistema) está haciendo lo que debería hacer en respuesta a lo que el usuario necesita.

Incluso si no sabe qué son las micro interacciones, se compromete con ellas de forma regular. Cada vez que utiliza una aplicación o un producto basado en la web para realizar una tarea en particular, ya sea leer las noticias, realizar una compra, jugar un juego, crear un perfil o ajustar su configuración y preferencias de notificación, cada acción individual que realice constituye Una micro interacción. Las micro interacciones se entrelazan sin problemas en la plataforma de un producto, haciendo que sus funciones sean transparentes y accesibles, mejorando efectivamente la experiencia general del usuario.

Aunque estas "acciones" adoptan varias formas diferentes, algunos ejemplos comunes incluyen:

  • Cuando "movemos" un artículo a un carrito de compras virtual.
  • Cuando seleccionamos entre dos opciones en un botón de alternancia similar a CTA.
  • Cuando "tiramos" hacia abajo para actualizar una fuente de noticias y ver la última actualización.
  • Cuando "nos desplazamos hacia arriba y hacia abajo" en feed o página largos.

Cuando diseñamos una micro interacción, debemos examinar si es realmente necesaria y vital para la experiencia del usuario. De lo contrario, tiene el potencial de distraer el formulario de usuario usando su producto de manera efectiva o convertirse en ruido visual.

Principios de micro interacciones

Hay tres principios que siempre considero al diseñar micro interacciones.

  1. Continuidad (y sutileza)

Los elementos de micro interacción deben ser sutiles para que cuando un usuario realice una acción, haya un flujo continuo en su experiencia. Por ejemplo, si estamos creando una animación de desplazamiento en un feed largo, el usuario debería poder centrarse en el contenido de la página en lugar de la animación de desplazamiento en sí.

2. Previsibilidad

Las micro interacciones de calidad tienen un elemento de previsibilidad que permite al usuario navegar por un producto de manera efectiva y eficiente. El usuario puede predecir con precisión los efectos de sus acciones, sentirse cómodo al revertirlos y confiar en su capacidad para desempeñarse como se espera.

3. Transformabilidad

Las transiciones fluidas entre múltiples pantallas y las transformaciones bien definidas de los diversos objetos dentro de ellas son aspectos clave de las micro interacciones de calidad. Permiten al usuario desarrollar una comprensión intuitiva de las relaciones entre pantallas y los elementos dentro de ellas.

Cuando se diseñan siguiendo estos principios, las micro interacciones proporcionan el contexto para un diseño al ayudar a los usuarios a saber cómo interactuar con él. Una micro interacción es un evento momentáneo que completa una sola tarea. Posiblemente los elementos interactivos más pequeños de un diseño de sitio web o aplicación, las micro interacciones son algunas de las más vitales ya que cumplen una variedad de funciones básicas.

Los disparadores (tocar, deslizar, arrastrar, etc.) inician cada una de las acciones enumeradas en la sección anterior (continuidad, previsibilidad y transformabilidad). El usuario realiza una acción en un sitio web o aplicación para iniciar el proceso (incluso si continúa después del paso inicial). Esto sigue un patrón de llamada a la acción de un usuario, reglas de participación según lo determinado por la interfaz (qué sucederá y cómo), comentarios del usuario (funcionó o no) y patrones o bucles (hace la acción suceder una vez o repetir en un horario).

-Cómo los desarrolladores y diseñadores pueden trabajar juntos para dar vida a las micro interacciones

Como puede ver, las micro interacciones tienen un papel fundamental en la configuración de la experiencia del usuario. Debido a esto, se han convertido en una parte cada vez más importante de mi trabajo como diseñador de productos. Después de haber trabajado en varios proyectos en múltiples plataformas y usos, me di cuenta de que no todos reconocen el valor de estos elementos o cómo crearlos de manera efectiva. Más importante aún, a menudo los miembros del equipo no saben cómo expresarse mutuamente sus ideas sobre el diseño de transiciones y micro interacciones.

Me di cuenta de que todo se reducía a la comunicación: algo se perdió en la traducción cuando expliqué mis ideas de diseño a mis desarrolladores. Es posible que haya escuchado esta cita de Confucio antes, “Dime, y lo olvidaré. Muéstrame, y puedo recordar. Involúcreme y lo entenderé ”. Y es a través de la participación que nosotros, como equipo de diseñadores y desarrolladores, creamos grandes experiencias.

Primero, veamos una descripción rápida del proceso de diseño ...

En una situación ideal, cuando a un diseñador se le ocurre una idea para una micro interacción, el flujo de trabajo tradicional procede en el siguiente orden:

  1. El diseñador desarrolla los elementos visuales y los efectos de animación necesarios para actualizar su idea.
  2. El diseñador presenta el modelo final y sus conceptos subyacentes a los otros miembros del equipo.

Pero, ¿qué pasa si el proceso de diseño no se desarrolla en la práctica como lo hace en teoría? ¿Qué sucede si presentamos un guión gráfico o un modelo incompleto? ¿O alguien más en el equipo está diseñando el modelo?

Cuando esto sucede, es probable que surjan problemas en la presentación o el desarrollo. Estos problemas generalmente se dividen en una de tres categorías:

  1. La idea de animación no se comunica con suficiente claridad.

Si está tratando de describir un concepto de animación con palabras o imágenes fijas, puede ver muecas en los rostros de su audiencia. Esto significa que están haciendo todo lo posible para comprender su idea, pero en realidad no la están entendiendo. Incluso si entienden el concepto básico, la imagen que han conjurado en sus mentes probablemente sea inconsistente con lo que estás imaginando. Debido a que las personas tienden a percibir imágenes en movimiento, imágenes fijas y descripciones verbales de diferentes maneras, confiar en palabras o imágenes para transmitir una idea de animación crea espacio para la falta de comunicación y, a menudo, tensión innecesaria entre los miembros de su equipo.

2. El diseñador no sabe si la animación funciona bien hasta que comprueba y prueba el prototipo del desarrollador.

Cuando los diseñadores no tienen habilidades de creación de prototipos, se limitan a presentar sus ideas a los desarrolladores a través de un guión gráfico. Incluso si un diseñador cree firmemente en un modelo de micro interacción, no puede decir si está funcionando a su máximo potencial hasta que el desarrollador complete el prototipo. Esto es problemático por varias razones, la principal es la alta probabilidad de falta de comunicación que tal enfoque introduce en el proceso. Además, abre la puerta a la duda de los miembros del equipo y genera preguntas sobre la viabilidad de la idea. Esto puede ser costoso en términos de tiempo desde una perspectiva de desarrollo.

3. El diseñador y el desarrollador no están en la misma página.

Cuando los diseñadores hacen animaciones de UI o micro interacciones, intentan incluir detalles de diseño complejos como facilidades personalizadas, scripts, expresiones y otros efectos. Al presentar estas ideas a los desarrolladores, pueden escuchar: "No es posible hacer esto en nuestra línea de tiempo" o "No podemos hacerlo exactamente igual, pero lo intentaremos". En este punto, podrían intentar hacer hash Los diversos detalles y problemas técnicos con los desarrolladores. Sin embargo, estas discusiones pueden terminar siendo infructuosas si el diseñador no tiene un conocimiento práctico de las herramientas o lenguajes que usan los desarrolladores. Estos factores deben tenerse en cuenta al formular y discutir ideas para que las micro interacciones sean compatibles con la configuración predeterminada de los desarrolladores, lo que aumenta la probabilidad de que el producto final cumpla con los estándares del diseñador (y de todos los demás).

¿Cuáles son algunas soluciones a estos problemas?

Si bien todos los diseñadores y desarrolladores tienen su propia forma de comunicarse sobre sus conceptos de animación, quiero compartir uno de los métodos que mi equipo está utilizando. Este método ha tenido bastante éxito y ha resultado en menos reuniones y ha mejorado drásticamente la comunicación de nuestro equipo.

Ahora, ya no estamos discutiendo sobre si incluir o no micro interacciones, ¡estamos explorando formas de mejorarlas aún más!

Concepto de interacción esquelética y guía de interacción

"El concepto de interacción con el esqueleto y la guía de interacción no dejan lugar para la interpretación, lo que me permite comenzar a trabajar de inmediato y tener la confianza de que coincida con la visión del diseñador". –Jesse M Majcher / ingeniero jefe de IOS

El proceso estándar que usamos para comunicarnos sobre los diseños de UX no se traduce bien para las animaciones de UI. En primer lugar, los diseños y flujos de UX todavía se diseñan pantalla por pantalla y son estáticos. Las animaciones de la interfaz de usuario son flujos en sí mismas, son fluidas y se basan en el tiempo. Cuando creamos un diseño estático, hacemos una estructura metálica aproximada para que podamos entender la idea y discutir el flujo. Esto nos permite revisar y ajustar fácilmente el diseño antes de crear la versión final. Una vez que cada miembro del equipo acepta que el diseño está listo para entregar a los desarrolladores, el diseñador proporciona al desarrollador una guía de estilo y una línea roja que contiene detalles, especificaciones y otra información importante sobre el diseño.

Si utilizamos un proceso similar para las animaciones, nuestro proceso podría ser mucho más rápido y mejor.

  1. Concepto de interacción esquelética (estudio de movimiento)

Un concepto de interacción esqueleto es similar a la estructura alámbrica que crearía al diseñar el flujo, la principal diferencia es que se trata de una demostración de prototipo jugable / clicable. Si llevamos esto a una reunión, los miembros de nuestro equipo no tendrán que usar su imaginación para comprender el concepto. El diseñador puede usar la demo jugable / clicable o el storyboard estático para hacer referencia directa a los elementos visuales y de animación del diseño. Esto le dará a todos una idea clara y precisa de su idea. A su vez, los socios pueden ofrecer comentarios que son muy específicos y, por lo tanto, muy valiosos para el diseñador. Al mismo tiempo, los equipos de gestión y desarrollo de productos obtendrán información que les permitirá mejorar sus comunicaciones internas y estimaciones de tiempo para el proyecto.

2. Guía de interacción

Una vez que el equipo está de acuerdo con el concepto, el diseñador crea la guía de interacción. Esto es similar a una guía de estilo en el sentido de que describe la posición, rotación, escala y sincronización de los elementos. Podemos agregar todos los detalles sobre las animaciones, lo que ayudará a nuestros socios a entenderlo claramente. Cuando el diseñador muestra la guía de interacción a sus parejas, él o ella puede ser aún más claro sobre el movimiento y la medición del concepto de animación. Esto es muy útil para finalizar el trabajo a través de la colaboración. También ayuda a los diseñadores a ser más reflexivos en su diseño de animación / micro interacción.

3. Habilidades de creación de prototipos para diseñadores

En mi experiencia, para prepararse para una colaboración de diseño exitosa, el diseñador del producto debe ser el conductor de la animación, y el desarrollador debe proporcionar el soporte. Esto significa que el diseñador del producto tiene la mayor parte de la responsabilidad en la asociación. No solo son responsables de explicar sus ideas con mucha claridad, sino que deben demostrar que son factibles al proporcionar una prueba de concepto. También significa que los diseñadores de productos deben ser capaces de hacer sus propios prototipos de animación. Si un diseñador de producto puede crear un prototipo y presentarlo durante una reunión, la discusión que sigue será más clara y menos lenta, lo que conducirá a un proceso de comunicación más efectivo en general.

Entonces, ¿con qué tipo de herramientas de creación de prototipos deberían familiarizarse los diseñadores? Existen muchas herramientas, pero no todos saben qué funciona mejor para tareas específicas de micro interacción. Aquí están mis recomendaciones basadas en mi experiencia personal al diseñar estos elementos.

Si está familiarizado con la codificación:

  • Móvil: Xcode, estudio de Android
  • Móvil o web: Framer
  • Web: animación CSS

Si desea diseñar una interacción entre una inserción de tipo pantalla y un módulo:

  • Invision y Marbel

Si desea crear interacciones más detalladas:

  • Principle, Adobe CC, origami Studio y Pixate

Si desea crear interacciones detalladas + animación:

  • Despues de los efectos

Actualmente, soy fanático de usar After Effect para mis prototipos. Incluso si no es interactivo (es decir, se puede hacer clic), es la manera perfecta de presentar un concepto de animación. Además, no hay limitación de efecto y puede controlar el movimiento detallado. Incluso es posible usarlo para hacer una interacción en el espacio 3D, como AR y VR.

Las encantadoras interacciones del equipo hacen que los productos sean deliciosos

Las micro interacciones se han convertido en un elemento cada vez más importante, si no crítico, de la web, el diseño móvil y más. Incluso si tanto los diseñadores como los desarrolladores reconocen el valor de las animaciones de la interfaz de usuario y están motivados para crearlas, a menudo tienen dificultades para colaborar de una manera eficiente y efectiva. Se necesita un equipo fuerte para enviar grandes micro interacciones a tiempo; dichos equipos requieren una delimitación clara de roles, habilidades de comunicación efectivas y las herramientas de creación de prototipos adecuadas para las tareas en cuestión.

Para configurar sus micro interacciones para el éxito, asegúrese de que su equipo posea estas características y participe en estos procesos. ¡Y buena suerte con tu propio viaje de micro interacción!

DECLARACIÓN DE DIVULGACIÓN: Estas opiniones son las del autor. A menos que se indique lo contrario en esta publicación, Capital One no está afiliada ni respaldada por ninguna de las compañías mencionadas. Todas las marcas comerciales y otra propiedad intelectual utilizada o mostrada son propiedad de sus respectivos dueños. Este artículo es © 2017 Capital One.

Para obtener más información sobre las API, el código abierto, los eventos de la comunidad y la cultura del desarrollador en Capital One, visite DevExchange, nuestro portal integral para desarrolladores: developer.capitalone.com.