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.
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.
