Countdown & Urgency UI

Un temporizador de cuenta regresiva es una promesa visual: le dice al usuario que algo cambia cuando el reloj llega a cero. Si la oferta no expira, si el precio no sube o el carrito no se pierde, el temporizador es una mentira de diseño. La distinción operativa es nítida: un deadline timer apunta a una fecha fija real (2026-12-31T23:59:59) y el banner desaparece al expirar; un evergreen timer reinicia por sesión y carece de deadline real. La FTC nombra explícitamente el "baseless countdown timer" como dark pattern: crear presión mostrando un reloj falso que se reinicia al llegar a cero. La credibilidad del producto depende de que la promesa se cumpla sin excepciones.

Mostrar urgencia o escasez ficticias no es un "truco de marketing" tolerable: es una misrepresentation material bajo múltiples marcos legales. En la UE, la Directiva Omnibus coloca los fake countdown timers en la blacklist de prácticas comerciales desleales, con multas de hasta el 4% del volumen de negocio anual. En Polonia, Amazon fue multada PLN 31,850,141 (~7.2 M EUR) por UOKiK en marzo 2024 por countdown de entrega con plazos que no podía garantizar. En Reino Unido, la ASA dictaminó en octubre 2025 contra Hammonds Furniture por un timer que creaba "a false sense of urgency". Booking.com enfrentó acción de la CMA y demanda colectiva por claims de "only 1 room left" inexactos. La FTC no requiere probar intención: el efecto de decepcionar basta.

Cualquier temporizador que imponga una consecuencia al usuario (pierde el carrito, la sesión, la reserva) debe ser desactivable, ajustable o prorrogable, salvo cuando el límite es esencial e intrínseco a la actividad. Es un requisito Level A, el más básico de WCAG. La norma exige al menos una de: apagar, ajustar (hasta 10x el tiempo por defecto) o extender (advertir antes de expirar y dar ≥20s para extender con una acción simple, permitiendo ≥10 extensiones). La excepción de "evento en tiempo real" (una subasta) no aplica a una flash sale de retail. Un countdown de "20 min para completar la compra" que expira sin advertencia viola 2.2.1 y expone al equipo a reclamaciones de accesibilidad.

Un temporizador que parpadea, hace flip o tiene animación continua es "contenido que se auto-actualiza" bajo WCAG 2.2.2. El usuario debe poder pausarlo, ocultarlo o detenerlo, o bien controlar su frecuencia, salvo que la actualización sea esencial. A diferencia del contenido en movimiento, no existe la excepción de 5 segundos para contenido auto-actualizable. Sin un control, el countdown puede ser inaccesible para personas con trastornos vestibulares, epilepsia fotosensible o dificultades cognitivas que se distraen con el movimiento continuo. Es Level A, no opcional. W3C recomienda que, si hay varios elementos animados, un único mecanismo los afecte a todos a la vez.

El contador puede seguir corriendo matemáticamente aunque sus animaciones de flip, pulso o parpadeo estén desactivadas. Las personas que activan "Reduce Motion" en su sistema lo hacen porque el movimiento les causa malestar físico o cognitivo, no porque quieran perder información. La solución correcta separa el estado funcional del timer (JS que actualiza el DOM) de sus efectos de transición (CSS). El antipatrón es ocultar el timer completo con display:none bajo reduced-motion: el usuario pierde el deadline. Lo correcto: el número sigue actualizándose; solo la transición de flip se reemplaza por un cambio instantáneo. Es la técnica C39 de W3C y refuerza tanto 2.2.2 como 2.3.3.

/* JS sigue actualizando el número */
.timer-digit {
  transition: transform 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .timer-digit {
    transition: none;  /* solo el flip */
    animation: none;
  }
  /* el deadline sigue visible */
}

@media (prefers-reduced-motion: reduce) {
  .countdown {
    display: none;
    /* ✗ el usuario pierde */
    /*   el deadline completo */
  }
}

Un temporizador en la página de pago, en un formulario de datos bancarios o durante la confirmación de una acción irreversible aplica presión en el momento de mayor vulnerabilidad cognitiva del usuario. El estrés del reloj aumenta errores de entrada, decisiones impulsivas y arrepentimiento post-compra. La FTC señala que la presión temporal en momentos de compra es "material to purchase decisions" y una misrepresentation si es falsa. Reserva el countdown para la previa a la acción (la oferta en la página de producto o el carrito); al entrar al checkout, reemplázalo por un banner estático que comunique el límite sin un reloj parpadeando: "Tienes hasta las 18:00 para finalizar".

Mostrar "23 personas están viendo esto ahora" con un número aleatorio generado por JS es un dark pattern documentado de fake social proof. Combina la presión de escasez con la de urgencia social (Cialdini, 1984: scarcity + social proof, dos de los seis principios de influencia), y su uso simultáneo maximiza la presión psicológica. El caso documentado de OneTravel ("38 people are looking at this flight") confirmó por el código fuente que el número era un integer aleatorio. La FTC clasifica los "false activity messages" como dark pattern. Si el sistema no puede acceder a datos de sesiones activas reales, el widget no debe existir: un número inventado socava la confianza en cuanto el usuario lo detecta.

El usuario tiene derecho a saber las consecuencias de la expiración antes de que ocurran. Si el precio sube, dilo. Si el carrito se libera, dilo. Si la oferta desaparece pero puede volver a buscarla, dilo también. La opacidad post-expiración fuerza a experimentar la consecuencia como una sorpresa aversiva, lo que destruye la confianza y aumenta el abandono permanente. Es además un requisito implícito de WCAG 2.2.1 (advertir antes de expirar). En el caso Amazon/UOKiK fue agravante que las condiciones del plazo estuvieran "buried in terms of service using hard-to-read grey text". Lo correcto: anticipar la consecuencia exacta y, al expirar, explicar qué cambió con un enlace para reactivar si aplica.