Mecanismos de validación y mensajería

Descripción general

La validación garantiza que las entradas del usuario cumplan con los criterios requeridos. Después de la validación, los usuarios reciben retroalimentación a través de mecanismos de mensajería claramente definidos. Esta documentación describe cuándo y cómo aplicar la validación y qué métodos de retroalimentación se deben utilizar.

Para obtener una guía detallada sobre cuándo utilizar los mecanismos de validación y mensajería, analice el siguiente árbol de decisiones del componente de la interfaz de usuario.

Mecanismos de validación

Tipo	Propósito	Cuándo se debe utilizar	Método de retroalimentación
Validación del lado del cliente	Validar campos individuales en tiempo real	Cuando un campo pierde el foco (al hacer clic o mediante tabulación)	Comportamiento de entrada incorporado: estado de alerta en los campos
Validación del lado del servidor	Validar los datos después de enviar un formulario, un paso o una página al servidor	Para validaciones complejas o de backend	Estado de alerta en campos, notificación del sistema, modal o notificación integrada

Validación del lado del cliente

Las validaciones del lado del cliente se realizan apenas el usuario termina de ingresar datos en un campo. La validación se activa cuando el campo pierde el foco, es decir, cuando el usuario se aleja del campo con el tabulador o hace clic fuera del campo. Esta validación es casi instantánea y ayuda a los usuarios a corregir errores a medida que ocurren.

Jutro recomienda usar notificaciones de estado de alerta en los campos para mostrar mensajes de validación del lado del cliente. Muchos componentes de entrada, como el componente de entrada de texto, cuentan con estos estados de alerta integrados que proporcionan información contextual al nivel del campo, directamente en el campo. Estos estados comunican visualmente el resultado de la entrada del usuario o la validación del sistema. Puede habilitar estos estados utilizando el estado de error en el campo de entrada, y este comportamiento es compatible en todos los tipos de entrada.

Para obtener un ejemplo de cómo usar el estado de error con entradas para mostrar estados de alerta, consulte Uso del texto de error para guiar a los usuarios en la documentación del componente entrada de texto.

Validación del lado del servidor

Estas validaciones se realizan cuando se envía un formulario, paso, página o proceso al servidor. El servidor devuelve los resultados de la validación con diferentes mecanismos, según la urgencia y la gravedad del mensaje.

Jutro recomienda utilizar validaciones del lado del cliente siempre que sea posible para solucionar los errores más rápido. Se pueden usar diferentes tipos de notificaciones, como notificaciones integradas, notificaciones del sistema y modales, junto con mensajes de estado de campo, para mostrar mensajes de validación del lado del servidor.

Para tareas que impliquen pasos o páginas, incluya validaciones en cada una de las páginas, en lugar de al final del proceso. Esto reduce la sobrecarga cognitiva por errores y fomenta una mejor búsqueda de maneras de solucionarlos.

Mecanismos de manejo de mensajes

Tipo de notificación	Urgencia	Propósito	Desencadenador	Ubicación	Tipo de validación
Retroalimentación sobre el campo	Alto	Mostrar el estado de validación en tiempo real de los campos	Cuando el campo pierde el foco (al hacer clic o mediante tabulación) o después del envío del formulario	Directamente en el campo	Lado del cliente
Notificación integrada	Medio	Proporciona retroalimentación contextual cerca de campos o secciones	Después de la validación del lado del servidor	Cerca de la entrada o sección relacionada	Lado del servidor
Notificación de sistema (toast)	Bajo	Breve actualización de estado para retroalimentación del sistema	Después de la validación del lado del servidor	Parte superior derecha de la ventana gráfica	Lado del servidor
Modal	Alto	Bloquea el flujo para mostrar errores o acciones críticos	Después de la validación del lado del servidor	Encima del contenido principal atenuado	Lado del servidor

Tipos de mensajes (por gravedad)

Cada tipo de mensaje puede tener los siguientes niveles de gravedad:

• Error
• Advertencia
• Correcto
• Informativo

Los modales se utilizan para mensajes críticos que necesitan toda la atención del usuario. Para mensajes que requieran menos atención, utilice cualquier otro medio de mensajería disponible.

Mensajes de error

Informan a los usuarios sobre errores, acciones fallidas o problemas críticos que podrían impedir que el usuario continúe con su tarea. Los mensajes de error deben proporcionar a los usuarios información suficiente para resolver el problema o alternativas para completar la tarea.

Estos son algunos ejemplos:

• Entradas de campo no válidas o incorrectas
• Faltan campos obligatorios
• Se excedieron los límites
• Fallos del sistema

Mensajes de advertencia

Informan a los usuarios sobre condiciones que podrían no bloquear el flujo actual del usuario, pero sí causar errores en su tarea en una etapa o paso posterior.

Estos son algunos ejemplos:

• Problemas con las entradas de formulario, como entradas duplicadas.
• Actualizaciones que afecten el flujo de tareas.
• Notificación de inactividad o vencimiento de sesión.
• Página o flujo bloqueado debido a permisos insuficientes.

Mensajes de acción correcta

Informan a los usuarios que una tarea se ha realizado correctamente. Estos mensajes pueden ser la respuesta a una acción del usuario o a procesos automáticos en segundo plano.

Estos son algunos ejemplos:

• Corrección del valor de campo.
• Creación, actualización o eliminación correctas.
• Selecciones de datos válidas.

Mensajes informativos

Brindan a los usuarios información útil que pueda ayudar a completar la tarea o indicar los próximos pasos.

Estos son algunos ejemplos:

• Campos que se deben completar antes del ascenso.
• Notificación de que un objeto es de solo lectura.
• Actualizaciones del sistema, como objeto disponible para edición.

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Para obtener orientación sobre cómo redactar notificaciones, consulte Redacción de mensajes efectivos.

Para conocer la guía de estilo de los componentes, haga clic en la pestaña Uso de cada componente en el sitio de Jutro Design System y, a continuación, vaya a la sección Contenido.

Accesibilidad

Los componentes de Jutro han sido validados para cumplir con las pautas de accesibilidad de WCAG 2.1 AA. Sin embargo, los cambios realizados por los autores del contenido pueden afectar el cumplimiento de los estándares de accesibilidad. Consulte la siguiente guía y las Prácticas de creación de WAI-ARIA para obtener más información:

• Proporcione todas las instrucciones e indicaciones necesarias para que el usuario realice una tarea.
• Asegúrese de que los mensajes de validación estén en un orden de lectura lógico y que se puedan completar y enviar mediante un teclado.
• Los rótulos deben estar asociadas mediante programación con sus elementos correspondientes.
• El color por sí solo no debe utilizarse para denotar el estado de un campo. Utilice texto e íconos complementarios para que sea accesible para las tecnologías de lectores de pantalla.
• Los íconos o gráficos se pueden usar como el único rótulo visual (sin texto visual) solo si su significado es visualmente evidente Y si hay un rótulo semántico asociado mediante programación para las tecnologías de asistencia.
• Los mensajes de error más largos se deben asociar con las entradas que usan aria-describedby. Esto garantiza que, cuando los usuarios naveguen a un campo de entrada, el lector de pantalla anuncie el error que se muestra. Para obtener más información acerca de aria-describedby, consulte Descripción de aria-describedby.
• Proporcione resúmenes de errores y los medios para encontrar errores individuales cuando sea posible.

Capacidad de ser responsive

Los mecanismos de manejo de mensajes de Jutro son responsive siempre que el componente, la composición y disposición de la página o el patrón que los utiliza sean responsive.

Tematización

De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.

Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.

Más información sobre la tematización con tokens de diseño