Cómo diseñar microinteracciones de un toque
Las microinteracciones son la "salsa secreta" que hace que las aplicaciones y los sitios web brillen para los usuarios. Estos pequeños detalles facilitan configurar 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. Suceden en un instante, a menudo con solo un 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 toque que harán las delicias de los usuarios? Aqui hay algunas ideas.
Explore los elementos de Envato
Animar un botón
¿Recuerdas la primera vez que notaste que me gusta Facebook en Messenger? Tocaste el ícono de “pulgar hacia arriba” y creció en el cuadro a la persona con la que estabas chateando. ¿Te hizo sonreír? ¿Ese pequeño movimiento te dio un poco de deleite?
La animación simple, antes del toque para alentarlo o después del toque para mostrar que la microinteracción está funcionando, es una forma segura de crear algo que los usuarios desean tocar. Pequeñas animaciones proporcionan información sobre lo que está sucediendo para que los usuarios se sientan cómodos y seguros sobre sus roles en el ciclo de retroalimentación.
No
La animación debe ser tan simple como la microinteracción en sí. Mantenga los movimientos simples y fluidos y rápidos para comenzar y terminar. Agregar una calificación en IMDb sigue este principio; coloque el cursor sobre la calificación y vea rápidamente la cantidad de estrellas que agregará a medida que avanza sobre cada una. Toque para hacer clic para finalizar y confirmar la acción.
Proporcionar opciones
Es una lección de 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 con el mismo concepto. Ofrezca a los usuarios dos opciones rápidas. Toque para iniciar (o detener) una acción; toque para alternar. Los usuarios quieren tomar decisiones y sentirse en control de las experiencias digitales, pero no quieren estar empantanados con múltiples pantallas para llegar allí.
Crear acción inmediata
¿La mejor manera de garantizar que los usuarios interactúen con su microinteracción? El resultado debe ser inmediato. El resultado deseado debería:
- Sucede con un solo toque
- Proporcione la acción deseada dentro de 0.1 segundos
La inmediatez de las microinteracciones son vitales 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 tomaran tres toques para apagar 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 un me gusta) o seguir en Instagram es un ejemplo perfecto. Así de rápido debería ser su microinteracción.
Diseño para 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 usarán una y otra vez. Las microinteracciones generalmente no están diseñadas para un solo uso. (¿Cuántas veces tocaste el botón Me gusta en forma de corazón de Instagram en la última hora?)
Diseñe para esta acción repetitiva, pero la acción no debería sentirse como un movimiento repetitivo. Si bien puede parecer mucho para asimilar, se trata de la naturaleza intuitiva del grifo. ¿Es obvio y natural? Si un usuario no tiene que pensar en una acción, nunca le resultará repetitivo completarla.
El uso de patrones de usuario comúnmente aceptados, animaciones y estilos de íconos ayudará a guiar la forma en que diseña microinteracciones. No reinventes la rueda aquí; facilite a los usuarios completar tareas con un solo toque, y sin tener que rascarse la cabeza sobre cómo hacerlo.
Hazlo legible y relatable
Este es el paso que se olvida con demasiada frecuencia: las instrucciones dentro de las microinteracciones deben ser legibles y relacionables.
Legible se refiere a cualquier texto o instrucciones relacionados con la microinteracción. Las palabras deben ser fáciles de ver y escanear. Desde una perspectiva de diseño, es clave seleccionar un buen tipo de letra y asegurarse de que haya suficiente espacio alrededor de las palabras y mucho contraste entre las letras y el fondo. Manténgase alejado de los tipos de letra condensados, delgados o novedosos que no son fáciles de leer de un vistazo.
Relatable se refiere al texto que se lee de la misma manera que la gente habla. Se debe evitar el lenguaje poco común o la redacción incómoda. Las instrucciones dentro de los campos de formulario que desaparecen cuando un usuario comienza a escribir es un gran ejemplo. Esto es particularmente cierto cuando la redacción utiliza un tono o voz que el usuario espera de la marca o sitio web con el que está interactuando.
Centrarse en los detalles
Una microinteracción es uno de los muchos detalles de diseño que conformarán su interfaz. Debe tener especial cuidado con cada uno de ellos.
Las microinteracciones deben sentirse como parte del diseño general. Pero también debes 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 alentará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 estilo y reglas de diseño para microinteracciones dentro de una aplicación o sitio web para que las acciones sean consistentes en todo el diseño y fáciles de encontrar y participar para los usuarios. Cuanto más pequeño es el elemento, o interacción, los detalles más importantes se vuelven.
Mantenlo simple
Decirlo un millón de veces no es suficiente, manténgalo simple. Hay demasiados diseños que son demasiado difíciles de usar. Puede pensar que es genial, pero los usuarios no lo harán. Les gusta la previsibilidad, la coherencia y la simplicidad.
Cuanto más fácil sea interactuar con algo, más probable es 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 ciclo de retroalimentación para acciones, instrucciones simples y visuales, y un mensaje que se comunique claramente y sea fácil de entender.
No dejes 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 desean aprovechar.
Mantenerse en el camino con la evolución de las microinteracciones se remonta a lo básico que Dan Saffer definió por primera vez. (También escribió uno de los libros más autorizados sobre el tema, "Microinteracciones: Diseño con detalles".) Las microinteracciones incluyen un proceso de cuatro pasos que comienza con una acción desencadenante, reglas sobre cómo funciona la interacción, un ciclo de retroalimentación para que el usuario sepa sucedió algo y bucles y modos que dictan cómo funcionarán las futuras interacciones o qué vendrá después. Tenga esto 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. Por lo tanto, no piense que puede 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 con los que los usuarios ni siquiera piensan en participar, aunque lo harán de manera regular.
