Las microinteracciones son la salsa secreta? Eso hace que las aplicaciones y sitios web brillen para los usuarios. Estos pequeños detalles facilitan el establecimiento de una alarma, presionar un botón o simplemente comprender mejor cómo trabajar con un producto digital.
El secreto es que las mejores microinteracciones son elementos en los que el usuario probablemente ni siquiera piensa. Ocurren en un instante, a menudo con un solo toque en una pantalla móvil. A pesar de la pequeña naturaleza de la interacción, por lo tanto? Micro? el valor es inmenso para los usuarios a medida que estos compromisos se integran más con la actividad diaria.
¿Cómo diseñas microinteracciones de un solo toque que harán las delicias de los usuarios? Aqui hay algunas ideas.
Animar un botón
¿Recuerdas la primera vez que notaste el Facebook como en Messenger? Tocaste el? Pulgar hacia arriba? Ícono y creció en el cuadro a la persona con la que estaba conversando. ¿Te hizo sonreír? ¿Ese poco de movimiento te dio un poco de alegría?
Una animación simple, antes del toque para animarlo o después del toque para mostrar que la microinteracción está funcionando, es una manera segura de crear algo que los usuarios quieran tocar. Las animaciones pequeñas proporcionan información sobre lo que está sucediendo para que los usuarios se sientan cómodos y seguros de sus roles en el ciclo de retroalimentación.
No hacer
La animación debe ser tan simple como la microinteracción en sí. Mantenga los movimientos simples y fluidos y, rápido para comenzar y terminar. Agregar una calificación en IMDb sigue este principio; desplácese sobre la clasificación y vea rápidamente la cantidad de estrellas que agregará a medida que se desplaza sobre cada una. Toque para hacer clic para finalizar y confirmar la acción.
Proporcionar opciones
Es una lección en UX que se remonta a las cartas de amor de la escuela primaria y el jardín de infantes. ¿Le agrado? Seleccione si o no.
Se pueden diseñar grandes microinteracciones usando ese mismo concepto. Dé a los usuarios dos opciones rápidas. Toque para iniciar (o detener) una acción; toque para alternar. Los usuarios desean tomar decisiones y tener el control de las experiencias digitales, pero no quieren quedarse atascados con varias pantallas para llegar allí.
Crear acción inmediata
¿La mejor manera de asegurar que los usuarios interactúen con su microinteracción? El resultado debe ser inmediato. El resultado deseado debe:
- Sucede con un solo toque
- Proporcionar la acción deseada dentro de 0.1 segundos
La inmediatez de las microinteracciones es vital para su éxito. Debido a que la naturaleza de estos elementos es pequeña, cualquier retraso en la acción molestará a los usuarios. (Solo piense lo frustrante que sería si se necesitaran tres toques para desactivar una alarma o si hubiera una demora de 2 segundos para silenciar el timbre de una llamada durante una reunión).
El cambio rápido entre un "me gusta" (o "desemejante") o seguir en Instagram es un ejemplo perfecto. Eso es lo rápido que debería ser tu microinteracción.
Diseño para la repetición
Una de las cosas que hace que la microinteracción sea diferente de otros elementos interactivos en su interfaz de usuario es que se utilizarán una y otra vez. Las microinteracciones normalmente no están diseñadas para un solo uso. (¿Cuántas veces has pulsado el botón con forma de corazón de Instagram en la última hora?)
Diseñe para esta acción repetitiva, pero la acción no debe sentirse como un movimiento repetitivo. Si bien eso puede parecer mucho para asimilar, todo se reduce a la naturaleza intuitiva del grifo. ¿Es obvio y natural? Si un usuario no tiene que pensar en una acción, nunca lo encontrará repetitivo para completar.
El uso de patrones de usuario, animaciones y estilos de iconos comúnmente aceptados lo ayudará a guiar la forma en que diseña las microinteracciones. No reinventes la rueda aquí; Facilite a los usuarios completar las tareas con un solo toque y sin tener que rascarse la cabeza sobre cómo hacerlo.
Hazlo legible y relacionado
Este es el paso que se olvida con demasiada frecuencia: las instrucciones dentro de las microinteracciones deben ser legibles y relatable
Legible se refiere a cualquier texto o instrucciones que se relacionen con la microinteracción. Las palabras deben ser fáciles de ver y escanear. Desde la perspectiva del diseño, seleccione un buen tipo de letra y asegúrese de que haya suficiente espacio alrededor de las palabras y mucho contraste entre las letras y el fondo. Manténgase alejado de fuentes tipográficas condensadas, finas o novedosas que no son fáciles de leer de un vistazo.
Relatable se refiere al texto que se lee de la misma manera que las personas hablan. Se debe evitar el lenguaje poco común o las frases incómodas. Las instrucciones dentro de los campos de formulario que desaparecen a medida que un usuario comienza a escribir son un gran ejemplo. Esto es particularmente cierto cuando la redacción usa un tono o voz que el usuario espera de la marca o el sitio web con el que están interactuando.
Centrarse en los detalles
Una microinteracción es uno de los muchos detalles de diseño que conformarán su interfaz. Necesitas tener especial cuidado con cada uno de ellos.
Las microinteracciones deben sentirse como parte del diseño general. Pero también tienes que pensar en estas pequeñas acciones de otras maneras. Desde las opciones de color hasta el tamaño de los elementos con los que un usuario necesita interactuar, estos detalles fomentarán la acción o harán que los usuarios abandonen el diseño por otra cosa.
Como lo haría con cualquier otro elemento de diseño, cree un conjunto de reglas de estilo y diseño para microinteracciones dentro de una aplicación o sitio web para que las acciones sean coherentes en todo el diseño y sean fáciles de encontrar y para que los usuarios puedan encontrar. Cuanto más pequeño es el elemento, o la interacción, más detalles importantes se vuelven.
Mantenlo simple
Decirlo un millón de veces no es suficiente, mantenlo simple. Hay demasiados diseños que son demasiado difíciles de usar. Puedes pensar que es genial, pero los usuarios no lo harán. Les gusta la previsibilidad, la consistencia y la sencillez.
Cuanto más fácil sea interactuar con algo, es más probable que los usuarios toquen un botón. Es por eso que las acciones de un toque son tan importantes.¿Cómo sabes si tu diseño es lo suficientemente simple? Necesita una estructura definida con un bucle de retroalimentación para las acciones, instrucciones simples y visuales, y un mensaje que se comunica claramente y es fácil de entender.
No dejar de desarrollar
Diseñar microinteracciones es un proceso evolutivo. Debido a que este es un concepto tan nuevo, está cambiando todo el tiempo. Hay nuevas ideas y nuevas formas de crear algo que los usuarios quieren aprovechar.
Mantenerse en línea con la evolución de las microinteracciones se remonta a los conceptos básicos que Dan Saffer definió por primera vez. (También escribió uno de los libros con mayor autoridad sobre el tema, "Microinteracciones: diseño con detalles".) Las microinteracciones incluyen un proceso de cuatro pasos que comienza con una acción de activación, reglas para el funcionamiento de la interacción, un circuito de retroalimentación que el usuario sabe. sucedió algo, y bucles y modos que dictan cómo funcionarán las futuras interacciones o lo que vendrá a continuación. Tenga eso en cuenta y estará en el camino hacia el éxito de la microinteracción.
Conclusión
Hay muchas piezas para diseñar algo tan pequeño. Entonces, no creas que puedes crear una microinteracción en cinco minutos y seguir adelante. Diseñar una microinteracción requiere especial consideración y planificación.
Recuerde, las mejores microinteracciones generalmente funcionan con un solo toque y son elementos que los usuarios ni siquiera piensan en participar, aunque lo harán de manera regular.