Booking & Reservation Flows

El selector de disponibilidad debe distinguir tres estados simultaneamente, libre, ocupado y fuera de rango (pasado o bloqueado), usando forma, texto y color a la vez, nunca color solo. Ocultar los días sin disponibilidad en vez de mostrarlos deshabilitados priva al usuario del contexto temporal que necesita para replantear su busqueda: no distingue entre "no hay cupo", "el local cierra" o "fallo de carga". Cuando el inventario escasea, exponer cuanto queda ("Solo 2 lugares") genera urgencia legitima y reduce la ansiedad.

NN/g es explicito: los calendar pickers sirven para eventos cercanos, dentro de menos de un año, y son especialmente potentes para rangos, donde muestran dos meses en paralelo para ver check-in y check-out de una vez. Para fechas lejanas o usuarios que ya saben la fecha exacta, un campo de texto con parsing flexible es más eficiente que navegar meses. Los tres dropdowns segmentados día/mes/año elevan el costo de interacción a 9+ acciones por una sola fecha y deben evitarse.

Las fechas y horarios no disponibles deben permanecer visibles pero claramente deshabilitados: aria-disabled, estilo diferenciado y cursor not-allowed. Ocultarlos rompe el modelo mental del calendario, el usuario cree que el restaurante no abre a esa hora cuando en realidad solo esta lleno. Mostrarlos sin marcar es peor: el usuario selecciona, avanza y recibe un error en el paso siguiente, lo que dispara abandono. WCAG 1.3.1 exige que el estado deshabilitado se comunique por más de un canal.

El paso de revisión previo al pago debe mostrar en una vista escaneable el servicio contratado, las fechas y horas exactas, el desglose de costos (tarifa + impuestos + cargos) y la politica de cancelación resumida con enlace al detalle. La tolerancia a sorpresas de precio o politica al momento de pagar es muy baja. Baymard documenta que el 11.6% de los usuarios confunde el paso "Order Review" con una confirmación final y abandona creyendo que ya reservo: por eso el CTA debe decir explicitamente "Confirmar y pagar", no un ambiguo "Continuar".

Cuando usuario y recurso están en zonas horarias distintas, detecta automáticamente la del usuario (vía navegador), muestra los slots en su hora local e indica también la hora en la ubicación del recurso. Un slot "3:00 PM" sin zona horaria hace que un usuario en otro huso confirme y llegue tres horas tarde. Ofrece un selector explicito de zona horaria para quienes usan VPN o reservan para terceros: herramientas como Calendly y OnceHub lo tratan como requisito funcional, no como extra.

La confirmación post-reserva debe llegar por email en menos de dos minutos, repetir todos los detalles del resumen (que, cuando, cuanto, politica) y contener botones de acción directa para modificar o cancelar sin login previo, usando un token de acceso en la URL. Los recordatorios, al menos 24 horas antes y opcionalmente 1 hora antes, reducen los no-shows y la carga de soporte. Un correo genérico con solo "Tu reservación fue procesada. Código #38472" obliga a llamar por telefono para cualquier cambio.

El flujo de reserva debe ofrecer la vía de invitado con el mismo peso visual que el login, no enterrarla en letra chica al pie. La cuenta se ofrece, no se impone, en la pantalla de confirmación, cuando el usuario ya cumplio su objetivo y esta en un estado emocional positivo. Baymard documenta que el 37% de los compradores expresa rechazo explicito al ser forzado a crear cuenta, que el 19% de los usuarios con cuenta abandona el checkout por olvidar la contrasena, y que el 62% de los sitios no da suficiente prominencia al guest checkout.

Un date picker accesible sigue el patrón del WAI-ARIA APG: el botón del calendario lleva aria-expanded y aria-controls; el dialogo tiene role="dialog" con aria-modal="true" y aria-label; la grilla usa role="grid" con flechas para navegar días, Home/End para límites de semana y Page Up/Down para mes; cada celda lleva un aria-label completo ("Lunes 14 de julio de 2025"); la fecha elegida marca aria-selected="true" y los días bloqueados aria-disabled="true". La disponibilidad nunca se comunica solo por color. Los date pickers violan con frecuencia WCAG 1.3.1, 2.1.1 y 4.1.2.