Microinteracciones: 15 ejemplos y cómo diseñarlos
Microinteracciones explicadas: una definición, las cuatro partes de Dan Saffer, 15 ejemplos reales agrupados por tipo, reglas de diseño y cómo construirlas en CSS, Framer Motion, GSAP o ExodeUI.
Idea clave
Una microinteracción es un momento pequeño y contenido en una interfaz que hace una cosa: darle me gusta a una publicación, alternar una configuración, confirmar un formulario o completar un gesto. El término y su anatomía provienen de Dan Saffer, quien define cuatro partes. Un disparador lo inicia, las reglas deciden lo que sucede, la retroalimentación muestra el resultado y los bucles o modos gobiernan lo que hace a lo largo del tiempo. Las buenas microinteracciones son breves, responden a las aportaciones del propio usuario y son interrumpibles.
¿Qué es una microinteracción?
Una microinteracción es la interacción completa más pequeña en un producto: una única tarea con un comienzo, un cambio y un final. No es un flujo completo. Dar me gusta a una publicación es una microinteracción; escribir y publicar un comentario es un flujo. La idea y su estructura provienen del libro Microinteractions de Dan Saffer, que divide cada uno en cuatro partes.
Las cuatro partes de una microinteracción
El marco de Dan Saffer divide una microinteracción en cuatro componentes. Nombrarlos es útil porque la mayoría de los errores y los malos movimientos viven en uno de los cuatro, no en el conjunto.
Desencadenar
El evento que lo inicia. Iniciado por el usuario (tocar, pasar el cursor, mantener presionado, arrastrar) o iniciado por el sistema (finalización de una descarga, llegada de un error de red). Crédito: Dan Saffer.
Normas
Qué sucede una vez que comienza: estados válidos, restricciones como límites de arrastre o valores mínimos y máximos, y la secuencia de eventos. Crédito: Dan Saffer.
Comentario
Cómo el producto le dice al usuario lo que sucedió: el resorte se asienta, el cambio de color, la transformación del ícono, la actualización del texto. Aquí es donde vive la mayor parte del diseño de movimiento. Crédito: Dan Saffer.
Bucles y modos
Qué hace la interacción a lo largo del tiempo y cómo los modos la cambian. La misma palanca puede comportarse de manera diferente en modo oscuro o en un diseño compacto sin cambiar su lógica. Crédito: Dan Saffer.
Por qué son importantes las microinteracciones
Una microinteracción es cómo una interfaz responde al usuario sin un párrafo de texto. Confirma que se recibió una acción, muestra que algo todavía está funcionando o explica qué acaba de cambiar. Cuando faltan, el mismo producto se siente más pesado: los usuarios tocan dos veces porque nada les indicó que llegó el primer toque, o esperan en una pantalla que no mostraba señales de progreso. Los buenos se sienten más que se notan, y ese es el punto.
15 ejemplos de microinteracciones
Estos se agrupan según lo que comunican. Cuando ExodeUI envía un ejemplo coincidente, se proporciona el nombre para que pueda abrirlo y editarlo.
Botones y conmutadores (presionar y estado)
1. Presione el botón: escale a aproximadamente 0,92 al bajar el puntero y retroceda al soltarlo (ejemplo ExodeUI: Jelly Button). 2. Interruptor de palanca: traducción basada en resorte con un cambio de color al confirmar (Gooey Toggle). 3. Interruptor de modo: un control segmentado que desliza su indicador y transforma la etiqueta activa (Motion Switch).
Comentarios del formulario (validación y envío)
4. Agitar entrada no válida: un breve empujón horizontal que dice "marque este campo" sin un cuadro de diálogo (Entrada de texto Wiggle). 5. Enviar en progreso: el botón se convierte en el indicador de progreso, para que el usuario nunca pierda su lugar (Botón de envío animado). 6. Confirmación de éxito: un pequeño estallido de celebración en el botón cuando aterriza la acción (Botón de lanzamiento de cohetes).
Cargando y progresando
7. Progreso circular: un anillo que se llena hasta el valor real y se asienta con un resorte (Calibre Radial). 8. Medidor de nivel o actividad: una barra que reacciona en vivo a los datos entrantes como el nivel de audio (Sound Wave).
Navegación
9. Alternar menú: un ícono que cambia entre dos estados y revela el menú en su lugar (Morph Nav). 10. Ampliación del muelle: los elementos cerca del cursor se elevan y crecen, luego se asientan (Muelle magnético). 11. Selección de pestañas: un indicador que se desliza entre pestañas en lugar de parpadear (Liquid Tab Bar).
Estados vacíos y de éxito.
12. Estado vacío: una pequeña ilustración que se anima una vez para suavizar una pantalla en blanco. 13. Revelación de recompensa: un obsequio o insignia que se abre con anticipación cuando se alcanza un hito (Caja de regalo sorpresa).
Tirar para actualizar
14. Pull-to-refresh: desplazamiento elástico que rastrea el arrastre, luego retrocede y se asienta al soltarlo. La retroalimentación es el estiramiento, no una ruleta.
Retroalimentación de estilo háptico
15. Pulso de confirmación: una breve escala y brillo en el elemento que refleja el toque háptico en el móvil, para que la misma acción se sienta igual en un dispositivo sin motor de vibración.
Diseñe reglas que los mantengan buenos
Algunas reglas separan una microinteracción que ayuda de otra que molesta.
- Sea breve: la mayoría se completa en aproximadamente 200-400 ms; El movimiento más largo en un elemento pequeño se siente lento.
- Comience en el mismo cuadro que la entrada; un comienzo retrasado rompe el sentido de causa y efecto
- Mantenlo interrumpible: si el usuario invierte la acción a mitad del movimiento, redirige con velocidad en lugar de reiniciar desde cero.
- Respect prefiere el movimiento reducido: proporcione un respaldo estático o de fundido cruzado que aún comunique el cambio.
- Dale un trabajo: si la interacción necesita más de una decisión, es un flujo
Cómo construir microinteracciones
La herramienta adecuada depende de en cuántas plataformas deba ejecutarse la misma interacción.
Sólo CSS
Bueno para casos simples y autónomos: elevaciones flotantes, anillos de enfoque y alternancias impulsadas por :checked o un cambio de clase. Las transiciones y los @keyframes son suficientes y no hay nada que enviar más allá de la hoja de estilo.
Framer Motion o GSAP (web)
Bueno cuando el movimiento necesita resortes, gestos u orquestación y solo tiene que ejecutarse en la web. Ambos ofrecen resortes interrumpibles y pueden ser impulsados por el estado React.
ExodeUI (web, iOS y Android desde un solo archivo)
Úselo cuando la misma interacción tenga que comportarse de manera idéntica en una aplicación React, una aplicación SwiftUI y Flutter. Lo crea una vez en un archivo .exode y el tiempo de ejecución lo reproduce en cada plataforma, por lo que no hay reescritura por plataforma.
Fragmento de implementación en producción
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Principios clave para recordar
- Una microinteracción es una pequeña tarea con un disparador, reglas, retroalimentación y bucles o modos, las cuatro partes nombradas por Dan Saffer.
- La mayoría de los buenos se completan en aproximadamente 200-400 ms, comienzan en el mismo cuadro que la entrada y permanecen interrumpibles.
- La retroalimentación es lo que funciona: confirma la acción y explica qué cambió, a menudo sin ningún texto.
- Proporcione siempre un recurso alternativo de movimiento reducido que lleve la misma información sin movimiento