Saltar al contenido principal
deprecated
Este componente es obsoleto y se eliminará en la próxima versión principal de Jutro.

Encabezado global

Encabezado global en Storybook

Descripción general​

El encabezado global es el ancla de la plataforma Guidewire. Su funcionalidad se aplica en todos los contextos del ecosistema de Guidewire Cloud. El encabezado global ocupa la parte superior del espacio de la pantalla y siempre está presente en la plataforma de lanzamiento y las aplicaciones de Guidewire Cloud. Proporciona orientación y permite a los usuarios navegar por la interfaz de usuario. Los clientes confían en el encabezado global para saber qué características globales y específicas de la aplicación están disponibles para ellos.

Anatomía​

Formato de encabezado global

Encabezado de la aplicación​

Dentro de las aplicaciones, el encabezado global consta de los siguientes elementos:

  1. El logotipo de Guidewire: Logotipo de Guidewire, según las últimas pautas de marca.
  2. Nombre de la aplicación: Nombre de la aplicación actual. Al hacer clic en el nombre de la aplicación, se redirige al usuario a la página de inicio de la aplicación.
  3. Buscar: Busca dentro de una aplicación según sea necesario. Se puede desactivar si no es necesario.
  4. Ayuda: Da acceso a la documentación de ayuda y asistencia.
  5. Conmutador de aplicaciones: Permite al usuario cambiar a otra aplicación.
  6. Notificaciones: Comunica mensajes o alertas desde diferentes aplicaciones.
  7. Avatar: Proporciona acceso al perfil del usuario y configuraciones genéricas según corresponda.

Prácticas recomendadas​

  • El encabezado global facilita la navegación dentro de las aplicaciones. Orienta a los clientes mientras navegan por la interfaz de usuario.
  • El encabezado global también ofrece retroalimentación sobre los estados de los usuarios. Por ejemplo, comunica el estado de inicio de sesión y qué cuenta están utilizando los clientes.
  • El avatar dentro del encabezado global proporciona a los usuarios un grado de personalización. De forma predeterminada, el avatar aparece con las iniciales del usuario. Los usuarios tienen la opción de subir una imagen personalizada.
  • El ícono de notificación dentro del encabezado global usa insignias para comunicar la cantidad de mensajes no leídos.
    • Las insignias solo admiten valores numéricos.
    • Las insignias tienen una variedad de colores.
    • El rojo se usa para las notificaciones que aparecen en el encabezado.
  • El conmutador de aplicaciones dentro del encabezado global permite a los usuarios pasar de una aplicación a otra. Notifique a los usuarios si perderán los cambios hechos al cambiar de aplicación a través del encabezado global.
  • El campo de búsqueda se puede activar o desactivar.
    • Evalúe si el usuario necesita acceso a la función de búsqueda.
    • Incluya el campo de búsqueda cuando los usuarios necesiten explorar una aplicación usando palabras clave.
    • Por opción predeterminada, el campo de búsqueda no aparece en el encabezado global de la plataforma de lanzamiento.
  • El encabezado global incluye íconos que no son necesariamente universales, por ejemplo, el conmutador de aplicaciones y las notificaciones.
    • Incluya descripciones emergentes, cuando sea necesario, para ayudar a que el usuario comprenda y explicar el significado o el propósito de los íconos.
    • Las descripciones emergentes solo aparecerán al pasar el cursor por encima. Coloque las descripciones emergentes de modo que no bloqueen el contenido relacionado. Un signo de intercalación debe indicar de dónde proviene la descripción emergente.

Capacidad de ser responsive/adaptabilidad​

  • El encabezado global se adapta a todos los dispositivos.
  • En dispositivos móviles, el encabezado global incluye el ícono de notificaciones, el logotipo de Guidewire y un menú de opciones. La búsqueda, la ayuda, el conmutador de aplicaciones y el avatar con sus opciones asociadas se encuentran en el menú de opciones.

Interacciones​

Ratón​

  • Al hacer clic en el avatar en el encabezado global, aparece un menú desplegable.
    • El menú desplegable debe contener enlaces al perfil del usuario, configuraciones genéricas según corresponda y la capacidad de cerrar sesión.
  • Cuando los usuarios hacen clic en el ícono de notificación, aparece un menú desplegable con una notificación con marca de tiempo. Los usuarios también tienen la opción de “marcar todo como leído” y “ver todas las notificaciones”.
  • El texto del marcador de posición desaparece después de que los usuarios hacen clic en el campo de búsqueda. (!)
  • Las descripciones emergentes solo aparecen al pasar el cursor por encima, con un signo de intercalación para indicar de dónde proviene.

Teclado​

Navegue por los elementos por medio de la tecla TAB.

Las opciones del menú están disponibles en el menú de opciones. El menú de opciones se convierte en el primer elemento que recibe el foco en el teclado dentro del encabezado.

Lector de pantalla​

El encabezado utiliza el rol WAI ARIA de 'banner' para comunicar el propósito a los usuarios de lectores de pantalla. También se incluyen los nombres, roles y estados de cada elemento dentro del banner.

  • Desde el menú desplegable del avatar, los usuarios pueden navegar a su perfil y configuración.
  • Al hacer clic en el selector de aplicaciones, los usuarios pueden navegar a otras aplicaciones.
    • Todas las aplicaciones, las aplicaciones a las que se accedió recientemente y las aplicaciones no son GW/GW Cloud están disponibles como secciones separadas en el panel del conmutador de aplicaciones.
  • Ejecutar una búsqueda presenta a los usuarios un panel de búsqueda.
    • También tienen la opción de navegar a una página exclusiva de resultados de búsqueda.
  • Al hacer clic en el nombre de la aplicación, los usuarios regresan a la página de inicio de la aplicación.

Aspectos que deben tenerse en cuenta sobre la redacción de UX​

Con respecto a las descripciones emergentes​

  • Muy pocos íconos son universales. Utilice descripciones emergentes para ayudar a los usuarios a comprender el significado o el propósito de los íconos.
  • Cuando redacte descripciones emergentes, sea breve y conciso. El contenido de la descripción emergente solo debe contener una o dos palabras.

Con respecto al nombre de la aplicación y las convenciones de marca​

  • Asegúrese de que los nombres de las aplicaciones dentro del encabezado global se presenten de una manera que sea coherente con las pautas de marca. Para obtener ayuda, consulte los recursos de Guidewire sobre la marca y marcas comerciales.

Accesibilidad​

De forma predeterminada, el encabezado muestra el logotipo de la empresa, una entrada de búsqueda, un menú desplegable de preguntas frecuentes, un ícono de notificaciones, un menú desplegable del conmutador de aplicaciones y un avatar de usuario. También incluye la navegación principal de la aplicación.

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.

Cuando utilice este componente en su aplicación, asegúrese de que cualquier estilo personalizado se realice respetando los requisitos de contraste.