01 Capítulo 1 · Lección 12

Microinteracciones

Redactado por

Sebastian V.

Fecha de publicación

10/04/2024

Tiempo de lectura

5 min

Tema

CSS Transitions

Los detalles importan

El cofundador de Apple, Charles Eames, solía decir: "Los detalles no son los detalles. Ellos hacen el diseño." En el desarrollo de interfaces, a esos detalles los llamamos Microinteracciones.

¿Qué es una Microinteracción?

Es una animación pequeña, casi imperceptible, que comunica el resultado de una acción del usuario. Piensa en el botón de "Me gusta" de Twitter (X) que estalla en confeti, o el switch de Wi-Fi de tu teléfono deslizándose con suavidad. No son esenciales para el funcionamiento de la app, pero son esenciales para que la app se sienta humana.

Elementos ideales para Microinteracciones

✦ Botones de Estado (Toggles/Switches): Como cambiar a modo oscuro o activar notificaciones.
✦ Checkboxes y Radio Buttons: Animando el checkmark dibujándose o haciendo un pequeño rebote.
✦ Iconos dinámicos: Un ícono de menú de hamburguesa transformándose suavemente en una 'X' para cerrar.

Consejo profesional

En controles interactivos (como el toggle), oculta siempre el input checkbox nativo pero aségurate de que la etiqueta o div visual tenga tabindex para mantener la accesibilidad con teclado.

Ejemplo práctico (Toggle Switch)

> _

<label class="toggle">
  <input type="checkbox" class="toggle-input">
  <div class="toggle-bg">
    <div class="toggle-knob"></div>
  </div>
  <span class="toggle-text">Modo Oscuro</span>
</label>

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-text {
  font-family: 'afronaut', serif;
  font-weight: 300;
}

.toggle-input {
  display: none;
}

.toggle-bg {
  width: 48px;
  height: 24px;
  background: #3f3f46;
  border-radius: 12px;
  position: relative;
  transition: background 0.3s ease;
}

.toggle-knob {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* El truco: Cuando el input oculto está activado, transicionamos el hermano (.toggle-bg) */
.toggle-input:checked + .toggle-bg {
  background: #a855f7;
}

.toggle-input:checked + .toggle-bg .toggle-knob {
  transform: translateX(24px);
}

> _

Modo Oscuro

Haz clic en el control. Al usar una curva de Bezier con rebote y animar el color de fondo simultáneamente, un aburrido checkbox se transforma en una microinteracción premium.

Errores comunes

Excederse en la duración Una microinteracción pesada frustra al usuario. Mantén las duraciones entre 0.15s y 0.3s como máximo.

Practica lo aprendido

Convierte los elementos de formulario aburridos en componentes premium.

01 Oculta el checkbox nativo y construye tu propio control visual.

02 Usa el selector hermano adyacente (+) para leer el estado :checked.

03 Aplica transiciones de color al fondo y de posición (transform) a la perilla.

04 Una microinteracción debe ser rápida y satisfactoria.

05 Añade una curva con rebote para que la perilla se sienta física.