Saltar al contenido principal

Ayuda contextual

Descripción general​

La ayuda contextual proporciona a los usuarios información adicional en una ventana modal sobre un tema general relevante para su tarea actual.

Cuándo se debe utilizar​

Utilice el patrón de ayuda contextual para lo siguiente:

  • Información adicional u orientación sobre cómo completar una tarea.
  • Características o procesos complejos que necesitan aclaración o explicación.

Cuándo no se debe utilizar​

No utilice el patrón de ayuda contextual para lo siguiente:

  • Información o instrucciones críticas que los usuarios deben ver de inmediato.
  • Contenido que se puede comunicar claramente a través de la interfaz principal sin explicaciones adicionales.
  • Anuncios de la aplicación. En cambio, utilice el modal de anuncio crítico, el banner de página o la ventana emergente educativa.
  • Instrucciones paso a paso para completar tareas. Para ello, utilice el patrón de anuncio de aplicación.
  • Sugerencias para la solución de problemas y mensajes de error. Para ello, utilice el componente notificaciones del sistema o el patrón de anuncio de aplicación.
  • Experiencias de incorporación de usuarios. Para ello, utilice el patrón de anuncio de aplicación.

Anatomía​

Anatomía del patrón de ayuda contextual

El patrón de ayuda contextual consta de los siguientes elementos:

  1. Encabezado: Incluye el título y el ícono de cierre. La posición del encabezado es fija.
  2. Cuerpo: Sirve como el área de contenido principal. Pueden ser archivos de solo lectura, enlaces o archivos multimedia. Es posible desplazarse por el cuerpo.
  3. Pie de página (opcional): Contiene las principales acciones necesarias para completar o cancelar la tarea de diálogo. La posición del pie de página es fija.
  4. Ícono de desestimación: Cierra el modal sin enviar ningún dato.
  5. Superposición en pantalla: Oscurece el contenido de la página y se encuentra entre el contenido de la página y el modal en sí.

Pautas generales​

  • Asegúrese de que el contenido de ayuda sea conciso, relevante y fácil de entender. Evite la jerga o el lenguaje técnico siempre que sea posible.
  • Use un modal de ayuda contextual que tenga el tamaño adecuado para su dispositivo y caso de uso.
  • Diseñe el desencadenador para que sea fácilmente identificable e intuitivo. Proporcione señales visuales claras para indicar su propósito.
  • Garantice la ubicación y el aspecto coherentes de los elementos de ayuda contextual en toda la interfaz. Esto ayuda a establecer la familiaridad y la facilidad de uso.
  • Compruebe la eficacia de la ayuda contextual a través de los comentarios de los usuarios y análisis. Mejor el contenido y las interacciones en función del uso en el mundo real.
  • Pruebe los modales de ayuda contextual en varios dispositivos y tamaños de pantalla para asegurarse de que sigan siendo accesibles y utilizables.
  • No use el patrón de ayuda contextual para compensar un diseño deficiente o la falta de claridad en la interfaz. En lugar de eso, concéntrese en mejorar la usabilidad general y la capacidad de la interfaz de ser intuitiva.
  • Evite abrumar a los usuarios con contenido de ayuda excesivo que interrumpa innecesariamente su flujo de trabajo.

Interacciones​

Área táctil y de activación para ventanas gráficas de menos de 768 px (móviles y tablets)​

Gráfico que ilustra el área táctil del ícono de ayuda y cómo se activa

  • El área táctil del ícono de ayuda es de 24 x 24 px.
  • El modal de ayuda contextual se activa al tocar en el dispositivo móvil y la tablet, o al hacer clic en la computadora de escritorio.

Comportamiento de desplazamiento​

El contenedor de ayuda contextual, incluidos el encabezado y el pie de página, es fijo, mientras que el cuerpo se puede desplazar.

Animación​

En general, el modal de ayuda contextual debe abrirse como una superposición centrada con una animación instantánea y un fondo oscuro con una opacidad del 25 %.

Pautas de interacción​

  • Implemente animaciones fluidas que no sean intrusivas al mostrar y ocultar el modal de ayuda contextual para mantener una experiencia de usuario fluida.
  • Permita a los usuarios acceder al contenido de ayuda rápidamente sin interrumpir su tarea actual, para minimizar cualquier retraso o interrupción en su flujo de trabajo.
  • Diseñe las opciones de cierre/desestimación para que sean fácilmente accesibles e intuitivas; esto permitirá que los usuarios puedan salir fácilmente del modal de ayuda cuando lo deseen.

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.

Modales simples en comparación con modales enriquecidos​

Existen dos tipos de modales de ayuda contextual:

  • Modales simples que solo contienen texto e hipervínculos.
  • Modos enriquecidos que contienen texto, hipervínculos y archivos multimedia.

Considere la posibilidad de incluir elementos visuales, como íconos o imágenes, para mejorar el contenido contextual de ayuda cuando sea adecuado.

Accesibilidad​

Asegúrese de que el patrón de ayuda contextual sea accesible para los usuarios con discapacidades mediante estos criterios:

  • Garantice la accesibilidad del teclado para activar y desestimar el contenido de ayuda.
  • Proporcione texto alternativo a imágenes y contenido multimedia para ayudar a los usuarios que dependen de lectores de pantalla.
  • Mantenga suficiente contraste de color y tamaño de texto para facilitar la lectura, especialmente para usuarios con discapacidades visuales.

Capacidad de ser responsive​

Puntos de interrupción​

El patrón de ayuda contextual (modal) tiene un ancho máximo para cada uno de los siguientes tres puntos de interrupción:

  • Computadora de escritorio: 1440 px, el modal tiene un ancho máximo de 720 px y una altura máxima de 512 px.
  • Tablet: 768 px, el modal tiene un ancho mínimo de 576 px y un ancho máximo de 720 px. La altura máxima es de 512 px.
  • Dispositivos móviles: Para una pantalla ancha de 360 px, el modal tiene un ancho máximo de 344 px.

Para garantizar un espaciado entre texto y borde o un margen verticales mínimos dentro del modal de ayuda contextual, asegúrese de que el contenedor de cuerpo vertical esté configurado en “abrazar contenido” hasta que se alcance la altura máxima especificada para cada punto de interrupción. Una vez que se exceda la altura máxima, habilite el desplazamiento vertical para manejar el contenido de desbordamiento.

Tamaños​

El modal de ayuda contextual tiene tres tamaños:

  • Grande (computadora de escritorio y tablet)
  • Intermedio (computadora de escritorio y tablet)
  • Pequeño (dispositivos móviles)

Imagen que ilustra los tres tamaños del modal de ayuda contextual: grande, intermedio y pequeño

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

Componentes​

Patrones​

Recursos​

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)