El secreto del diseño Killer UX: todo está en las microinteracciones
Publicado: 2016-11-13El diseño está en los detalles.
El otro día compuse un mensaje para una vieja amiga que no fue fácil de escribir porque era un mensaje para expresarle mis condolencias por la pérdida de su madre. Habíamos hablado por teléfono varias veces a principios de semana, pero quería enviarle un mensaje rápido en la aplicación Facebook Messenger para hacerle saber que estaba pensando en ella. Terminé de redactar el mensaje y decidí agregar un pequeño "corazón" al final.
Este simple acto de tocar el corazón terminó convirtiéndose en una deliciosa explosión de corazones rojos flotantes en la pantalla de mi teléfono que también estuvo acompañada de algunos efectos de sonido tontos. Este momento en el tiempo, aunque breve y fugaz, me trajo unos segundos de sorpresa y alegría durante un momento difícil.
Esto es lo que le sucedió a mi pantalla después de tocar el corazón rojo.
Estos pequeños detalles, también conocidos como microinteracciones, pueden hacer que la experiencia entre un usuario y un dispositivo/producto sea más divertida, fácil, eficaz y humana. A menudo ni siquiera notamos estas microinteracciones.
Son ingeniosamente sutiles ya veces casi invisibles; pero pueden hacer que un producto sea algo que ame el usuario, en lugar de algo que no le guste.
En otras palabras, las microinteracciones tienen el potencial de cerrar mágicamente la brecha entre el usuario y la tecnología a través de una conexión emocional y humana, al mismo tiempo que los alientan a seguir regresando por más.
¿Qué son las microinteracciones?
Las microinteracciones se basan en lograr un solo momento o tarea a través de la provisión de una experiencia placentera y comentarios útiles para los usuarios. Estos micromomentos son los que finalmente guían al usuario a través de un flujo de una manera intuitiva y efectiva.
Dan Saffer, autor del libro "Microinteracciones" y vicepresidente de productos de Mayfield Robotics , define las microinteracciones como "momentos de productos contenidos que giran en torno a un solo caso de uso: tienen una tarea principal. Cada vez que cambia una configuración, sincroniza sus datos o dispositivos, configura una alarma, elige una contraseña, inicia sesión, configura un mensaje de estado o un favorito o le da "me gusta" a algo, está interactuando con una microinteracción. Están en todas partes: en los dispositivos que llevamos, los electrodomésticos de nuestra casa, las aplicaciones de nuestros teléfonos y computadoras de escritorio, incluso integrados en los entornos en los que vivimos y trabajamos. La mayoría de los electrodomésticos y algunas aplicaciones se crean completamente en torno a una microinteracción”.
Según Saffer, las microinteracciones son buenas para:
- Cumpliendo una sola tarea y solo una sola tarea.
- Interactuar con un solo dato, como la temperatura o calificar una canción.
- Controlar un proceso en curso, como el volumen de una canción en Spotify
ajustando una configuración. - Ver o crear una pequeña pieza de contenido, como un estado en Facebook
activar o desactivar una característica o función.
¿Por qué incorporar microinteracciones en sus diseños?
- Ayudan a alentar a los usuarios a interactuar con su sitio, ya sea haciendo clic en un botón, compartiendo contenido o respondiendo a un mensaje o notificación.
- Dan retroalimentación a los usuarios inmediatamente.
- Ayudan a los usuarios a navegar por el sitio.
- Ayudan a guiar a los usuarios a través del flujo de una manera intuitiva y sencilla.
Saffer describe las cuatro partes de las microinteracciones como disparador, reglas, retroalimentación y bucles y modos. Profundicemos un poco más en lo que significa cada uno de estos pasos.
Generar
El disparador es lo que inicia una interacción. Es una señal, visual o de otro tipo, que anima al usuario a actuar. Un activador puede ser el aleteo de un ícono para alentar a un usuario a tocarlo o hacer clic en él. El botón azul que flota hacia la parte superior de su feed de Twitter que dice "nuevos tweets" con una flecha apuntando hacia arriba le permite hacer clic en él para ver todos los nuevos tweets que se han publicado desde que no estaba.
Algunos de los mejores disparadores son aquellos que realmente anticipan la necesidad de un usuario sin que tengan que declarar sus necesidades . Esto requiere que el diseñador recopile la investigación del usuario y los datos de comportamiento para ayudar a predecir cuáles serán las necesidades del usuario y diseñar los activadores en consecuencia.
Normas
El gatillo se relaciona con las reglas. Estas reglas establecen lo que sucede durante la interacción. Las reglas deben sentirse naturales para que un usuario las cumpla y existen para ayudar a minimizar los errores. Un gran ejemplo de esto es si intenta enviar un correo electrónico a través de Gmail sin ingresar una línea de asunto, Gmail le informará que su "correo electrónico no tiene una línea de asunto" y le preguntará si aún desea enviarlo.
Recomendado para ti:
Cómo Metaverse transformará la industria automotriz india
¿Qué significa la disposición contra la especulación para las nuevas empresas indias?
Cómo las empresas emergentes de Edtech están ayudando a la fuerza laboral de la India a mejorar y prepararse para el futuro...
Acciones tecnológicas de la nueva era esta semana: los problemas de Zomato continúan, EaseMyTrip publica...
Startups indias toman atajos en busca de financiación
La plataforma de marketing digital Logicserve obtiene fondos de INR 80 Cr, cambia de marca como LS Dig...
Retroalimentación
La retroalimentación se basa en las reglas y brinda a los usuarios información sobre lo que está ocurriendo en ese momento. Me gustan especialmente los comentarios que recibo sobre los formularios que están diseñados pensando en el usuario. La incorporación de la validación en línea en su diseño dentro del contexto adecuado puede ser realmente útil para el usuario.
Por ejemplo, al ingresar un nombre de usuario, si veo una marca de verificación verde, sé que puedo pasar a completar el campo de contraseña. No puedo decirle cuántas veces completo los campos de nombre de usuario y contraseña, presiono enviar y me dicen en rojo que el nombre de usuario o la contraseña son incorrectos.
El problema con esta situación es que no tengo ni idea de qué campo o letra es incorrecta . Si puedo hacer los cambios correctos en el camino, hace que todo el proceso sea mucho más fácil. Esas pequeñas marcas de verificación verdes, por insignificantes que parezcan, marcan la diferencia en cómo se siente un usuario durante y después del proceso de llenado del formulario y tienen el potencial de conducir a tasas de finalización más altas.
El formulario de registro de Twitter es un excelente y simple ejemplo de cómo se debe usar la validación en línea. Las marcas de verificación aparecen en el lado derecho del campo del formulario mientras estoy completando la acción. El mensaje de error rojo también resulta útil al indicarme qué debo hacer para completar el formulario correctamente.
La aplicación de viaje Hopper también utiliza sabiamente las microinteracciones. Después de ingresar las fechas y los destinos sobre los que me interesa obtener más información, el lindo conejito salta mientras la aplicación "piensa" y obtiene resultados para que yo los vea. A nadie le gusta esperar. Sin embargo, ver al conejito saltar brinda un poco de placer a esa breve experiencia de espera, al mismo tiempo que le permite al usuario saber que algo está sucediendo y que los resultados se mostrarán pronto.
Bucles y modos
Los bucles y los modos determinan las metarreglas más grandes de la interacción. Si una microinteracción se usa repetidamente, es importante considerar cómo cambian las interacciones en consecuencia. Piense en cómo se adapta esta interacción en función del comportamiento del usuario. ¿Cuál es la diferencia entre la microinteracción la primera vez que se usa en comparación con la séptima vez?
Intente crear bucles que se adapten con el tiempo, enriqueciendo la experiencia cada vez que interactúen con ella. La función On This Day Memories de Facebook es un gran ejemplo de cómo crear experiencias que se adaptan cada vez que se interactúa.
La mayoría de los usuarios de Facebook consultan sus fuentes de noticias varias veces al día. Tener una función que en ocasiones muestra una actualización de estado o una imagen de hace 4 años puede tener un efecto emocional (con suerte, positivo) en el usuario. Existe la posibilidad de que esta microinteracción en particular tenga un efecto negativo. Por ejemplo, mostrar una publicación antigua que puede entristecer o estresar al usuario tiene consecuencias negativas no deseadas. Sugiero que Facebook investigue cómo evitar que ocurran esas experiencias negativas.
Cosas a tener en cuenta al diseñar microinteracciones
No sobrediseñe . Las microinteracciones no deberían resultar extrañas ni tardar demasiado en cargarse. Deben cumplir un propósito mientras fluyen sin problemas dentro de su diseño general.
La primera vez que alguien experimenta la microinteracción, no debería sentir lo mismo que cuando la usa la décima o la centésima vez. Haz que las microinteracciones se adapten al contexto. Si es la primera vez de un usuario, haga que las flechas le ayuden a navegar por la aplicación. Dales la opción de no volver a mostrar ese mensaje, para que no se vuelva molesto en el futuro.
Esto me lleva al tercer consejo. No empieces de nada . Comprenda a sus usuarios, sus motivaciones y el contexto realizando una investigación de usuarios. La información que recopile le dará la información que necesita para que su decisión sea más eficaz y utilizable. Si están allí por vigésima vez, averigüe cuáles son sus motivaciones y objetivos y cree microinteracciones basadas en sus hallazgos.
Recuerde, el objetivo es que estas interacciones sean sutiles y efectivas. Asegúrese de que el estilo de la microinteracción encaje naturalmente con el estilo del diseño general de su interfaz. Las interacciones no deben parecer fuera de lugar o confusas y las microinteracciones deben estar conectadas con el diseño general de la aplicación.
6 ejemplos de microinteracciones bien hechas
sorpresa en tu manga
Escuché a alguien describir haber tenido la misma camisa de manga larga suave y acogedora durante años. Un día, mientras corría por un sendero sombreado bordeado de árboles con la misma camisa de manga larga, la corredora describió cómo sintió frío y tiró de la tela adicional, diseñada para los días fríos, para cubrirse las manos y voltear la parte superior sobre sus manos. La tela debajo reveló la declaración "eres amado".
Estas palabras, secretamente impresas en el lugar exacto de la tela, fueron escondidas para mostrarse en momentos como estos sorprendiendo a quienes lo llevaban con un micro-momento de deleite .
Emojis flojos
El sitio web Little Big Details selecciona algunos excelentes ejemplos de microinteracciones. Uno de los que muestran es cuando busca un emoji en Slack y el emoji que está buscando no existe, se sugiere el emoji "llorar" como una opción. En lugar de que el usuario se moleste cuando no puede encontrar lo que busca, el emoji de "llorar" lo hace sentir divertido .
Google Translate
Cuando presiona el botón "escuchar" por segunda vez en Google Translate, repite la traducción a una velocidad más lenta, suponiendo que necesita un poco más de tiempo para comprender lo que dijo.
Modo nocturno en Google Maps
Siempre me encantó cómo el fondo de la aplicación Google Maps se vuelve negro según la hora. El modo nocturno está destinado a ayudar con la visión nocturna y la seguridad y es completamente automático.
Hazme pulso
Visite este sitio Make Me Pulse para una experiencia interactiva verdaderamente encantadora. El uso de microinteracciones ( barras de progreso, sonidos, colores ) ayuda a guiar a los usuarios a través del flujo a través de activadores, reglas, comentarios y bucles.
Barras de desplazamiento
Incluso la pequeña barra de desplazamiento gris en el lado derecho de esta página es un ejemplo maravilloso y simple de cómo una microinteracción puede ser útil y efectiva para que usted, como lector, sepa cuánto material queda por leer de este artículo.
Esperemos que este artículo lo inspire a comenzar a incorporar microinteracciones en sus diseños. Tienen el potencial de transformar la experiencia que sus usuarios tienen con su diseño de simplemente aceptable a algo verdaderamente memorable.
[Esta publicación apareció por primera vez en Proto.io y ha sido reproducida con permiso.]