Diseño de diálogo reactivo

Acerca de los diseños de diálogo de respuesta

El diálogo receptivo es un tipo creativo disponible para proyectos de información de sitios web/aplicaciones. 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 de respuesta estará disponible junto con otros diseños.

Una vez que cree 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 y estilo

En la sección Tamaño y estilo, puede personalizar el aspecto general del diseño de la siguiente manera:

Tamaño estándar y opciones de estilo

Estas son las opciones que aparecen si no utiliza un objetivo incrustado y deja Mostrar encuesta directamente en el cuadro de diálogo desmarcado.

• 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 Mostrar encuesta directamente en el diálogo, la encuesta se incrustará en el diseño, en lugar de enlazarse 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 borran las pestañas Mensaje y Botones porque ya no tendrá un mensaje o botones en el cuadro de diálogo interactivo interactivo, aparte de lo que ya está configurado en su encuesta objetivo. Si selecciona esta opción, también significa que tiene diferentes Tamaño y amplificador; Opciones de 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.
    Bastoncillo de algodón:Proporcionar títulos Iframe durante la creación del diálogo garantiza que éste sea accesible para los usuarios.

UTILICE UNA PLANTILLA

Si desea importar un tema de encuesta en 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
• Espaciado de preguntas
• Contraste en primer plano
• Logotipo

CSS personalizado

Puede personalizar el CSS del cuadro de diálogo responsivo como desee haciendo clic en el Personalizar CSS botón. Puede agregar clases y propiedades personalizadas además de las predeterminadas. Es posible que las modificaciones realizadas aquí no se reflejen en la vista previa; recuerda prueba su intercepción antes del despliegue completando la configuración guiada.

-Haga clic aquí para ver el CSS predeterminado para cuadros de diálogo responsivos-

Si elimina los selectores o clases CSS dentro de la plantilla predefinida, no podrá actualizar ni recargar la plantilla. A continuación se muestra esta plantilla en caso de que necesite restablecer el CSS de su intercepción:

Bastoncillo de algodón: Asegúrese de reemplazar el INTERCEPT_ID en el fragmento a continuación con su Identificación de la intercepción.

/* Utilice las clases siguientes para anular los estilos de diálogo adaptables.
Atención: El siguiente código se proporciona tal cual
y requiere conocimientos de programación para implementarlo.
El soporte técnico de Qualtrics no ofrece asistencia o consultoría sobre codificación personalizada.
En su lugar, puede preguntar a los usuarios especializados de nuestra comunidad.
Para obtener ayuda con el código personalizado, visite https://community.qualtrics.com/custom-code-12 */
/* Estilo del cuadro de sombra que aparece detrás del diálogo. NOTA: Los cambios en este cuadro de sombras no se reflejarán en la vista previa */
.QSIWebResponsiveShadowBox {
/* familia de fuentes: Arial, Helvetica, sans-serif; */
/* índice z: 1; */
/* margen superior: 10px !importante; */
/* espacio en blanco: normal !importante; */
}
/* Dale estilo al desvanecimiento del contenedor */
.QSIWebResponsive-creativo-contenedor-desvanecimiento {
/* */
}
/* Dar estilo al contenedor principal del cuadro de diálogo adaptable a la web */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_contenido {
/* altura de línea: 1em !importante; */
/* margen: 0 0.5em 0 0 !importante; */
/* ancho: auto !importante; */
/* tamaño de fuente: hereda !important; */
/* peso de fuente: normal !importante; */
/* estilo de fuente: normal !importante; */
/* mostrar: en línea !importante; */
/* color: #000000 !importante; */
}
/* Dar estilo a la sección contenedora del logotipo del creativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_contenedor_logotipo {
/* visualización: bloque en línea !importante; */
/* margen derecho: 5px !importante; */
}
/* Dale estilo a la sección contenedora de texto del archivo creativo. Esto incluye la sección de encabezado y la sección de descripción */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_contenedor de texto {
/* visualización: bloque en línea !importante; */
}
/* Dar estilo a la sección de título del material creativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
/* fuente: hereda !important; */
}
/* Dale estilo a la sección de descripción del creativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_descripción {
/* fuente: hereda !important; */
/* fondo: transparente !importante; */
/* borde: ninguno !importante; */
/* relleno: 0 !importante; */
/* alineación vertical: medio !importante; */
/* margen: 0 0.4em 0 0 !importante; */
/* cursor: puntero !importante; */
}
/* Dale estilo al contenedor que alberga el/los botón(es) */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_botón-contenedor {
/* visualización: bloque en línea !importante; */
}
/* Dar estilo al primer botón del cuadro de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_botón-1 {
/* fuente: hereda !important; */
/* relleno: .4em .4em !importante; */
/* ancho mínimo: 3em !importante; */
/* altura de línea: 1em !importante; */
/* radio del borde: 4px !importante; */
/* ancho del borde: 1px !importante; */
/* estilo de borde: sólido !importante; */
/* cursor: puntero !importante; */
/* fondo: #FFF !importante; */
/* color: #000 !importante; */
/* color del borde: #000 !importante; */
}
/* Dar estilo al segundo botón en el diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_botón-2 {
/* fuente: hereda !important; */
/* relleno: .4em .4em !importante; */
/* ancho mínimo: 3em !importante; */
/* altura de línea: 1em !importante; */
/* radio del borde: 4px !importante; */
/* ancho del borde: 1px !importante; */
/* estilo de borde: sólido !importante; */
/* cursor: puntero !importante; */
/* fondo: #FFF !importante; */
/* color: #000 !importante; */
/* color del borde: #000 !importante; */
}
/* Dale estilo al botón que cierra el diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* visualización: bloque en línea !importante; */
/* margen derecho: 5px !importante; */
}
}

Mensaje

En la sección Mensaje, puede configurar el título 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 para el número, apariencia y destino de cada botón.

1. Comience eligiendo el número de botones que desee en su diseño.
2. Especifique la forma del botón para cada botón eligiendo entre Ninguno, Ligeramente redondeado, Moderadamente redondeado o Completamente redondeado.
3. Especifique el Tamaño de texto.
4. 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.
     Atención: Para que tu diseño sea accesible, la etiqueta ARIA debe coincidir o incluir el texto del botón.

Logotipos e imágenes

En la sección Logos e 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 en) que desea 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).

Según sea necesario, también puede previsualizar la configuración de su 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 añade cambios al diseño de diálogo interactivo interactivo, asegúrese de guardar su trabajo periódicamente 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 reactivo 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.