Saltar al contenido principal

Ventana emergente educativa

Descripción general​

La ventana emergente educativa proporciona orientación contextual a los usuarios mediante la visualización de ventanas emergentes informativas. Instruye a los usuarios sobre diversas características, funcionalidades o procesos dentro de la aplicación. Utilícela para ayudar al usuario a comprender y para mejorar su participación.

Cuándo se debe utilizar​

Use la ventana emergente educativa para lo siguiente:

  • Incorporar nuevos usuarios a la aplicación y familiarizarlos con las características y funcionalidades clave.
  • Presentar nuevas características o actualizaciones a los usuarios existentes, y ayudarles a descubrir y comprender nuevas funcionalidades.
  • Involucrar a los usuarios y fomentar la exploración de diferentes áreas de la aplicación.
  • Guiar a los usuarios en tareas o procesos complejos paso a paso, proporcionando consejos e instrucciones contextuales.

Cuándo no se debe utilizar​

No use la ventana emergente educativa para lo siguiente:

  • Interfaces sencillas o intuitivas en las que no es necesaria ninguna orientación adicional.
  • Acciones críticas que requieran atención inmediata o que pueden tener consecuencias adversas si no se comprenden. Considere la posibilidad de utilizar un modal de anuncio crítico.

Anatomía​

Imagen que representa la anatomía de una ventana emergente educativa.

Una ventana emergente educativa consta de los siguientes elementos:

  1. Encabezado (opcional): Contiene un encabezado H4.
  2. Cuerpo (obligatorio): Contenido instructivo principal de la ventana emergente.
  3. Enlace (opcional): Proporciona información adicional o dirige al usuario a un recurso relacionado, lo que le permite explorar más detalles más allá del contenido inmediato de la ventana emergente.
  4. Indicador de pasos (opcional): Guía a los usuarios a través de una secuencia de pasos o instrucciones, uno a la vez.
  5. Botón de cierre (obligatorio): Contiene un botón de cierre que permite al usuario salir de la vista.
  6. Indicador (obligatorio): Indicador visual que señala la ubicación en la página a la que se refiere el contenido instructivo.

Ubicación​

Hay cuatro opciones de ubicación para la ventana emergente educativa:

  • Arriba: La ventana emergente aparece encima del elemento asociado.
  • Parte inferior (predeterminado): La ventana emergente aparece debajo del elemento asociado.
  • Izquierda: El elemento emergente aparece a la izquierda del elemento asociado.
  • Derecha: La ventana emergente aparece a la derecha del elemento asociado.

Cuando se activan, lo ideal es que las ventanas emergentes educativas no empujen el contenido hacia abajo en la página. En su lugar, deben superponerse al contenido existente o posicionarse en relación con el elemento de la página para el que brindan orientación.

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​

  • Frecuencia de uso e impacto: Evite usar ventanas emergentes en exceso, ya que pueden volverse intrusivas e interrumpir la experiencia del usuario si se muestran con demasiada frecuencia.
  • Tamaño: Una ventana emergente tiene un ancho predeterminado de 280 px, pero se puede adaptar a diferentes tamaños.
  • Cantidad de caracteres: Apunte a alrededor de 160 caracteres.
  • Superposición con el fondo: La superposición con el fondo es opcional.
  • Uniformidad: Mantenga la coherencia en el diseño y la ubicación de las ventanas emergentes en diferentes páginas y contextos dentro de la aplicación para proporcionar una experiencia de usuario coherente.

Comportamientos​

Sistema de activación para ventanas emergentes educativas​

Estos son los diferentes desencadenantes y situaciones para mostrar ventanas emergentes educativas:

  • Primera visita: Se activa automáticamente cuando el usuario visita una página o sección por primera vez para proporcionarle orientación inicial.
  • Al hacer clic en un botón (la ventana emergente se activa después de la navegación): Hacer clic en un botón, a menudo rotulado con acciones como “Siguiente”, “Continuar” o “Más información”, puede activar una ventana emergente educativa cuando se hace clic en él. La ventana emergente educativa puede aparecer inmediatamente después de pasar a la siguiente página o sección, para proporcionar a los usuarios instrucciones, consejos o información importante relevante para el nuevo contexto en el que han ingresado.
  • Al hacer clic en el botón (la ventana emergente se activa antes de la navegación): Cuando se hace clic en el botón principal, se puede mostrar inmediatamente una ventana emergente educativa para proporcionar información o instrucciones. Después de que el usuario lee e interactúa con la ventana emergente (por ejemplo, la cierra), la navegación a la página siguiente puede continuar.
  • Tras la acción del cursor: Colocar el cursor sobre elementos específicos, como íconos, puede activar la ventana emergente para proporcionar información contextual.
  • Elemento en foco: Cuando el usuario va a un elemento específico mediante la navegación por teclado, la ventana emergente puede aparecer para proporcionar información relevante.
  • Finalización de una acción: Después de terminar una acción, como completar un formulario o finalizar una tarea, puede aparecer una ventana emergente para guiar al usuario a los siguientes pasos.
  • Pasos secuenciales: Parte de un tutorial de varios pasos, en el que completar un paso activa automáticamente la siguiente ventana emergente en la secuencia.

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.

Claridad en las instrucciones​

Asegúrese de que las instrucciones dentro de la ventana emergente sean claras, concisas y fáciles de entender por el público objetivo. Utilice un lenguaje sencillo y evite la terminología compleja o jerga que pueda confundir a los usuarios.

Divulgación progresiva​

Implemente un método de divulgación progresiva, revelando gradualmente información o pasos para evitar abrumar a los aprendices con demasiado contenido a la vez. Comience con la información más importante o básica; luego, ofrezca detalles adicionales a medida que los usuarios avanzan.

Accesibilidad​

Asegurarse de que la ventana emergente educativa sea accesible para los usuarios con discapacidades:

  • Navegación por teclado. Asegúrese de que todos los elementos interactivos dentro de la ventana emergente educativa, como botones, enlaces o indicadores de pasos, sean accesibles a través del teclado. Los usuarios deben poder navegar por la ventana emergente educativa 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 la ventana emergente educativa.
  • Texto legible: Asegúrese de que el texto dentro de la ventana emergente educativa tenga suficiente contraste con el fondo para cumplir con los requisitos de contraste de WCAG.

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​