Formularios

Uno de los peores momentos a la hora de utilizar una aplicación o sistema es el de la introducción de datos. Formularios muy extensos y complicados hacen que el usuario desista en su intento de completarlos, por ello deben solicitar la menor cantidad de información posible que les permita cumplir su objetivo.

Los siguientes puntos nos ayudarán a reducir el número de campos de un formulario:

• Reutilizar campos cuando sea posible.

  Por ejemplo, en ocasiones se puede utilizar el correo electrónico como nombre de usuario.

• Deducir información a partir de otra que esté disponible.

  Por ejemplo, a partir del código postal podemos obtener la localidad y la provincia.

• No pedir información dos veces.

  A la hora de introducir direcciones, es muy frecuente solicitar varias con diferentes objetivos. En estos casos se debe dar al usuario la posibilidad de reutilizar la dirección escrita con anterioridad para no tener que reescribirla.

• No fragmentar la petición de información.

  Por ejemplo, al solicitar una dirección no fragmentar en diferentes campos el tipo de vía, el nombre de la misma, el número, portal, planta, etc.

Cada formulario debe poseer un título que exprese claramente su función.

Al crear formularios con una sola columna se estará creando una única forma de recorrer los campos y se reduce la probabilidad de que el usuario se salte alguno. A pesar de que el formulario incrementará su tamaño vertical, ganará en claridad y facilidad de uso. Además todos los campos deben estar alineados entre sí a la izquierda.

Agrupar los campos de forma lógica y separar cada grupo con espacios en blanco. Además intentar situar todos los campos obligatorios al comienzo del formulario para que al usuario le sean más fáciles de localizar y su cansancio de a la hora de introducir datos sea menor.

Cuando redactamos una pregunta que aparecerá en un formulario, ésta siempre debe estar redactada de forma afirmativa. Por ejemplo, utilizaremos "Deseo recibir una notificiación por email" en vez de "No deseo recibir una notificación por email".

Los campos deshabilitados deben estar diferenciados utilizando un fondo de color gris claro.

La longitud de un campo debe ser suficiente como para mostrar toda la información que contiene. Es una buena práctica añadirle algunos píxeles más para que el texto no termine exactamente donde termina el campo.

Los campos que posean una longitud similar deben homogeneizarse con la longitud del mayor para que sean similares en tamaño y reducir así el ruido visual.

Se debe evitar el uso de combos cuando poseen un número elevado de opciones. En estos casos es más rápido ofrecer al usuario la posibilidad de escribir el texto que desea, en vez de buscarlo entre las diferentes opciones. Además, siempre debe aparecer un ítem que englobe todas las opciones que no están recogidas por los demás, como podría ser "otros".

Si un combo posee 5 opciones o menos debe ser sustituido por un radio button, que faciliará la búsqueda de la opción correcta sin necesidad de ninguna acción por parte del usuario. Estas opciones siempre deben ser claramente excluyentes.

Cuando se utilicen combos o radio buttons siempre se debe seleccionar por defecto la opción más probable. Si esto impide que el usuario pueda volver al estado inicial del formulario, incluir una opción que excluya a todas las demás, por ejemplo "Ninguna".

Cuando se utilice un check box para mostrar ocpiones que no son obligatorias, como podría ser solicitar el envío de cierta información, éste debe estar desmarcado por defecto.

Cuando tratamos con campos de tipos concretos como puede ser el DNI, las fechas, los nombres de usuario, etc. es recomendable limitar los caracteres que pueden introducirse para reducir la probabilidad de error.

Si los campos deben completarse con un formato específico, siempre debe mostrarse un ejemplo del mismo.

Existen aplicaciones o sistemas en los que cuando se está insertando información en ciertos campos, como por ejemplo cuentas bancarias, se producen saltos del foco de uno a otro. Estos saltos deben estar siempre provocados por el usuario ya que el hacerlo de forma automática dificulta la corrección de caracteres equivocados, además de obligar a mirar la pantalla para saber sobre qué campo se está actuando.

Utilizar la tecla "Intro" o "Enter" para ejecutar la acción principal del formulario es un estándar extendido. Esto permite al usuario ejecutar la operación asociada en cualquier momento desde cualquier punto del formulario, sin necesidad de pasar por el resto de campos ni de utilizar elementos como el ratón para evitarlo.

Los campos de un formulario deben tener un orden de tabulación que permita recorrerlos en el mismo orden en el que son mostrados en la pantalla. Además, al acceder a una pantalla con un formulario el foco se debe encontrar en el primer campo del mismo.

Un botón de un formulario no debe contener una etiqueta que indique una acción de caracter general. Su nombre debe indicar una acción específica.

Por ejemplo, utilizar "Buscar" en vez de "Aceptar".

Si al enviar un formulario se producen errores, se debe informar de ellos en la parte superior del formulario utilizando para ello un texto claro y sencillo y en un color con suficiente contraste. Debe quedar totalmente especificado qué campo ha provocado cada error y cómo solucionarlo.

Los campos que han producido los errores deben mostrarse destacados. Para ello se debe utilizar un cambio de color y algún icono que también se encuentre al inicio de los mensajes de error.

La información que el usuario haya introducido en otros campos de forma correcta no debe perderse para no obligar a que vuelva a introducirla.

Cuando un usuario envía un formulario debe ser informado de si el proceso se ha completado correctamente o si se ha producido algún error.

El diseño debe ser ordenado:

• Las etiquetas deben estar siempre a la izquierda del campo.

En un formulario con datos familiares y fácil de completar, las etiquetas podrán estar alineadas a la derecha.

En un formulario complejo, las etiquetas deben estar alineadas a la izquierda.

• Las respuestas de los campos "radio button" y "check box" deben estar situadas después de los mismos.
• Si un "radio button" posee más de dos respuestas, éstas deben estar colocadas en vertical.