Formularios usables

Un formulario usable es un formulario que será sin dudas completado y enviado con éxito. Uno de los grandes problemas al desarrollar la parte de compras o contáctenos de un sitio es que damos por sentado muchos aspectos que un usuario no.

Rápido que me aburro!

Una de las principales reglas de la usabilidad es aprender que el navegante o el usuario de un sitio, no tiene tiempo y es esencial tener esto en mente a la hora de realizar cualquier desarrollo para la web que contemple la interacción con el navegante. Los formularios son el mejor ejemplo de esto.

A nadie le gusta completar formularios, ni siquiera a la persona con más tiempo del mundo. De ahí que existen tantas herramientas que auto-completan los formularios para ahorrarnos tiempo.

No todas las personas que navegan Internet están apaciblemente sentadas en su silla y con un café en la mano. Algunas están conectándose antes del almuerzo en sus trabajos, otras contando con solo minutos para realizar una operación antes de tener que pagar la hora en un cybercafé.
La cantidad de situaciones en las cuales los usuarios se conectan es infinita pero todas ellas tienen una constante en la que insisto: el tiempo.

A nadie le gusta perderlo, nadie lo tiene.

¿Tipo de sangre?

Cuantas veces quisimos completar un formulario lo más rápido posible para salir del paso y nos encontramos con infinitos campos de texto para llenar terriblemente innecesarios en el camino?

Claro, todo depende del tipo de formulario sea. Si hablamos de un formulario para una nueva cuenta de e-mail, un formulario de contacto o un billing*.
El secreto para todos ellos es el mismo: sólo la información absolutamente necesaria.

Números de fax por ejemplo. Son totalmente innecesarios en la mayoría de los casos. Logrando el contacto mínimo luego puede completarse la ficha del usuario si en realidad necesitamos enviarle un fax al mismo.

¿Qué hice mal?

No hay nada más frustrante que no saber que se está haciendo mal. Algunos formularios que hemos visto en pruebas, carecen de "campos obligatorios".
Hay dos alternativas: o el equipo de desarrollo pensó que todos los campos debían ser completados, o agregaron los campos obligatorios de manera errónea.

• Campos obligatorios no presentes
  Muchos sitios piden al usuario completar todo el formulario para poder enviarlo cuando en realidad necesitan menos de la mitad de los datos que obligan al usuario a completar. Las excepciones son los sitios que contienen formularios de billing y algunos formularios de contacto.

• Campos obligatorios presentes, pero no presentes
  Aver, que quiero decir con esto? Que los campos obligatorios están presentes pero sólo después que usuario comete el error de no llenarlos.

Muchos sitios dan por sentado que el e-mail, el nombre de usuario o el código postal son campos que los usuarios reconocerán como obligatorios aunque no haya ninguna indicación de ello.
Luego de que el usuario envió el formulario sin completar cierto campo obligatorio (digamos, el e-mail), el sitio vuelve a mostrar el formulario indicándole que ha ocurrido un error y que debe llenar los campos resaltados.

Para este entonces, el usuario ya está frustrado y tal vez piense que la culpa fue suya cuando en realidad, hizo lo correcto.

Este error tan común se soluciona sencillamente agregando:
· Un asterisco (a un lado del campo de texto)
· La palabra "Obligatorio" (a un lado del campo de texto, o debajo del mismo)
· Títulos en bold para los campos obligatorios.

Lo mejor es minimizar la cantidad de campos obligatorios. Si no logramos un equilibrio en este tema, el usuario tal vez se canse de tratar y con un click, esté fuera de nuestro sitio.

Ok, anota mi móvil… es quincecincocientosetentit.. perdón

Verdad que es difícil? Este tema puede parecer muy obvio pero muchos desarrolladores se sorprenderían de la cantidad de veces que se nos pasa (a todos, somos todos humanos) el crear un buen campo de texto para ingresar un dato en concreto.

A la hora de ingresar nuestro teléfono o cualquier otro dato (fecha, número de tarjeta de crédito) en muchísimos sitios webs, este nos propone reglas que solamente lo benefician a él y no a nosotros (los usuarios).

Estas son:

· No separar con puntos "."
· Ingresar solamente números y no caracteres
· No separar con espacios vacíos
· No separar con barras "/"
· No separar con guiones "-"

Yo cada vez que ingreso un teléfono lo hago de la siguiente manera:

Teléfono: Pero la mayoría de los sitios nos obligan al error cuando por conveniencia (generalmente para poder recibir o transportar ese dato) nos dicen que ingresemos nuestros teléfonos u otro dato así:

Teléfono: Nos obligan a releer dos o tres veces el número que ingresamos y en la mayoría de los casos cometimos un error al hacerlo. Nuevamente hacemos sentir al navegante como un idiota.
Todos usamos diferentes formatos para ingresar datos en formularios. Algunos separamos nuestro número de tarjeta de crédito con un punto, otros lo hacen con una línea, otros con un numeral, algunos con un simple espacio, etc.
Debemos crear campos de texto que acepten cualquier tipo de data.

¿Como por ejemplo?

Un buen campo de texto debe ser completado casi sin pensarlo. Una buena manera de lograr esto es dando el buen ejemplo (y no estoy bromeando). La mayoría de los sitios poseen un buscador, pero cuantos de ellos agregan debajo del campo de texto un ejemplo?
La mayoría de los grandes buscadores lo hacían en un momento. Muchos buscadores no reconocen la frase "Los Simpsons" y devuelven 0 resultados. Pero resulta que nuestro query estaba mal escrito. Luego de unos minutos de investigación, encontramos que debíamos haber escrito "Los+Simpsons".

Una solución a esto es agregar debajo del campo de texto un pequeño ejemplo en itálica.

Esto también es recomendable para los campos en los que hay que ingresar fechas, códigos postales, etc. ¿Cómo sabemos si debemos ingresar "Día/Mes/Año" o "Mes/Día/Año" ? Pues aclarando con un ejemplo caramba!

Ok, ahora solo presiono Envi... NO!

Esto suele sucedernos a TODOS muy a menudo. Ya sea por un arranque repentino de prisa, o porque utilizamos la tecla TAB demasiadas veces. El botón de Reset es el diablo. Muerde. No hay que agregarlo ya que en la gran mayoría de los casos, solo nos trae un problema.

Imagínate haber llenado 3 páginas de un formulario para tu declaración impositiva y te das cuenta que acabas de cometer un error en uno de los datos que ingresaste. Le haces saber al buen caballero que te ha dado el formulario para completar que te has equivocado en uno de los campos y este muy sonriente LO ROMPE y te devuelve uno vacío. Ahora (iracundo) debes completar todo el formulario otra vez, o levantarte y alejarte de ese lugar.

En la web sucede exactamente lo mismo. El botón Reset existe para traer problemas. Al presionarlo y con un simple comando toda la información ingresada se pierde y solo queda la frustración de volver a comenzar.

Si un usuario se equivocó en un campo, lo corregirá de inmediato (siempre y cuando se entere o el formulario mismo se lo haga saber) pero solo estará dispuesto a corregir ese dato erróneo y no todo un formulario otra vez.

Por favor espere

Simples palabras para una simple acción. Esperar. En la Web significa no más de 4 segundos. Muchas veces al enviar un formulario de cualquier tipo, la gente desesperada por la tardanza del mismo presiona 4 o 5 veces el botón de envío creando datos repetidos en la base de datos (o metiéndose en problemas).

Algunos pensarán: "seguro, se soluciona indicándole que lo haga solo una vez" Depende el caso. En la mayoría de las veces, no se soluciona PARA NADA indicándole al navegante que solo haga click una vez para enviar el formulario.
Muchos formularios manejan datos muy delicados como para al momento de enviarlos agregar una leyenda debajo que diga: "POR FAVOR solo presionar UNA VEZ".

Eso nos suena a que si lo hacemos dos veces, la pantalla explotará o algo extraño ocurrirá con nuestra información privada. Lo mejor es conseguir un Script Java que bloquee el botón de envío una vez presionado. El colega Manuel Razzari tiene justo uno de esos horneado hace bastante tiempo y nos lo ofrece en su web.

Con esta información, ya es más que suficiente para poder crear un formulario usable para nuestros navegantes, pero todavía hay muchos temas con respecto a los formularios que hacen de ellos un arma perfecta de captar datos.