Cuando diseñamos formularios para la web es escencial
seguir un proceso que a través de sus diferentes pasos
nos guíe en la contrucción de sistemas usables y accesibles.
Antes que nada, es necesario incluir una fase de análisis
que nos ayude a determinar lo que necesitamos y cuales
son los medios que se utilizarán para lograr nuestros objetivos.

Nota: Este documento puede ser un poco técnico, sepan disculpar las molestias

En la fase de análisis se desarrolla, en base a los requerimientos, un modelo lógico del sistema de recolección de información que incluya:

• Las funciones y caracterísitcas del formulario.
• Los inputs necesarios, qué clase de outputs necesitamos y como va a ser procesado.
• Los recaudos tecnológicos que se deberán tomar según el contexto (lenguajes de programación, compatibilidades, etc.).

Conociendo basicamente cual es el objetivo del formulario, a quién está dirijido y cómo quieren que se les devuelva la información, tendremos un panorama acerca del diseño funcional del formulario, los campos necesarios, la programación a utilizar, la forma de almacenamiento y de entrega de la información a los encargados de recopilarla y analizarla.

En la construcción del un formulario no hay ninguna ciencia oculta, simplemente como todo, se trata de sentido común, los formularios deben ser fácilmente completados por los usuarios, par ello debe, minimamente:

1. Proveer títulos y consignas claras que le indiquen al usuario lo que se requiere para la interacción.
2. Agrupar lógicamente y de forma homogénea los campos, por medio de elementos de diseño como por ejemplo marcos que le den al usuario una idea de bloques que harán más legible el conjunto.
3. Prescindir, dentro de lo posible de la necesidad de re-ingresar datos.
4. Ofrecer alternativas al campo de texto libre antes respuesta predecibles, más que nada para prevenir errores de tipeo.
5. Diseñar formularios con un flujo apropiado, es decir, construyendo el form en base a un orden de tabulación, es decir, que se pueda recorrer enteramente con la tecla "Tab", haciendo que el cursos vaya de un campo al siguiente.
6. Tratar de que los formularios sean cortos, no más de una página y que los datos que se pidan sean coherentes y consistentes con los objetivos del form. Si no se puede hacer en una sola página, se le debe indicar al usuario, en cada fase, mediante algún indicador, en que fase del formulario se encuentra y cuanto falta para la finalización del mismo.
7. Cuando se validan los datos ingresados en el formulario por parte de los usuarios, se deben evitar los mensajes de error muy técnicos que desalientan al usuario a desandar su camino para arreglar algo que no comprenden. Resulta muy util indicar el campo exacto del error acompañado de la descripción del mismo y la posible solución.
8. El usuario debe tener la posibilidad de cambiar sus respuestas antes de hacer el clic final.
9. Prescindir de exigir datos inútiles, realicen una planificación adecuada y lo más austera posible de los datos que han de exigirle a los usuarios para que completen en el formulario.
10. Cuando se confeccione el formulario el boton de submit debe estar a la izquierda y el de reset a la derecha, para evitar que el usuario luego de haber completado los datos siguiendo un orden de tabulación, los borre sin querer...
11. Testear el formulario, antes de ponerlo on-line. ¡Nunca con los usuarios finales!.

Elementos de un formulario

El diseñador al componer un formulario posee muchas y diversas formas de presentar la información, puede hacerlo a través de campos de texto, listas, listas desplegables, check boxes, radio buttons, y otras opciones. Pero debe tener cuidado en la construcción porque no todo sirve para todo y hay elementos que son más convenientes que otros para ciertas funciones, Por ejemplo:
Un campo de texto debe pensarse de acuerdo con la información que se espera recolectar a través de él. Es decir sus dimensiones tienen que responder a ello, debemos saber que si pedimos un comentario, éste probablemente ocupará más de una simple línea o que si pedimos un código postal el campo no deberá tener más de n cantidad de caracteres. El tamaño del campo les acerca, a los usuarios, una idea de la clase de información que se está recavando.
Una lista puede utilizarse cuando los valores que contiene son conocidos y el usuario puede seleccionar más de un valor. tambien es una buena opción para usuarios que no utilicen el mouse a causa de algun discapacidad.
Un menú desplegable es util si el espacio es limitado, aunque no es muy aconsejable. También es recomendable utilizarlo si los items de la lista son conocidos al usuario, por ejemplo una lista de paises en donde el usuario sólo necesita conocer una opción (su pais).

Los radio Buttons son eficientes ya que permiten detectar inmediatamente las opciones disponible, es recomendables manejar un reducido número de items, (2 a 6). La característica escencial de los radio buttons es que sólo permiten seleccionar una opción por vez. Para lo cual si queremos dejar que el usuario tenga la posibilidad de múltiples opciones debemos utilizar check boxes.

Los buttons poseen funciones restringidas, no deben ser utilizados para otra cosa que no sea el disparador de la acción del formulario o su funcion de reset básicamente, se desaconseja su utilización como enlaces a otros documentos, ya que su tamaño y predominancia visual es contrastante, una pantalla llena de buttons generalmente luce muy poco amigable.

¿Qué elementos debe tener un formulario para ser accesible?

Todos los campos de un formulario (campos de texto, radio button, check box, etc.) deben tener asociado:

1. un label descriptivo. que es un tag que encierra el campo y lo nombra. Se debe tener en cuenta que el label siempre debe estar ubicado a la izquierda del campo que describe, salvo para radio buttons o check boxes en donde puede ir a la derecha del campo.
2. un accesskey, que es un atajo de teclado (shortcut) para poder acceder al campo independientemente del dispositivo, por ejemplo puede accederse desde el teclado. Se presenta como un atributo del tag label.
3. un tabindex, que es una variable incluida tambien inluída dentro del label que indica el orden que seguirá la tabulación.
4. un fieldset, el cual es un elemento utilizado para agrupar campos y ayuda al entendimiento en formularios largos. El fieldset contiene un tag legend que le da un título a la agrupación.
5. un submit button que no utilice javascript que puede no funcionar correctamente en algunos navegadores.
   

Ejemplo de código de formulario accesible:

<form name="form1" method="post" action="">
<fieldset>
<legend>Formulario de prueba</legend>
<label for="nombre" accesskey="n" tabindex="1">Nombre<input type="text" name="nombre"></label>
<label for="apellido" accesskey="a" tabindex="2">Apellido<input type="text" name="apellido"></label>
<input type="button" accesskey="e" tabindex="3" value="Enviar">
</fieldset>
</form>.

Para terminar, les recomiendo que usen los formularios con prudencia, pueden ser un arma poderosa para la recolección de datos estadísticos, pero a los usuarios no les interesa llenar formularios interminables ni complicados.