Categorías: Diseño, Usabilidad

12 Trucos para el diseño de formularios web

Publicado el 30 marzo 2011 por .

El diseño de formularios es crucial en toda página web. Prácticamente cualquier conversión está ligada a la compleción de un formulario, y por ello se convierten en uno de los factores más determinantes si queremos lograr tasas de compleción elevadas.
Si el usuario dispone del tiempo, de la información necesaria y el precio de lo que vendemos o los valores de lo que ofrecemos satisfacen; 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 podria 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.

Tags: , ,

6 Comentarios

  1. Cristiano Dice:

    Los formularios son importantes en el posicionamiento web y la optimización web de la misma por lo que se debe saber los pasos para crearlos.

    Cristiano Ronaldo
    Seoservicesperu.com

  2. eatecnologias Dice:

    bueno me parece que lo primero es una estructura web adecuada y amigable para los buscadores, ya los formularios son complementos que vienen mas dentro del diseño, pero si buen aporte, seria bueno si compartieran como hacerlo? GRACIAS

  3. Leonardo Haring Dice:

    Excelente, muchas veces no se le da importancia que se merece a este tema. Gacias por hacernos tomar conciencia de este tema

  4. angel valencia Dice:

    Hola.
    Interesantísimo el artículo. La verdad que muchos de estos puntos no los tenía en cuenta a la hora de realizar formularios. Peeeeeeero. nunca es tarde. Todo sea por aumentar en conversiones.
    Lo que si que ha sido un adelanto es el uso de ajax y jquery en la validación. Eso si que lo suelo utilizar.

  5. Daniel Rodríguez Dice:

    Gracias por los comentarios.

    Más allá del propio diseño, es un logro que cada vez más las tecnologias detrás de un formulario (AJAX, JSP, jQuery) ya tengan en cuenta el componente de interacción y experiencia de uso.
    Vamos bien :)

    Un saludo.

  6. seo freelance Dice:

    No conocía todos estos detalles de los formularios. Intuyo que se irán estandarizando poco a poco como se está haciendo con otros aspectos de usabilidad de la web. Gracias por este post, muy interesante

4 Trackbacks

  1. Analizo: es decir, me diferencio de todos los demás | WebAnalytics.es Dice:

    [...] 12 Trucos para el diseño de formularios web por Daniel Rodríguez en Trucos Optimización [...]

  2. Sin tiempo para escribir.104, Carrero Dice:

    [...] Un experimento sencillo. vía: José Llinares12 Trucos para el diseño de formularios web. vía: Trucos OptimizaciónRespuesta Creativa A Un Plagio: Caso San Miguel Vs Estrella Galicia. vía: Carla DelgadoAnalysis of [...]

  3. Madrid Girl Geek Dinners » Blog Archive » Optimización y análisis de formularios Dice:

    [...] – Se generoso con el tamaño de la fuente y las cajas de texto,  fija un repertorio finito de anchuras estándar para las cajas de texto a rellenar y utiliza un alto suficiente para que visualmente sean espaciosas como nos aconseja Daniel Rodriguez en 12 Trucos para el diseño de formularios web [...]

  4. 12 Trucos para el diseño de formularios web | Trucos Optimización | Bibliotecas Escolares Argentinas Dice:

    [...] El diseño de formularios es crucial en toda página web. Prácticamente cualquier conversión está ligada a la compleción de un formulario, y por ello se convierten en uno de los factores más determinantes si queremos lograr tasas de compleción elevadas.Si el usuario dispone del tiempo, de la información necesaria y el precio de lo que vendemos o los valores de lo que ofrecemos satisfacen; 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 podria 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. Algunos trucos en http://www.trucosoptimizacion.com/index.php/2011/03/30/12-trucos-diseno-formularios-web/ [...]

Deja tu comentario

Síguenos en Twitter