# 08 — Experiencia de usuario e interfaz *(Entregable H)* > Requisito de §51: **no una interfaz genérica de tablas Bootstrap.** Un producto que se sienta profesional. > Y requisito de §62: minimizar los clics de las tareas frecuentes. Ambos objetivos se refuerzan: una interfaz > bien diseñada es la que hace que el trabajo repetitivo cueste poco. --- ## Los usuarios reales de SIGA El diseño parte de quién usa el sistema, cuándo y desde qué dispositivo: | Usuario | Dispositivo dominante | Sesión típica | Necesidad crítica | |---|---|---|---| | **Coordinador** | Computador de escritorio | 2–4 horas diarias, todo el día | Densidad de información, atajos, listados extensos | | **Docente** | Computador, a veces tablet | 20–40 minutos, en picos al final del periodo | **Velocidad de digitación de notas.** Es su único momento de fricción real | | **Secretaría / matrícula** | Computador | Jornadas completas en enero | Formularios largos que no se pierdan y no se repitan | | **Acudiente** | **Celular, casi siempre** | 2 minutos, esporádico | Entender de un vistazo cómo va su hijo | | **Estudiante** | **Celular** | 1 minuto, para ver tareas | Ver qué tiene que entregar | **Consecuencia de diseño:** las pantallas administrativas se optimizan para escritorio con densidad alta; las pantallas de familia se diseñan **primero para celular** y luego se expanden. No es la misma interfaz escalada: son prioridades distintas dentro del mismo sistema de diseño. --- ## Sistema de diseño ### Fundamentos | Elemento | Definición | |---|---| | **Base** | Bootstrap 5.3 como retícula y utilidades, con una capa propia de tokens y componentes. Bootstrap se usa como cimiento, no como apariencia final. | | **Tokens** | Variables CSS para color, espaciado, tipografía, radios y sombras. Cambiar la identidad visual del sistema es cambiar un archivo de variables. | | **Tipografía** | Una familia sin serifa de alta legibilidad para interfaz. Escala tipográfica de 6 pasos. Números **tabulares** en todas las tablas de notas — sin eso, las columnas de calificaciones no se alinean y se leen mal. | | **Espaciado** | Escala de 4 px. Nada se posiciona "a ojo". | | **Radios y sombras** | Radio suave y consistente; sombras sutiles para elevar tarjetas y modales. Sin sombras duras ni degradados llamativos. | | **Iconografía** | Un solo conjunto de iconos de trazo, en toda la aplicación. Nunca mezclar familias. | ### Paleta funcional El color **comunica estado**, no decora: | Uso | Aplicación | |---|---| | **Primario** | Acciones principales, elementos activos, enlaces | | **Neutros** | Fondos, bordes, texto. Es el 85 % de la interfaz | | **Superior** | Nivel de desempeño superior, indicadores muy positivos | | **Alto / Éxito** | Nivel alto, confirmaciones, guardado correcto | | **Básico / Advertencia** | Nivel básico, avisos, pendientes | | **Bajo / Peligro** | Nivel bajo, errores, acciones destructivas | | **Informativo** | Mensajes neutros del sistema | **Regla de accesibilidad:** el color **nunca es el único portador de información**. Un nivel de desempeño Bajo lleva color, texto e icono. Un daltónico y una impresión en blanco y negro deben transmitir lo mismo (§51). --- ## Estructura de la aplicación ### Escritorio ``` ┌──────────────────────────────────────────────────────────────────────────┐ │ ☰ SIGA [2026 ▼] [Periodo 2 ▼] 🔔 3 MARÍA GONZÁLEZ ▼ │ Barra superior ├────────────────┬─────────────────────────────────────────────────────────┤ │ │ Inicio › Notas › 6°A · Matemáticas │ Migas de pan │ ⌂ Dashboard │ ───────────────────────────────────────────────────── │ │ 🏫 Colegio │ │ │ ⚙ Parametriz. │ ┌───────────────────────────────────────────────┐ │ │ 👨‍🏫 Docentes │ │ │ │ │ 🎓 Estudiantes│ │ Contenido de la pantalla │ │ │ 👪 Acudientes │ │ │ │ │ 📚 Cursos │ │ │ │ │ 📐 Áreas │ └───────────────────────────────────────────────┘ │ │ 🎯 Desempeños │ │ │ ✍ Notas │ │ │ 📋 Tareas │ │ │ 📢 Comunicados│ │ │ 📄 Boletines │ │ │ ⬆ Promoción │ │ │ 📊 Reportes │ │ │ 🔍 Auditoría │ │ └────────────────┴─────────────────────────────────────────────────────────┘ ``` **La barra superior contiene tres elementos que merecen atención especial:** 1. **Selector de año y periodo.** Es el *contexto activo* (§13, §14). Está siempre visible porque determina qué datos se están viendo. Cuando el contexto **no es el predeterminado**, la barra cambia de color y muestra un aviso: *"Consultando 2025 — año cerrado, solo lectura"*. Esto evita el error de digitar notas creyendo estar en el año actual. 2. **Selector de perfil**, solo visible si la persona tiene varios roles ([AMB-09](00-hallazgos-y-decisiones.md#amb-09--una-misma-persona-con-varios-roles)). 3. **Centro de notificaciones** con comunicados y pendientes. El menú lateral **se construye según los permisos del rol** (§63): un docente ve 6 opciones, no 16 con la mitad deshabilitadas. Ocultar lo que no se puede usar reduce la carga cognitiva y evita frustraciones. ### Celular El menú lateral se colapsa a un cajón deslizante y aparece una **barra inferior de navegación** con las 4 acciones más frecuentes del rol. Para un acudiente: Inicio · Tareas · Comunicados · Perfil. ``` ┌─────────────────────────┐ │ ☰ SIGA 🔔 │ ├─────────────────────────┤ │ │ │ Contenido a │ │ ancho completo, │ │ una sola columna │ │ │ ├─────────────────────────┤ │ ⌂ 📋 📢 👤 │ │ Inicio Tareas Comun. Perf│ └─────────────────────────┘ ``` --- ## Componentes clave ### Tarjeta de indicador (KPI) Base de todos los dashboards. Estructura: icono, valor grande, etiqueta, y variación respecto al periodo anterior con dirección y color. ``` ┌────────────────────────┐ ┌────────────────────────┐ │ 🎓 │ │ ⚠ │ │ 847 │ │ 36 │ │ Estudiantes activos │ │ Notas pendientes │ │ ▲ 12 vs. 2025 │ │ 2 cursos incompletos │ └────────────────────────┘ └────────────────────────┘ ``` Si la tarjeta representa algo accionable, **es un enlace**: tocar "36 notas pendientes" lleva al listado filtrado, no a un listado general que hay que volver a filtrar. Esa es una de las decisiones que más clics ahorra en todo el sistema. ### Tabla de datos Todas las tablas del sistema comparten comportamiento (§55): ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 🔍 Buscar… [Curso ▼] [Estado ▼] [Más filtros] [⬇ Exportar] │ ├────┬──────────────────────────┬──────────┬──────────┬───────────────────┤ │ ☐ │ Estudiante ↕ │ Curso ↕ │ Estado │ Acciones │ ├────┼──────────────────────────┼──────────┼──────────┼───────────────────┤ │ ☐ │ ACOSTA RIVERA, JUAN │ 6°A │ ● Activa │ 👁 ✏ ⋯ │ ├────┴──────────────────────────┴──────────┴──────────┴───────────────────┤ │ Mostrando 1–25 de 847 [◀ 1 2 3 … 34 ▶] [25 por página ▼] │ └─────────────────────────────────────────────────────────────────────────┘ ``` Características: búsqueda con retardo (no dispara una consulta por tecla) · filtros que **persisten al volver** · ordenamiento por columna · selección múltiple con acciones masivas · exportación respetando los filtros aplicados · en celular, cada fila se convierte en una tarjeta apilada, no en una tabla con desplazamiento horizontal. ### Estados de la interfaz Cada pantalla define explícitamente sus cuatro estados. Es lo que separa un producto terminado de un prototipo: | Estado | Tratamiento | |---|---| | **Cargando** | Esqueleto de contenido, no un girador genérico. El usuario ve la forma de lo que viene. | | **Vacío** | Ilustración, explicación de por qué está vacío y **la acción para llenarlo**. Nunca una tabla vacía sin más. | | **Error** | Qué pasó, qué puede hacer el usuario, y un botón de reintento. Nunca un código técnico suelto. | | **Con datos** | El estado normal. | **Ejemplo de estado vacío bien resuelto** — un docente sin desempeños: > 🎯 **Aún no hay desempeños para Matemáticas · 6°A · Periodo 2** > Los desempeños son los logros que evaluarás este periodo. Aparecerán en el boletín de tus estudiantes. > **[Crear desempeño]** **[Copiar del periodo anterior]** Ese segundo botón —copiar del periodo anterior— es exactamente el tipo de detalle que convierte una tarea de 15 minutos en una de 15 segundos. ### Retroalimentación de acciones | Situación | Tratamiento | |---|---| | Guardado exitoso | Notificación breve, esquina superior derecha, se cierra sola | | Guardado con advertencia | Notificación que **permanece** hasta que se cierra | | Error de validación | Mensaje **junto al campo**, en rojo, con el borde marcado. Nunca solo un resumen arriba | | Acción crítica | Modal de confirmación que **describe la consecuencia concreta**, no "¿Está seguro?" | | Proceso largo | Barra de progreso real con recuento y opción de cancelar | **Confirmación bien escrita vs. mal escrita:** > ❌ ¿Está seguro que desea continuar? > > ✅ **Cerrar el Periodo 2** > Los docentes ya no podrán registrar ni modificar notas de este periodo. > Hay **36 notas pendientes** en 2 cursos. > Esta acción queda registrada en la auditoría y puede revertirse reabriendo el periodo. > **[Cancelar]** **[Cerrar periodo]** ### Wizard (asistente por pasos) Para procesos largos: matrícula (§53), copia de estructura, promoción, configuración inicial. ``` ●────────●────────●────────○────────○ Identif. Datos Acudien. Matríc. Confirm. ✓ ✓ actual ``` Reglas: navegación libre hacia atrás · validación al avanzar, no al final · **guardado de borrador automático** · resumen completo antes de confirmar · el progreso nunca se pierde por cerrar el navegador. --- ## Pantallas críticas ### 1. Digitación de notas — la pantalla más importante del sistema Es donde el docente pasa su tiempo y donde se gana o se pierde la aceptación del sistema. Un docente que tarda 15 minutos en calificar un curso usa el sistema; uno que tarda 45 minutos busca la forma de evitarlo. **Decisiones de diseño:** | Decisión | Motivo | |---|---| | **Digitación 100 % con teclado** | `Enter` o `↓` avanzan. El docente nunca toca el ratón. Esta sola decisión reduce el tiempo a la mitad. | | **Conversión inteligente visible** | El docente escribe `35`, ve `3.5` al salir del campo. Sin sorpresas (§29). | | **Nivel de desempeño en vivo** | La columna de nivel se colorea al instante. El docente detecta un error de digitación de inmediato. | | **Autoguardado por fila** | Nada se pierde. El botón "Guardar todo" existe como red de seguridad psicológica. | | **Contador de progreso permanente** | `28/32` siempre visible. El docente sabe cuánto le falta. | | **Estado del periodo visible** | Distintivo verde "Periodo abierto" o rojo "Periodo cerrado — solo lectura". Sin ambigüedad. | | **Fila fija de encabezado** | Con 40 estudiantes, saber en qué columna se está sin desplazarse hacia arriba. | | **Búsqueda dentro del listado** | Para corregir la nota de un estudiante concreto sin recorrer la lista. | **En tablet:** la tabla se mantiene, con campos más grandes y teclado numérico nativo. ### 2. Wizard de matrícula Cinco pasos (§53), con el detalle que más tiempo ahorra: **la búsqueda por documento antes de crear**. Tanto para el estudiante como para cada acudiente. Cuando la secretaria matricula al segundo hermano de una familia, el sistema reconoce a los acudientes y solo pide el parentesco. ### 3. Panel de cierre de periodo Ver [F-10](04-flujos-principales.md#f-10--cerrar-un-periodo). La clave es que **muestra los pendientes con nombre propio** antes de permitir cerrar. Un panel que solo dice "¿cerrar periodo?" obliga al coordinador a averiguar por su cuenta quién falta. ### 4. Pantalla de promoción Ver [F-13](04-flujos-principales.md#f-13--promoción-de-estudiantes-al-año-siguiente). Sugerencia precargada, edición individual, acción masiva sobre la selección. El coordinador confirma en lugar de digitar. ### 5. Dashboard familiar Diseñado para celular, en vertical, de un vistazo. Ver [09 — Dashboards](09-dashboards.md). --- ## Diseño responsive | Rango | Comportamiento | |---|---| | **< 576 px** (celular) | Una columna · menú en cajón · barra inferior · tablas como tarjetas · botones de ancho completo | | **576–992 px** (tablet) | Dos columnas · menú colapsado por defecto · tablas con desplazamiento controlado | | **≥ 992 px** (escritorio) | Menú fijo visible · retícula completa · tablas con densidad alta | **Criterio de aceptación:** ninguna pantalla del sistema produce desplazamiento horizontal en un dispositivo de 360 px de ancho. Ninguna. Es la prueba más simple y la que más problemas de responsive destapa. **Área táctil mínima:** 44 × 44 px para cualquier elemento interactivo en celular. --- ## Accesibilidad Nivel objetivo: **WCAG 2.1 AA en lo esencial** (§51 pide "accesibilidad básica"; esto es un poco más y no cuesta significativamente más). | Requisito | Aplicación | |---|---| | **Contraste** | Mínimo 4.5:1 en texto normal, 3:1 en texto grande y elementos de interfaz | | **Navegación por teclado** | Toda función accesible sin ratón. Foco **siempre visible**. Orden de tabulación lógico | | **Etiquetas** | Todo campo tiene su etiqueta asociada. Los iconos sin texto llevan etiqueta accesible | | **Errores** | Anunciados a lectores de pantalla, asociados al campo, descritos en texto | | **Estructura semántica** | Encabezados jerárquicos correctos, regiones marcadas, tablas con encabezados asociados | | **Sin dependencia del color** | Estados con icono y texto además del color | | **Movimiento** | Se respeta la preferencia del sistema de reducir animaciones | | **Zoom** | Funcional hasta 200 % sin pérdida de contenido | --- ## Rendimiento percibido | Objetivo | Cómo se logra | |---|---| | Primera pintura útil < 1.5 s en 3G | CSS crítico en línea, recursos diferidos, sin bibliotecas pesadas | | Sin bloqueo al guardar | Peticiones asíncronas con retroalimentación optimista y reversión si falla | | Tablas grandes fluidas | Paginación del lado del servidor. Nunca se cargan 800 estudiantes en el navegador | | Procesos largos comprensibles | Progreso real por lotes, no un girador indefinido | | Sin recargas innecesarias | Filtros, búsquedas y guardados sin recargar la página completa | **Sin proceso de compilación obligatorio.** Se entrega CSS y JavaScript listos para servir, lo que permite desplegar por FTP en hosting compartido (§4). Las herramientas de compilación existen en desarrollo, pero el despliegue no las requiere. --- ## Micro-detalles que definen la percepción de calidad Son pequeños y suelen ser lo primero que se recorta. También son lo que hace que un usuario diga "este sistema está bien hecho": - Al abrir un formulario, el **foco va al primer campo**. - Los campos de documento y celular aceptan pegado con espacios y guiones, y los limpian solos. - Los nombres se convierten a mayúsculas **al salir del campo**, no mientras se escribe (escribir en mayúsculas forzadas mientras se teclea es desagradable y esconde los errores de digitación). - Las fechas se muestran en formato colombiano y aceptan digitación directa además del calendario. - Las tablas recuerdan la última página, filtro y ordenamiento al volver desde un detalle. - Los mensajes de error dicen **qué hacer**, no solo qué falló: *"El celular debe tener 10 dígitos e iniciar en 3. Escribiste 9 dígitos."* - Los botones destructivos están **separados** de los constructivos, nunca contiguos. - Al terminar un proceso largo, se ofrece la **siguiente acción natural**: tras generar boletines de 6°A, un botón "Generar boletines de 6°B". - El sistema recuerda el curso y la asignatura con los que el docente trabajó por última vez. - Los adjuntos muestran su tamaño y tipo antes de subirse. - El aviso de expiración de sesión aparece **antes** de expirar, con opción de extender — nunca se pierde una digitación por caducidad silenciosa.