Cumplimiento axe nielsen prototipo back office - martin-hendricks/MISO-PROYECTO-FINAL-SOLVENTA GitHub Wiki
Cumplimiento Axe y Nielsen · prototipo back-office
Auditoría de accesibilidad (WCAG 2.2 A/AA, lo que se puede inspeccionar en diseño) y de usabilidad (10 heurísticas de Nielsen) sobre la página Figma Back-office · Asesor / Operador. Incluye Figma Play y si el destino Clientes sirve para administrar clientes.
Fuentes: Prototipo web/móvil §6 · Resultado de validación usabilidad de usuario · Arquitectura de información · Cliente L1 · HU-8 · inspección Figma 20 sep 2026
Figma: Back-office · Asesor / Operador (127:2). Pantallas de asesor/operador + CRUD de clientes. TopNavAdmin, BadgeBO (incl. Activo/Inactivo), DialogConfirm, EmptyState (incl. SinClientes).
axe-core necesita un DOM: no corre sobre Figma. La certificación WCAG del canal (axe + teclado) queda para PF2. Aquí se inspeccionan tokens, contraste, hit targets y nombres de capa, igual que en Cumplimiento Axe y Nielsen · prototipo cliente.
Conclusión
El 20 sep 2026 el tab Clientes abría Mi cartera (cola COT/POL). Ese hallazgo está cerrado: Clientes es CRUD de usuarios web/móvil; Cotizaciones y Pólizas tienen listas propias; el TopNav navega. Siguen abiertos el BtnCalcular que apunta al error, chips a 35 px, el slug bo-pago-parametrico y starting points extra de operador.
| Pregunta | Respuesta |
|---|---|
| ¿Un asesor puede administrar clientes? | Sí, en prototipo. Lista, búsqueda, ficha, alta, edición y baja (con motivo). El objeto es la persona, no la póliza. |
| ¿Play recorre los destinos del wiki? | Sí el TopNav (Clientes / Cotizaciones / Pólizas; Avisos → sin permiso para el asesor). Avisos operador y renovar siguen teniendo deep link. Un solo starting point. |
| ¿WCAG de contraste? | Casi. Pares del DS cumplen. Chips de filtro a 35 px. Check decorativo 1.44:1 en cola vacía. |
| ¿Nielsen? | H3 / H5 / H7 / H9 se sostienen. H1, H2, H4, H6 mejoran (ramos L1, objeto persona). H8 / H10 parciales. |
1. Clientes administra personas (cerrado 20 sep 2026)
TopNavAdmin Clientes abre shell-asesor titulado Clientes. Cola de terceros, no de pólizas.
| Lo que un asesor necesita sobre un cliente | Qué hay |
|---|---|
| Buscar / filtrar personas | Campo Buscar por nombre o documento |
| Abrir ficha (documento, contacto, consentimientos) | Fila → cliente-detalle. Canal Web/Android |
| Alta o edición de tercero | cliente-form / cliente-form-editar |
| Baja | cliente-baja (motivo; no borra pólizas vigentes) |
| Ver sus cotizaciones y pólizas | Conteos en la ficha; las colas viven en los tabs Cotizaciones y Pólizas |
| Cotizar para ese cliente | CTA Cotizar en la ficha → asesor-cotizacion |
Frames: shell-asesor, cliente-detalle, cliente-form, cliente-form-editar, cliente-baja, lista-clientes-vacia.
2. Mezcla de contextos (mismas reglas que Karen)
De la validación del 18 sep 2026: falta de contexto (ramo + estado + paso), un flujo partido entre cards y tabs, SOAT/Hogar, “paramétrico”, stepper opaco.
| Hallazgo (cliente) | BO después del redibujo |
|---|---|
| Cards sin qué objeto es | Tab Clientes = personas. Cotizaciones = COT-*. Pólizas = POL-* |
| SOAT / Hogar no son L1 (PDF §2.2) | Listas y form de cotización usan dispositivo, vida, clima y vuelos, hipotecario |
| Un flujo partido entre CTA y tabs | Cotizar es CTA del tab Cotizaciones y de la ficha; ya no vive en Clientes |
| Avisos vs otro rol | El home del asesor ya no muestra el KPI de avisos. TopNav Avisos → shell-asesor-sin-permiso |
| “Paramétrico” | Frame bo-pago-parametrico; el cuerpo ya dice Pago automático (sigue el slug) |
| Hilo cotizar → emitir → pagar | Stepper en asesor-emision; las colas muestran estado de BadgeBO |
3. Figma Play
Starting points en el archivo: uno. Back-office · Asesor / Operador → bo-login (221:1128). Entrar abre shell-asesor (Clientes). Cerrar sesión vuelve al login.
El TopNav sí reacciona en los shells (Clientes, Cotizaciones, Pólizas, Avisos). CRUD: Nuevo → form → lista; fila → ficha; Editar / Dar de baja / Cotizar.
Queda: BtnCalcular en el camino feliz sigue yendo a asesor-cotizacion-error. Los starting points de operador no se añadieron al archivo (los deep links del wiki siguen).
bo-login --Entrar--> shell-asesor (Clientes)
--Nuevo cliente--> cliente-form --> shell-asesor
--fila--> cliente-detalle --Editar--> cliente-form-editar
--Dar de baja--> cliente-baja --> shell
--Cotizar--> asesor-cotizacion
TopNav --> lista-cotizaciones | lista-polizas | shell-asesor-sin-permiso
Cerrar sesión --> bo-login
Play del wiki:
| Flujo | URL | En el archivo |
|---|---|---|
| Asesor · login | proto 221-1128 |
Único starting point |
| Asesor · clientes | proto 131-2 |
Deep link a la lista; Play arranca en login |
| Asesor · cotizaciones | proto 213-465 |
Deep link; TopNav también llega |
| Operador · avisos | proto 135-129 |
Deep link; no está en Flow |
| Operador · ciclo de vida | proto 137-312 |
Deep link; no está en Flow |
4. Inspección WCAG (20 sep 2026)
Contraste sobre fills (WCAG 2.2 1.4.3 AA: 4.5:1 texto normal, 3:1 grande). Mismos pares Light del DS que el cliente.
| Par | Ratio | 1.4.3 AA | Dónde en el BO |
|---|---|---|---|
on-surface #181c1c / surface #f7faf9 |
16.4:1 | cumple | Títulos, valores, nombres de fila |
on-surface-variant #3e4948 / surface |
8.9:1 | cumple | Labels de campo, encabezados de tabla (11 px), footer |
on-primary #ffffff / primary #005050 |
9.3:1 | cumple | CTA filled, badges Aprobada / Pagada |
Error #ba1a1a / surface |
≥ 5:1 | cumple | Valor asegurado inválido; motivo vacío en DialogConfirm |
Badge En revisión #506969 / #cce8e7 |
4.56:1 | cumple (límite) | 12 px; no hay margen |
Check ✓ #005050 / fill #006a6a |
1.44:1 | no | EmptyState / ColaVacia; el mensaje de texto sí contrasta |
| Condición | BO | Nota |
|---|---|---|
| Estado nunca solo por color | cumple | Cada BadgeBO lleva texto (En revisión, Aprobada, Activo, Inactivo, …) |
| Error con texto, no solo borde | cumple | Hint El valor asegurado debe estar entre $200.000 y $8.000.000 COP.; El motivo es obligatorio para rechazar. |
| Hit targets botones | cumple | 49–51 px |
| Filtros chip (Pendientes / Aprobados / …) | parcial | 35 px de alto; Material y la auditoría cliente piden ≥ 48. WCAG 2.2 2.5.8 AA pide 24 px: los chips lo cumplen |
| Nombres de capa ≈ lo que leería un lector | cumple en Clientes | Tab Clientes = H1 Clientes |
Contraste helper #6e7979 (cliente) |
n/a | El BO usa #3e4948 / #ba1a1a en labels de error, no el helper 4.28:1 |
Regla para PF2: chips de filtro a 48 px; no poner un check teal sobre teal; el nombre del destino y el H1 de la vista deben ser el mismo objeto.
5. Matriz Nielsen · back-office
No copia la matriz del cliente S7. Cada H se puntúa sobre este prototipo (cumple / parcial / no). La columna Karen indica el hallazgo de la sesión de cliente que se repite aquí.
| Heurística | Karen (cliente) | BO | Qué se ve |
|---|---|---|---|
| H1 Visibilidad del estado | Éxito sin ramo; paso opaco | parcial | Clientes / Cotizaciones / Pólizas son objetos distintos. Stepper solo en emisión. |
| H2 Lenguaje del usuario | “paramétrico”; jerga | parcial | Cuerpo de pago dice Pago automático. Slug bo-pago-parametrico. |
| H3 Control y libertad | Volver presente | cumple | ← Cotizaciones, ← Avisos, baja Cancelar, TopNav con destino. |
| H4 Consistencia y estándares | SOAT/Hogar; cards vs tabs | parcial | Ramos L1 en listas y cotización. Avisos operador aún puede mostrar Hogar en el detalle del caso. |
| H5 Prevención de errores | Rechazo con motivo | cumple | Valor fuera de rango; rechazo sin motivo; póliza no vigente / ya cancelada; baja con motivo. |
| H6 Reconocer antes que recordar | Cards sin ramo + estado | parcial | Ficha de cliente. Columna RAMO L1. Filas de cliente se abren. |
| H7 Flexibilidad y eficiencia | Atajos reconocibles | cumple | TopNav de cuatro destinos en Play. CRUD y Cotizar desde la ficha. |
| H8 Diseño minimalista | Demasiados CTA del mismo peso | parcial | Un CTA principal por destino. Cuatro KPIs por lista. |
| H9 Recuperación de errores | Misma ruta, otro estado | cumple | asesor-cotizacion-error, EmptyState (SinPermiso, ColaVacia, SinClientes), bloqueos de ciclo de vida. |
| H10 Ayuda y documentación | Consentimiento sin documento | parcial | Hints de validación y copy de baja (habeas data). Footer Accesibilidad no abre nada. |
6. Deudas
Cerrado en este paso: CRUD de Clientes, listas Cotizaciones/Pólizas, TopNav en Play, ramos L1 en cotización y colas.
Siguen:
BtnCalcularen el camino feliz no debe ir aasesor-cotizacion-error.- Salidas de bloqueo: no vigente → Pólizas, no a cotización; ya cancelada → Pólizas, no a renovar.
- Starting points de operador en el archivo (hoy son deep links).
- Renombrar frame
bo-pago-parametricoalineado a Pago automático. - Chips de filtro a 48 px; check del empty state con contraste ≥ 3:1.
- Copy Hogar que quede en el detalle de avisos.
7. Fuera de alcance
Navegación por teclado en Figma Play, breakpoints 768/390 (el BO es escritorio 1440), portal de socios, axe/TalkBack sobre código (PF2), clonar una página “S7” del back-office.