Success y Error Feedback
Redactado por
Sebastian V. Fecha de publicación
09/07/2025
Tiempo de lectura
7 min
Tema
Interactions
¿Qué es el Feedback Visual (Success/Error)?
Es la resolución visual de una transacción. Tras un estado de carga, la interfaz debe comunicar explícitamente si la operación fue un éxito absoluto (Success) o si falló por alguna razón (Error). Es el cierre del ciclo de interacción.
¿Para qué sirve?
El usuario de hoy en día confía en la tecnología pero requiere comprobantes. Mostrar una pantalla que vuelve a la normalidad sin decir nada genera la temible pregunta: "¿Se habrá enviado?".
- Success: Da tranquilidad. Usa colores de confirmación (verde, azul), iconos de checkmark y animaciones ascendentes que transmiten logro o finalización positiva.
- Error: Llama la atención urgentemente para corregir un fallo. Usa colores de alerta (rojo), iconos de cruz y animaciones sísmicas horizontales (shake) que imitan el movimiento de negar con la cabeza.
¿Cómo se usan?
Generalmente se implementan mediante un contenedor de notificaciones absoluto (Toasts) o cambiando el color y el icono del propio botón. Es esencial que estos estados vengan acompañados de transiciones fluidas de opacity y transform para que no aparezcan como errores abruptos del sistema, sino como mensajes de la interfaz.
Consejo profesional
Usa la animación de 'shake' (sacudida) para los errores. Es un patrón universal inspirado en el mundo físico. Si metes la llave equivocada, la puerta no se abre y vibra la cerradura.
Notificaciones animadas (Toasts)
<button class="action-btn success-trigger"
style="border-radius:0; border:1px dashed #444; font-family:'afronaut',serif;">
Éxito
</button>
<button class="action-btn error-trigger"
style="border-radius:0; border:1px dashed #444; font-family:'afronaut',serif;">
Error
</button>
<div class="toast" id="toastBox">
<span class="message" id="toastMsg">Mensaje</span>
</div>Haz clic en los botones para disparar el feedback.
Errores comunes
Practica lo aprendido
Crea un sistema de toast animado que diferencie visualmente éxito y error.