Diseño UX y Usabilidad en formularios Web

Cuando una persona entra a tu sitio web tiene un objetivo específico, ya sea obtener información, recursos, comprar un producto, entre otros. La mayoría de veces para conseguir ese objetivo se debe rellenar un formulario, sin embargo, este nunca será el objetivo principal del usuario, sino por el contrario suele ser un paso que no es necesariamente de su agrado. Por ello es importante que este proceso esté optimizado para de esta forma, poder recolectar de forma efectiva la información.

A pesar de que los formularios pueden llegar a ser tediosos para los clientes, son necesarios para que la empresa pueda recolectar su información, por ejemplo, en la metodología de Inbound Marketing el obtener el correo de las personas que ingresan a la página web, es muy importante para poder llevarlos a través de todo el Buyer Journey y generar con esto conversiones.

Ahora, la metodología nos dice se debe ofrecer contenido de valor a la persona a cambio de que nos deje sus datos y como recolectamos esto, por medio de un formulario, no obstante, el formulario como tal no debe significar un obstáculo, debido a que si es confuso, muy largo o no genera confianza, por más que se ofrezca valor, se verá afectada la experiencia de usuario y lo más probable es que abandonen la página y vayan a otras, recordemos que en este mundo digital, todo está a un clic de distancia.

Ahora bien, la gran incógnita es, ¿Cómo conseguimos optimizar los formularios web para que las personas, no abandonen en el último paso nuestro sitio web y si podamos generar conversiones?, la solución es muy sencilla, haga formularios pensando en la experiencia de usuario (UX) y en la usabilidad. Aquí voy a dejar ciertos puntos que deberían considerarse para ofrecer un formulario web usable y que brinde una mejor experiencia de usuario.

Primero debemos entender cuáles son los elementos comunes que poseen los formularios y cómo cada uno de ellos debe ser optimizado:

1. Estructura

Esto se refiere a cómo se organizan los campos, las conexiones lógicas que existe entre los elementos y el diseño general que posee el formulario. Por ello aquí te dejo algunos consejos a tomar en cuenta para que la estructura sea entendida por el usuario y éste logre completarlo correctamente.

Consejos:

•   NO preguntar de más: Primero se debe establecer cómo y para qué será usada la información que recabes, así te aseguras de preguntar sólo lo que realmente necesitas para no hacer muy largo el formulario, esto evitará que el cliente se sienta agobiado, no solo por lo extenso, sino porque si hay muchas preguntas puede que las personas no quieran o no sepan contestar y solo terminarán abandonando el sitio.
•   Ordenar correctamente las preguntas: Se debe seguir un orden común y lógico al ordenar las preguntas, gracias a esto se facilitará el proceso para el usuario al momento de llenarlo, logrando así, que la visualización le resulte familiar. Por ejemplo, casi nunca veremos que se pregunte el número de teléfono antes que el nombre.
•   Agrupar la información: El generar grupos dentro de tu formulario ayudará al usuario a entender de manera más fácil que información debe poner, por ejemplo, generar grupos con datos personales, datos de la empresa, entre otros.
•   Número de columnas: Lo más recomendable para realizar un formulario es utilizar una sola columna ya que la lectura de este será más rápida, si se van a usar dos columnas deben considerarse muchos más elementos para que no se vuelva un obstáculo el entender el flujo de lectura o vuelva más lento el proceso.
  
  
  >>Cómo y por qué es importante en UX<<
  
  

2.Campos para llenar

Son los campos donde el usuario debe llenar sus datos, este incluye cajas de texto, checkboxes, radio-buttons, cajas de selección, contraseñas, entre otros.

Consejos:

•   Minimizar la cantidad de campos: Cuando una persona ve un formulario muy extenso o con muchos campos por rellenar, lo más probable es que no lo llene, es por ello que se debe limitar la información que se pide, pero no solo eso, sino que también el unir campos es una buena estrategia para que visualmente se vea mucho menos pesado. Por ejemplo, para seleccionar una fecha, en lugar de poner 3 campos con el día, el mes y el año, solo hace falta poner un campo con acceso a un calendario.
•   Evitar campos opcionales: Si son campos opcionales quiere decir que no es información de tan alta relevancia o que a la gente le incomoda contestar, y muchas veces un campo opcional puede generar que una persona abandone el formulario, sin darse cuenta de que este era opcional, por eso si vas a usarlos asegúrate de identificarlos claramente, para que no existan confusiones.
•   Campos con opciones predefinidas: En muchos casos existirán campos dónde es mejor dar opciones predefinidas, ya que ayudara a las personas a completar el formulario y a que conserves el orden en tu base de datos porque limita la cantidad de opciones que las personas pueden poner.
•   Indicar el campo actual: Al indicarle al usuario claramente el campo que tiene seleccionado actualmente evitará que haya confusión y se llene un campo de manera equivocada.

3. Etiqueta del campo

Son aquellos textos donde se especifica cual es la información que debe ponerse en cada uno de los campos. Una etiqueta clara facilitará el proceso para el usuario.

Consejos:

•   Expresiones cortas: Las expresiones cortas y descriptivas generan que el cliente pueda rápidamente visualizar qué información debe llenar.  
•   Ubicar bien las etiquetas: La mejor ubicación de las etiquetas será arriba de los campos, ya que sigue el flujo de lectura, entonces de manera más rápida los usuarios lograrán visualizar la información, sin embargo, el colocarlos a la izquierda de los campos puede ser beneficioso si queremos que los campos sean revisados con más detenimiento, ninguna de estas generará una confusión para el usuario.
•   Etiquetas fuera del campo: Lo mejor es utilizar etiquetas fuera del campo de escritura, ya que cuando se posiciona para comenzar a escribir los usuarios pueden perder de vista que información es la que debían llenar en ese espacio y cometer errores.  
  

4. Botones

Son los CTA del formulario, a partir de que el usuario haga clic en él se completa o se continúa el proceso, por eso son un elemento importante.

Consejos:

•   Definir el aspecto visual: Es importante que el botón luzca como tal, además de generar algún feedback para que el usuario sepa cuando se pasa sobre y cuando se da clic. Recuerde que un botón siempre debe llamar la atención sobre el resto de elementos ya que al final de cuentas es el que completa un proceso.
•   Cuidar la posición: El botón debe ubicarse al final ya que es el último paso a ejecutar cuando se rellena un formulario, además no debe existir mucho espacio entre el formulario y el botón, debido a que el objetivo es que este sea clickeado justo después de terminar de llenar el formulario.
•   No usar nombres genéricos: Al utilizar nombres genéricos da una sensación de que todo el formulario lo es, además no le describe bien al usuario que va a obtener al darle clic, por ello lo mejor es especificar más claramente que va a obtener, por ejemplo, Obtener plantilla, Subscribirse al blog, entre otros.
•   Un botón principal:  Debe existir un único botón principal que es el que completará el llenado del formulario y es el que va a cumplir nuestro objetivo principal, si se desea poner un botón para regresar, para borrar u otro, deben tener una jerarquía menor.

5. Retroalimentación

Son algunos mensajes que aparecen en los formularios, cuando algo fue completado o enviado correctamente, también cuando algo es incorrecto le notifica y le aclara cual es el error y da una posible solución.

Consejos:

•   Aprovechar códigos de color: El utilizar el verde para indicar que la información completada es correcta o el rojo para todo lo contrario, el amarillo para indicar que una contraseña es débil es una manera sencilla de comunicarle al usuario rápidamente el estado de sus acciones, lo mejor es ir validando los campos conforme se vaya rellenando el formulario para que así sea más fácil para el usuario corregir de inmediato y no tener que regresar a revisar.
•   Botón de ayuda visible: Si se va a agregar algún botón de ayuda en algún campo para explicarle al usuario más claramente la información que debe completar, lo mejor es que este sea muy visible para que realmente logre su objetivo.
•   Indicar errores: Cuando haya un error al rellenar el formulario, lo recomendado es indicarle específicamente al usuario cual es el error, para que pueda solucionarlo fácilmente.

Los formularios Web son necesarios para que las compañías puedan obtener información de sus clientes, sin embargo, para los usuarios es solo un paso engorroso para llegar a su objetivo real, por ello la importancia de generar formularios con los que la interacción sea lo más fácil posible. Usando los consejos que te hemos expuesto anteriormente lograrás aumentar la usabilidad de los formularios y con esto mejorar la experiencia de usuario de tu sitio web e incrementar la cantidad de conversiones.

Buena suerte mejorando tus formularios web, si quieres aprender más sobre formularios web y de la optimización de landing page dale clic al botón de abajo.