Cómo conseguir un formulario perfecto: 100% usabilidad

Aprende a crear un formulario perfecto para tu página web, y atrapa al mayor número de usuarios. Desplegables, checkbox...¿Cuál es la mejor opción?
Tabla de contenidos

Los formularios de registro o de contacto de una página web deben ser tratado de manera especial, ya que no es una página más de nuestro sitio web sino que hacemos que el usuario entre en acción. El usuario pasa de una posición pasiva en la que únicamente tiene que leer la información que le ofrecemos o, a lo sumo, ver algún que otro vídeo, a tener que escribir una serie de campos. Es decir, en un formulario el que esta ofreciendo algo ya no es la web sino el usuario.

En términos de usabilidad hay que tener muy en cuenta esa posición del usuario si queremos conseguir el formulario de contacto perfecto. Algo tan sencillo como rellenar unos campos puede ser considerado como un «esfuerzo» extra por parte del usuario, más aun si la información que solicitamos es personal, por lo que deberemos tener una mayor atención a la hora de diseñar la página destinada al formulario.

Un dato muy relevante en cuanto a la usabilidad de los formularios de registro lo podemos encontrar en app como instagram o twitter, en este tipo de app se le pide al usuario registrarse antes de poder usarla y podemos observar que apenas se nos piden 3 ó 4 campos. Esto es debido a que esta demostrado que cuanta más información se le solicite al usuario es más probable que abandone la app sin haberse registrado. De todo ello sacamos la conclusión de que no debemospedir todo tipo de información al usuario sino exclusivamente aquella información necesaria.

    Teléfono: 976 24 96 08
    Whatsapp: 695 93 20 96

    Análisis de usabilidad de un formulario de registro 

    Como profesionales del diseño web en nuestro día a día tenemos que registrar dominios así cómo buscar el mejor hosting posible para la mejora del posicionamiento web, por lo que nos ha tocado rellenar cientos y cientos de formularios para adquirir estos productos. Así que hemos decidido analizar uno de esos formularios de registro que tantas veces hemos tenido que rellenar: el formulario de registro de CDMON.

    ¿Dónde colocar los nombres de los campos?

    Al diseñar un formulario de registro una de las primeras decisiones que debemos tomar es donde colocar los «Nombres» de los campos de texto. En este caso observamos que el texto esta situado en la zona izquierda pero alienado a la derecha, el punto negativo que suele ocurrir es que tienen los nombres a la izquierda es que dejan bastante espacio por lo que para una mejor usabilidad es conveniente colocarlos en la parte superior de los campos. El problema con poner los nombres en la zona superior de los campos es que en registros extensos convierten la página en muy larga, y dejan espacio a ambos lados del formulario. Por este motivo no podemos considerar un error este caso en donde han colocado los «Nombres» a la izquierda pero alineándolos a la derecha.

    Interacción con el usuario

    Es fundamental recibir ayuda en caso de que el usuario cometa algún «error». Todos hemos sufrido lo molesto que es rellenar un formulario y que después nos indique que algunos de los campos están mal teniendo que volver a corregirlos. En muchas ocasiones este hecho termina con el usuario abandonando nuestra web, y visitando otra…entonces…¿qué hacemos? Tan fácil como facilitar al usuario ayuda en todo momento.

    Uno de los fallos más habituales es encontrarnos con un nombre de usuario que ya esta cogido, un formulario de registro perfecto nos permitirá comprobarlo sin la necesidad de tener que ir hasta el final y rellenar el resto de campos. Algo similar ocurre con las contraseñas, cada página web tiene sus «normas» a la hora de fijar una contraseña por lo que poder comprobar que nuestra contraseña es válida al instante sin tener que volver a escribirla es un elemento de usabilidad muy importante que hará que nuestro formulario de registro se acerque a la perfección. En el caso que estamos viendo podemos comprobar que no hay ningún tipo de ayuda para comprobar que la contraseña es la adecuada, por lo que deberían mejorar la usabilidad de su formulario de registro.

    Checkbox, desplegables y selección

    En la imagen superior podemos ver como hay varios checkbox, así como la opción de selección en caso de que ya seamos clientes o no. Estos botones de radio nos permiten hacer nuestro formulario más usable ya que no hay nada peor que hacer escribir al usuario cuando las opciones que tenemos son limitadas, de esta forma estamos ahorrando tiempo y clic al usuario mejorando la usabilidad del formulario de registro.

    Del mismo modo, las opciones desplegables hay que tenerlas muy en cuenta ya que aunque las opciones sean múltiples siempre nos costará menos que tener que escribirlas. En el caso de estudio observamos que han puesto un desplegable para la localización, de esta forma si buscamos Zaragoza podemos encontrarla en tan solo 3 clic pero si tuviéramos que escribirla estaríamos hablando de mínimo 8 carácteres si no nos equivocamos.

    Consejos de usabilidad para los formularios

    Para facilitar que los usuarios rellenen el formulario podemos introducir un valor por defecto en los campos para mostrar al usuario que debe escribir, y que una vez el usuario haga clic en el campo el texto se elimine para permitir la escritura en el campo.

    Por último, mostrar «carteles» de información en aquellos campos que puedan tener algo más de dificultad nunca esta de más para facilitar la tarea al usuario.

    En resumen, a la hora de diseñar un formulario para nuestro sitio web debemos tener especial cuidado y ayudar en todo lo posible al usuario para que complete el formulario. Así conseguiremos un formulario perfecto, usable al 100%.

    Otras entradas que pueden interesarte

    Cómo hacer remarketing en Google Ads revisando audiencias, campañas y métricas en una interfaz publicitaria digital
    Publicidad Online

    Cómo hacer remarketing en Google Ads paso a paso

    El remarketing ayuda a recuperar usuarios que ya visitaron tu web y no convirtieron, con audiencias, anuncios y seguimiento bien configurados.
    Leer más
    Panel de análisis SEO con herramientas para validar marcado estructurado y revisar avisos técnicos de una web
    Posicionamiento web

    Herramientas para validar marcado estructurado

    Validar schema antes de publicar evita errores técnicos, datos incoherentes y expectativas poco realistas; revisa herramientas, proceso y criterios para aplicarlo mejor.
    Leer más
    Equipo analizando un embudo de conversión con métricas y estrategia digital en pantallas de trabajo
    Marketing online

    Embudo de conversión: qué es, etapas y cómo optimizarlo paso a paso

    Un embudo de conversión bien planteado ayuda a convertir tráfico en oportunidades reales con acciones adaptadas a cada fase; revisa las recomendaciones.
    Leer más
    Informes de IA Max en Google Ads revisados por una profesional de marketing en un portátil con métricas y segmentos de campaña
    Publicidad Online

    Informes de IA Max en Google Ads: qué revisar y cómo interpretarlos

    Guía práctica para revisar los informes de IA Max en Google Ads y entender qué datos conviene mirar para optimizar campañas con más criterio.
    Leer más
    Diferencia diseño y desarrollo web en una mesa de trabajo con prototipo visual y código en pantalla
    Diseño web

    Diseño web vs desarrollo web: ¿en qué se diferencian?

    Diseño y desarrollo web cumplen funciones distintas, pero deben coordinarse para crear una web clara, funcional y orientada a negocio; revisa qué perfil necesitas.
    Leer más