Microinteracciones
Redactado por
Sebastian V. Fecha de publicación
03/07/2025
Tiempo de lectura
8 min
Tema
Interactions
¿Qué son las Microinteracciones?
Una microinteracción es un evento minúsculo y altamente enfocado dentro de un producto que tiene una única tarea. A diferencia de una animación de pantalla completa, una microinteracción ocurre en el espacio de un botón, un icono o un interruptor (toggle).
Son los detalles invisibles que transforman una aplicación utilitaria en un producto premium y memorable. El famoso "Me gusta" de Twitter o el rebote del switch de iOS son ejemplos icónicos de este concepto.
¿Para qué sirven?
El cerebro humano busca recompensas visuales inmediatas. Cuando un usuario interactúa con un elemento y obtiene una respuesta visual deleitante, se genera una micro-dosis de dopamina.
- Comunicar estatus: Cambiar un toggle de gris a verde brillante.
- Educar al usuario: Animar un icono de hamburguesa convirtiéndose en una "X" enseña dónde hacer clic para cerrar.
- Prevenir el aburrimiento: Mantener al usuario entretenido en operaciones rutinarias.
¿Cómo se usan?
Requieren combinar CSS avanzado y SVG. Normalmente usas stroke-dasharray para animar bordes de iconos, fill para cambiar colores con transition, y @keyframes pequeños y explosivos (como un efecto de escala) acoplados al momento exacto en que se añade una clase "active" mediante JavaScript.
Consejo profesional
Las microinteracciones deben ser extremadamente rápidas. Una regla de oro de diseño es que nunca deben durar más de 400ms, ya que su objetivo es informar y deleitar, no retrasar al usuario.
Botón de Like con microinteracción de corazón
<button class="like-btn" id="likeBtn">
<svg viewBox="0 0 24 24" width="28" height="28">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5
2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09
C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5
c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="like-count">24</span>
</button>
<script>
const btn = document.getElementById('likeBtn');
const count = btn.querySelector('.like-count');
let liked = false;
btn.addEventListener('click', () => {
liked = !liked;
btn.classList.toggle('active', liked);
count.textContent = liked ? '25' : '24';
});
</script>Haz clic en el botón para activar la microinteracción del corazón.
Errores comunes
Practica lo aprendido
Construye un botón de favorito completo: estado inactivo, hover con preview del color, estado activo con animación y actualización del contador.