Navegación del Sitio

El frontend público está diseñado para ser simple e intuitivo. Esta guía explica cómo los clientes navegan por el sitio.

Estructura del Sitio

Página Principal

• Primera pantalla que ven los clientes
• Muestra las sedes disponibles
• Botón directo para hacer una reserva

Página de Reservas

• Proceso de 3 pasos
• Barra de progreso arriba
• Navegación clara entre pasos

Elementos de Navegación

Barra Superior

Logo:

• Ubicado arriba a la izquierda
• Hacer clic vuelve al inicio

Sede:

• Nombre de la sede actual
• Selector para cambiar de sede (si hay varias)

Tema:

• Botón para cambiar entre modo claro y oscuro
• El sitio recuerda tu preferencia

Barra de Progreso

Durante el proceso de reserva se muestra:

Paso 1: Turno

• Círculo amarillo cuando estás acá
• Gris cuando no

Paso 2: Datos

• Se activa al avanzar
• Muestra en qué paso estás

Paso 3: Pago

• Último paso
• Se activa al final

Navegación Clara

Siempre sabés en qué paso estás gracias a los indicadores visuales.

Moverse entre Pasos

Avanzar

Botón "Siguiente":

• Siempre ubicado abajo a la derecha
• Deshabilitado hasta completar el paso
• Se habilita cuando está todo listo
• Color amarillo llamativo

Retroceder

Botón "Volver":

• Ubicado abajo a la izquierda
• Regresa al paso anterior
• No pierde información ya ingresada
• Útil para corregir errores

Atajos

No hay atajos. El cliente debe completar los pasos en orden.

Cambiar de Sede

Si hay múltiples sedes configuradas:

Selector de Sede:

1. Hacer clic en el nombre de la sede actual
2. Se despliega un menú
3. Elegir otra sede
4. El sitio actualiza la información

Qué Cambia:

• Canchas disponibles
• Precios
• Horarios de operación
• Datos de contacto

Modo Claro vs Oscuro

Cambiar el Tema

Botón de Tema:

• Ícono de sol/luna
• Ubicado arriba a la derecha
• Un clic cambia el modo

Modo Claro:

• Fondo blanco
• Texto oscuro
• Ideal para usar de día

Modo Oscuro:

• Fondo negro/gris oscuro
• Texto claro
• Ideal para usar de noche
• Reduce cansancio visual

Preferencia Guardada

El sitio recuerda qué modo elegiste para la próxima visita.

Navegación en Celular

Diseño Adaptativo

El sitio se adapta automáticamente:

En Celular:

• Todo apilado verticalmente
• Botones grandes y fáciles de tocar
• Elementos optimizados para pantallas chicas
• Gestos táctiles habilitados

En Tablet:

• Diseño intermedio
• Aprovecha más espacio
• Fácil de usar con ambas orientaciones

En Computadora:

• Diseño completo
• Máximo aprovechamiento del espacio
• Elementos lado a lado cuando es posible

Controles Táctiles

Calendario:

• Hacer tap para seleccionar día
• Deslizar para cambiar de mes

Seleccionar Horario:

• Tap en el horario deseado
• Feedback visual inmediato

Formularios:

• Teclados apropiados se abren automáticamente
• Teclado de email para email
• Teclado numérico para teléfono

Carga y Rendimiento

Tiempos de Carga

Primera Carga:

• Menos de 2 segundos en conexión normal
• Se optimizan imágenes y recursos

Navegación Interna:

• Instantánea
• Sin recargas completas de página

Indicadores de Carga

Cuando se consulta disponibilidad:

• Aparece "Cargando..."
• Animación de espera
• Feedback visual claro

Regresar al Inicio

Desde Cualquier Pantalla

Hacer clic en el Logo:

• Vuelve a la página principal
• Cancela el proceso actual (si hay uno)
• No guarda datos parciales

Usar el Navegador:

• Botón "Atrás" funciona correctamente
• Respeta el historial de navegación

Accesibilidad

Navegación con Teclado

Para usuarios que no usan mouse:

• Tab: Avanzar entre elementos
• Shift+Tab: Retroceder
• Enter: Seleccionar/Confirmar
• Espacio: Marcar opciones

Lectores de Pantalla

El sitio es compatible con:

• Screen readers
• Etiquetas descriptivas en todos los elementos
• Orden lógico de lectura

Contraste

• Colores con buen contraste
• Texto legible en todos los modos
• Cumple estándares de accesibilidad

Comportamiento del Sitio

Validaciones en Tiempo Real

• Los errores se muestran inmediatamente
• No hace falta enviar el formulario para ver errores
• Feedback visual constante

Guardado de Datos

Qué se Guarda:

• Preferencia de tema (claro/oscuro)
• Última sede visitada
• Autocompletado del navegador

Qué NO se Guarda:

• Datos de tarjetas
• Contraseñas (no hay login)
• Reservas parciales

Sesiones

• No hay sesiones de usuario
• No necesita login
• Cada reserva es independiente

Preguntas Frecuentes

¿Necesito instalar algo?

No, funciona directo en el navegador.

¿Funciona sin internet?

No, necesita conexión para consultar disponibilidad y crear reservas.

¿Puedo usar cualquier navegador?

Sí, funciona en Chrome, Firefox, Safari, Edge y la mayoría de navegadores modernos.

¿Es seguro?

Sí, usa conexión HTTPS encriptada.

¿Funciona en celulares viejos?

Funciona en la mayoría, pero mejor experiencia en dispositivos de últimos 5 años.

¿Puedo volver atrás sin perder datos?

Sí, el botón "Volver" mantiene tu información.

Próximos Pasos

• Proceso de Reserva - Ver el flujo completo
• Selección de Turno - Primer paso
• Introducción - Volver al inicio