Microinteracciones: diseño con detalles
"Los mejores productos hacen bien dos cosas: características y detalles. Las características son lo que atrae a las personas a su producto; los detalles son lo que los mantiene allí ", dice Dan Saffer. La importancia de los detalles no se puede exagerar. Los detalles hacen que los usuarios amen u odien una aplicación o sitio web. Las microinteracciones son esos detalles. Pueden pasarse por alto fácilmente en el esquema de diseño global, pero en realidad mantienen toda la experiencia en conjunto.
En este artículo, explicaré qué es una microinteracción, por qué son importantes y proporcionan algunos ejemplos excelentes.
Qué es una Microinteracción
Las microinteracciones son momentos sutiles centrados en la realización de una sola tarea. Casi todas las aplicaciones que nos rodean están llenas de microinteracciones.
El ejemplo más conocido de una microinteracción ha existido mucho antes de que se inventaran las computadoras. El interruptor de encendido / apagado es a menudo la primera interacción de microinducción con un producto.
Algunos otros ejemplos de microinteracciones específicas incluyen:
- La notificación de vibración junto con el ícono de modo silencioso en la pantalla cuando enciende un iPhone para silenciarlo.
- El patrón de UI pull-to-refresh. Al conectar el deseo del usuario de encontrar más contenido con la acción de refrescar, la experiencia se vuelve más fluida.
Credito de imagen: Ramotion
- El botón "Me gusta" en las redes sociales que destaca los cambios mediante el uso de animaciones interactivas. Dicha retroalimentación informa a los usuarios que están en la lista de aquellos a los que les gustó la publicación.
Credito de imagen: Dribbble
Por qué funcionan
En resumen, las microinteracciones mejoran el UX al hacer que la interfaz de usuario sea menos humana y más humana. Muchas veces pensamos en apariencia y cómo se relaciona con el diseño. Cuando pensamos en las microinteracciones, casi logran un equilibrio sobre cómo se sienten los usuarios sobre el producto, servicio o marca. Microinteracciones de ajuste fino centrado en el ser humano mediante:
- Proporcionar retroalimentación inmediata : atractivo visual de respuesta al deseo natural de reconocimiento del usuario. El usuario sabe instantáneamente que su acción fue aceptada, y quiere deleitarse con una recompensa visual.
- Actuando como facilitadores de la interacción : las microinteracciones tienen el poder de alentar a los usuarios a interactuar realmente. Pueden guiar a los usuarios en cómo trabajar con la aplicación.
- Trae placer : las microinteracciones son la oportunidad perfecta para deleitarte un poco más con el diseño sin desmerecer la experiencia principal.
Beneficios adicionales
Debido a que las microinteracciones son breves por naturaleza, deben diseñarse para un uso repetido. Las microinteracciones bien diseñadas pueden crear:
Bucle de hábito
Las microinteracciones son los componentes clave de los bucles de hábito. Los hábitos se forman cuando las personas realizan las mismas acciones repetidamente. El bucle de hábito típico consta de tres elementos:
- Cue - Disparador que inicia la acción
- Rutina: en respuesta a la señal, realiza una acción
- Recompensa: un beneficio que obtiene al completar la rutina, motivo por el que debe completar una acción
Cuanto más fuerte es la recompensa, más fuerte se vuelve el hábito.
La notificación de Facebook sobre la nueva solicitud de amistad es un buen ejemplo de bucle de hábito: la insignia roja y el icono blanqueado indican que hay una nueva solicitud, que hace que el usuario haga clic en el icono ( rutina ) para ver información sobre la persona ( recompensa ). Después de un tiempo, los usuarios hacen clic automáticamente en el ícono cuando ven la insignia roja.
Momentos de la firma
Si se hace bien, las microinteracciones pueden ser momentos de la firma que aumenten la lealtad del cliente. Los momentos de la firma son microinteracciones que se han elevado para formar parte de la marca. Piensa en el botón Me gusta de Facebook. Se convierte en parte natural de la interfaz de Facebook. Si Facebook elimina de repente esta característica, los usuarios lo notarán y pensarán que la aplicación está rota.
Identificar oportunidades
Parte de la belleza de las microinteracciones es que pueden insertarse en una variedad de lugares, alrededor de cualquier acción potencial. Las microinteracciones son buenas para:
Destacando los cambios
Las microinteracciones pueden dirigir la atención del usuario . En muchos casos, las animaciones se utilizan para atraer la atención de los usuarios sobre detalles importantes (es decir, notificaciones).
Créditos de la imagen: Dribbble
Minimizando el esfuerzo del usuario
Autocompletar es un gran ejemplo de microinteracción. Escribir tiene un alto costo de interacción; es propenso a errores y consume mucho tiempo incluso con un teclado completo (y más aún en una pantalla táctil). Autocompletar ayuda al usuario a proporcionar la respuesta correcta más rápido y sin errores tipográficos. A medida que escribe cada letra, el sistema hará sus mejores suposiciones en cuanto a las palabras que está tratando de encontrar.
Créditos de la imagen: fancy.surge.sh
Proporcionando comentarios para mostrar lo que se ha logrado
Las microinteracciones pueden reforzar las acciones que realiza un usuario. Siguiendo el principio " mostrar, no contar" , puede usar comentarios animados para mostrar lo que se ha logrado. En El ejemplo de Stripe Cuando el usuario hace clic en "Pagar", aparece brevemente una rueda giratoria antes de que la aplicación muestre el estado de éxito. La animación de Checkmark hace que el usuario sienta que realizó el pago fácilmente y los usuarios aprecian detalles tan importantes.
Proporcionar información de estado
El primer principio heurístico de usabilidad de Jakob Nielsen afirma: el sistema siempre debe mantener a los usuarios informados sobre lo que está sucediendo. El indicador de escritura en el chat es un gran ejemplo de microinteracciones que proporciona información de estado. Aparece en la pantalla de tu amigo mientras redactas un mensaje en el chat.
Créditos de la imagen: Dribbble
Validar datos de usuario
Una de las partes más importantes, y con frecuencia olvidadas, del diseño de formularios es el manejo de errores . Sin embargo, es una naturaleza humana cometer errores, y tu forma probablemente no está exenta de errores humanos. A los usuarios no les gusta cuando realizan el proceso de completar un formulario solo para descubrir que se produjo un error al momento del envío. Aquí es donde la microinteracción de validación desempeña su papel en una forma fácil de usar. La validación en línea en tiempo real informa inmediatamente a los usuarios sobre la exactitud de los datos proporcionados. Este enfoque permite a los usuarios corregir los errores que hacen más rápido sin tener que esperar hasta que presionen el botón de enviar para ver los errores. Cuando se hace bien, puede convertir una interacción ambigua en una clara.
Conclusión
El diseño está en los detalles. Incluso los detalles menores merecen mucha atención, ya que todos estos pequeños momentos conforman la sensación, se unen para formar un hermoso producto holístico.
"La diferencia entre los productos que amamos y los que simplemente toleramos son a menudo las microinteracciones que tenemos con ellos". - Dan Saffer
Si te preocupa la experiencia del usuario, debes preocuparte por las microinteracciones. Debido a que su producto es tan bueno como la mínima microinteracción que las personas tienen con él.