Cómo crear un formulario web ergonómico

Ya sea para registrarse en un site o bien para finalizar un proceso de compra, el formulario esta omnipresente en la web y es muchas veces una pieza fundamental en la mejora del embudo de conversión.

He aprovechado un interesante y completo artículo de Smashing Magazine para hablar sobre el tema.

El formulario como punto de partida de la relación con los usuarios

Aunque es verdad que el uso del formulario ha descendido con el uso de los móviles, la gente prefiere llamar a través de un CTA, que rellenar un formulario, que suele ser más difícil en una pantalla más pequeña. El formulario sigue siendo un medio de establecer una relación privilegiada entre los usuarios y las empresas. Cuando esta mal elaborado, puede significar el fin de la relación.

• Como en toda relación, ganarse la confianza del usuario es fundamental, y esta confianza se puede ganar a través la formulación, el uso de colores y la tipografía.
• Titular el formulario según su objetivo intrínseco, lo que indicará al usuario la razón del formulario y porque debe completarlo.
• Preguntarse si las preguntas que se plantean tienen sentido y si están planteadas en el momento adecuado. Evidentemente, para esto, es primordial conocer a los usuarios.
• Al igual que haríamos con una persona física, emplear un lenguaje apropiado en función del tipo de internauta y evitar lo supérfluo.
• En las diferentes etapas del formulario, hay que intentar mantener una apariencia constante, evitando cambios bruscos o repentinos de diseño.

El formulario concebido como un intercambio

El formulario es un intercambio entre la empresa y los internautas. Muchos usuarios emplean el formulario para entrar en contacto con las empresas.

• Ordenar de forma lógica las etapas, como lo haríamos en una conversación.
• Una conversación no es un interrogatorio. Si las preguntas se realizan de forma dirigida o excesivamente directas, se empuja al usuario a decir lo que se quiere escuchar en lugar de lo que realmente piensan, es decir de la verdad.
• Al igual que en una conversación se marcan o se puntualizan las frases con silencios y pausas. Una pausa, indicada normalmente por un espacio en blanco en el caso de los formularios, permitirá diferenciar al usuario las diferentes partes o temáticas que componen un formulario.
• Durante una conversación es fácil distraerse por ruidos fuertes. Igualmente, en un formulario, hay que eliminar todo aquello que distraiga visualmente la atención de los usuarios (como banners, carruseles, etc.)

Los diferentes elementos de un formulario

Etiquetas campos

• Mejor una o dos palabras, aunque a veces es necesario recurrir a una frase corta para eliminar dudas o evitar malos entendidos.
• Evitar el uso de mayúsculas en todo el conjunto de titulares. Ponerlo estilo frase: “Apellido y nombre” en lugar de “Apellido y Nombre”.
• Si se desea que se rellene el formulario rápidamente es mejor colocar las etiquetas encima de su campo, pero si por el contrario, lo que se busca es que se complete el formulario despacio y prestando atención, puede ser aconsejable colocar la etiqueta a la izquierda del campo.

Campo a completar

• Existen diferentes formatos de campos a completar, y debemos elegirlos en función de la información solicitada. Por ejemplo, en el caso de solo poder elegir una opción de entre varias opciones, utilizar un botón radio o botón de opción (radio button), pero si se pueden marcar varias opciones, poner casillas de verificación (check box).
• En el caso de elegir un formato de entrada de datos restringido, intentar que “moleste” lo menos posible al usuario. Por ejemplo, en lugar de obligar a completar un campo del estilo DD/MM/AAAA mejor usar menús desplegables o calendarios.
• Indicar claramente que campos son obligatorios rellenar para poder validar un formulario. Lo convencionalmente aceptado es colocar un asterisco (*). Pero es importante que todo símbolo que coloque al lado de un campo o campos debe ir acompañado de una leyenda explicativa.

Acciones

• Diferenciar entre acciones primarias y secundarias. Las acciones primarias son los botones o enlaces que llevan a la finalización de los formularios, como “enviar” o “guardar”, y las secundarias, son aquellas acciones que permiten al usuario retirar o eliminar los datos que ha introducido. Si el usuario hace clic por error en un botón secundario, puede tener desagradables consecuencias, por ello, en la medida de lo posible, utilice solo acciones primarias y si no, intente dar menos peso visual a las acciones secundarias con respecto a las primarias.
• Intentar personalizar los textos de los botones en lugar de utilizar términos genéricos, ya que es una manera rápida de indicar el objetivo del formulario. Por ejemplo, el lugar de poner “enviar”, poner “regístrate con nosotros”.

Para saber más sobre botones, os invito a leer el arte de colocar los botones en un website.

Ayudas

• Hay que intentar en la medida de lo posible no utilizar textos para explicar al usuario como completar un formulario. Si no parece un formulario o es demasiado difícil de completar, hay que plantearse la idea de rediseñarlo. Utilizar textos explicativos solamente cuando sea estrictamente necesario, por ejemplo para explicar porque se solicita los datos de la tarjeta de crédito o para que se va a emplear el dato de la fecha de nacimiento o para enlazar con “Términos y condiciones”.
• No hay que olvidar que los textos de ayuda o no se leen o se simplemente se “escanean”. Por eso deben ser reducidos y fáciles de leer. Por regla general, no deben exceder de los 100 términos.
• Cuando sea necesario incluir un texto al lado de un campo, en lugar de añadirlo tal cual, es preferible usar un sistema dinámico de ayuda que aparezca solo cuando el usuario lo necesite. Para ello, hay que añadir un icono al lado del campo indicando que puede realizar dicha acción con simplemente hacer clic sobre él.

Mensajes

• Mensajes de error. Hay que intentar que el mensaje de error aparezca en cuanto se ha cometido fallo, para evitar que el usuario se percate el error cuando ya ha terminado de completar el formulario y/o ha realizado una acción primaria. El mensaje de error tiene que ser muy visible, a través de color (normalmente el rojo), con un icono de error reconocible, y una adecuada disposición dentro del formulario (o bién encima del campo donde se ha cometido el error o bien al lado), tipografía de letra más grande, etc. o una combinación de todos ellos.
• Mensaje de éxito. Este tipo de mensajes deben ser utilizados en formularios extensos, para animar al usuario a terminar de completarlo. Al igual que el mensaje de error, debe estar bien visible.

Fuente

Related posts:

Ergonomía Web: logra un diseño ergonómico sin odiar al diseñador Como mejorar el CTR en Twitter Como responder al bad buzz en social media (infografía)