Creación de microinteracciones en Adobe XD | Jonathan Montalvo | Julio de 2021 – Usabilidad web y seo

Creación de microinteracciones en Adobe XD | Jonathan Montalvo | Julio de 2021

Vistas: 19
0 0
Tiempo de lectura:4 Minutos, 30 Segundos

Esta es otra función llena de estados en la que he creado varios estados para el contenedor de entrada. La animación que ve es el resultado de la animación automática de un estado a otro (como se muestra en el campo de entrada de correo electrónico de arriba), y el error de contraseña con animación de movimiento / movimiento es el resultado de animar automáticamente varias mesas de trabajo compensando el campo de entrada algunos píxeles a la izquierda del punto central, y luego desplazarse a la derecha unos pocos píxeles. Haga esto varias veces para crear un corto período de tiempo entre mesas de trabajo para vender el efecto. Asegúrese de volver a colocar el campo de entrada en el centro de la última mesa de trabajo.

Aparece una ventana modal, que además advierte al usuario sobre el error y también le da la oportunidad de restablecer su contraseña. Esto lo activa el usuario cuando intenta iniciar sesión sin las credenciales correctas para indicar aún más el estado actual de sus esfuerzos de inicio de sesión. Esto se crea con una acción de superposición de modo de prototipo que se activa al hacer clic en el botón de inicio de sesión.

4. Deslizar gestos

Los gestos de deslizamiento son un enfoque muy intuitivo para la microinteracción en dispositivos táctiles. En el mundo heurístico, esto hace que el usuario se sienta en uno con el producto digital debido a la magia detrás de los comandos de gestos de movimiento / arrastre frente a los rudimentos de tocar. Además, las transiciones que se pueden crear son muy suaves y evitan tiempos de carga al remodelar objetos y / o revelar nueva información escondida en cajas, tarjetas y páginas. Estos disparadores son puramente controlables por el usuario y son los más adecuados para dispositivos táctiles. Los activadores de arrastre pueden ejecutarse en el escritorio y es probable que interactúen mejor con los paneles táctiles.

Gesto de deslizamiento simple para revelar nuevas tarjetas creadas en Adobe XD
Configurar un gesto de deslizamiento prototipo

Es bastante simple de crear, y todo depende de tu creatividad, de cómo quieras animar los gestos. Como puede ver en mi versión, tengo las cartas apiladas una encima de la otra dando una sensación de profundidad y dimensión. Cuando el usuario se desliza por la pantalla, la tarjeta cae en ángulo. Esto se hizo a propósito. Incliné la tarjeta 45 grados y la moví hacia abajo fuera de la pantalla, como si se cayera por el borde. Luego, la tarjeta detrás de ella se expande y se mueve hacia arriba de acuerdo con el retardo de tiempo adicional (disparador), que revela el contenido 0.3 segundos después de que se coloca la tarjeta. ¿Cómo creará la animación de deslizamiento en su prototipo de XD?

5. Datos interactivos

Una de mis partes favoritas sobre la usabilidad de las microinteracciones gira en torno al campo de la visualización de datos. Los datos pueden ser enormes y es fácil para los usuarios mirar rápidamente hacia otro lado cuando se presentan. Entonces, ¿qué tan fácil es mostrar grandes cantidades de datos?

Al hacer que los datos sean interactivos, nos permite crear pantallas modulares con componentes interactivos que mantienen los conjuntos de datos invisibles hasta que interactúan con ellos. También crea divertidas animaciones que dan vida a gráficos y tablas aburridos.

Barra de herramientas interactiva integrada en Adobe XD

Aquí he demostrado tres interacciones simples. Sitúe el cursor sobre el estado para mostrar los porcentajes en un gráfico circular, un carrusel que muestra varias opciones de datos en un gráfico circular y activadores táctiles para un gráfico de líneas para mostrar los datos de cada día en una línea de tiempo.

Interactuar con el estado de desplazamiento fue simple: convierta el gráfico en un componente y cree un estado de desplazamiento que muestre los datos. Luego, minimice la opacidad a “0” para los datos que no desea ver en el estado predeterminado.

El otro gráfico circular interactivo es un poco más complejo y puede requerir el tutorial de Howard Pinski en YouTube para comprenderlo correctamente. Facilita la creación de gráficos circulares.

La última interacción es simplemente un disparador táctil colocado en diferentes partes del gráfico de líneas. Cada disparador se transfiere automáticamente a un estado diferente. Mientras que cada estado está asociado con un nodo invisible en la línea de tiempo para que tenga lugar la interacción.

Las microinteracciones están diseñadas para crearse con la intención detrás de lo que usted comprende completamente sobre la base de usuarios. Mantenga las animaciones simples, concisas y sin esfuerzo. En otras palabras, ¡Mantenlo simple y estúpido!

Como recordatorio, aquí hay seis razones por las que las microinteracciones son útiles.

  1. Monitoreo del proceso actual con retroalimentación instantánea
  2. Ofreciendo recomendaciones sutiles a los clientes
  3. Es mucho más fácil completar una tarea.
  4. Navegación mejorada
  5. Simplificar la interacción del usuario con un solo dato
  6. Ver o crear una pequeña parte de contenido, como un mensaje de estado

Descargar archivo XD gratis

Archivo XD – Microinteracciones

Sígueme en Dribbble

Recursos:

Desarrollo de microinteracciones – Dan Saffer

Microinteracciones en la experiencia del usuario (NNG) – Alita Joyce

Heurística y sesgo cognitivo – Kendra Cherry

Microinteracciones: por qué, cuándo y cómo: por Wamsey Butchu

UX Collective dona $ 1 por cada artículo que publicamos. Esta historia es una contribución a la World-Class School of Designers: una escuela de diseño gratuita a nivel universitario centrada en la formación de diseñadores africanos jóvenes y talentosos para el mercado digital local e internacional. Cree una comunidad de diseño en la que crea.
Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post ¿Importa para el SEO? (Investigación de datos)
Next post Cómo automatizar el SEO: una guía para principiantes

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta