El diseño de formularios web

El diseño de formularios es crucial en toda página web. Prácticamente cualquier conversión pasa por completar un formulario, y por ello se convierten en uno de los factores más determinantes si queremos lograr tasas de conversión elevadas y aumentar el número de contactos recibidos desde nuestra página web. Si el usuario dispone del tiempo, de la información necesaria y el precio de lo que vendemos o los valores que ofrecemos satisfacen a nuestros visitantes; no dejemos de lado el diseño del formulario puesto que esto sólo conducirá a la decepción. Contrariamente, si el usuario no tiene tiempo, dispone de poca información o el precio de lo que ofrecemos es poco convincente; un cuidado diseño de formulario podría incluso cambiar la percepción del tiempo, la información y el precio, motivando al usuario a convertirse en cliente. Esos misterios de la experiencia de usuario, que nos hacen ser irracionales en un momento dado.

Hay que sacar provecho. Aquí algunos trucos…

Trucos para diseñar formularios web

  1. Alinear los campos de texto a la izquierda y las etiquetas arriba y a la izquierda.
    Según ciertos estudios de usabilidad se ha notado un beneficio al uso de formularios situando las etiquetas inmediatamente encima de las cajas de texto y alineadas a la izquierda.

    Campos alineados a la izquierda

  2. El tamaño de la fuente y cajas de texto debe ser generosos.
    El tamaño de las tipografías para las etiquetas de cada campo debe ser prominente, sobretodo el alto de las cajas de texto. No tener miedo en esto, puesto que las cajas son el elemento objetivo de todo formulario, deben verse suficiente y ser “visualmente espaciosas”.
  3. Fijar un repertorio finito de anchuras estándar para las cajas de texto a rellenar.
    Es interesante definir un mínimo de, por ejemplo, 3 anchuras de caja de texto base, y utilizar estas según sea el campo a rellenar.
  4. Utiliza radio button o desplegables adecuadamente.
    Si cabe completar cierto campo en el que se ofrece más de una opción predefinida, utilizar radio button cuando se trate de menos de 3 opciones (por ejemplo “Sexo”) y un desplegable cuando se trate de más de 3 opciones.

    Radio button para menos de 3 opciones

  5. Utilizar una llamada a la acción prominente y que cumpla las buenas prácticas del diseño de botones para la web.
    También, si situamos etiquetas y campos a rellenar alineados a la izquierda, también situar el botón alineado a la izquierda y dentro del flujo de escaneo del conjunto de elementos del formulario. También es oportuno añadir un enlace “<< Paso anterior” sin que este tenga apariencia de botón.

    Botón siguiente paso

  6. Incluir menú de proceso. Resaltando la etapa actual y siendo los textos enlazables.
    En formularios con más de una página conviene añadir indicadores sobre el proceso que notifiquen el paso o página en la que nos encontramos. Estos indicadores de proceso también deberían ser enlaces que permitan saltar a pasos anteriores.

    Menú de navegación etapas formulario

  7. Utilizar sistema de autocompletado para ciertos campos.
    La idea aquí es que mientras el usuario escribe se presenten de manera dinámica un listado de opciones acordes con el texto introducido. Esto resulta práctico en campos como “ciudad”, “país”, “estudios”, “oficio”, etc. Esta es una idea alternativa al desplegable que agilizará la introducción de datos.
  8. El sistema deberá formatear campos de tipo fecha, no el usuario.
    Por ejemplo “Fecha de nacimiento”, deberá ser formateado por el propio sistema a la sintaxis deseada (dd/mm/aaaa) y nunca esta labor debería recaer en el usuario. Dejar esta labor en manos del usuario es engorroso y fomentará errores. La solución óptima para este tipo de campos pasa por utilizar 3 desplegables para: día, mes y año.

    Campo de fecha

  9. Utilizar un sistema de validación de campos dinámico.
    La propuesta de validación de corrección de campos debe ser dinámica, mostrándose está conexa a la caja de texto y validando la correcteza o no de cada campo a medida que estos sean rellenados por el usuario. La información se deberá mostrar de forma clara y descriptiva haciendo uso de texto, colores e iconografía.

    Validación de errores formulario

  10. Campos de difícil interpretación deberán mostrar ayuda auxiliar.
    La ayuda auxiliar para ciertos campos se hace visible con iconografía situada a la derecha del campo, y mostrando caja flotante cuando se sitúa el cursor encima. Utilizar colores acorde con el carácter informativo del elemento.

    Ayuda auxiliar en campos difíciles de interpretar

  11. Incluir información de soporte a lo largo del formulario.
    Por ejemplo, en una columna latera paralela al formulario se puede incluir información contextual sobre el propósito de cada uno de los bloques en los que está dividido el formulario: datos personales, datos de pago, etc. Dar a este texto auxiliar un tono informativo, de soporte de confianza y de persuasión.

    Información de soporte

  12. Sólo mostrar “(opcional)” o “(obligatorio)” cuando estos campos son una minoría.
    Como norma, cuando más de la mitad de los campos son obligatorios, deberán identificarse como “(opcional)” aquellos que sean opcionales y prescindir de cualquier recurso para identificar aquellos obligatorios. Viceversa cuando la mayoría sean opcionales.

 

Fuente: Daniel Rodríguez.

 

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada.