16 Consejos que Mejorarán Cualquier Formulario en Línea

1. Siempre pregunta lo menos posible.

 

 

A la izquierda: muchas preguntas innecesarias. A la derecha: solo lo más relevante. Siempre pregunta la información más relevante, solamente en un paso en particular. Por ejemplo, si tú eres un proveedor de servicios y el número de teléfono de un usuario o la dirección de su casa no son muy necesarios en el paso actual, ¡no lo solicites!

Aquí, el principio “Menos es más” funciona perfectamente aquí. De esa manera, puedes disminuir el número de preguntas y como resultado:

1. Impulsas el tiempo de completación.

2. Disminuyes drásticamente la carga cognitiva en un usuario, al disminuir la cantidad de objetos en la pantalla.

 

 

 2. Incluye pre-llenado/detección automática en todo lo que puedas.

 

 

Formulario de Pago de Fluix. A la izquierda: todos los campos se deben completar manualmente. A la derecha: algunos campos se completan automáticamente.

Siempre ayude a tu encuestado. Si ya conoces información sobre él, llena esos campos previamente o incluso no los muestres.

Por ejemplo.

• La mayoría de las veces, puedes detectar fácilmente el país de un usuario y la ciudad por su IP o geolocalización.• Si un usuario llegó al Proceso de Pago desde tu boletín de noticias/campaña de mercadeo, definitivamente conoces su correo electrónico. Por lo tanto, llena el campo del correo electrónico. Hablando en el contexto del formulario de pago para nuestro Fluix, hay 5 de 15 (¡1/3!) campos que pueden ser llenados desde el principio.

Esto se debe a que el formulario actual es para el registro de la suscripción, una vez que finaliza el período de prueba. Por lo tanto, ya sabemos algo de la información sobre un encuestado cuando registró una cuenta de prueba. Pero debemos tener en cuenta que trabajamos en el mercado B2B, donde el encuestado que administra el producto y la persona que lo paga, pueden ser dos personas diferentes.

Por lo tanto, debo dejar editables los campos prellenados. Más sobre esto en el capítulo 3. Además, debes tener en cuenta los aspectos de seguridad y protección del usuario. Una gran cantidad de campos pre-llenados, al principio pueden parecer espeluznantes y crear una impresión de espionaje.

 

 3. Utiliza el enfoque automático.

Pago y envío de Apple Store. A la izquierda: un encuestado debe encontrar y activar el primer campo manualmente. A la derecha: el primer campo se activa automáticamente y funciona como un ancla para los ojos. Activa automáticamente el primer campo (o el necesario) en el formulario.

De esa manera, le das una pista al encuestado de donde debería comenzar y, como resultado, impulsas significativamente todo el proceso.Además, salvas a un encuestado de un clic/toque adicional, y un montón de especulaciones no deseadas. 

 

4. Utiliza un diseño de columna individual.

Formulario de Pago de Fluix. A la izquierda: los ojos se mueven en zigzag. A la derecha: los ojos se mueven naturalmente de arriba a abajo por línea. Al usar un diseño de una columna, los ojos se mueven en dirección natural, de arriba hacia abajo en una sola línea. En el diseño de múltiples columnas, los ojos comienzan a zigzaguear.

Eso aumenta drásticamente el tiempo de finalización y el número de fijaciones en elementos. Eso es malo para ti, así como también para el encuestado.

Además, este enfoque no causa preguntas innecesarias como “¿Dónde debería comenzar? ¿Cuál campo es el primero? ¿Cuál es el segundo: en la parte inferior o en el lado derecho? ¿Las preguntas en la columna izquierda son iguales a las preguntas en la derecha? ¿O son independientes? ¿Por qué están separadas?”…

La excepción aquí podría ser solo para la información que solíamos ver en una sola línea como:

  • Nuestro primer nombre, segundo nombre, y apellido: Sebasteean van Derlot
  • Fecha y hora: 16:30, 21 feb, 2017
  • Ciudad y estado: San-Francisco, CA

 

5. Divide los campos en grupos semánticos.

 

 

A la izquierda: no hay separaciones entre los campos, causan la sensación de desorden. A la derecha: el mismo número de campos se divide en 3 partes, que dan la sensación de respuesta gradual.

 

Si hay muchos campos en tu formulario, intenta dividirlos en grupos semánticos agregando espacios o títulos de sección adicionales entre ellos. Este enfoque le da al encuestado, la sensación de respuesta gradual y excluye tales pensamientos como “¡Demasiadas preguntas! Dejaré esto para mañana… “.

La división en párrafos se realiza de la misma manera.

En lugar de la pieza de texto sólida, la lees por partes. El mismo enfoque se usa para el número de las tarjetas bancarias.

 

6. Utiliza restricciones de entrada para cada campo.

Para disminuir significativamente la cantidad de rechazos, errores, datos incorrectos, etc., siempre debes usar las restricciones sobre lo que se puede ingresar en el campo: • longitud mínima y máxima (número de caracteres)• formato;• numérico, alfabético, alfanumérico, todos los símbolos;• dependencias, etc.

Por ejemplo, ¿podría el número de tarjeta bancaria consistir en letras o cualquier otro símbolo especial? Por supuesto que no.

El número de tarjeta bancaria siempre consiste en dígitos solamente, por lo que no es necesario permitir escribir otros símbolos. Para el campo de número de tarjeta bancaria sin restricciones de entrada, obligas a un usuario a cambiar entre teclados alfabéticos y numéricos cada vez. Por supuesto, esta regla es relevante para muchos otros campos.

La descripción detallada de las restricciones para cada campo (país, código postal, estado, dirección, nombre, número de teléfono, número de tarjeta bancaria, fecha de caducidad, etc.).

 

7. Utiliza restricciones visuales.

Utiliza restricciones visuales para no causar un falso deseo subliminal de escribir más de lo que se necesita.

Por ejemplo, si solo deben escribirse dos caracteres en el campo “Estado”, no es necesario hacerlo tan largo como, digamos, el campo “Dirección”. Además, la diferencia en el ancho de los campos, sirve como una buena ancla para que los ojos naveguen más rápido que en una columna con los campos del mismo ancho. 

 

8. Se claro en los mensajes de error. 

No importa qué tipo de validación utilices, siempre debes usar errores en línea. Úsalos “justo aquí”, en contexto. Pero no en otro lugar en las páginas. El trazado natural es tu mejor amigo.Y, lo que es más importante, siempre trata de explicar la raíz del problema. Evita los mensajes comunes como “Algo salió mal. Por favor, inténtelo de nuevo más tarde.” O “Error 999”.

Un usuario nunca entenderá tales mensajes. Intenta utilizar un lenguaje humano en su lugar, y explica qué fue exactamente lo que el usuario/sistema hizo mal, y qué es exactamente lo que se debe corregir/completar. El segundo es el mejor.

 

 9. Utiliza la validación en línea con retroalimentación en tiempo real, inmediatamente después de responder. 

La mejor versión de rendimiento de validación en línea.  El mejor método para notificar al usuario sobre el error que probablemente cometió, es resaltar el campo y mostrar el mensaje de error en línea, justo después de que respondió la pregunta. Tal vez hayas notado que muchos servicios en línea hoy en día usan varios tipos de validación (o no usan ninguna validación en absoluto).

  • Algunos muestran al usuario el error/errores, solo cuando el formulario está completamente lleno y se ha presionado el botón Continuar. Se llama Versión de Control.

La versión de control.

• Algunos utilizan la validación en línea, y muestran el error al responder, o incluso antes.

Las tres variaciones de validación en línea: después, mientras, y antes.  Estas opciones causan una mala experiencia para el encuestado. Pero lo peor de todo es el segundo porque:

1. Después de escribir cada carácter, un usuario recibe un error que puede causar una percepción fundamentalmente falsa de la situación;

2. Incluso cuando el campo está vacío, aparecerá el error, lo que está mal.  Estos son algunos de los beneficios de implementar la validación en línea con la retroalimentación en tiempo real, justo después de la pregunta respondida:

• un aumento del 22% en las tasas de éxito,

• una disminución del 22% en los errores cometidos,

• un aumento del 31% en la calificación de satisfacción,

• una disminución del 42% en los tiempos de completación, y

• una disminución del 47% en la cantidad de fijaciones oculares.

 

10. Utiliza etiquetas fuera de los campos. Si es necesario, en combinación con marcadores de posición.

La regla principal aquí no es ocultar las etiquetas al responder, por lo que el encuestado no perderá el contexto. Por lo tanto, preferiblemente las etiquetas deben estar fuera del campo. Si hay suficiente espacio, úsalas en el lado izquierdo del campo. Si diseñas para dispositivos móviles y estás limitado por el tamaño de la pantalla, puedes colocar las etiquetas en la parte superior del campo.

Sí, este enfoque causará un formulario bastante largo. Recuerda, siempre es mejor hacer un formulario más largo que más ancho debido al desplazamiento vertical que conduce a una menor carga cognitiva en nuestros cerebros. O utiliza la etiqueta dentro del campo y cuando estés en el foco, desliza la etiqueta hacia la esquina superior izquierda (como se muestra a continuación). Es un tipo de tendencia en este momento y funciona muy bien para el móvil. Por ejemplo, Shopify usa este enfoque.

 

En muchos casos, también puedes ayudar al usuario mediante el uso de marcadores de posición en los campos, como un texto de sugerencia. Puedes mostrar cómo debe ser la respuesta: el formato, la estructura, etc. Por otro lado, es mejor usar máscaras en lugar de marcadores de posición o cualquier sugerencia. Por ejemplo:

  • fecha: DD/MM/AAAA
  • número de teléfono +1 (___) ___-____
  • fecha de expiración: MM / AA

Funcionará como una restricción y un mapeo natural. Entonces, un usuario entenderá lo que escribe de un vistazo. Pero deberías preocuparte por la clara distinción visual entre el marcador de posición y el valor escrito por el usuario. De lo contrario, tu diseño podría causar una percepción falsa: el encuestado podría pensar que los campos con marcadores de posición ya están llenos.

 

 11. Marca campos opcionales en lugar de obligatorios.

Francamente, hay muchos debates sobre este punto. Baymard Institute dice que debes marcar los campos obligatorios y opcionales. Pero estoy más inclinado a la versión de Nielsen Norman Group. Su consejo proviene del primer canon:  — siempre pregunta lo menos posible.

Por lo tanto, la cantidad de campos opcionales en su formulario debe ser cero. Por lo tanto, la mejor práctica aquí, es marcar solo aquellos campos que son minoritarios. Por ejemplo, si 9 campos de 10 son obligatorios, entonces tiene sentido marcar solo el campo opcional.

En el contexto de nuestro formulario para Fluix, no tenemos ningún campo Opcional ahora. Estamos pidiendo información que realmente necesitamos, sin preguntas adicionales. Así que decidí no marcarlos en absoluto. Pero este caso particular es bastante complicado, porque el cliente no puede estar seguro de que todos los campos sean obligatorios. Por lo tanto, voy a probar eso cuando la forma esté completamente en producción. 

 

12. No saques al usuario del proceso de pago.

 Intenta evitar enlaces a otros recursos en tu página de pago. Debes mantener al encuestado enfocado en las respuestas y no interrumpir el proceso, redireccionando a otras páginas. De lo contrario, simplemente “se perderá” en algún lado y simplemente olvidará lo que inicialmente hizo. Utiliza enlaces solo en casos urgentes o cuando sea fundamental explicar algo, redirigiendo al usuario a algunas fuentes oficiales.

Por ejemplo, si usas un servicio de terceros, como SalesForce o FastSpring, deberías proporcionar el enlace en la página oficial, para que el usuario pueda leer cómo funciona el sistema.

 

 13. Habilita el botón de siguiente paso, solo cuando se complete el formulario.

 Activa el botón de siguiente paso, solo cuando el usuario haya respondido a todos los campos obligatorios y no haya ningún error. Obviamente, aplica este truco solo si usas la validación en línea con la retroalimentación en tiempo real (como se describe en el #9). Esto mantendrá al usuario enfocado en las respuestas y no le permitirá omitir algo importante.

Lo que es más importante, la activación animada del botón de siguiente paso, funcionará como un ancla visual. Entonces, el foco del usuario saltará al botón en el momento correcto. Y eso es exactamente lo que necesitamos. Pero para que este enfoque funcione correctamente, la distinción entre estados habilitados/deshabilitados, debe ser muy explícita y visualmente clara.Para Fluix, utilizo color gris + opacidad 0.5 para el estado desactivado y color azul sin opacidad, para el estado activado.

 

 14. Ten en cuenta las diferencias locales.

En caso de que tu producto sea solo para, digamos, mercado de los EE. UU., puedes olvidarte de la diferenciación local. De lo contrario, siempre deberías tenerlo en cuenta.

Las etiquetas de campo, marcadores de posición, máscaras, etc. pueden ser diferentes para diferentes países o regiones. Por ejemplo:- diferentes formatos de número de teléfono máscaras diferentes;- Código postal para EE. UU., Código postal para UE;- estados solo para EE. UU.

 

15. Siempre explica el  por qué y el para qué si solicitas datos específicos.

Ten en cuenta siempre que la información que estás pidiendo a un usuario, es muy privada y sensible para él. Siempre se trata de su vida, familia, finanzas, etc. Por lo tanto, para evitar dudas y preguntas innecesarias, debes explicar el por qué solicitas algunos datos específicos como el número de teléfono, fecha de nacimiento, peso, nombre del cónyuge, etc. Intenta adivinar, ¿cuál es el formulario de registro que se muestra arriba? Sí, esto es Facebook.

Están pidiendo tu fecha de cumpleaños durante el proceso de registro y te explican por qué necesitan esta información.

16. Ayuda a los daltónicos. 

Al usar colores con un bajo nivel de contraste entre tu primer plano y fondo, disminuyes la legibilidad. Especialmente para daltónicos. Especialmente en el viejo tipo de pantallas con matriz TFT, que son más populares debido al precio. Muchos diseñadores/servicios, se olvidan de tales personas, ¡que aproximadamente representan el 4.5% (2.7 millones de personas) de toda la población solo en Gran Bretaña! Esta herramienta o aquella otra, te ayudará a medir el nivel de contraste de los colores seleccionados. Entonces sabrás si tus colores pasaron las pruebas W3C o no. En Fluix utilizo 3 estados visuales que pueden distinguirse fácilmente en la mayoría de las pantallas, y ayudan a las personas con diferentes tipos de discapacidades por daltonismo.

Para probar tus diseños en tiempo real en Photoshop, prueba estas acciones de Bjango. El usuario de Sketch puede usar el Complemento Stark. Por supuesto, no son súper precisos, pero definitivamente te darán la sensación correcta de cómo las personas con daltonismo ven este mundo. Son súper fáciles de usar.

 

Bjango Actions. Pruebas de Daltonismo

Bien. Ésos eran los “trucos” imprescindibles que se basan en muchas observaciones e investigaciones de empresas audaces y otros tipos exitosos de nuestra industria. Al final del último capítulo, encontrarás una gran cantidad de enlaces a las fuentes que utilicé/leí/aprendí.

Estoy seguro de que la información anterior te será útil. Pero hay cientos de otras personas creativas para las que también podría ser útil.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

50% Complete

Suscribete al blog y no te pierdas ninguna actualizacion

Solo el mejor contenido, cero spam

Recibe estrategias de marketing digital