04 Capítulo 4 · Lección 1

¿Qué son las Interactions?

Redactado por

Author

Fecha de publicación

01/07/2025

Tiempo de lectura

7 min

Tema

Interactions

¿Qué son las Interactions?

Las interacciones son la respuesta directa, visual y táctil que una interfaz le da al usuario cuando este realiza una acción. Si Keyframes es el movimiento autónomo de la aplicación, y Transforms es su geometría física, las Interactions son el diálogo entre el software y el humano.

¿Para qué sirven?

Imagina presionar el botón de un ascensor físico y que no se encienda su luz. No sabrías si el botón se rompió o si el ascensor ya viene. Las interacciones sirven exactamente para resolver esa ansiedad en el mundo digital.

Confirmación de estado: Le dicen al usuario "hemos registrado tu acción".
Prevención de errores: Indican si un elemento es clickeable o si está desactivado.
Feedback asíncrono: Ocupan la mente del usuario mientras espera a que el servidor responda.

¿Cómo se usan?

En CSS, las interacciones se gestionan vinculando transiciones (transition) a cambios de estado producidos por pseudo-clases (:hover, :active, :focus) o mediante clases manipuladas por JavaScript (.is-loading, .is-success).

El flujo siempre es el mismo: defines un estado base visualmente estable, defines cómo debe verse en el estado alterado, y aplicas una transición en el elemento original para que el cambio de A hacia B sea suave y natural.

Consejo profesional

Piensa en las interacciones como una conversación. El usuario habla haciendo clic o pasando el cursor, y la interfaz debe responder de forma clara y rápida. Usa tiempos entre 150ms y 300ms; más lento parecerá lag.

Botón sin interacción vs botón con feedback completo

> _

<div class="demo-btns">
  <!-- Sin interacción -->
  <button class="btn-bad">Sin feedback</button>

  <!-- Con interacción completa -->
  <button class="btn-good">Con feedback</button>
</div>

.demo-btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* MAL: ningún cambio visual */
.btn-bad {
  padding: 14px 28px;
  background: #334155;
  color: #fff;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'afronaut', serif;
}

/* BIEN: feedback completo */
.btn-good {
  padding: 14px 28px;
  background: #a855f7;
  color: #0f172a;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'afronaut', serif;
  transition: all 0.2s ease;
}

.btn-good:hover {
  background: #9333ea;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(168,85,247,0.4);
}

.btn-good:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(168,85,247,0.3);
}

> _

Pasa el cursor y haz clic en cada botón para sentir la diferencia.

Errores comunes

01

Ningún feedback visual Crear botones o enlaces sin cambio de estado en hover hace que el usuario dude si el elemento es interactivo.

02

Reacciones exageradas Mover tanto un elemento en hover que el cursor se salga de él accidentalmente destruye la usabilidad.

03

Ignorar el teclado Diseñar solo para el ratón y olvidar los estados :focus-visible deja fuera a los usuarios que navegan por teclado.

Practica lo aprendido

Crea dos botones idénticos en HTML, uno sin interacción y otro con hover, active y focus bien definidos. Compara la sensación al usarlos.

01 Crea un botón básico sin ningún estilo de hover.

02 Agrega :hover con un cambio de opacidad o color.

03 Añade transition: all 0.2s ease y observa la diferencia.

04 Diseña un :active que simule presión física con scale(0.96).

05 Reflexiona: ¿cuál de los dos botones invita más al clic?