Nivel: N4 – CCO / Desarrollo / Diseno
Este documento especifica el diseno visual y la experiencia de usuario (UI/UX) del Modulo de Gestion de Usuarios. Describe como se ven las pantallas, como navega el usuario, y como se conectan los elementos. Para saber que hace el modulo, consulta el Instructivo Maestro de Gestion de Usuarios.
Este documento especifica el diseno visual y la experiencia de usuario (UI/UX) del Modulo de Gestion de Usuarios. Describe como se ven las pantallas, como navega el usuario, y como se conectan los elementos. Para saber que hace el modulo, consulta el Instructivo Maestro de Gestion de Usuarios.
NOTA DE DEPENDENCIAS: Este es uno de los ultimos modulos en construirse porque se conecta con casi todo el ecosistema. Para que exista «Mis Documentos», primero debe existir el modulo de Documentos. Para «Mis Pedidos», primero Pedidos y Productos. Se construira en fases progresivas.
1. Proposito
Definir el requerimiento de diseno de cada pantalla, flujo y componente visual del Modulo de Gestion de Usuarios. Este documento sirve como guia para el equipo de desarrollo y diseno UI/UX. Incluye: estructura de pantallas, flujos de navegacion, mockups de referencia y especificaciones de interaccion.
2. Fases de construccion
El modulo se construye en fases porque depende de otros modulos del ERP:
| Fase | Que se construye | Depende de | Prioridad |
|---|---|---|---|
| Fase 1 – Core | Login, registro, Mi Perfil, dashboard basico, seguridad | Supabase Auth (Nucleo 1) | Inmediata |
| Fase 2 – Financiero | Mis Finanzas, estado de cuenta, cuotas, historial de pagos | Nucleo 5 (Finanzas) | Alta |
| Fase 3 – Academico | Historial academico, notas, vuelos, cronograma, e-learning | Nucleo 4.1 (CIA) | Alta |
| Fase 4 – Documental | Mis Documentos, expediente digital, certificados | Nucleo 6 (Archivologia) | Media |
| Fase 5 – Comercial | Mis Pedidos, tracking, Aerotienda, Bistro, Base Nautica | Nucleo 2 (Comercial) | Media |
| Fase 6 – Social | Fidelidad, puntos, badges, suscripciones, calendario personal | Nucleo 8 + transversal | Posterior |
3. Fase 1: Experiencia de Login y Registro
3.1 Pantalla de Login
| Elemento | Especificacion |
|---|---|
| Campos | Email + Contrasena (con opcion de ver/ocultar) |
| Autenticacion social | Google (prioritario), posible Apple ID |
| Recuperacion | Link «Olvidaste tu contrasena?» → flujo por email |
| Registro | Link «Crear cuenta» → formulario de registro |
| Estetica | Fondo con imagen de aviacion, logo IDEA prominente, glassmorphism en el formulario |
| Responsivo | Mobile-first. Debe funcionar perfecto en telefono |
3.2 Flujo de Registro
| Paso | Pantalla | Que pide |
|---|---|---|
| 1 | Datos basicos | Nombre, apellido, cedula/RIF, email, telefono |
| 2 | Verificacion | Codigo de verificacion al email |
| 3 | Contrasena | Crear contrasena (con indicador de fortaleza) |
| 4 | Perfil inicial | Foto (opcional), fecha de nacimiento, genero, direccion |
| 5 | Bienvenida | Tour guiado del dashboard (tooltip interactivo) |
3.3 Dashboard personal (Home del usuario)
El dashboard es la primera pantalla despues del login. Se adapta segun los roles activos del usuario:
| Zona | Ubicacion | Contenido |
|---|---|---|
| Header | Arriba | Logo IDEA + Nombre del usuario + Foto + Notificaciones (campana con badge) + Menu hamburguesa (mobile) |
| Sidebar izquierdo | Lateral (desktop) | Menu de navegacion con iconos: Mi Perfil, Mis Finanzas, Academico, Documentos, etc. Solo muestra las secciones que aplican segun los roles |
| Area principal | Centro | Widgets configurables: Proximas clases, Pagos pendientes, Notificaciones recientes, Accesos rapidos |
| Barra de IA | Inferior derecho (flotante) | Boton del asistente IA: «Preguntame lo que necesites» (abre chat lateral) |
4. Especificacion de pantallas por seccion
Cada seccion del modulo tiene su propia pantalla. La visibilidad depende de los roles activos (ver Maestro, Seccion 3):
| Seccion | Componentes de pantalla | Fase | Para quien |
|---|---|---|---|
| Mi Perfil | Foto, datos personales (editables), tallas, configuracion de notificaciones, cambio de contrasena | Fase 1 | Todos |
| Mi Panel | Dashboard con widgets: proximas clases, pagos, alertas. Configurable por el usuario | Fase 1 | Todos |
| Mis Finanzas | Estado de cuenta, tabla de cuotas, historial de pagos, compromisos activos, botones de pago | Fase 2 | Usuarios con compromisos |
| Mi Academico | Notas por materia, horas de vuelo acumuladas, cronograma semanal, historial de clases | Fase 3 | Alumnos CIA |
| Mi Centro de Capacitacion | Cursos cortos, certificados CC, notas de cursos no-INAC | Fase 3 | Alumnos CC |
| Mis Documentos | Expediente digital: upload de docs, estados de validacion, vista previa de certificados | Fase 4 | Alumnos, Instructores, Empleados |
| Mis Pedidos | Historial de compras, tracking, lista de deseos, recompras rapidas | Fase 5 | Clientes Aerotienda |
| Mi Bistro | Historial de consumos, menu del dia, reservas, suscripcion de almuerzo | Fase 5 | Clientes Bistro |
| Mi Fidelidad | Puntos, nivel, barra de progreso al siguiente nivel, catalogo de recompensas | Fase 6 | Todos activos |
| Mi Calendario | Vista semanal/mensual con clases, vuelos, tareas, vencimientos, eventos | Fase 6 | Todos |
| Soporte | Crear ticket, ver historial, chat con IA, escalamiento a humano | Fase 1 | Todos |
5. Logica de navegacion adaptativa
El menu lateral solo muestra las secciones que aplican segun los roles activos del usuario. No hay ruido visual:
| Si el usuario es… | Ve en el menu |
|---|---|
| Solo Alumno CIA | Perfil + Academico + Documentos + Finanzas + Soporte |
| Solo Cliente Aerotienda | Perfil + Pedidos + Finanzas + Fidelidad + Soporte |
| Alumno + Cliente | Todo lo anterior combinado |
| Instructor | Perfil + Mis Grupos + Cronograma + Documentos + INAC |
| Empleado | Perfil + Modulo de su departamento + RRHH |
6. Sistema de onboarding y guias
| Elemento | Cuando se muestra | Descripcion |
|---|---|---|
| Tour de bienvenida | Primer login despues de registro | Recorrido guiado por el dashboard: «Aqui ves tus clases», «Aqui tus pagos» |
| Tooltips de seccion | Primera vez que entra a cada seccion | «Haz clic aqui para subir un documento», con boton «Entendido» |
| Icono de ayuda (?) | Siempre visible en cada campo | Tooltip que explica que es cada dato: «Tu cedula se usa para validar tu identidad» |
| Barra de completitud | En Mi Perfil | «Tu perfil esta al 65% completo. Agrega tu foto para llegar al 75%» |
| Asistente IA | Siempre (boton flotante) | Chat contextual: sabe en que pantalla estas y te ayuda con eso |
7. Especificaciones visuales
| Aspecto | Especificacion |
|---|---|
| Tipografia | Inter o Outfit (Google Fonts). Jerarquia clara: titulos bold, cuerpo regular |
| Paleta | Azul IDEA (#1d4ed8) + fondos claros (#f8fafc). Dark mode opcional |
| Componentes | Cards con bordes redondeados, sombras suaves, hover con elevacion |
| Iconos | Lucide Icons o Heroicons. Consistentes en todo el modulo |
| Responsive | Mobile-first. Sidebar colapsa a hamburguesa en <768px |
| Animaciones | Transiciones suaves (300ms ease). Skeleton loading mientras carga |
| Accesibilidad | Contraste AA minimo. Labels en formularios. Tab navigation |
Los mockups y capturas de pantalla se iran agregando a medida que se construyan los prototipos de cada fase.
8. Referencia
| Documento | Relacion |
|---|---|
| Instructivo Maestro de Usuarios | El QUE: normas, roles, permisos, arquitectura |
| Este documento | El COMO: diseno visual, pantallas, flujos, UX |
| Normas de Roles | Determina que ve cada usuario (Capa 2) |
| Agentes IA | El asistente integrado en la barra flotante |
| Identidad Visual de IDEA | Logos, colores (HEX/RGB), tipografia, componentes — la guia de marca |
| Comunicaciones | Canales de notificacion al usuario |
