Así comienzan muchas historias de detectives: alguien nuevo llega a una fiesta y los demás invitados se muestran incómodos en su presencia. Posee algo desagradable que nadie sabe determinar, pero no olvidemos al fiel detective: él o ella tiene la mirada mucho más afilada y entrenada que el común de los mortales y sabe distinguir a la primera qué transmite tanta desconfianza.
Un simple detalle. Por ejemplo, el invitado había querido deslumbrar con una orquídea en la solapa que, por desgracia, despide un sutil olor nauseabundo.
En diseño online, muchas veces nos topamos con este tipo de invitado que nos cansa o nos pone nerviosos. Navegamos con agilidad y no tenemos tiempo de detenernos a analizar cuál ha sido la causa, pero algún detalle del diseño ha hecho fracasar nuestra experiencia.
Y aquí es donde también entran en acción detectives silenciosos que todo lo saben: las microinteracciones que hacen de la experiencia de usuario un evento natural, sin imprevistos, inolvidable.
Índice
- Te rodean por todas partes: ¿Qué son microinteracciones?
- Microinteracciones: La revolución de la experiencia de usuario (UX)
- Principios de las microinteracciones: Las buenas prácticas están en los detalles
Te rodean por todas partes: ¿Qué son las microinteracciones?
Explicándolo de forma muy sencilla, las microinteracciones son pequeñas animaciones en las que el diseño y el usuario interactúan, ya sea en una página web, app móvil, interfaz de software o dispositivo.
Se utilizan para informar al usuario sobre alguna acción realizada y mejorar su experiencia, como las confirmaciones de lectura de una conversación de chat, el botón de ‘Me gusta’ en una red social, la barra de progreso de carga de un vídeo, las estrellas de calificación rápida de un producto…
Las microinteracciones no son sólo geniales instrumentos para empezar una acción, sino para mantener al usuario informado acerca del progreso de una petición. El antiguo pánico a la pantalla en blanco (o negro), y a no saber si una acción se ha colgado o ha resultado errónea se resuelve mediante microinteracciones que indican constantemente qué está sucediendo tras cada click.
¿A qué velocidad avanza el envío de un archivo pesado? ¿Se está tramitando el pago en una tienda online vía PayPal? ¿Se ha actualizado mi nueva contraseña? ¿Realmente se está bajando el volumen de este podcast en un altavoz bluetooth? Muéstralo todo mediante una microinteracción.
Estas pequeñas animaciones basan su utilidad en resumir información en un formato minimalista, que hace las esperas del usuario más llevaderas, en especial cuando se exigen ratios de respuesta para cada acción cada vez más rápidos.
Pero las microinteracciones empapan todo el diseño de una interfaz, y pueden reflejar más acciones y ofrecer una experiencia uniforme en cada pequeño detalle, como veremos a continuación.
- Completar tareas más rápido.
- Interactuar con elementos individuales.
- Ajustar opciones de uso (básico on/off).
- Crear y recibir información breve.
- Controlar un proceso en marcha.
- Sugerir recomendaciones relacionadas.
- Mejorar la navegación o consulta.
- Conectar distintos dispositivos.
Microinteracciones: La revolución de la experiencia de usuario (UX)
A estas alturas, debería ser obvio reconocer que un buen diseño es algo más que un diseño bonito. Pero no todos los websites y aplicaciones móviles parecen haber asimilado esta verdad y, muchas veces, continúan ofreciéndose experiencias de usuario confusas o incompletas detrás de colores e imágenes atractivas.
Las mejores microinteracciones son aquellas que pasan desapercibidas, lo cual indica dos cosas.
Uno, que el diseño es tan bueno que el usuario sabe reconocer su funcionamiento y utilidad a la primera, sin manual de instrucciones o más allá de una explicación breve.
Y más importante aún, que el periodo de asimilación de esas microinteracciones es ínfimo, de forma que pasan de inmediato a ofrecer una utilidad en la experiencia de usuario, mejorar la satisfacción y, por tanto, la lealtad y confianza hacia la app, web, software o dispositivo.
El peso de la palabra ‘revolución’ puede llamar la atención sobre lo equivocado. Lo revolucionario de las microinteracciones es, ante todo, su elevado grado de efectividad a través de la simplicidad. No el diseño complejo, la animación impactante que al tercer uso empieza a cansar, o el más de lo más para intentar diferenciarse de la competencia.
La opción “Voy a tener suerte” en el buscador de Google y el “Pulgar hacia arriba” pionero de Facebook son algunas de las microinteracciones más famosas… y más simples.
El mejor diseño de una microinteracción continúa basándose en reglas básicas que no conviene alterar, ya que deben construirse sobre un conocimiento adquirido previamente y que forma parte del comportamiento online. Por ejemplo, que el símbolo X significa ‘Salir’ o ‘Cerrar’, que el color rojo se asocia a ‘Cancelar’ y el verde a ‘Confirmar’.
Esta evolución de las microinteracciones a partir de elementos conocidos de antemano por el usuario alcanza incluso a la experiencia física. Mientras el diseñador Ken Kocienda preparaba la interfaz del iPad para Apple, buscó gestos naturales para trasladarlos a la experiencia digital. Por ejemplo, cerrar una app para regresar a la pantalla principal del dispositivo sería un gesto muy similar a ‘estrujar’ un papel:
“¿Qué es exactamente ‘estrujar’? Utilicé esa palabra para describir el gesto de mover los dedos sobre la pantalla a modo de pinza, como si la app que estás usando fuese una hoja de papel y la arrugaras para tirarla a una papelera.”
Una microinteracción puede aplicarse a cualquier tipo de acción necesaria para el usuario, pero siempre desde el mismo punto de partida: ¿qué es natural, qué otros comportamientos adquiridos podemos incorporar a la experiencia para reducir a cero su fase de aprendizaje? No me gusta o no lo quiero: hago una bola de papel y la tiro lejos. Las microinteracciones reflejan cómo nos comportábamos en el mundo antes de que éste fuese digital, para hacer la transición más indolora.
Dan Safter, Product Design Leader y autor del libro Microinteractions: Designing with Details, describe cuatro fases a la hora de definir una microinteracción:
- Trigger o detonante: Es el motivo que desencadena la microinteracción.
- Rules o reglas: Determinan qué sucede una vez se inicia la microinteracción.
- Feedback o reacción: La respuesta que envía la microinteracción al usuario.
- Loops and Modes, o bucles y modos: El bucle determina la longitud de la microinteracción., y el modo determina si aquélla se repite o cambia con el tiempo.
Principios de las microinteracciones: Las buenas prácticas están en los detalles
A la hora de diseñar una microinteracción, conviene no perder de vista algunas claves o principios que aseguran una integración más natural en el diseño global:
-
Diseña con el usuario en mente: Al decidir dónde y cómo incluir una microinteracción, siempre hay que partir de datos sobre el usuario, el contacto o la plataforma. Esta información es fundamental para crear las microinteracciones y adaptar el producto a ellas, en lugar de imitar microinteracciones que no están respondiendo a las necesidades concretas de esa experiencia.
-
Extrae datos útiles: Muestra información al usuario sin necesidad de acceder a la aplicación o web y ahorrar esfuerzo online. Por ejemplo, el numero de email o teléfono de una empresa desde un buscador o portal de establecimientos, o la temperatura de una ciudad en una app meteorológica.
-
Utiliza lenguaje natural y humano: Los textos robóticos repelen a muchos usuarios, e incluso un par de palabras mal empleadas pueden generar gran confusión. Utiliza vocabulario familiar para tus usuarios y un lenguaje simple.
-
Emplea bucles largos: Piensa en cómo se adapta tu producto con el tiempo. ¿Como será cuando se ejecute al día siguiente? ¿Y la décima vez? ¿Y tras 1.000 arranques? Cualquier microinteracción debe poder repetirse una y otra vez sin que termine cansando o molestando al usuario.
-
Una microinteracción es sólo una acción: Cada microinteracción debe responder a una única solicitud o pregunta. No encadenes diversas animaciones y acciones en un mismo bucle, ya que el usuario debe tener la libertad de realizar tareas aisladas en el orden que él marque y prefiera.
Breve guía de buenas prácticas para el diseño de microinteracciones
La simplicidad es soberana
La microinteracción tiene que pasar desapercibida. Hoy en día, no hay nada más cotidiano y automático que pulsar el banderín de una fotografía en Instagram para guardarla, el icono de una cesta para añadir el producto al carrito de la compra, o el símbolo de un sobre para empezar a escribir un nuevo correo electrónico.
Las microinteracciones no tienen que hacer pensar, sino ejecutarse de forma instantánea. Eso sólo puede incorporarse fácilmente al comportamiento humano si son acciones sencillas, fáciles de recordar y de ejecutar.
Abusar de animaciones puede cansar la vista y abrumar al usuario. Un pequeño giro, parpadeo, destello o salto puede provocar una primera reacción de sorpresa positiva, pero haz que esos elementos tengan siempre un significado y no sean simples adornos. Por ejemplo, ¿se ralentiza o detiene una descarga de archivo? Un pequeño detalle animado, como un frenazo, puede ser divertido a la vez que informativo.
Las emociones del usuario son lo primero
Y no nos referimos a que haya que tener cuidado con sus sentimientos, aunque eso siempre sea un plus. El diseño emocional consiste en incorporar elementos agradables para el usuario que hacen de su experiencia algo más memorable.
Al usuario le gusta sentir que está siendo informado en todo momento y que la interfaz se adelanta a sus necesidades. Las microinteracciones ahorran tiempo y esfuerzo de búsqueda de datos y confirmaciones al usuario, que aumentarán las probabilidades de repetir su uso y que lo recomiende a terceros.
Sorprende al usuario
El día en que Twitter cambió la forma de destacar un tweet favorito por un icono de corazón en lugar de una estrella, la comunidad online rugió de dos maneras: a unos no les gustaba el nuevo sistema de corazones, otros argumentaron que era una innovación muy pobre para una empresa tan millonaria.
A veces un detalle simple puede suponer grandes ventajas que pasan desapercibidas al usuario, y otras veces son cambios superficiales que revelan poca inventiva. Es necesario renovarse en microinteracciones a menudo, pues lo nuevo enseguida se vuelve familiar y aburrido; pero esos cambios deben estar justificados.
La lección es que sorprender al usuario es cada vez más complicado, pues necesitas encontrar un equilibrio entre lo funcional, lo predecible y lo novedoso. Utilizar corazones para destacar elementos ya no es una sorpresa en ningún diseño, de manera que siempre hay que ir un paso por delante del usuario, sin perder de vista sus necesidades reales.
Microinteracciones con propósito
Una app llena de iconos, cada uno con un objetivo distinto que no está claro a simple vista, acabaría generando más estrés que ayudando al usuario mediante clicks rápidos y sencillos. Cada microinteracción o animación tiene que ser consistente con el diseño general.
Ninguna experiencia online debe atiborrarse de microinteracciones tan sólo porque nos parecen útiles: únicamente lo serán cuando tengan un objetivo evidente para el usuario y hagan más fácil su navegación o experiencia, en lugar de añadir nuevas tareas.
Las microinteracciones aportan valor al usuario, pero también a ti: si están bien diseñadas, los usuarios serán más proclives a participar, interactuar y compartir el contenido de tu interfaz.
Conclusión
Las microinteracciones forman parte de un buen plan de diseño web o app porque fusionan los dos grandes objetivos de cualquier experiencia online: la funcionalidad y la diversión. Ofrecer información útil a la vez que se agiliza la navegación es el premio que cualquier usuario espera recibir a cambio de invertir tiempo en descargar o abrir una app por gusto o necesidad.
Las microinteracciones son pequeños gestos que hacen la vida online más sencilla y cuidan la impresión del usuario. Porque hasta en internet el secreto de la felicidad y fidelidad también está en los detalles.
