Categorías: Diseño, Usabilidad

Publicado el 30 marzo 2011 por Daniel Rodríguez.

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

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.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.