Jerarquía de errores y resaltado de prioridades

1) Por qué se necesita una jerarquía de errores

• explicar lo que salió mal,
• mostrar por qué es importante,
• sugerir qué hacer a continuación,
• priorizar si hay varios errores.
• La jerarquía de errores reduce la carga cognitiva, acelera la corrección y aumenta la conversión de pasos (registro, pagos, KYC).

2) Modelo de niveles de criticidad (Severity)

1. Info (información) - «El perfil está incompleto, se puede rellenar más adelante». No bloquea.

2. Notice (atención) - «El límite está casi agotado». Le recomendamos que actúe.

3. Warning (advertencia) - «No coincidencia de formato, los datos se guardan parcialmente». Puede interferir.

4. Error (error) - «Formato incorrecto/campo obligatorio vacío». Bloquea una acción específica.

5. Critical (crítico) - «Pago rechazado/riesgo de seguridad». Bloquea el script, requiere un paso inmediato.

• Una pantalla es un estado maestro.
• Con múltiples errores: mostramos uno crítico desde arriba y nos desplazamos constantemente hacia el primer error.

3) Principios para resaltar las prioridades

1. Jerarquía visual: el color/icono/grosor/contraste aumenta con la crítica.
2. Proximidad espacial: error cerca del campo/zona a la que pertenece.
3. Enfoque y desplazamiento: auto-scroll al primer error + enfoque en el campo problemático.
4. Una llamada principal: un banner/alerta general sobre un problema crítico + consejos locales.
5. Secuencia de tokens: los colores/iconos/fuentes para Info/Warning/Error no se modifican en todo el producto.
6. Tiempo de vida: errores locales - aún no corregidos; banners - hasta el cierre/corrección.
7. No confundimos estados: «vacío» ≠ «error», «esperando» ≠ «error».

4) Lenguaje visual (tokens de UI)

• Info - azul/gris neutro,
• Notice - ámbar/amarillo,
• Warning - naranja,
• Error - rojo,
• Critical es un rico fondo rojo + contraste.
• Iconos: info ⓘ, notice, error/, success.

• Mensaje en línea debajo del campo (marco mínimo).
• Row-callout por línea/tarjeta.
• Page-alert (banner) - para general/crítico.
• Microanimaciones: apariencia suave, sin «twittering» del diseño.

5) Textos de error: fórmula y ejemplos

Fórmula: Qué no es así + Cómo corregir + (Por qué/restricción).

"Formato de fecha incorrecto. Escriba en formato DD. MM. EL GGG"

"El archivo es demasiado grande (máx. 10 MB). Descargue un archivo más pequeño"

"Nivel de verificación insuficiente. Pase KYC - tomará ~ 2 minutos"

"El pago ha sido rechazado por el banco. Pruebe otro método o póngase en contacto con el banco"

Anti-patrones: «Error 400», «Algo salió mal», humor en pasos estresantes.

6) Jerarquía en formas complejas (registro/CUS/pagos)

1. Validación en línea en blur: capturar errores locales a la vez.
2. Verificación global de submit: muestra el banner «Arregle los campos marcados» y la lista/anclas.
3. Navegación por error: teclado/tabulación, «Ir al error # 1/# N».
4. Orden de corrección: primero bloqueando (Error/Crítico), luego Warning/Notice.
5. Guardar contexto: los datos introducidos no se pierden en caso de error.

7) Especificidad de scripts

7. 1 Pagos/conclusiones

Crítica: rechazo del proveedor/banco, actividad sospechosa.
Error: campo de mapa/IBAN, límites de cantidad/frecuencia.
Warning: red lenta/exceso de tiempo de espera.

Texto: "Pago rechazado por el banco. Pruebe otro método o póngase en contacto con el banco. La Junta no ha pasado a pérdidas y ganancias"

7. 2 CUS/seguridad

Crítica: documento falsificado/país bloqueado/cuenta múltiple.
Error: documento ilegible/no coincidencia de fecha.

Texto: "La foto del documento está borrosa. Sube una imagen más clara con una buena iluminación"

7. 3 Búsqueda/filtros

No es un error, sino un resultado nulo.

Texto: "No hay resultados por "{query}". Retire el filtro «Proveedor: X» o intente «{alt}». [Restablecer filtros]"

8) Disponibilidad (A11y) y requisitos técnicos

Los errores se declaran al captor de pantalla: aria-live = «assertive» para los críticos, «polite» para otros.
Campos con error: aria-invalid =» true», aria-describedby por mensaje.
El enfoque se transfiere al primer error; el orden de tabulación mantiene la lógica.
Contraste de WCAG AA; el icono no reemplaza el texto.
El texto debe leerse en voz alta sin perder sentido.

9) Localización y precisión jurídica

Evitar la jerga y las metáforas culturales.
Acordar términos (glosario): «pago rechazado», «límite superado», «verificación».
Especificar plazos y limitaciones en formato local: «hasta 15 minutos», moneda/fecha.

10) Métricas de calidad

Error rate por campo/paso (porcentaje de usuarios que han encontrado un error).
Time-to-Fix (tiempo medio hasta que se corrige el primer error).
Drop-off después del error (cuántos se van sin corregir).
Repetibilidad de errores (recurrence) por usuario/sesión.
Llamadas de soporte por tipo de error.
Convierte el paso antes/después de los cambios en la jerarquía.

• Auto-scroll y enfoque vs sólo color/texto.
• La formulación exacta de la causa vs es general.
• Orden de retroiluminación (primero banner → inline) vs (sólo inline).
• Agregar el vínculo «Mostrar requisitos» junto al error.

11) Lista de verificación antes del lanzamiento

• Cada error tiene un nivel (Info/Notice/Warning/Error/Crítico).
• El color/icono/contenedor coincide con el nivel.
• Hay un desplazamiento al primer error y una transferencia de enfoque.
• El mensaje explica qué/cómo/por qué.
• Los términos coinciden con el glosario; localización verificada.
• Accesibilidad: atributos aria, contraste, legibilidad en voz alta.
• Los datos no se pierden en caso de error.
• Los estados de «resultado cero» y «espera» no se enmarcan como errores.

12) Ejemplos de «antes/después»

Formulario de fecha

Antes: «Error 400»

Después de: "Formato de fecha incorrecto. Use DD. MM. EL GGG"

el Pagamento

Antes: «El pago no ha pasado»

Después: "El pago ha sido rechazado por el banco. Pruebe otro método o póngase en contacto con el banco. La Junta no ha pasado a pérdidas y ganancias"

KYC

Antes: «Documento no aceptado»

Después de: "No se puede reconocer el documento. Sube una foto sin deslumbramientos, los ángulos y el texto son visibles"

Búsqueda nula (¡no error!)

Antes: «Error: no se ha encontrado nada»

Después: "No hay resultados por "roulette en vivo". Retire el filtro «High-limit» o intente «roulette». [Restablecer filtros]"

13) Componentes del sistema de diseño

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Render: texto + icono, color por 'severity'.

``

Пропсы: `title`, `description`, `severity`, `actions[]`.
Opciones: 'info | notice | warning | error | critical'.

``

Lista de errores con anclajes a los campos, navegación por teclado, «Ir al # 1».

'Validator/>' (lógica)

Reglas de campo/formulario/paso, prioridades, esquemas (por ejemplo, JSON-Schema), localización de mensajes.

14) Plantillas de frases rápidas

15) Incrustación en el proceso

Diseñe los textos al mismo tiempo que la lógica de validación.
Almacenar las filas en i18n junto a los componentes, versionar.
En la lista de comprobación PR: coincidencia con el nivel, presencia de atributos aria, localización correcta.
Regularmente ruge errores por métricas y comentarios de soporte.

Parche final

Digitalice los niveles: Info → Critical.
Muestre la prioridad visualmente y en el foco.
Explique la corrección de forma breve y específica.
No llame error al vacío.
Mide y mejora: error rate, Time-to-Fix, drop-off.