-
Customer Experience -
Employee Experience -
Brand Experience -
Core XM -
Design XM
Diseño de diálogo reactivo
Acerca de los diseños de diálogo de respuesta
El diálogo interactivo es un tipo de diseño disponible para los proyectos de Información de sitio web/aplicación. Este tipo de diseño le permite crear diseños compatibles con la accesibilidad que respondan a diferentes tamaños de dispositivo.
El diseño de diálogo receptivo proporciona funciones de accesibilidad listas para usar, sin la necesidad de actualizaciones adicionales basadas en JavaScript que eran necesarias en el pasado.
Una vez que tenga acceso a esta función, el diálogo Interactivo estará disponible junto con otros diseños.
Una vez que crea su diálogo de respuesta, hay seis áreas que puede personalizar antes de configurar su intercept: Tamaño y amplificador; Estilo, Mensaje, Botones, Logos y amplificador; Imágenes, Animación y Traducciones.
&Tamaño; Estilo
En la sección Size & Style, puede personalizar el aspecto general del diseño de la siguiente manera:
&Tamaño estándar; opciones de estilo
Estas son las opciones que aparecen si no utiliza un objetivo incrustado y deja la opción Visualizar encuesta directamente en el diálogo desmarcada.
- Espaciado de contenido: Configure la densidad del texto en su diseño. Puede seleccionar Compacto, Medio o Espacioso.
- Color: Configure el color de fondo del diseño eligiendo entre la paleta de selector de colores.
- Forma de borde: Configure el radio del borde de su diseño. Esto determina qué tan redondeadas son las esquinas. Puede elegir entre Ninguno, Ligeramente redondeado, Moderadamente redondeado, Muy redondeado.
- Sombra: Configure la sombra que rodea su diseño. Puede seleccionar entre Ninguno, Ligero, Medio, Pesado.
Mostrar encuesta directamente en el cuadro de diálogo
Al seleccionar Visualizar encuesta directamente en el diálogo, la encuesta se incrustará en el diseño, en lugar de vincularse con un botón. Para probar la experiencia completa y precisa de la encuesta en el diseño, utilice el marcador. Consulte Probar intercepts para obtener más información.
Al seleccionar esta opción, se eliminan las pestañas Mensaje y Botones porque ya no tendrá un mensaje o botones en el cuadro de diálogo interactivo, además de lo que ya se ha establecido en su encuesta de destino. La selección de esta opción también significa que tiene diferentes opciones de tamaño y estilo:
- Cambiar el tamaño del diálogo automáticamente para que se ajuste a su encuesta: Modifique automáticamente el tamaño del cuadro de diálogo interactivo para que se ajuste a la encuesta que está visualizando en el diálogo. El tamaño de la ventana se ajustará automáticamente en función de la longitud de la primera página de la encuesta.
Consejo Q: Si desea que el cuadro de diálogo interactivo con capacidad de respuesta se ajuste automáticamente a un tamaño mayor, añada preguntas adicionales a su primera página de la encuesta o añada espacios adicionales a la encuesta. Para reducir el diálogo interactivo, mueva las preguntas a otras páginas siguientes, añada saltos de página o reduzca el espaciado dentro de la encuesta.
- Color: Configure el color de fondo del diseño eligiendo entre la paleta de selector de colores.
- Forma de borde: Configure el radio del borde de su diseño. Esto determina qué tan redondeadas son las esquinas. Puede elegir entre Ninguno, Ligeramente redondeado, Moderadamente redondeado, Muy redondeado.
- Sombra: Configure la sombra que rodea su diseño. Puede seleccionar entre Ninguno, Ligero, Medio, Pesado.
- Accesibilidad
- Título de Iframe: Este texto será leído por un lector de pantalla cuando el visitante navegue hasta la ventana incrustada.
UTILICE UNA PLANTILLA
Si desea importar un tema de encuesta a la configuración de estilo del diseño, haga clic en Usar una plantilla.
El administrador de organización crea los temas para que los usuarios los utilicen en su organización. Seleccione una marca del menú desplegable y haga clic en Importar. Si desea añadir un tema a esta lista, póngase en contacto con su administrador de organización para obtener más información.
La importación de una plantilla de temas ajustará la siguiente configuración para el diseño:
- Color primario
- Color secundario
- Color de fondo
- Tamaño del texto de la pregunta
- Tamaño de texto de respuesta
- Espacio entre preguntas
- Contraste de primer plano
- Logotipo
Mensaje
En la sección Mensaje, puede configurar el encabezado y la descripción que aparecen en su diseño. El titular debería ser generalmente una frase breve que capte la atención del visitante, mientras que la descripción da más detalles sobre por qué se les ha aparecido el creativo.
La fuente se adoptará del sitio web que muestra el diseño. Tanto para la cabecera como para la descripción, puede personalizar el texto real, el tamaño de fuente y la ponderación de fuente.
Botones
En la sección Botones, puede configurar opciones específicas del número, la apariencia y el destino de cada botón.
- Comience eligiendo el número de botones que desee en su diseño.
- Especifique la forma del botón para cada botón eligiendo entre Ninguno, Ligeramente redondeado, Moderadamente redondeado o Completamente redondeado.
- Especifique el Tamaño de texto.
- Para cada botón:
- Especifique su texto. Esto es lo que dice el botón.
- Seleccione el botón Acción para Abrir destino o Descartar intercept. Abrir destino indica que este botón abrirá el destino que especifique en los criterios de intercept. Descartar Intercept simplemente cerrará el intercept.
- Seleccione su Color de etiqueta, Color de fondo y Color de borde mediante la paleta de selector de colores.
- Designar una etiqueta ARIA. Por defecto, los lectores de pantalla leerán el texto que especifique para la etiqueta de botón. Sin embargo, en algunos casos, es posible que desee que el lector de pantalla lea un contexto adicional, como “Haga clic en este botón para abrir una nueva ventana de encuesta”. En este caso, puede especificar la etiqueta ARIA para los controles de botón.
Logos & Imágenes
En la sección Logos & Imágenes, puede especificar 1 o más imágenes/logotipos para incluir en su diseño.
Puede optar por cargar una imagen separada para móvil o escritorio, de modo que se muestren diferentes imágenes en función de si el diseño se ve en un navegador móvil o de escritorio. También puede cargar la misma imagen pero con diferentes resoluciones para optimizar la visualización en cualquier tipo de navegador de dispositivo.
Para que la accesibilidad de la imagen sea compatible, también tiene la capacidad de especificar el texto alternativo para ir con las imágenes. (Alt Text es una característica que permite a los lectores de pantalla describir una imagen a los usuarios con discapacidad visual.)
Animación
En la sección Animación puede elegir el tipo de animación (Desvanecer o Deslizar) que desee para su diseño tal y como aparece en la pantalla.
- Visualizar diálogo después de: El número de segundos después de que el usuario cumpla las condiciones de intercept (por ejemplo, hace clic en la aplicación) en los que aparece este diálogo.
- Fije el temporizador para cerrar el diálogo: Determine cuánto tiempo después de que aparezca el diálogo debe cerrarse. Desmarque esta opción para forzar al usuario a cerrar el diálogo para eliminarlo de la pantalla.
- Tipo de transición: Elija si el diseño se desvanece o se desliza en la pantalla cuando aparece. Si selecciona la animación Slide In, también puede seleccionar la posición final del diseño en la pantalla (parte superior izquierda, superior derecha, abajo a la izquierda, abajo a la derecha).
Consejo Q: Utilizar el tipo de transición Deslizar en hace que este diseño se comporte como un diseño de Slider.
- Fondo desvanecido: El color de la pantalla del dispositivo detrás del creativo (Ninguno, Luz, Medio u Oscuro).
- Visualización de encuesta: Dónde se mostrará la encuesta (ventana nueva, ventana incrustada, ventana actual, ventana emergente debajo o pestaña nueva).
Si es necesario, también puede obtener una vista previa de la configuración de animación en esta pantalla haciendo clic en Vista previa de animación.
Traducciones
Puede añadir traducciones para todo el texto en su diálogo interactivo interactivo. Consulte la página Traducción de botones de opinión y diálogos interactivos para obtener instrucciones paso a paso.
Vista previa del diseño del diálogo interactivo interactivo
A medida que configura el diseño del diálogo receptivo, puede obtener una vista previa del diseño en diferentes tamaños de pantalla (por ejemplo, de escritorio, móvil y tableta).
Guardar y publicar el diseño del cuadro de diálogo interactivo
A medida que agregue cambios al diseño de diálogo receptivo, asegúrese de guardar periódicamente su trabajo haciendo clic en el botón Guardar en la esquina inferior derecha, justo encima del área de vista previa.
Configuración de intercepts
Los diseños
de diálogo interactivos se pueden utilizar con intercepts estándar. Simplemente asegúrese de que, al definir el Diseño del intercept, seleccione el diseño de diálogo interactivo interactivo en la sección Diálogo interactivo interactivo.
