Formularios Usables y Accesibles

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:

Proveer títulos y consignas claras que le indiquen al usuario lo que se requiere para la interacción.
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.
Prescindir, dentro de lo posible de la necesidad de re-ingresar datos.
Ofrecer alternativas al campo de texto libre antes respuesta predecibles, más que nada para prevenir errores de tipeo.
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.
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.
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.
El usuario debe tener la posibilidad de cambiar sus respuestas antes de hacer el clic final.
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.
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...
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.

Usuarios que han visto este tema también han visto...

- ¿Por qué Drupal?
- Uso de imágenes en la web
- Qué es Cross Browser
- CiberTecnia: El nuevo marketing en Internet
- Diseño centrado en el usuario

- Versión imprimible de este documento

- Enviar por e-mail este documento