Mockup 03 de 3 · Renovación de la interfaz interna de Hebb
La formación no es un catálogo: es un recorrido con salida, hitos y fecha de llegada. Toda la interfaz responde siempre a tres preguntas — dónde estoy, qué me queda y qué hago ahora.
Tres decisiones sostienen la propuesta y se aplican por igual a la cara del alumnado y a la de gestión.
Módulos y lecciones se ven como tramos y hitos encadenados, con la posición actual señalada literalmente. Las aperturas programadas y los plazos viven sobre ese camino, no en una pestaña aparte.
Cuánto llevas se mide con una escala continua; cómo vas respecto de lo previsto, con cuatro estados nombrados. Separarlos es lo que permite ver de un vistazo quién se está saliendo del itinerario.
Buena parte del alumnado de formación subvencionada estudia desde el móvil y después de trabajar. Cada pantalla se diseñó primero a 390 px con un único siguiente paso a la vista.
Cada una es una página completa, con datos verosímiles y al menos un estado que no es el caso feliz.
Sistema de diseño
Cada par de color de esta página se ha comprobado con un cálculo de contraste WCAG 2.1, no a ojo. Los 76 pares del sistema pasan el umbral que les corresponde en los dos modos.
Un índigo eléctrico como primario, una mandarina como secundario y una rampa de avance que va de una a otro. Los valores mostrados son los del modo claro; el modo oscuro tiene su gemelo, indicado debajo.
Primario
#5B2BEA · oscuro #A48CFF
7,05:1 sobre blanco
Secundario
#FF6B2C · texto #B03A05
6,31:1 con tinta encima
Completado
#0B7A57 · oscuro #3DD9A0
5,34:1
Rezagado
#8A5205 · oscuro #F0B44A
6,38:1
Parado / error
#C2103A · oscuro #FF8098
6,12:1
Tinta
#17103A · oscuro #F1EDFF
17,92:1
Tinta secundaria
#4F4776 · oscuro #BAB1E0
8,42:1
Borde de control
#8B82B4 · oscuro #6B5FA8
3,53:1 (mínimo 3:1)
Una única escala continua para todo el producto: la misma en el anillo del alumnado, en la celda de la tabla de seguimiento y en la línea de tiempo de convocatorias. Cada parada llega al menos a 3:1 contra el canal, y la posición exacta la marca además un cabezal sólido, de modo que el dato no viaja solo en el color.
Anillo pequeño
En marcha
Completado
Sin empezar
No miden cuánto llevas, sino cómo vas respecto de lo previsto. Llevan siempre icono y palabra: si se imprimen en blanco y negro, se siguen distinguiendo.
Lexend para titulares: geométrica, con carácter y
diseñada expresamente para reducir la fatiga lectora.
Inter para el cuerpo y la interfaz. Toda cifra va en
números tabulares para que las columnas no bailen. La escala es fluida
con clamp() y el cuerpo nunca baja de 16 px en móvil.
Vas 14 días por delante
Riesgos generales y su prevención
Seguimiento del alumnado
El cuerpo del texto usa Inter a 16 píxeles con una interlínea de 1,5. Es la medida con la que se leen las lecciones en vertical, en un móvil, después de la jornada laboral.
Texto secundario para metadatos, ayudas de campo y pies de tabla.
41 h · 68 % · 7,4 · 1 234
Etiqueta en versalitas
Radios amplios y sombras teñidas de violeta, nunca grises: una sombra gris sobre un fondo lavanda se ve sucia.
Todos miden al menos 44 px de alto: se usan con el pulgar. El botón deshabilitado nunca aparece solo: siempre lleva escrito su motivo.
Te falta leer el 25 % final de la lección. El botón se activará solo.
La auditoría del campus actual encontró 158 etiquetas sin asociar y 199
errores que solo se mostraban en un aviso flotante de cuatro segundos.
Aquí el error es persistente, está asociado con aria-describedby,
marca el campo con aria-invalid y se refuerza con una franja
lateral: cuatro señales, ninguna de ellas solo el color.
El teléfono debe tener nueve cifras seguidas, sin guiones. Por ejemplo: 600112233.
Solo lo usamos para avisos urgentes de la convocatoria.
Estado del contenido
Roles
Densa y ordenable en escritorio; en pantallas de menos de 900 px cada fila se convierte en una ficha con las cabeceras repuestas como etiquetas, en lugar de un desplazamiento lateral que esconde columnas. Reduce el ancho de la ventana para verlo.
| Avance | Ritmo | Última conexión | ||
|---|---|---|---|---|
| Rosa Iglesias Vega rosa.iglesias@ejemplo.es |
94 %
|
Al día | 56 / 60 | Hoy, 09:12 |
| Diego Ferrán Costa diego.ferran@ejemplo.es |
21 %
|
Parado, 12 días | 12 / 60 | 3 de agosto |
| Alberto Sanz Quiroga alberto.sanz@ejemplo.es |
100 %
|
Superado | 60 / 60 | 12 de agosto |
No tienes cursos finalizados en 2024. Prueba con otro año o quita el filtro para ver los tres cursos en los que estás matriculada.
Cargando el seguimiento del grupo…
Solo tres movimientos, y todos con función: las cintas de avance crecen
desde el origen al entrar (para que se lea el recorrido, no el número),
las tarjetas entran escalonadas 60 ms para dar orden de lectura, y el
cabezal de posición se desplaza cuando el avance cambia. Las 33 hojas
del campus actual no respetan prefers-reduced-motion; aquí
toda animación se apaga con esa preferencia activada.
README.md de esta carpeta recoge la tabla completa
de los 76 pares comprobados en modo claro y oscuro, junto con el mapeo a
los tokens de la Fase 16a y el orden de migración propuesto.