Mejor UX a través de microinteracciones

Al diseñar un producto, hay muchas maneras de mejorar la experiencia del usuario, incluida la definición de personas, una arquitectura de información bien estructurada y contenido cuidadosamente escrito. Pero después de establecer esta estructura de alto nivel, crear placer para un usuario viene en los detalles de diseño de interacción más pequeños.

Estos detalles, conocidos como microinteracciones , son momentos individuales en el producto diseñados para realizar una sola tarea mientras mejoran el flujo natural del producto. Deslizar hacia arriba para actualizar los datos, dar me gusta al contenido o cambiar una configuración son todas microinteracciones. También pueden incluir animaciones de interfaz de usuario simples, por ejemplo, la forma en que un menú se desliza cuando se toca o una tarjeta se desliza fuera de la pantalla cuando se desliza.

A menudo, el usuario ni siquiera nota conscientemente las microinteracciones, pero sus detalles sutiles hacen que el producto sea más agradable y fácil de usar y, por lo tanto, mejoran su experiencia de usuario.

Beneficios de las Microinteracciones

Las microinteracciones y la animación de la interfaz de usuario son tan cruciales que pueden hacer o deshacer un diseño, o como dijo Charles Eames, famoso por el diseño de muebles y la arquitectura:

Los detalles no son los detalles. Ellos hacen el diseño.

Algunos beneficios clave de incorporar microinteracciones en un producto son:

• Creando un efecto emocional positivo en el usuario debido a interacciones de interfaz de usuario más fluidas
• Proporcionar comentarios inmediatos al usuario en función de las acciones que ha realizado.
• Guiar al usuario a través de una aplicación de una manera más fluida e intuitiva
• Animar a los usuarios a interactuar con una aplicación respondiendo a una notificación o compartiendo contenido
• Prevención de errores de usuario

Mejores prácticas de diseño de microinteracción

Ahora que hemos establecido alguna definición y contexto sobre lo que hacen las microinteracciones y dado un ejemplo de cómo mejoran la experiencia del usuario, analicemos las mejores prácticas para crear microinteracciones.

Identificar y comprender el problema del usuario

La primera regla en cualquier diseño de experiencia de usuario es descubrir y comprender los problemas de los usuarios; no es diferente para las microinteracciones. La mejor manera de comprender lo que necesita el usuario es realizar encuestas o entrevistas, u observar el comportamiento a través de la investigación del usuario. El diseñador de Toptal, Ivan Annikov, profundiza más en la comprensión de las necesidades de los usuarios en su artículo, "Going Guerrilla: Affordable UX Research Tips and Alternatives".

Mantenga las microinteracciones naturales

El objetivo es cerrar la brecha entre el usuario y un producto de manera que se sienta intuitiva y natural, así que evite animaciones extrañas que tarden demasiado en cargarse o que puedan distraer al usuario. En su lugar, cree diseños que fluyan a la perfección con el producto. La sutileza es clave en las microinteracciones. No deje al usuario desconcertado y pensando: "¿Qué fue eso?"

Probar e iterar los hallazgos de las pruebas de usuario

Incluso los diseñadores experimentados rara vez obtienen diseños completamente correctos en el primer intento. Es por eso que usar un proceso de prueba de usuario y diseño iterativo es una forma simple de reducir las fallas de usabilidad antes del lanzamiento del producto.

Durante la fase de prueba del usuario, las microinteracciones se prueban y analizan para determinar su usabilidad y se revisan durante la siguiente fase de diseño. Este proceso se repite hasta que se corrigen los problemas de usabilidad y los puntos débiles.

Sigue la estructura de las microinteracciones

Según Dan Saffer, diseñador sénior de productos del personal de Twitter y autor de "Microinteracciones: diseño con detalles", hay cuatro partes de una microinteracción.

1. Disparador: un disparador inicia las microinteracciones. Un tipo de activador es un interruptor de palanca que activa y desactiva una funcionalidad.
2. Reglas: una regla determina cómo responde una microinteracción a un disparador y define lo que sucede durante la interacción. Por ejemplo, una aplicación de linterna usa un botón como disparador que enciende y apaga la luz.
3. Comentarios: los comentarios le dicen al usuario lo que está sucediendo durante la microinteracción. Un ejemplo de comentarios es un formulario de registro con validación en línea: un color de borde se vuelve verde si el campo se completó correctamente y se vuelve rojo si algo es incorrecto. De esta manera, el usuario sabe instantáneamente que algo está bien o mal.
4. Bucles y modos: los bucles y modos definen las metarreglas de la microinteracción y cómo cambia la microinteracción cuando se usa repetidamente. Por ejemplo, en el comercio electrónico, un botón "Cómpralo ahora" podría cambiar a "Comprar otro" cuando el usuario haya comprado el artículo anteriormente.

Deconstruyendo el diseño de microinteracción

Para mostrar el proceso de pensamiento detrás del diseño de microinteracciones, deconstruyamos una microinteracción de Google: la microinteracción de sugerencia de nombre de archivo en Google Docs.

Esta microinteracción toma la primera línea de un documento y sugiere ese fragmento de texto como el nombre del documento, lo que hace que el proceso de creación de nombres sea más intuitivo.

El proceso de diseño de una microinteracción es el mismo que el de cualquier tarea de diseño: identificar el punto débil del usuario y solucionarlo. Teniendo en cuenta las mejores prácticas anteriores, comencemos a identificar el problema.

El problema del usuario

Una manera fácil e intuitiva de mantener los documentos organizados es simplemente nombrarlos de forma descriptiva. En la mayoría de los editores de texto, el campo "Dé un nombre a su documento" permanece en blanco, aunque existe una gran posibilidad de que el nombre del archivo eventualmente se correlacione con el contenido del documento. Este es un proceso que vale la pena abordar con una microinteracción.

La solución de Google

Google Docs maneja esto de dos maneras, dependiendo de las elecciones del usuario: 1) Los usuarios pueden hacer clic en el campo de nombre y cambiar el nombre del documento inmediatamente antes de escribir cualquier contenido, y cambiar "Documento sin título" al nombre de su elección, o 2 ) Una vez que un usuario escribe la primera línea de texto, Google la completa automáticamente como el nombre del documento. El usuario puede mantener esto como está o cambiarlo.

Examinemos los detalles:

disparadores

Podría haber algunos desencadenantes posibles para nombrar el documento, usando la función de menú Archivo > Guardar como , o presionando cmd+s en una Mac ( ctrl+s en Windows) en el teclado como en las aplicaciones de escritorio. Pero ninguno de estos aprovecha la naturaleza interactiva de la web, y no mejoran particularmente el flujo de usuarios.

En cambio, el disparador principal de Google Docs es simplemente hacer clic en el campo del nombre del documento. El estado de desplazamiento sobre el campo muestra una información sobre herramientas "Renombrar". El activador secundario es Archivo > Renombrar , que resalta el campo de entrada del nombre.

Normas

Las reglas definen lo que sucede después de hacer clic en el gatillo. En este caso, la primera línea de texto aparecerá como el nombre del documento. Pero, ¿qué pasa si el usuario no quiere tener la primera línea de texto como nombre? Cuando el usuario hace clic en el campo de entrada del nombre, se selecciona todo el texto y se eliminará con cualquier pulsación de tecla, lo que facilita al usuario la creación de un nuevo nombre.

Realimentación

Cambiar el color del borde del campo de entrada es un patrón de interacción común, y es lo que Google Docs usa aquí para brindar al usuario comentarios inmediatos.

Bucles y modos

El usuario creó con éxito el nombre del documento y el activador permanece en su lugar con una diferencia clave: el documento ahora tiene un nombre.

En este punto, es posible que el usuario solo quiera cambiar algunas letras o agregar una fecha al nombre, en lugar de cambiar el nombre completo que definió previamente. En este caso, a diferencia de la regla anterior, la regla para resaltar el nombre completo del documento está deshabilitada.

Resultado

Después de definir el problema y centrarse en las cuatro partes de una microinteracción, el resultado es una experiencia más natural y fácil de usar. La solución de nombres de archivos de Google Docs ayuda al usuario a mantenerse organizado con archivos con nombres adecuados y simplifica el proceso de nombrar documentos.

Microinteracciones en acción: ejemplos del mundo real

Reordenar una lista de tareas

Los recordatorios de Apple iOS ayudan a los usuarios a mantenerse organizados y eliminan varios pasos al permitirles tocar, mantener presionado y arrastrar un elemento de la lista para cambiar su lugar en el orden de la lista.

Reaccionar a las publicaciones en las redes sociales

"Me gusta" el contenido haciendo clic en un botón o icono de pulgar hacia arriba se ha convertido en un patrón de diseño de UX común en muchas aplicaciones y sitios web. Facebook se basó en esta interacción al agregar múltiples opciones más allá de "me gusta" a través de una microinteracción sutil.

Resaltado de texto de marca

En la mayoría de los navegadores, es posible anular el color de selección de texto predeterminado. IKEA usa este patrón de interacción para agregar un sutil detalle de marca al resaltar el texto en sus icónicos colores amarillo y azul.

Compartir su ubicación

Google Hangouts asume que una de las veces que un usuario puede querer compartir su ubicación es cuando alguien envía un mensaje de texto con la pregunta "¿Dónde estás?"

Cuando el usuario ve este mensaje, aparece un botón "Comparte tu ubicación" como una opción contextual. Luego pueden tocar ese botón para enviar automáticamente un mapa de su ubicación al otro usuario.

Deslizar para seleccionar

Las microinteracciones se pueden usar para responder preguntas simples de sí o no en una aplicación. Tinder hace esto haciendo que el usuario deslice el dedo hacia la izquierda o hacia la derecha (no/sí) dependiendo de si le gusta o no su posible coincidencia.

Expansión de búsqueda

La aplicación Google Inbox no solo agrupa de forma inteligente el correo con paquetes, sino que también está diseñada para permitir la búsqueda por voz o elegir entre los contactos más recientes con un solo toque.

Adición rápida de la información de contacto de un amigo

SeatGeek simplifica el proceso de llenado de formularios al completar automáticamente la información de los contactos de un usuario con un toque en el botón "Agregar desde contactos".

Más información sobre las microinteracciones

Las microinteracciones son una parte clave para mejorar la experiencia del usuario y hay muchos recursos disponibles para obtener más información sobre ellas, algunos de los cuales se enumeran a continuación.

Para obtener más información sobre las microinteracciones en general, visite Microinteractions, el sitio web creado como complemento del libro mencionado anteriormente "Microinteracciones: diseño con detalles" de Dan Saffer. En el sitio, hay explicaciones detalladas de las microinteracciones, así como información sobre el origen de las conocidas microinteracciones, como autocorrección, autocompletado y cortar y pegar. El primer capítulo del libro también está disponible como descarga gratuita.

Para inspirarse en las microinteracciones, visite Little Big Details, una colección seleccionada de microinteracciones en productos digitales. Muestra ejemplos de cómo empresas como Apple, Trello y Stack Overflow implementan microinteracciones y animaciones de interfaz de usuario.

Para aprender a crear microinteracciones en Framer, lea el artículo de Toptal Designer, Wojciech Dobry, Tutorial de Framer: 7 microinteracciones simples para mejorar sus prototipos.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Los principios del diseño y su importancia
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Explorando los Principios Gestalt del Diseño
• Adobe XD vs. Sketch: ¿Qué herramienta UX es adecuada para usted?
• Los 10 entregables de UX que usan los mejores diseñadores