16 — Especificación de interacciones · COMAL
Documento de prototipo / comportamiento UI. Sin implementación de código en esta entrega: sirve como especificación para diseño y futuro desarrollo.
Mapa de pantallas y navegación
Landing ──► Explorar ──► Ficha ──► Reserva (slots) ──► Checkout ──► Confirmación ──► Check-in
│ │ │
│ │ └── (auth gate si no sesión) → Login / Registro → Onboarding → vuelve
│ └── Empty | Loading
└── Login / Registro
Bottom nav (auth): Explorar | Reservas | Acceso | Perfil
Ops sidebar: Dashboard | Calendario | Reservas | Estaciones | Ingresos | Config
Transiciones y microinteracciones
| Elemento | Interacción | Detalle |
|---|
| CTA primary | Press | Fondo → primary-strong; scale 0.98 opcional 100ms |
| Chip filtro | Toggle | Active: ink bg + white; multi-select equipos |
| Slot hora | Select | Solo contiguos; al romper contigüidad se reinicia o se extiende el rango |
| Sticky CTA ficha | Fixed | Safe-area bottom; no tapa contenido (padding-bottom lista) |
| Bottom sheet filtros (móvil) | Drag | Backdrop 40% ink; dismiss swipe down |
| Modal cancelación | Confirm | 2 botones: Cancelar reserva (danger) / Volver |
| Hold pago | Countdown | Visible en error pago; al 00:00 liberar slot y mensaje |
| Check-in QR | Fullscreen dark | Brightness note en copy; PIN siempre visible |
| Skeleton loading | Pulse | Opacity 0.6↔1, 1.2s, prefers-reduced-motion = static |
| Toast éxito | 4s | Bottom, no bloquea nav |
| Ops bloqueo | Click franja | Side panel o modal: motivo + rango + guardar |
Gestos móviles
- Pull-to-refresh en Explorar y Mis reservas
- Swipe back en iOS/Android nativo web (browser)
- No swipe-to-delete en reservas (evitar accidente); cancelar solo en detalle
Validaciones en UI
| Campo | Regla visual |
|---|
| Email | Formato; error inline rojo |
| Contraseña | Min 10; meter strength opcional v1.1 |
| Teléfono | Máscara ES +34 |
| Slots | Min 2 h (mensaje si 1 sola hora) |
| Términos | Checkbox required; CTA disabled hasta check |
Estados por pantalla (matriz)
| Pantalla | Default | Loading | Empty | Error | Success |
|---|
| Explorar | Lista | Skeleton 15 | Empty filtros | Banner reintentar | — |
| Ficha | Contenido | Skeleton hero | — | No disponible | — |
| Reserva | Slots | Pulse slots | Sin huecos día | Red | — |
| Checkout | Form | Button spinner | — | Pago fallido → 14 | → Confirmación |
| Reservas | Cards | Skeleton cards | Sin próximas | — | — |
| Check-in | QR+PIN | — | Fuera de ventana | PIN inválido ops | Checked-in |
| Ops dash | Tabla | Skeleton rows | Día vacío | — | — |
Flujo de prototipo recomendado (demo stakeholder)
- Landing → Explorar
- Abrir Kitchen Hub Vallecas
- Reservar 05–08
- Checkout → (simular éxito) Confirmación
- Mis reservas → Check-in
- Ops Dashboard + Calendario
En Paper: artboards enlazables manualmente o presentación en orden de capa.
Criterios de aceptación UX (no código)
