Inicio / Publicaciones / Artículos y Ensayos / Formularios Funcionales

Consideraciones Para la Creación de Formularios Funcionales

Manfred Perez

Manfred Pérez, gerente general de Metodus, además de ser un amante del diseño y la tecnología, se caracteriza por ser muy observador y sobre todo muy trabajador.

Por: Manfred Pérez Porras

10 de noviembre, 2005

Ponemos a su disposición un conjunto de consideraciones a la hora de plantear la creación de cualquier tipo de formulario en línea.

1. Utilizar valores predeterminados siempre que sea posible.

El calendario usado en este sitio le permite al usuario seleccionar una fecha en el formato correcto, tal y como lo requiere el sistema.

Cuando los datos a ingresar por el usuario son críticos para la aprobación de una aplicación (fechas de expiración, opciones de selección única, fechas), es más conveniente ofrecerlos en un campo con valores fijos seleccionables, como una etiqueta <SELECT> u otras alternativas como calendarios en Javascript, pues el dejar estos campos como simples campos de texto a ser llenados por el cliente puede prestarse a errores involuntarios por parte del mismo, que pueden denigrar la experiencia del usuario.

2. Demostrar con ejemplos siempre que sea necesario.

Para reducir las instancias de rechazo de formularios por errores involuntarios, es recomendable poner al lado del campo a llenar un ejemplo.

Muchas veces, los usuarios no tienen una idea exacta de cómo llenar un campo determinado de forma correcta. Cuando descubren que el sistema no pudo procesar el formulario, se quedan pensando qué fue lo que hicieron mal.

Muchas veces el problema es de simple falta de comunicación. Para reducir las instancias de rechazo de formularios por errores involuntarios, es recomendable poner al lado del campo a llenar un ejemplo de cómo debería ser una forma correcta de hacerlo.

Así como la falta de ejemplos puede ser contraproducente para la eficacia de un formulario, también lo es el exceso de validación. Un formulario que procure validar (y requerir) cada campo puede ser tomado como hostil e imposible de llenar por muchos usuarios.  A menos que el sistema lo requiera en forma absoluta, es necesario ejercer un poco de sentido común y utilizar ejemplos solamente en los casos donde sea evidente que puede haber confusión o dudas entre los usuarios.

3. Distinguir claramente los campos requeridos.

Muchos formularios precisan de campos indispensables para ser procesados por el sistema del sitio web. El problema es que muchas veces no se especifica ni se indica cuáles son esos campos requeridos. Una forma de solucionar esta situación es la de utilizar la convención de un asterisco en rojo, ya sea al lado de la descripción del campo o inmediatamente después del campo en cuestión del formulario, e indicar al principio del formulario que dichos campos son requeridos.

También se puede recurrir al uso del color, o sea, coloreando la descripción del campo a llenar de rojo, o indicar con un borde rojo alrededor del campo de texto, etc. Lo importante es que se vea claramente que dicho campo es requerido, sin dar lugar a dudas.

4. Contar con un sistema de validación.

El formulario de contacto de metodus.com, el cual está basado en Java Server Pages (JSP).

Evidentemente, no basta con las medidas descritas anteriormente para crear un formulario a prueba de errores; para un sistema verdaderamente infalible, es preciso contar con un sistema de validación de campos, ya sea por medio de Javascript o, mejor aún, un sistema basado en soluciones backend como PHP o Java. La ventaja de un sistema basado en backend es el poder crear mensajes de error coherentes, en armonía estética con el sitio y con aspecto profesional, contribuyendo a mejorar la experiencia de usuario. El ejemplo abajo corresponde al formulario de contacto de metodus.com, el cual está basado en Java Server Pages (JSP).

Idealmente se pueden combinar un sistema de validación basado en Javascript (para validación inmediata de campos antes de enviar el formulario) y backend basado en PHP, Java, etc (Para la validación final).

5. Utilice un lenguaje claro, sencillo y útil.

¿Qué se supone que debo entender por “el convenio no está registrado”?

Los formularios y sus correspondientes mensajes de error no son el espacio para “experimentar” con explicaciones rimbombantes de lenguaje confuso o, en el otro extremo, mensajes crípticos y parcos que son esencialmente inútiles.

Este mensaje fue la respuesta del web del Banco Nacional a la verificación de un recibo pendiente de pago. ¿Qué se supone que debo entender por “el convenio no está registrado”? ¿Que el Banco no respalda la entidad a la que pretendo pagar? ¿Qué yo cometí algún error al enviar el formulario? ¿Qué se “cayó el sistema”?

Cuán diferente sería mi reacción si hubiera, en vez de “el convenio no está registrado” un mensaje que rece más o menos así:

“La entidad de pago seleccionada no es capaz de aceptar su transferencia en este momento. Por favor intente más tarde, o bien seleccione una de las siguientes opciones: 1) Elija otra cuenta (combo box), 2) o bien seleccione otro tipo de transacción.”

Un mensaje mucho más útil y claro, ¿no? De esta manera, no solamente se orienta al usuario a tomar decisiones en momentos críticos, sino que por añadidura se salvaguarda la fidelidad del mismo y la reputación de la empresa oferente del servicio. Hay mucho que ganar en explicar las cosas de forma simple, clara y sencilla... y mucho que perder si no se hace.

6. Indicar el límite de caracteres en los campos que así lo ameriten.

Muchas veces, es preciso limitar los caracteres que el usuario puede aportar en ciertos campos de un formulario, como la clásica sección de “comentarios”, dirección, etc. Cuando esto sucede, es frustrante ver cómo, después de redactar un texto en un campo de éstos, la validación nos rebote el formulario diciendo simplemente que “es muy largo”, cuando no se nos ha indicado cuán largo es posible que sea nuestra redacción. 400 caracteres? 500? 10.000?

Esto se soluciona de dos maneras: 1) Ya sea indicándole al usuario la extensión máxima (Ej: “Límite máximo: 500 caracteres, incluyendo espacios”) o 2) utilizando un contador de caracteres en Javascript, el cual va restando caracteres a medida que el usuario va escribiendo en el campo e indicándole al usuario cuántos caracteres tiene disponibles.

7. Sugerir alternativas siempre que sea posible.

Google puede “mapear” unos términos a otros, lo cual le permite crear este sistema de “inteligencia artificial.”

En caso de que la información suministrada por el usuario (por ejemplo, una palabra enviada a un motor de búsqueda) no ofrezca los resultados deseados, es aconsejable además del mensaje de error sugerir alternativas a elegir para el usuario. El buscador Google ofrece una de las mejores puestas en práctica de este sistema:

A través de un análisis exhaustivo de sus server logs (bitácoras de datos de servidor), Google ha compilado un sistema que agrupa las variantes más comunes de términos de búsqueda populares (en este caso, experiencia de usuario), incluyendo errores. De esta forma, Google puede “mapear” unos términos a otros, lo cual le permite crear este sistema de “inteligencia artificial” que hace posible que al escribir “esperiencia usario” Google me pregunte si lo que realmente estoy buscando es “experiencia usuario”.

Es cierto que este nivel de sofisticación no siempre esta al alcance de todos los desarrollos web, pero en su lugar es posible compensar con alternativas tales como sugerencias de productos alternativos, caso de un sitio de e-commerce (“El producto X no fue encontrado. Sin embargo, le sugerimos los siguientes productos...”) o mostrar alternativas de enlaces a otras secciones del sitio que puedan ayudar al usuario.

8. Deshabilitar los botones de envío de formularios una vez enviado el mismo.

Muchos sitios web —especialmente los de comercio electrónico— utilizan advertencias intimidantes tales como “Por favor no oprima el botón Enviar más de una vez, de lo contrario se le cobrará doble” o algo parecido. Es mucho más recomendable deshabilitar el botón de envío (Submit) mediante una función sencilla de Javascript, o que el formulario vaya directamente a una página intermedia que indique que el proceso de envío está ejecutándose.

9. Manejar un diseño claro y amistoso.

Un ejemplo de formulario donde los elementos están bien equilibrados, hay suficiente separación entre los mismos y forman un conjunto tanto usable como agradable a la vista.

A la hora de confeccionar un diseño de formulario mediante HTML y CSS, hay varios puntos a tomar en cuenta:

Que haya “aire” (espacio) entre los campos. Un formulario con campos demasiado seguidos uno del otro sólo se presta a confusiones.

Si se manipula el aspecto de los elementos <INPUT>, <SELECT> o <TEXTAREA> mediante CSS, evitar en lo posible caer en la tentación de utilizar tipos de letra demasiado pequeños y/o exóticos, o colores y bordes que confundan a los campos del formulario con otros elementos. No se puede sacrificar la usabilidad en pos de la “estética”, y además siempre hay maneras de encontrar un balance entre ambos aspectos. Cabe mencionar que en navegadores como Safari (en Mac OS X) los atributos de CSS sobre los elementos HTML de formularios carecen de efecto, pues siempre son mostrados con valores de color y forma del OS X por default.

No olvidar marcar en forma visible y distinguible los campos que sean requeridos por el sistema.

Lista de artículos recientes

 

Accesibilidad | Sobre Metodus | Mapa de Sitio | Empleos | Contáctenos
©2000-2007 Metodus I.P.T.I., S.A. Derechos de Autor Reservados.
El uso de este sitio está sometido a nuestra Política de Privacidad | Aviso Legal
Validación: XHTML 1.0 Strict | CSS2 |  AAA | 508