Saltar al contenido principal

Banner de anuncios en página

Descripción general​

El banner de anuncios en página comunica los próximos cambios, actualizaciones o migraciones a los usuarios. Este elemento visual prominente se coloca de manera estratégica en la parte superior de una página web. Informa a los usuarios sobre modificaciones inminentes en la plataforma que podrían afectar su interacción. Utilice el banner de anuncios en página para garantizar una transición sin problemas y minimizar las posibles interrupciones en la experiencia del usuario.

Cuándo se debe utilizar​

Utilice el banner de anuncios en página para lo siguiente:

  • Actualizaciones o cambios significativos planificados para la plataforma, como rediseños de la interfaz de usuario, mejoras de funciones o migraciones de infraestructura.
  • Ventanas de mantenimiento programadas o tiempos de inactividad que podrían afectar el ingreso a la plataforma.
  • Avisos de migración a nuevos sistemas, tecnologías o plataformas, junto con cualquier acción que los usuarios deban realizar.

Cuándo no se debe utilizar​

No utilice el banner de anuncios en página para lo siguiente:

  • Actualizaciones de poca importancia o rutinarias que quizás no afecten significativamente la interacción de los usuarios con la plataforma.
  • Alertas críticas que requieran una acción inmediata por parte de los usuarios. Utilice métodos de comunicación más intrusivos, como el modal de anuncio crítico.
  • Información no esencial o mensajes promocionales que no están relacionados con los próximos cambios, actualizaciones o migraciones.

Anatomía​

Anatomía del banner de anuncios en página

Un banner de anuncios en página consta de los siguientes elementos:

  1. Encabezado e ícono de información (obligatorio): Contiene un encabezado H3 y un ícono de información de alerta.
  2. Cuerpo (obligatorio): Área de contenido principal del banner donde se transmite el anuncio a los usuarios.
  3. Botones (opcionales): Elementos interactivos para responder al anuncio. Esto puede incluir botones para confirmar una acción o ir a detalles adicionales.
  4. Desestimación (obligatorio): Contiene un botón de cierre que permite al usuario salir de la vista.

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​

  • Ancho: El banner ocupa el 100 % del ancho y se fija debajo del panel de navegación. El texto adicional que supere el ancho del contenedor se ajusta a la siguiente línea para evitar la pérdida de información.
  • Altura: La altura de un contenedor de banners puede variar en función de la cantidad de contenido que se incluya en él.
  • Cantidad de caracteres: Apunte a alrededor de 160 caracteres.
  • Ubicación: Posicione el banner en la parte superior de la página para mayor visibilidad.

Ejemplo de un banner de anuncios en página

Comportamientos​

  • El banner mueve el contenido de la página hacia abajo.
  • A diferencia de las superposiciones modales, el banner de anuncios en página no suele ser de naturaleza modal. No bloquea la interacción con otros elementos de la página y, por lo general, está diseñado para coexistir con el contenido de la página, proporcionando información importante o anuncios sin interrumpir el flujo de trabajo del usuario.
  • El banner de anuncios en página no vuelve a aparecer de forma predeterminada, pero, en raras circunstancias, puede volver a aparecer después de que hayan pasado x cantidad de días.

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.

Mensaje claro, conciso y fácil de entender​

Comunique con claridad qué cambios se avecinan, cuándo se producirán y cómo se verán afectados los usuarios.

Accesibilidad​

Asegúrese de que el banner de anuncios en página sea accesible para los usuarios con discapacidades mediante estos criterios:

  • Navegación por teclado: Asegúrese de que todos los elementos interactivos dentro del banner de anuncios en página, 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 banner.
  • 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​

Experiencias móviles​

En dispositivos móviles, el banner de página en la parte superior de la pantalla se extiende a todo el ancho de una composición y disposición.

Imagen que representa el banner de anuncios en página 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​