# Gobierno360 — Flujos de UX

## 1. User Personas

### Ciudadano (Residente)
- **Perfil**: Residente municipal de 18–65+ años, con o sin experiencia digital.
- **Objetivo**: Reportar problemas urbanos (baches, luminarias, seguridad) y recibir actualizaciones.
- **Contexto de uso**: Mayormente móvil, en la calle o en casa. Necesita rapidez y claridad.
- **Frustraciones**: Procesos largos, falta de retroalimentación, no saber si su reporte llegó.

### Operador Municipal
- **Perfil**: Empleado de la alcaldía, turnos de 8h. Maneja múltiples reportes simultáneos.
- **Objetivo**: Recibir, categorizar, asignar y dar seguimiento a reportes ciudadanos.
- **Contexto de uso**: Escritorio principalmente. Necesita tablas rápidas, filtros y acciones masivas.
- **Frustraciones**: Caos de tickets duplicados, falta de contexto geográfico, asignaciones manuales lentas.

### Dispatcher Policial
- **Perfil**: Oficial en central de despacho, operando bajo presión y en tiempo real.
- **Objetivo**: Recibir alertas de emergencia, visualizar unidades disponibles y despachar la más cercana.
- **Contexto de uso**: Pantalla grande con mapa en tiempo real. Necesita notificaciones inmediatas.
- **Frustraciones**: Latencia en alertas, unidades sin GPS, falta de historial del incidente.

### Admin Municipal
- **Perfil**: Director o gerente de área. Requiere visión estratégica y reportes ejecutivos.
- **Objetivo**: Monitorear KPIs, generar reportes mensuales/anuales, detectar cuellos de botella.
- **Contexto de uso**: Escritorio y tablet en reuniones. Necesita dashboards y exportación.
- **Frustraciones**: Datos desactualizados, reportes que requieren trabajo manual, falta de comparativos.

---

## 2. User Journeys (Step-by-Step)

### A. Ciudadano reporta un problema (App/Web)

1. **Acceso**: Ciudadano abre la app o navega al portal web.
2. **Autenticación opcional**: Puede reportar como invitado (captura teléfono/email) o iniciar sesión.
3. **Tipo de reporte**: Selecciona categoría visual (bache, luminaria, basura, delito, etc.).
4. **Descripción**: Escribe breve descripción; opción de dictado por voz.
5. **Ubicación**: GPS automático; permite ajustar pin en mapa. Opción de escribir dirección manual.
6. **Evidencia**: Adjunta hasta 3 fotos o un video corto; previsualización incluida.
7. **Validación**: App valida campos mínimos y sugiere reportes similares cercanos (anti-duplicado).
8. **Confirmación**: Muestra resumen, número de folio y tiempo estimado de respuesta.
9. **Notificación**: Recibe push/email con folio y enlace de seguimiento.
10. **Seguimiento**: Puede consultar estado en app (Recibido → En proceso → Resuelto → Cerrado).
11. **Cierre ciudadano**: Al resolverse, recibe encuesta de satisfacción (1–5 estrellas + comentario).

### B. Operador recibe, categoriza y asigna

1. **Inicio de turno**: Operador inicia sesión en panel web. Dashboard muestra cola de entrada.
2. **Nuevo reporte**: Notificación en-app + sonido. Abre ticket automáticamente.
3. **Revisión**: Ve descripción, fotos, ubicación en mapa y datos del ciudadano.
4. **Categorización**: Confirma o corrige categoría; agrega subcategoría y prioridad.
5. **Detección de duplicados**: Sistema sugiere tickets similares en 100m y 24h; operador puede fusionar.
6. **Asignación**: Selecciona área responsable (alumbrado, bacheo, seguridad) o persona específica.
7. **Comentario interno**: Añade nota visible solo para equipo (ej. “requiere grúa”).
8. **Guardar**: Estado cambia a “Asignado”. Ciudadano recibe notificación de actualización.
9. **Seguimiento**: Durante el día, revisa lista de pendientes y escala los vencidos.

### C. Dispatcher policial recibe alerta y despacha unidad

1. **Alerta entrante**: Notificación de alta prioridad (sonido + banner + cambio de color en pantalla).
2. **Contexto rápido**: Ve tipo de emergencia, dirección, ciudadano (si aplica), foto y tiempo transcurrido.
3. **Mapa en tiempo real**: Pantalla dividida: lista de alertas | mapa con unidades GPS.
4. **Selección de unidad**: Sistema sugiere unidad más cercana disponible; dispatcher puede override.
5. **Despacho**: Clic en “Despachar” envía alerta con coordenadas al móvil policial.
6. **Confirmación de unidad**: Patrulla acepta o rechaza (con motivo). Si rechaza, sugiere siguiente.
7. **Monitoreo**: Ve trayecto en vivo. Chat/texto integrado entre dispatcher y unidad.
8. **Actualización de estado**: Unidad cambia a “En sitio”, luego “Atendido” o “Requiere apoyo”.
9. **Cierre**: Dispatcher valida cierre o lo deriva a investigación. Registro queda en bitácora histórica.

### D. Admin ve dashboard y genera reporte

1. **Dashboard ejecutivo**: Al iniciar sesión, ve KPIs principales: reportes del mes, tiempo promedio de respuesta, top categorías, mapa de calor.
2. **Filtros rápidos**: Periodo, área, colonia, tipo de reporte, estado.
3. **Detalle**: Clic en cualquier KPI abre tabla o mapa con datos subyacentes.
4. **Comparativos**: Puede comparar mes actual vs. anterior o año vs. año.
5. **Generar reporte**: Selecciona tipo (PDF, Excel, CSV), aplica filtros y descarga.
6. **Programar**: Puede agendar envío automático semanal/mensual por email.
7. **Alertas proactivas**: Configura umbrales (ej. si >50 reportes de bache en una colonia, notificar).

---

## 3. Wireframes — Descripciones de Pantallas

### App Ciudadano (Mobile)

- **Pantalla Home**: Logo, botón grande “Reportar problema”, acceso a “Mis reportes”, noticias municipales.
- **Pantalla Categorías**: Grid de iconos grandes (bache, luminaria, basura, graffiti, seguridad, otros). Texto debajo.
- **Pantalla Formulario**: Campo descripción multilinea. Botón adjuntar multimedia. Mini-mapa con pin azul. Botón “Enviar reporte” anclado abajo.
- **Pantalla Confirmación**: Ilustración de éxito, número de folio grande, botón compartir, enlace a seguimiento.
- **Pantalla Mis Reportes**: Lista vertical con tarjetas (icono, título, estado con color, fecha). Pull-to-refresh.
- **Pantalla Detalle del Reporte**: Estado paso a paso (línea de tiempo), mapa estático, fotos adjuntas, botón “Reabrir” si está cerrado.

### Panel Operador (Desktop)

- **Pantalla Login**: Usuario, contraseña, selector de idioma.
- **Pantalla Dashboard**: Resumen de tickets (nuevos, asignados, vencidos). Gráfica de barras por categoría. Mapa con cluster de reportes.
- **Pantalla Bandeja de Entrada**: Tabla sorteable (folio, categoría, colonia, tiempo, prioridad, acciones). Filtros laterales. Checkbox para acciones masivas.
- **Pantalla Detalle de Ticket**: Split-pane: datos del reporte (izquierda), mapa con Street View (derecha). Sección de historial de cambios. Dropdowns de categoría y asignación. Botones: “Asignar”, “Fusionar”, “Escalar”, “Resolver”.
- **Pantalla Historial**: Búsqueda avanzada, filtros de fecha, exportar a CSV.

### Panel Dispatcher (Desktop / Multi-monitor)

- **Pantalla Principal**: Layout sin distracciones. Panel izquierdo: lista de alertas activas ordenadas por tiempo. Panel central: mapa a pantalla completa con iconos de unidades (verde=disponible, rojo=ocupado, azul=despachada).
- **Card de Alerta**: Flotante sobre mapa al seleccionar. Datos: tipo, dirección, foto miniatura, tiempo, ciudadano. Botones: “Despachar unidad”, “Ver detalle”, “Marcar falsa alarma”.
- **Panel Unidades**: Sidebar derecho opcional con lista de unidades, estado, última ubicación, tiempo de inactividad.
- **Pantalla Bitácora**: Tabla cronológica de todos los despachos del turno. Búsqueda por folio o unidad.

### Panel Admin (Desktop)

- **Pantalla Dashboard Ejecutivo**: Grid de widgets (tarjetas de KPI, gráficas de línea, mapa de calor, tabla top 10 colonias). Todo filtrable por rango de fechas.
- **Pantalla Reportes**: Selector de plantillas (operativo, financiero, ciudadano). Paso 1: filtros. Paso 2: vista previa. Paso 3: exportar o programar.
- **Pantalla Configuración**: Gestión de usuarios, permisos, áreas responsables, umbrales de alertas, integraciones.

---

## 4. Mobile vs Desktop Considerations

### Mobile (Ciudadano principalmente)
- **Input simplificado**: Botones grandes, dictado por voz, GPS automático, cámara nativa.
- **Datos mínimos**: Solo campos obligatorios visibles. Progreso claro.
- **Offline parcial**: Permitir redactar reporte sin conexión; enviar al recuperarla.
- **Notificaciones nativas**: Push como canal primario. Deep links a detalle de reporte.
- **Rendimiento**: Mapa ligero, imágenes comprimidas automáticamente antes de subir.
- **Acceso rápido**: Widget opcional (Android/iOS) para “Reportar ahora”.

### Desktop (Operador, Dispatcher, Admin)
- **Densidad de información**: Tablas, filtros avanzados, multi-pane, atajos de teclado.
- **Mapa rico**: Clusters, capas (reportes, unidades, zonas), mediciones de distancia.
- **Acciones masivas**: Selección múltiple, bulk assign, exportación de datos.
- **Responsividad limitada**: Layout adapta a tablet (colapsa sidebars), pero no es prioritario móvil.
- **Notificaciones**: Sonidos diferenciados por prioridad, badges en pestañas del navegador, toasts en-app.
- **Impresión**: Estilos de impresión optimizados para reportes y bitácoras.

### Cross-device
- **Sesión compartida**: Si ciudadano inicia en web y luego abre app, sus reportes se sincronizan.
- **URLs compartidas**: Todo reporte tiene URL única accesible desde cualquier dispositivo.
- **Notificaciones unificadas**: Preferencias de canal (push/email/SMS) gestionadas desde perfil y respetadas en todas las plataformas.

---

## 5. Notificaciones Push / SMS / Email Flows

### Push Notifications (App)
- **Ciudadano**:
  - Reporte recibido: “Folio #12345 confirmado. Tiempo estimado: 48h.”
  - Estado cambiado: “Tu reporte de bache está en proceso.”
  - Resuelto: “¡Resuelto! Califícanos.”
- **Operador**:
  - Nuevo ticket: “5 nuevos reportes en cola.”
  - Ticket vencido: “Alerta: folio #123 superó el SLA.”
- **Dispatcher**:
  - Emergencia: “ALERTA ROJA — Robo en progreso. Av. Principal.”
- **Admin**:
  - Umbral alcanzado: “Colonia Centro: +50 reportes esta semana.”

### SMS (Fallback para ciudadanos sin app)
- **Registro**: Ciudadano envía SMS corto al número municipal (ej. BACHE + dirección).
- **Respuesta automática**: SMS de confirmación con folio y enlace web.
- **Actualizaciones**: Opción de suscribirse a actualizaciones por SMS (cambio de estado).
- **Límite**: Solo texto, sin imágenes. Enlace acortado para seguimiento.

### Email
- **Ciudadano**:
  - Confirmación de reporte con folio, resumen y enlace de seguimiento.
  - Actualización de estado con detalle y foto de evidencia de resolución (si aplica).
  - Encuesta post-resolución.
- **Operador / Dispatcher / Admin**:
  - Resumen diario de actividad (digests).
  - Alertas de escalamiento.
  - Reportes programados adjuntos en PDF/Excel.
- **Transaccionales**: Diseño limpio, responsive, texto plano alternativo. Remitente oficial del municipio.

### Preferencias de Notificación
- Perfil de usuario permite elegir canal por tipo de evento.
- Ejemplo: ciudadano puede desactivar push pero mantener email.
- Dispatcher siempre recibe push+sonido para emergencias (no desactivable).

---

## 6. Accessibility & Localization

### Accesibilidad (a11y)
- **WCAG 2.1 AA como mínimo**.
- **Contraste**: Todos los textos e iconos cumplen ratio 4.5:1. Estados (rojo/amarillo/verde) no dependen solo de color; incluyen iconos y texto.
- **Tamaños de touch target**: Mínimo 48×48dp en móvil. Botones grandes en formularios ciudadanos.
- **Lectores de pantalla**: Todos los elementos etiquetados (`aria-label`, `alt` en imágenes). Navegación por teclado completa en desktop.
- **Modo oscuro**: Soporte nativo en app y web para reducir fatiga visual (especialmente en turnos nocturnos del dispatcher).
- **Zoom**: Layout no se rompe al 200% zoom en navegador.
- **Reducción de movimiento**: Respeta preferencia del sistema para animaciones.
- **Formularios**: Labels siempre visibles, errores claros con sugerencia de corrección, autocompletado estándar.

### Localization — Soporte en Thai
- **i18n desde el inicio**: Todas las cadenas extraídas en archivos de traducción (JSON o YAML).
- **Idiomas MVP**: Español (default), English, ภาษาไทย (Thai).
- **Thai específico**:
  - Tipografía: Fuentes que soporten Thai (Noto Sans Thai, Sarabun). Fallback claro.
  - Layout: Thai es de izquierda a derecha (LTR), sin cambio de dirección.
  - Longitud de texto: Thai puede ser más compacto o más largo según contexto; UI permite expansión de botones y labels.
  - Números y fechas: Formatos locales (Buddhist calendar opcional para display, pero backend en Gregorian).
  - Honoríficos: Sistema de notificaciones y chat respeta formalidad en mensajes automáticos.
- **Selector de idioma**: Disponible en login y footer de todas las pantallas. Preferencia guardada en perfil.
- **Contenido dinámico**: Categorías de reporte, nombres de áreas y plantillas de email también traducibles desde CMS/admin.
- **Validación**: QA con hablantes nativos. Pruebas de truncamiento en pantallas pequeñas.

---

*Documento generado para Gobierno360 — UX/Producto.*