Informe de Formularios fáciles de usar
Como desarrollar un formulario fácil de usar.
Todo desarrollo de un formulario depende de su utilidad. Es comprensible que los servicios exclusivos se salten muchas de estas reglas, ya que son la única opción para obtener ese servicio.
1º ¿Qué datos necesitamos del usuario?
Lo primero es establecer que datos solicitaremos al usuario, dividiremos estos datos en obligatorios y opcionales. Existen recomendaciones de usar únicamente datos obligatorios pero no vamos a optar por esto ya que existen casos donde es imposible suprimir los campos opcionales.
En algunos casos como en el comercio electrónico se suelen dividir los formularios en pasos (Paso 1 de 3…). En este caso consideramos muy importante indicar claramente el número de pasos, permitir volver en cualquier caso al paso anterior o en el caso de error, poder recuperar el paso en el que se encontraba el usuario.
Formulario por pasos
Los campos obligatorios deberían indicarse con un asterisco, pero en un formulario bien desarrollado, los campos opcionales serán menos y podremos identificarlos claramente con una etiqueta “opcional”. Como se muestra en la imagen:
También deberán indicarse (siempre que sea posible) que beneficio se obtiene por rellenarlo.
2º Las etiquetas (Layers)
Las etiquetas son el texto que define el contenido de un control:
Las recomendaciones más importantes para la definición de las etiquetas son las siguientes:
1. Conviene presentar los campos agrupados y ayudados de un epígrafe:
2. Usar una fuente clara y a la que el usuario esté acostumbrado. Por ejemplo Tahoma (se usa en windows) o Verdana (la más extendida en la web).
3. Escribir un texto breve y en un lenguaje rápidamente comprensible. Capitalizar los términos (primera letra en mayúsculas) y situar dos puntos al final de cada campo.
4. Alinear preferentemente a la izquierda, pero si una etiqueta es demasiado larga (o no cabe en una sola línea) deberemos cambiar la alineación para facilitar la asociación con el elemento.
5. La separación entre la etiqueta y el control deberá ser de 12px.
Un buen ejemplo de formulario. Yahoo.com
6. Para aquellos campos que sirva de ayuda deberemos añadir un pequeño texto, cuando esta explicación necesite de mucho espacio podremos resolverlo como lo hace yahoo:
7. Cuando un campo esté desactivado deberá estarlo su etiqueta :
8. En las etiquetas de las casillas de verificación se deberá poder hacer clic.
3º Los controles (Inputs)
Los controles son los elementos del formulario que permiten la entrada de información:
Para el tamaño de los controles se recomienda, siempre que se pueda, diseñarlos con la longitud exacta que valla a tener su contenido.
Un campo que solo debería admitir un tipo de caracteres (numéricos, alfabéticos…) sólo debería permitir introducir ese tipo de caracteres, bloqueando los demás a través del teclado.
En casillas de verificación conviene no seleccionar por defecto ningún resultado, ya que el usuario puede tentarse de no responder al dejarlo por defecto.
En las listas de opciones conviene recurrir a una opción que ayude a identificar el campo.
Si deseamos poner una por defecto, deberemos poner o la más habitual o la que permita una mejor identificación del campo.
Utilizar campos no activos para advertir al usuario de la posibilidad de introducir un dato aunque no esté disponible.
Dejar obvio el botón para el envío del formulario, tanto por su situación dentro del formulario como por su imagen.
Es recomendable bloquear los botones para evitar los re-envios y anular la opción de recargar página. En el caso de un formulario con varios pasos, debería permitir volver al paso anterior sin perder los datos.
Si solicitamos al usuario repetir un campo para confirmar que lo ha escrito bien, deberemos bloquear el copiado y pegado para evitar que escriba mal ambas y bloquear el usuario para siempre. Conviene no permitir copiar y pegar, para evitar fallos.
Revisando los campos
Revisaremos los campos únicamente cuando el usuario envíe el formulario, y no antes.
En este momento mostraremos todos los errores, bloqueando los datos que sí han sido bien completados, permitiendo únicamente rellenar los campos erróneos. Ver imagen.
Francisco Erlich
Más información y fuentes:
Novedades!
Sindicación