Saltar al contenido principal

Modal de anuncio crítico

Descripción general​

Un modal de anuncio crítico capta la atención del usuario con información urgente o esencial. Este tipo de modal interrumpe la actividad del usuario para garantizar que lea y comprenda el mensaje. Utilice el modal de anuncio crítico para transmitir alertas cruciales, advertir a los usuarios sobre problemas críticos o requerir una acción inmediata o una confirmación antes de que el usuario pueda continuar.

Cuándo se debe utilizar​

Utilice el modal de anuncio crítico para lo siguiente:

  • Actualizaciones críticas o información de emergencia que puedan afectar la seguridad del usuario o la funcionalidad de la aplicación.
  • Acciones obligatorias que deben realizar los usuarios para seguir utilizando la aplicación.
  • Información legal importante, como cambios en los términos de servicio o las políticas de privacidad, que requieren la confirmación del usuario.

Cuándo no se debe utilizar​

No utilice el modal de anuncio crítico para lo siguiente:

Información no crítica o comunicados frecuentes. El uso excesivo de modales de anuncios críticos puede provocar fatiga en las notificaciones, lo que reduce su eficacia cuando realmente se los necesita.

Anatomía​

Anatomía del modal del anuncio crítico

Un modal de anuncio crítico consta de los siguientes elementos:

  1. Encabezado e ícono de información (obligatorio): Contiene un encabezado H3 y un ícono de información de advertencia.
  2. Cuerpo (obligatorio): El área de contenido principal del modal donde se presenta la información crítica.
  3. Botones (obligatorios): Elementos interactivos para responder al anuncio. Esto puede incluir botones para confirmar el mensaje, confirmar una acción o ir a detalles adicionales, como la documentación.
  4. Ícono de cierre (obligatorio): Contiene un botón de cierre que permite al usuario salir de la vista.
  5. Contorno superior (obligatorio): Contorno de advertencia en la parte superior de la tarjeta.
  6. Superposición con el fondo (obligatorio): Cubre el contenido de la página principal y lo deja inactivo hasta que la tarea del modal se completa o se desestima.

Configuración de visualización de anuncios​

Fechas de inicio y finalización y frecuencia codificadas de forma fija​

  • Fecha de inicio: Indica cuándo el anuncio será visible para los usuarios dentro de la interfaz de la aplicación. Los anuncios no deben mostrarse a los usuarios antes de la fecha de inicio especificada.

  • Fecha de finalización: Indica cuándo el anuncio ya no debe mostrarse a los usuarios. Una vez que se alcance la fecha de finalización, el anuncio debe eliminarse de la interfaz de usuario para no mostrar información obsoleta.

  • Ajustes de frecuencia: La configuración de frecuencia determina la frecuencia con la que un anuncio debe repetirse dentro de la interfaz de la aplicación. Esto puede incluir opciones de intervalos diarios, semanales, mensuales o personalizados.

Pautas generales​

  • Tamaño: El tamaño de una ventana modal debe adaptarse a su contenido. No haga que la ventana modal sea demasiado grande, porque los modales se utilizan para centrar la atención de los usuarios.
  • Visibilidad: El modal debe mostrarse de forma destacada en el centro de la ventana gráfica del usuario y se debe atenuar el fondo para dirigir la atención al mensaje.
  • Número de caracteres: Si bien no hay un límite de caracteres específico para los modales, el mensaje debe ser claro, conciso y fácil de entender. Asegúrese de que el modal contenga solo información valiosa y relevante.
  • Botón de cierre: Proporcione varios medios para salir del modal, por ejemplo, las opciones del botón Cerrar y el botón Cancelar acción.
  • Navegación: Cuando se sale de un modal, ya sea desestimándolo o después de realizar una acción, la página vuelve al estado anterior o se redirige al usuario a una nueva página según el caso de uso.
  • Brevedad y claridad: El mensaje debe ser conciso y directo. Los usuarios deben comprender la importancia y las implicaciones del anuncio de inmediato.
  • Acción del usuario: Proporciona una llamada a la acción clara. Esto podría ser una confirmación de la información, una acción requerida o navegación a detalles adicionales.

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.

Pautas de redacción específicas de componentes​

Para obtener pautas sobre cómo redactar en modales, consulte la documentación sobre el componente modal.

Accesibilidad​

Asegurarse de que el modal de anuncio crítico sea accesible para los usuarios con discapacidades:

  • Navegación por teclado: Asegúrese de que todos los elementos interactivos dentro del modal de anuncio crítico, como botones y enlaces, sean accesibles a través del teclado. Los usuarios deben poder navegar por el modal con la tecla Tab y activar elementos con las teclas Enter o Space. Esto incluye proporcionar atajos de teclado para que los usuarios puedan desestimar el modal.

  • Texto legible: Asegúrese de que el texto dentro del modal tenga suficiente contraste con el fondo para cumplir con los requisitos de contraste de WCAG.

Capacidad de ser responsive​

Para los dispositivos móviles, el modal se muestra centrado.

Imagen en la que se muestra un modal de anuncio crítico en un dispositivo móvil

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

Investigación que lo avala​

Los diseñadores de UX elaboraron este patrón después de un proceso exhaustivo de investigación de mercado comparativa y análisis de casos de uso interno. Esto incluyó el examen de cinco bibliotecas de diseño (Cloudscape, Pega, Atlassian, Primer, Salesforce), así como tres herramientas adicionales (Miro, Figma y Jira). Exploraron las fortalezas y debilidades relativas de cada una, identificaron tendencias emergentes y señalaron distinciones clave. Con esta información, los diseñadores encontraron prácticas comunes y las sintetizaron en un patrón cohesionado.

Componentes​

Patrones​