Haces todo lo que puedes para crear un sitio web que llevará a los visitantes a la conversión. Cuando estudia los análisis, se emociona al ver que el recorrido del usuario que ha creado cuenta con el respaldo de sus visitantes, una y otra vez. Sin embargo, hay algo que les impide convertirse.

Le formulario de contacto es una parte esencial del viaje de sus visitantes. Incluso si en realidad tiene casi todo lo que un sitio web puede ofrecer, un formulario de contacto podría arruinar la experiencia si no se usa correctamente. Botones “rotos”, campos confusos, demasiados pasos, una interfaz desorganizada… incluso la ubicación de los formulario de contacto podría alterar la experiencia del usuario.

Hay muchas cosas que pueden salir mal.

Reglas de 5 para crear el formulario de contacto perfecto

Un estudio de seguimiento ocular de Google publicado en 2014 mostró que seguir las pautas de uso más básicas para diseñar formas mejorará significativamente la experiencia del usuario. En concreto, cuando un formulario de contacto cumple con todas las reglas, el 78% de los usuarios puede rellenarlo y enviarlo en un solo intento. Sin embargo, cuando un formulario de contacto viola estas reglas, solo el 42% puede hacerlo en un intento.

¿Tienes curiosidad por saber cuáles son estas reglas? Así que sigue leyendo.

Regla n. ° 1: centrarse en la alineación

Como verá en otras reglas aquí, las personas a menudo se preocupan por la duración de formas de contacto, lo que a menudo conduce a malas elecciones de diseño. Tomemos el tema de la alineación, por ejemplo.

Es posible que vea un formulario como este en el sitio web de BrainTraffic y piense: Hmmm ... pero ¿no es demasiado largo para completarlo?

rellenar form.png

Una forma de pensar en la solución de este "problema" es mover las etiquetas hacia la izquierda y colocar los campos de respuesta a la derecha. Sin embargo, los expertos en UX le dirán que este es un gran no-no, ya que compromete la capacidad de escanear el formulario. Lo mismo ocurre si pensó en colocar los campos uno al lado del otro horizontalmente.

Si quieres tu formas Los contactos cumplen con el estándar de alineación, esto es lo que debe hacer:

  • Alinee a la izquierda todas las etiquetas, campos de formulario y el botón principal de llamada a la acción.
  • Nunca alinee los campos relacionados horizontalmente. Puede estructurar el formulario de forma lógica, pero cada pregunta o campo debe apilarse verticalmente.
  • Cualquier campo con preguntas de opción múltiple (con menos de seis opciones) debe mostrarse en una lista vertical de puntos o casillas de verificación, no en un menú desplegable.

Regla 2: incluye todos los campos relevantes

Cuando se trata de diseñar formularios de contacto, podría pensar que cuanto más cortos, mejor, ¿verdad? No siempre es así. Lo más importante es que proporcione a los usuarios todos los campos necesarios y relevantes.

Michael Aagaard, Optimizador de conversiones sénior de Unbounce, hizo una presentación en 2015 que abordó este problema. Él y su equipo querían saber qué pasaría si acortaban este formulario de contacto:

ejemplo de formulario de contacto court.png

Como puede ver, eliminaron lo que creían que eran campos innecesarios para agilizar el proceso de llenado del formulario. Sin embargo, al concluir la prueba, encontraron una caída del 14% en las conversiones con la forma más corta.

Regla # 3: Simplificar campos

No importa si sus usuarios están interactuando con su formulario de contacto usando una computadora de escritorio o un dispositivo móvil, o si necesitan tecnología de asistencia para ayudarlos, el formulario debe estar equipado. para simplificar el proceso de entrada.

Aquí hay algunas técnicas que debes saber:

Tabulación
Para los usuarios de escritorio y aquellos con problemas de accesibilidad, asegúrese de que su formulario de contacto tenga habilitado el orden de pestañas lógico.

Máscaras de entrada
En lugar de obligar a los usuarios a adivinar cómo desea que se formatee ciertos campos, puede agregarlos con máscaras de entrada que los formatean automáticamente.

campos de formato html.png

Autocompletado de Google
En lugar de codificar cada campo para que sea formado automáticamente de acuerdo con los estándares que deben respetarse, active la función de autocompletar mediante el complemento de Autocompletar de direcciones de Google. Esto no solo le evitará tener que lidiar con errores ortográficos y direcciones incorrectamente completadas, sino que evitará que sus visitantes ingresen la mayor parte de esta información.

Regla # 4: Salir de todo

Si bien me doy cuenta de que esta regla irá en contra de los principios básicos del minimalismo, es una regla a la que debe prestar mucha atención para evitar frustrar innecesariamente a sus visitantes.

Déjame explicarte: tienes un formulario de contacto que parece bastante sencillo. Sus usuarios lo completan según lo que sugieren las etiquetas y hacen clic en el botón Enviar. Entonces reciben este horrible mensaje rojo: “¡No lo hiciste bien! ¡Regrese, corrija el formulario y envíelo de regreso! " 

Probablemente lo haya encontrado como usuario y sepa lo frustrante que puede ser, especialmente si parte de la información que ingresó se elimina cuando se produce el error. Entonces, en lugar de dejar a los usuarios adivinando qué se debe arreglar y cómo, no permita que llegue a este punto. Deletrea todo en el camino:

  • Proporcione un enfoque en el campo (especialmente en dispositivos móviles) para que los usuarios sepan exactamente dónde están completando un formulario.
  • Escriba todos los requisitos de formato si no está utilizando máscaras de entrada para formatear campos automáticamente.
  • Indique explícitamente cuando un campo es "Opcional" (use la palabra, no el asterisco rojo).
  • Brinde a los usuarios la opción de mostrar u ocultar el campo de contraseña a medida que lo ingresan.
  • Muestra un mensaje de error tan pronto como el usuario haya ingresado a un campo. No espere hasta el final para hacerlo.

form wordpress.png error

Regla # 5: No esconda consejos

El texto del tablero en un formulario de contacto se ve así:

campo con tips.png

¿Ves cómo Target coloca las etiquetas en el campo? En algunos formularios de contacto, estas etiquetas / indicaciones simplemente desaparecen cuando un usuario hace clic en un campo. El destino maneja esto de manera un poco diferente y mueve la etiqueta a la parte superior del cuadro de campo (ver "dirección de correo electrónico").

Independientemente de cómo se maneje esto, los expertos en usabilidad, como el grupo Nielsen Norman, le dirá que esta es una mala práctica de diseño porque:

  • Esto es problemático para los usuarios multitarea, distraídos o con un ritmo demasiado rápido en el siguiente campo. Cuando la pista desaparece, los usuarios deben abandonar el campo para redescubrir lo que necesitan.
  • Los consejos que desaparecen también evitan que los usuarios regresen a un formulario para verificar su trabajo o corregir un error sin eliminar por completo la respuesta para ver lo que se muestra a continuación.
  • El texto gris más claro utilizado para las sugerencias de marcadores de posición no es ideal para una lectura fácil.
  • Los campos con texto de sugerencia se pueden confundir con campos que ya han completado datos, lo que permite que los usuarios los ignoren, envíen el formulario y reciban un mensaje de error.
  • Algunas herramientas de lectura de pantalla no pueden leer texto de sugerencia.

Según NNG, los usuarios encuentran los campos vacíos más atractivos que los que contienen texto de pista. Incluso si sus formularios parecen más largos colocar estas etiquetas o descriptores sobre el campo, mejorará la usabilidad.

Eso es todo por estos consejos. Espero que te ayuden a crear mejores formularios de contacto.