Introduciendo Temas Personalizados en el Diseñador Web Survey123

Publicación de blog creada por ichivite-esristaff el 01/11/2018
Nota Original

Al utilizar el diseñador web Survey123, puedes controlar de cerca muchos aspectos visuales de tus formularios web. Esto incluye todo desde definir cómo se ve el título de tu encuesta, el estilo del fondo, la alineación, color y tamaño del texto utilizado en las preguntas, la ubicación del logo, etc.

Por supuesto, todo esto es importante porque la gente espera encuestas visualmente atractivas. La elaboración de encuestas con gran atractivo visual es particularmente fundamental para las encuestas públicas. Al tener un buen control sobre la apariencia, podrás reflejar más de cerca la sensación y la identidad de marca de su propia organización o proyecto.

Antes de comenzar, quiero enfatizar que en una encuentra bien diseñada, la apariencia es solo la mitad de la historia. La otra mitad es elaborar cuidadosamente las preguntas que se incluirán en una encuesta, su orden, redacción, agrupación y el mejor ajuste para los tipos de preguntas disponibles. Tratar de detallar todo esto resultaría en un texto muy largo, así que esta vez me enfocaré estrictamente en los aspectos visuales de las encuestas: la apariencia.

Debajo tienes unos ejemplos que ilustran diferentes técnicas para hacer que las encuestas se destaquen: banners personalizados, fondos, fotos en línea y algunos otros trucos.

En esta publicación, describiré un montón de técnicas para darle a tus encuestas un toque único, haciéndolas lucir más profesionales. Si bien algunas de las características que estoy a punto de describir serán respetadas por la aplicación de campo Survey123, me centraré en el diseño de formularios web.

Elementos básicos de diseño: encabezado, descripción y pie de página

Los elementos básicos alrededor de las preguntas en tu encuesta son el encabezado, la descripción y el pie de página. Directo de la pestaña Apariencia, puedes elegir mostrarlos u ocultarlos. Por ejemplo, la descripción es típicamente utilizada para describir de qué se trata tu encuesta. Generalmente está hecha de un texto o una combinación de texto e imágenes. Si sientes que el título en tu encabezado es lo suficientemente descriptivo, puedes elegir ocultar la descripción.

Encabezado de la encuesta

El encabezado típicamente contiene el título de la encuesta, pero también es un buen lugar donde colocar el logo de la organización. Puedes elegir un encabezado de texto, al que le puedes cambiar el color de fondo y la alineación, o un encabezado de imagen.

Si eliges un encabezado de imagen, tu imagen será ajustada de manera que se adapte al ancho de la encuesta, que no superará los 680 pixeles. Por esta razón, como regla general, tus imágenes de encabezado no necesitan tener más de 680 pixeles. La altura se establecerá para que la relación de aspecto de la imagen se conserve. Es mejor elegir una imagen amplia para evitar ocupar demasiado espacio vertical. El encabezado está ocupando la parte superior de la pantalla, así que, con ese espacio principal allí, no necesitas un encabezado grande y alto para llamar la atención.

Las imágenes utilizadas en tu encuesta no deben ser mayores a 1Mb. Siempre trata de optimizar el tamaño de tus imágenes.

Descripción de la encuesta

La descripción de la encuesta, hablando en idioma Survey123, es un tipo de pregunta llamado Nota. Al igual que con el encabezado de la encuesta, puedes fácilmente ocultar la descripción desde la pestaña Apariencia. Para configurar el contenido de la Descripción, simplemente haz clic en el elemento en la vista previa, y todas las configuraciones aparecerán en el panel derecho.

Ten en cuenta que el contenido de la descripción acepta texto enriquecido, por lo que puedes agregar párrafos enteros controlando el color y tamaño de la fuente, la alineación del texto, las imágenes, los vínculos, etc. Esto hace que la descripción sea muy flexible, permitiéndote agregar contexto a la encuesta misma.

Para apoyar el esfuerzo de recuperación después del huracán Michael, el Departamento de Protección Ambiental de Florida y el Equipo de Respuesta de Emergencia del Estado de Florida, publicaron una encuesta pública para que los ciudadanos puedan informar la ubicación de los escombros. Observa cómo utilizaron el encabezado de la encuesta para incluir un simple título, y luego aprovecharon la descripción para agregar los logos de la organización como también una breve nota sobre el propósito de la encuesta. La descripción también incluía vínculos hacia las páginas web de las organizaciones y a otros documentos importantes.

La descripción de una encuesta es particularmente fundamental para las encuestas públicas donde no puedes asumir que la gente sabe de qué se trata. Un poco de contexto siempre es bueno.

Justo debajo de la descripción es donde las preguntas de tu formulario aparecerán. Más adelante describiré como puedes utilizar Temas para controlar los aspectos visuales de tus preguntas, pero por ahora, vayamos al pie de página.

Pie de página de la encuesta

El pie de página de una encuesta obviamente se encuentra en la parte inferior de la encuesta. Este es un buen lugar para agregar un vínculo hacia la página de tu organización o solicitar opiniones. Al igual que con el encabezado y la descripción, puedes elegir ocultar o mostrar el pie de página desde la pestaña Apariencia, y puedes editar sus propiedades (texto y enlace a la URL) simplemente haciendo clic en la vista previa del pie de página. Observa atentamente la animación debajo para ver cómo puedes hacer para editar las propiedades del pie de página.

La URL para tu pie de página no tiene que ser necesariamente una URL a un sitio web. Puedes incluir un enlace mailto. Por ejemplo, si tu URL está configurada en mailto:myemail@acme.com, puedes ayudar a los encuestados a enviar opiniones a tu cuenta de correo electrónico.

Temas de la encuesta

Los temas de la encuesta ayudan a definir fácilmente el esquema de color de los aspectos más relevantes de tu encuesta. Una galería de temas básicos está incluida en Survey123. La mayoría de los temas están basados en un color primario aplicado al fondo de la página de la encuesta. Diferentes tonos de ese color son luego aplicados al encabezado, al fondo del formulario y al botón de enviar. El tema también define el color asignado al texto en tu formulario, así contrasta con el fondo. Un segundo grupo de temas prestablecidos utiliza una imagen de fondo como la base para todos los componentes visuales del formulario. Puedes utilizar los temas incluidos como están. Agregamos un buen grupo de ellos y tú puedes ir seleccionándolos y ver como quedan con tus encuestas.

También puedes utilizar los temas incluidos como punto de partida para tu propio diseño. Es decir, puedes seleccionar un tema básico y editarlo. Las propiedades editables de un tema se dividen de la siguiente manera:

·       Encabezado: Ya conoces este elemento. El tema establece el color del fondo del encabezado y también el color del texto. Tú puedes ajustar esto como te guste.

·       Contenido: La categoría contenido se refiere a la parte de tu formulario que contiene todas las preguntas. Hay un numero de propiedades importantes:

Fondo del contenido: El fondo del contenido se encuentra justo debajo de las preguntas de la encuesta y no debe confundirse con el fondo de la página, que describiré más adelante. El propósito del fondo del contenido es asegurarse que todas las preguntas en la encuesta sean legibles. Seguramente desearás un buen contraste entre tus preguntas y el fondo: un fondo claro va con preguntas en texto oscuro y viceversa. En la mayoría de los casos, querrás utilizar un color sólido para el fondo de tu contenido.

Si quieres ponerte creativo, puedes experimentar con imágenes del fondo del contenido, pero debes ser cuidadoso de no sobre cargarlo con colores que solo crearían distracciones. Cuando se trata de imágenes para el contenido de fondo, es mejor utilizar imágenes con una textura ligera. A continuación, hay un par de ejemplos que usan imágenes para recrear un cuaderno y una sensación de papel arrugado.

Cuando utilices imágenes de fondo de contenido, querrás experimentar con las diferentes estrategias de ajuste de imágenes disponibles (repetir, repetir verticalmente, ajustar y centrar).

Tanto para fondo de contenido de color como de imágenes, puedes ajustar el nivel de opacidad, que puede darte efectos interesantes al trabajar en combinación con el fondo de la página.

Color del texto del contenido: esta configuración se refiere al color utilizado para las etiquetas en tus preguntas. Como describimos anteriormente, la elección del color del texto depende del color de fondo. Siempre buscarás que haya buen contraste para hacer tus preguntas más legibles. El color del texto del contenido no es necesariamente aplicado a las sugerencias y notas, ya que pueden anular los colores de fuente tal como se especifica en la vista diseño.

Color de fondo de entrada: se refiere a todo el espacio utilizado para ingresar datos. Piensa en el color de los cuadros de entrada de texto, por ejemplo, pero también en el fondo para las opciones en listas, bloc de notas, etc.

Color de texto de entrada: esto aplica al texto de respuesta.

·       Página web: la página web representa todo el fondo detrás del contenido de su formulario real. Este elemento es visible en computadoras de escritorio y tabletas, pero en teléfonos está en su mayoría oculto. Puedes manipular el color y la imagen del fondo de la página web, permitiéndote darle un aspecto sólido a tu formulario. El fondo de la página web es probablemente el elemento que puede darle más carácter a tu diseño. En el siguiente ejemplo, establecí una imagen colorida como fondo de la página, para que mi formulario se destaque fuertemente, y para resaltar el objetivo central del formulario: los árboles.

Como mencionamos antes, puedes utilizar la configuración de opacidad en el fondo del contenido para crear efectos visuales interesantes junto con el fondo de la página. La próxima captura de pantalla muestra un nivel de opacidad medio aplicado al fondo del contenido, para crear un sutil efecto translucido.

El fondo de la página web solo se muestra en la aplicación web de Survey123. La aplicación de campo de Survey123 ignora el fondo porque el contenido siempre se expande para aprovechar todo tu dispositivo.

Pantalla de agradecimiento

La pantalla de agradecimiento se puede presentar opcionalmente en formularios web justo después de enviar una encuesta. Este es el lugar perfecto para agradecer a la persona que respondió la encuesta por tomarse el tiempo de completarla, reconocer el trabajo de los patrocinadores de tu proyecto o resaltar tu propia organización.

Puedes incluir texto con formato, enlaces y hasta imágenes personalizadas dentro de la nota de agradecimiento. Me gusta darle un poco de amor a la pantalla de agradecimiento en mis encuestas, especialmente cuando son públicas, porque le dan un toque agradable.

Si observas detenidamente la parte inferior del cuadro de diálogo de la pantalla de agradecimiento, puedes habilitar opcionalmente a los usuarios para que vuelvan a enviar los datos con su encuesta, justo después de enviarlos. Esta opción simplemente agrega un enlace en la pantalla de agradecimiento que lo llevará rápidamente a la encuesta.

Varios consejos y otras cosas para tener en cuenta

·       Poner los recursos de imágenes a disposición del diseñador web: cuando utilizas un diseñador web, todas las imágenes son referenciadas a través de una URL. Eso quiere decir que no puedes utilizar el diseñador web para cargar sus imágenes directamente de su computadora local. Debes guardarlos en algún lugar primero. Además de mantener las imágenes en tu propio servidor web, hay una serie de opciones populares para que puedas alojar imágenes, como Box, Google Drive y otras. También puedes cargar tus imágenes a tu cuenta de ArcGIS, compartirlas y luego obtener su URL como se muestra debajo:

·       Tamaño máximo de imágenes: el tamaño máximo permitido de imágenes que puedes utilizar en tu encuesta es de 1Mb. Siempre deberías optimizar el tamaño de tus imágenes para minimizar su tamaño sin comprometer su calidad. Cada imagen que agregues eventualmente deberá descargarse, lo que disminuirá el tiempo de carga inicial del formulario.

·       Configurando colores personalizados: al configurar los colores de tu texto y fondos, puedes utilizar valores hexadecimales. Con los complementos del navegador web como ColorZilla, puedes obtener fácilmente estos valores hexadecimales de un sitio web y aplicarlos a los elementos visuales de tu encuesta. Observa la siguiente animación para más detalles.

·       Nunca subestimes la importancia de hacer que tus encuestas se vean bien. Una buena apariencia, puede ayudar a obtener la mejor información de los usuarios.