Diseño web y UX
Consejos para el diseño de formularios web
A nadie le gusta completar formularios, tenemos que aceptarlo. Sin embargo, se trata de una herramienta imprescindible para lograr los objetivos de una plataforma digital y su eficiencia tienen una gran influencia en el rendimiento y efectividad del proyecto en general.
Los formularios recolectan la información de un usuario para que se registre, envíe un mensaje, consuma contenidos o realice una compra, entre otros. Al ser el último paso que se ejecuta antes de que se produzca una conversión, es muy importante que tenga un diseño optimizado para atraer a los usuarios, convencerlos, guiarlos y apoyarlos a lo largo del proceso.
Características de un formulario eficiente
La apariencia estética es, generalmente, lo primero que se percibe, por lo que es muy importante contar con un diseño que sea profesional y transmita confianza para persuadir a los usuarios de llenar el formulario. En este sentido, los aspectos más importantes son:
- Que sea claro y conciso, siguiendo un orden armónico en los diferentes campos.
- Que sea familiar, coherente con la interfaz del sitio.
- Que sea atractivo, aportando a la estética general y siguiendo las reglas básicas del diseño gráfico.
Pero este es solo uno de los aspecto del diseño. Una vez que el usuario se ha decidido a llenar el formulario, existen elementos más complejos que pueden determinar si completarán o no esta tarea.
Usando como base los mandamientos de Mono Company y el libro “Web Form Design: Filling in the Blanks” de Luke Wroblewski, analizamos cuáles son las características que definen la eficiencia de este elemento para lograr conversiones:
Etiquetas claras, visibles y descriptivas
Se recomienda poner las etiquetas sobre cada campo con una explicación directa y concisa de lo que se requiere.
Algunos formularios dejan esa información dentro de la caja y desaparece cuando el usuario hace clic sobre el campo, lo que es poco funcional cuando se piden más de dos datos, porque no permiten que la persona revise lo que debe ingresar y es posible que no recuerde las etiquetas.
Si necesitas entregar aclaraciones extra, lo mejor es poner ayuda contextual para no alargar demasiado los textos en el formulario.
Tipografías legibles
La fuente debe ser lo suficientemente grande para que todos puedan leerla, aunque el tamaño dependerá del dispositivo y los demás elementos de la página.
Para encontrar el tamaño adecuado, es bueno seguir las recomendaciones de accesibilidad web.
Áreas fáciles de seleccionar
Cada vez más usuarios navegan la web desde móviles. Para que puedan usar un formulario desde sus teléfonos sin problemas, necesitan campos y botones fáciles de pulsar.
Un tamaño mínimo de 44 x 44 píxeles y una buena separación te asegurará que todos puedan seleccionar los elementos.
Tamaño coherente de los campos
El porte de cada campo de respuesta debe ser proporcional a la información que se espera que el usuario ingrese.
Calcula los caracteres mínimos esperados y úsalos para adaptar cada elemento, esto ayudará a que las personas se hagan una idea de lo que les están pidiendo.
Mensajes de error generales y específicos
Cuando el usuario comete un error, lo más recomendable es poner un mensaje general al comienzo del formulario y otro específico en el campo donde está el problema. De esta forma la persona identificará fácilmente cual es el error y podrá corregirlo.
Apoyo para corregir errores
Una buena idea para ayudar a los usuarios es validar cada campo por separado apenas se ingresa la información, en lugar de validarlo al final del proceso completo.
Para optimizar la experiencia, lo recomendable es que el error se muestre cuando el usuario ha terminado de tipear y no mientras escribe, ya que esto podría confundirlo y frustrarlo.
Campos obligatorios fáciles de identificar
Es muy importante que distingas los campos obligatorios, esto no solo ayudará al usuario a llenar el formulario de forma correcta, sino que también lo orientará sobre la información que necesita recolectar.
Campos innecesarios ocultos
Cuando existen áreas que tienen prerrequisitos y que son dependientes unas de otras, es mejor ocultar o contraer las etapas secundarias hasta que se ingrese la información básica. Así se establecerá un orden lógico para llenar la información, se evitarán errores y se minimizará la extensión visual del formulario.
Extensión eficiente
Analiza cuáles son los datos imprescindibles y pide sólo lo justo y necesario. Hay muchas preguntas que pueden sacarse del formulario y hacerse más adelante, por ejemplo, por medio de un correo electrónico u otro recurso de seguimiento.
Requerimientos claros
Hay muchas formas de completar datos. Para facilitar el trabajo del usuario, explica con detalle los requerimientos.
Por ejemplo, si pides un número de teléfono, debes especificar si los usuarios necesitan anteponer un código de área y cómo deben hacerlo.
Otra forma de optimizar los formularios es buscando la alineación más eficiente para los textos y los campos en la plantilla, lo que dependerá de las características particulares de cada caso. Si quieres aprender más sobre este tema, puedes revisar los consejos de Wroblewski en su sitio web.
Finalmente, la complejidad de cada formulario, sus objetivos y las características de tus clientes afectarán también el rendimiento. Para asegurarte de que tus esfuerzos darán buenos resultados, te recomendamos realizar pruebas de usabilidad, solo así podrás investigar cuáles son las necesidades reales de tus usuarios.
Etiquetas claras, visibles y descriptivas
Tipografías legibles
Áreas fáciles de seleccionar
Tamaño coherente de los campos
Mensajes de error generales y específicos
Apoyo para corregir errores
Campos obligatorios fáciles de identificar
Campos innecesarios ocultos
Extensión eficiente
Requerimientos claros
Autor
Equipo IDA
Equipo IDA
Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.
Artículos relacionados
14 años y 2.550 posts después.
Sabíamos optimizar WordPress como nadie. Por eso lo dejamos
Accesibilidad cognitiva
Estás perdiendo a uno de cada cinco usuarios porque el modo oscuro no es una estrategia de inclusión
Diseño de Experiencia