Entendiendo las microinteracciones en el diseño de aplicaciones móviles

La usabilidad es uno de los componentes clave de diseño de interfaz de usuario móvil. La gran usabilidad a menudo implica microinteracciones cuales son Pequeñas respuestas y comportamientos desde una interfaz. dictando cómo se debe utilizar la interfaz de usuario. Estas microinteracciones definen comportamientos, fomentan el compromiso y ayudan a los usuarios a visualizar cómo debería funcionar una interfaz.

Interfaces digitales son los intermediarios entre los usuarios y sus objetivos deseados. Los diseñadores de interfaces crean experiencias que ayudan a los usuarios. realizar ciertas tareas. Por ejemplo, una aplicación de lista de tareas pendientes tiene una interfaz que ayuda a los usuarios a organizar sus tareas. Al igual que una aplicación de Facebook, los usuarios tienen una interfaz para interactuar con su cuenta de Facebook..

En esta guía, profundizaré más en Microinteracciones para aplicaciones móviles.. Pequeñas interacciones pueden parecer triviales pero pueden tener una inmenso impacto En la calidad de la experiencia de un usuario. Cuando se realiza correctamente, las microinteracciones se sienten como una parte genuina de la experiencia global del usuario móvil.

El poder de las microinteracciones

En la mayoría de los casos, el objetivo de una microinteracción es suministre realimentación Basado en la acción del usuario. Esto puede ayudar a los usuarios Visualiza cómo se mueve o se comporta la interfaz., A pesar de que es puramente digital en una pantalla plana.

Las microinteracciones tienen poder porque crear una experiencia ilusoria. Los controles deslizantes de encendido / apagado realmente no se mueven como interruptores físicos, pero pueden parecer que se mueven de esta manera a través de animaciones.

Encontré una cita increíble en este post que analiza el inmenso valor de las microinteracciones para aplicaciones móviles:

“Los mejores productos hacen dos cosas bien: características y detalles. Las características son lo que atrae a la gente a su producto. Los detalles son los que los mantienen allí. Y los detalles son lo que realmente hace que nuestra aplicación se destaque de nuestra competencia..”

los pequeños detalles Puede parecer insignificante desde el punto de vista del desarrollo, pero desde el punto de vista de la experiencia del usuario realmente Haz la diferencia entre una aplicación correcta UI y una aplicación extraordinaria UI.

Grandes microinteracciones hacen al usuario. hacer pagos por tomar una accion Estas acciones pueden ser repetido y arraigado en el comportamiento del usuario. Pueden aprender a usar una aplicación basada en estas microinteracciones más pequeñas. Cuando el usuario realiza un comportamiento, estas pequeñas interacciones indican "sí, ¡puedes interactuar conmigo!"

Eche un vistazo a los ejemplos que se encuentran en las especificaciones de diseño de materiales de Google. La documentación en realidad tiene una sección completa dedicada al movimiento de materiales.. Relaciones espaciales son una gran parte de esta ecuación, pero el movimiento puede dictar más que solo relaciones espaciales.

Aquí están Los usos más comunes de la animación y el movimiento. en diseño UI / UX móvil:

• Guiando a los usuarios entre diferentes páginas
• Guiar a los usuarios a través de la interfaz para enseñar ciertos comportamientos.
• Sugerir acciones / comportamientos que se pueden tomar en cualquier página

Aplicaciones móviles tienen mucho menos espacio en la pantalla que los sitios web. Esto puede llevar a algunas dificultades para enseñar a los usuarios cómo usar una aplicación. Pero puede ser sorprendentemente simple si sabe cómo implementar microinteracciones correctamente.

Cómo funcionan las microinteracciones

Una sola microinteracción se activa siempre que el usuario se involucra con una parte de una interfaz. La mayoría de las microinteracciones son Respuestas animadas al gesto del usuario.. Por lo tanto, un movimiento de deslizamiento responderá de manera diferente a un toque o una película.

Blink UX hizo un gran post discutiendo los detalles menores de las microinteracciones. Estas pequeñas animaciones deben seguir una proceso predecible que el usuario pueda aprender Para cada interacción en la aplicación..

Las microinteracciones guían a los usuarios a través de una interfaz por ofreciendo respuestas a comportamientos. Una vez que el usuario sabe que un control deslizante de encendido / apagado puede moverse, sabe que es interactivo. Según la respuesta, también sabrán si se activó o desactivó una configuración. Cuando un botón parece que se puede hacer clic en el usuario sabe instintivamente ellos pueden interactuar con eso.

Según UXPin, cada microinteracción básica puede dividirse en cuatro pasos, pero he resumido el proceso en tres pasos.

1. Acción - la el usuario hace algo como flick, deslizar, tocar y mantener, o alguna otra interacción.
2. Reacción - la la interfaz responde Basado en lo que tiene que pasar. Al deslizar una pantalla puede retroceder en el historial del navegador, o tocar un control deslizante ON / OFF puede desactivar una configuración.
3. Realimentación - esto es lo que el el usuario realmente ve Como resultado de la interacción. Cuando el usuario vuelve a deslizar en un navegador móvil, puede aparecer la página anterior hasta aparecer "en la parte superior" de la pantalla. El control deslizante de encendido / apagado puede deslizarse suavemente o crecer más cuando se aplica presión a la pantalla.

Estas acciones muy pequeñas se pueden lograr sin animación, pero las grandes microinteracciones ofrecen una sentimiento realista a la interfaz digital plana, que en su mayoría viene en forma de efectos de animación realistas. Estos dan vida a la interfaz y fomentan una mayor interacción del usuario..

Busque los detalles

Al observar las piezas más pequeñas de un diseño, comprenderá cómo una aplicación debe responder a un comportamiento en particular..

Tire para refrescar Es un buen ejemplo de una microinteracción ahora popular. No fue una parte integral de iOS cuando se lanzó por primera vez, pero muchas aplicaciones tomaron esta idea y comenzaron a moverse con ella. Ahora tirar para actualizar es un comportamiento bien conocido que la mayoría de los usuarios solo saben usar cuando navegan por una interfaz de usuario. Lo mismo se puede decir sobre los menús de hamburguesas móviles que han crecido enormemente en popularidad.

Haz cada microinteracción realista y simple. No exagere las animaciones porque pueden volverse tedioso Si son demasiado detalladas y se acostumbran con frecuencia. El usuario no quiere que aparezcan destellos cada vez que tocan un icono de menú. Establecer un equilibrio Con valor genuino que comunica. cómo debería funcionar la interfaz sin exagerar.

Mirando algunos ejemplos

Creo que la mejor manera de aprender algo es hacerlo, y la segunda mejor manera es estudiar el trabajo de otros. He recogido un pequeño puñado de Animaciones de microinteracción UI / UX de usuarios talentosos de Dribbble para mostrarte cómo se ven estos en una maqueta real.

Cada aplicación será diferente y tendrá diferentes necesidades basadas en lo que hace la aplicación. Al final, la mayoría de los usuarios quieren lo mismo: una aplicación que es intuitivo y ofrece una experiencia de usuario de calidad Con microinteracciones relativas a los comportamientos del usuario..

1. Aplicación de eventos animados UI

El primer ejemplo es una característica de animación de tarjeta ingeniosa creada por Ivan Martynenko. Notarás un puñado de microinteracciones en este diseño, notablemente deslizar la tarjeta y moverse a través de detalles.

Al tocar en la tarjeta crece de tamaño. Y al tocar el botón Suscribir, la foto del perfil del usuario se desliza en la lista de suscriptores. Todo se siente muy intuitivo y bastante natural para la interfaz..

2. Pantalla interactiva de ejercicios

Esta animación creativa de ejercicios móviles viene del diseñador Vitaly Rubtsov. Demuestra a un usuario guardar su entrenamiento para un conjunto de sentadillas.

Note que cada animación tiene la misma efecto elástico de rebote cuando los menús se abren y se cierran a presión. Esto también es cierto cuando la actividad se marca como "Hecho". Consistencia Es clave con las microinteracciones porque todos deben sentirse. conectado a la misma interfaz.

3. Búsqueda de microinteracciones de aplicaciones

Corto, dulce y al punto. Creo que esto describe mejor estas microinteracciones de la aplicación de búsqueda diseñadas por Lukas Horak. Cada animación es Rápido pero todavía notable.

Así es como debes diseñar microinteracciones para evitar la complejidad excesiva. Si la interfaz se carga más rápido sin la animación, entonces, ¿por qué molestarse en agregarla?? Animaciones rapidas mantener al usuario en movimiento sin atascar la experiencia.

4. Microinteracción de la meta de fitness

Creo que Jakub Antalà ??? ??? kà realmente golpeó a este fuera del parque con su microinteracción de meta de fitness. Todas las pantallas tienen esta sensación de jiggly jell-o porque el las formas se mueven tan fluidamente.

Sin embargo, la interfaz también se siente sólido y utilizable. Esto demuestra que las microinteracciones creadas con un propósito pueden ser divertidas y entretenidas, pero también funcionales y pragmáticas..

5. Tirar para actualizar la animación

Aquí está una de mis animaciones favoritas absolutas de extracción para crear creadas por el equipo en Ramotion. Esto no solo imita un fluido Con la acción de tirar, pero la animación de respuesta. se conecta suavemente De un chorrito de líquido en un círculo de carga..

Esta mucha atención al detalle Es lo que resalta la verdadera belleza en las microinteracciones de aplicaciones móviles..

6. Tab microinteracción

Widgets tabulados Son bastante comunes para las aplicaciones móviles debido a las pantallas más pequeñas. Me gusta mucho esta microinteracción creada por John Noussis, aunque creo que sería más efectiva a una velocidad mayor, pero la animación en sí es gloriosa y está bien pensada..

La flecha de anclaje de la pestaña se desliza hacia la derecha al igual que el contenido nuevo rebota desde la derecha. Da la ilusión de la Toda la pantalla se mueve físicamente a la derecha. La animación es exquisita, pero como es tan lenta, creo que la mayoría de los usuarios se molestarán después de unos días..

7. Precarga de animación

No he dicho mucho sobre barras de carga en este post, pero son igual de valiosos para la experiencia en general. La mayoría de los usuarios no quieren esperar a que se carguen los datos, pero definitivamente no quieren mirar una pantalla en blanco mientras se carga.

Bret Kurtz hizo esta increíble pantalla de precarga que es a la vez divertida e informativa. El usuario realmente puede ser entretenido Viendo esta pequeña animación repetida. También pueden ser tranquilizado que la aplicación es todavia cargando sus datos y no se ha estrellado.

Terminando

Todos estos ejemplos demuestran brillantemente el valor de las microinteracciones. Las aplicaciones móviles obtienen mucho más valor de las microinteracciones porque los usuarios tocar físicamente las pantallas con sus dedos. Los usuarios no tocan sus monitores de escritorio o las pantallas de sus computadoras portátiles, pero todos tocan sus teléfonos inteligentes porque es la estado predeterminado de interactividad.

Es un experiencia mucho mas personal, Es por eso que el diseño de aplicaciones móviles puede ser tal proceso matizado. Cuando se realiza correctamente, la adición de grandes microinteracciones móviles puede construir un experiencia de usuario ilusoria poderosa Fuera de nada más que píxeles y movimiento.