Saltar al contenido principal

Rótulo de información

Rótulo de información en Storybook

Uso​

Descripción general​

El rótulo de información es un componente no interactivo que muestra el estado de un elemento. Este componente a menudo aparece en el contexto de una vista de tarjetas, tabla o lista.

Cuándo se debe utilizar​

Para mostrar el estado de un elemento en la interfaz de usuario. Utilice el rótulo de información para la información de estado no numérica.

Cuándo no se debe utilizar​

  • Para mostrar información sobre contenido nuevo o actualizado en forma de valor numérico. Use la insignia en su lugar.
  • Para categorizar elementos y filtrar datos. En su lugar, use etiquetas.

Formato​

Anatomía​

Imagen que ilustra la anatomía de un componente rótulo de información, de tipo acción correcta

Un rótulo de información consta de los siguientes elementos:

  1. Contenedor con relleno de color específico que depende del caso de uso.
  2. Rótulo de texto que comunica información de estado.
  3. Ícono opcional para complementar visualmente el rótulo de texto y dar más contexto sobre el tipo de estado.

Tipos​

Imagen que ilustra los 5 tipos de estado diferentes del componente rótulo de información Tipos de estado del rótulo de información.

Los rótulos de información tienen una variedad de estados y colores que denotan significados específicos.

Acción correcta​

Utilice el tipo de rótulo success para representar un estado constructivo. Por ejemplo: “correcto”, “activo”, “disponible”, “completado”, “implementado”, “aprobado”, “resuelto” o “agregado”.

Imagen que ilustra el tipo acción correcta de un componente rótulo de estado

Error​

Use el tipo de rótulo error para representar un estado crítico. Por ejemplo: “error”, “no implementado”, “detenido”, “fallido” o “rechazado”.

Imagen que ilustra el tipo error de un componente rótulo de estado

Advertencia​

Use el tipo de rótulo warning para indicar posibles problemas con una operación. Por ejemplo: “advertencia”, “bloqueado” o “tiempo de espera agotado”.

Imagen que ilustra el tipo advertencia de un componente rótulo de estado

Información​

Use el tipo de rótulo info para representar un estado en curso o actual. Por ejemplo: “en curso”, “abierto” o “modificado”.

Imagen que ilustra el tipo información de un componente rótulo de estado

Neutro​

Use el tipo de rótulo neutral para comunicar el estado general o un estado inactivo. El tipo de rótulo neutro representa un estado predeterminado o pasivo. Por eso, es adecuado para situaciones en las que no se necesita ninguna acción específica. Por ejemplo: “inactivo”, “vacío”, “por hacer”, “no disponible” o “no iniciado”.

Imagen que ilustra el tipo neutro de un componente rótulo de estado

Íconos y ubicación​

Los rótulos de información también pueden contener íconos para indicar con mayor claridad el estado de un elemento. El ícono se puede colocar a la izquierda o a la derecha del rótulo de texto.

Imagen que ilustra la ubicación de íconos dentro de un componente rótulo de información

Prácticas recomendadas​

  • Use un rótulo claro con texto corto que se pueda leer rápidamente.
  • Utilice íconos para distinguir los rótulos de información del mismo color o para proporcionar información visual adicional.
  • No sobrecargue la interfaz de usuario con rótulos de información. Esto va en contra de su propósito. Un rótulo de información está pensado para resaltar el estado de un elemento a fin de reconocerlo con facilidad.

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.

Inclusión de un rótulo​

El componente InfoLabel siempre debe incluir un rótulo de texto.

El rótulo debe ser breve y claro. Utilice un rótulo de estado de una palabra, como “Error”, o uno de dos palabras, como “Error: permiso”.

Utilice 1 o 2 palabras para el rótulo de estado.
No use 3 palabras o más. Los rótulos de estado largos pueden confundir a los usuarios.

Uso de mayúsculas al igual que en las oraciones​

Los rótulos de estado aparecen con mayúsculas como se usan en las oraciones.

Consulte la guía de estilo de texto de la interfaz de usuario para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas.

Use mayúsculas como se usan en las oraciones.
No use mayúsculas en todas las palabras.

Comportamientos​

Interacciones​

InfoLabel es un componente no interactivo. No se puede hacer clic en él ni desestimarlo.

Accesibilidad​

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

  • La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
  • El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
  • El elemento se puede operar con teclado, así como con mouse.
  • Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Al utilizar este componente en su aplicación:

  • Siempre incluya un rótulo de texto para ayudar a los usuarios a comprender el estado. No confíe solo en el color para comunicar información.
  • No use rótulos de información para texto largo.