Usabilidad al diseñar formularios de contacto
En el desarrollo de un sitio web, una de las páginas imprescindibles es la que destinamos para que nos contacten y es en esta página donde generalmente mostramos un formulario de contacto; pero ¿siempre este formulario es tan práctico y útil para el usuario como esperamos?
A continuación trataremos algunos aspectos importantes a tener en cuenta para darle un toque de usabilidad a nuestro formulario de contacto.
Lo primero en el desarrollo de un formulario de contacto o de cualquier aplicación para la web es que los usuarios de Internet siempre navegan por la red de redes con poco tiempo. Por lo que es recomendable realizar los formularios de contacto con la cantidad de campos mínimos necesarios, evitando con esto la pérdida de tiempo para el usuario que nos visite.
Si queremos que el usuario se sienta cómodo en nuestro sitio debemos facilitarle las cosas y guiarlo. A continuación ponemos a su disposición las prácticas necesarias para lograr la comodidad del visitante en nuestro formulario de contacto.
Resaltemos los campos obligatorios
Es muy recomendable marcar los campos obligatorios de nuestro formulario de contacto cuando se muestra la página por primera vez y con esto evitar mensajes de error como este: “Debe completar el campo email” que aparecen cuando el usuario ha completado su formulario olvidando escribir su correo electrónico y ha hecho clic en el botón Enviar.
Existen varias formas de resaltar estos campos:
- Colocando un asterisco al lado de los campos obligatorios.
- Marcando en negrita los campos obligatorios.
- Agregando la palabra “Obligatorio” al lado del campo en cuestión.
- Utilizando código javascript para validar que el campo no se encuentre vacío cuando este pierda el foco.
En las dos primeras soluciones se debe aclarar al usuario, en el inicio de la página, que los campos marcados con la forma que se escoja deben completarse obligatoriamente, para que no quede lugar a dudas.
Ejemplo o descripción de los campos
Si queremos guiar a nuestro usuario la mejor forma será mostrándole en cursiva a un lado o debajo del control, un ejemplo o una descripción breve de lo que debe escribir en cada campo de nuestro formulario de contacto.
Un ejemplo práctico es este formulario de contacto que se muestra en la imagen siguiente:
No usar el botón “Borrar Formulario”
El botón Borrar formulario o Limpiar, como también se le llama, generalmente no es utilizado. Es poco útil porque en la mayoría de las ocasiones al usuario no le interesa borrar todo lo que escribió. Si se equivoca en algo simplemente arregla el detalle y deja el resto del formulario intacto.
Pero a veces nos sucede que al escribir rápido y hacer clic en un botón sin fijarnos cuál es o por el uso de la tecla TAB para movernos por los controles; sin querer presionamos este botón y echamos por tierra el mensaje que habíamos elaborado.
Es por esto que lo más recomendable para evitarle al usuario estas situaciones molestas es no colocar este tipo de botón en nuestro formulario de contacto.
Detallar el motivo de error
Personalmente me ha sucedido que he completado un formulario de contacto y al pinchar sobre el botón Enviar, me aparece el error “El mensaje no se pudo enviar”. Tratemos de evitar ese tipo de mensajes confusos.
En los mensajes de error seamos prácticos y amables, tengamos presentes que la mayoría de los usuarios que nos contactarán no serán usuarios avanzados y quizás no comprendan términos como “Imposible contactar al servidor SMTP”, “Error al escribir datos en MySQL”, pero lo más importante es que el usuario conozca el motivo del error con términos claros y sencillos.
Javascript, nuestro mejor amigo
Este lenguaje se ha extendido por las múltiples ventajas que ofrece. La mayoría de las aplicaciones web actuales utilizan, al menos en una página, una función escrita en javascript.
Una de sus características es que se ejecuta en el navegador, o lo que es lo mismo, en el lado del cliente y esto lo hace muy útil para la validación de formularios en general.
En el desarrollo de formularios de contacto es muy útil para validar el formato del email que introduce el usuario. Con esta función de ejemplo podremos realizar esa tarea:
<!-- (….) --> <script language="JavaScript" type="text/javascript"> function validarEmail(cadena) { var a = cadena.value; var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_.]+[A-za-z]$/; if (a.length == 0 ) return true; if (filter.test(a)) return true; else alert("Porfavor, debe ingresar una dirección de correo válida"); cadena.focus(); return false; } </script> <!-- (….) -->
Lo que más desea el usuario que nos envía el mensaje a través del formulario de contacto es que su mensaje llegue rápido para que sea respondido con brevedad. En otras ocasiones la página demora unos segundos en actualizar y los usuarios creen que su clic no ha sido asimilado por la aplicación.
Por ambos motivos sucede que presionan el botón Enviar varias veces. Esto nos genera el mismo mensaje repetido en nuestra aplicación web. También para esto es muy útil el javascript. Con el código que mostramos a continuación podemos evitar que esto suceda inhabilitando el botón Enviar cuando se presiona la primera vez.
<HTML> <!-- (….) --> <script language="JavaScript" type="text/javascript"> function bloquear() { form1.Submit.disabled = true; form1.Submit.value = "Procesando datos... "; } </script> </head> <body> <form name="form1" method="post" action="tuscript.pl" onSubmit="bloquear()"> <p> <input type="text" name="textfield"> </p> <p> <input type="submit" name="Submit" value="Submit"> </p> </form> </body> </HTML>
En el ejemplo se bloquea el botón Enviar y cambia el texto del botón por “Procesando datos…”
El toque final
Detrás de cualquier formulario de contacto se esconde un personal de soporte técnico o de atención a clientes. Son éstas personas, las encargadas de leer y responder los mensajes que se envían, las que verdaderamente ponen el sello de la excelencia a nuestro formulario de contacto. Ya que el usuario que nos contacta siempre espera que se le responda rápido y se le aclare la inquietud que lo motivó a enviar el mensaje.
Es muy importante tener en cuenta que si este aparato falla, ya sea porque demoran mucho en responder, no responden o las respuestas no satisfacen; los usuarios perderán la confianza en nuestro formulario de contacto y aún siendo el mejor en cuanto a usabilidad dejarán de utilizarlo.
Algunas empresas centran toda su energía en la calidad del personal que responderá los mensajes de contacto, otras se preocupan más por la usabilidad del formulario en la web que por lo anterior.
¿A cuál de las dos actividades le dedicaría usted más esfuerzos?
justamnete estoy trabajando en lo que respecta a usabilidad de los sistemas, creoque es un topico qeu se biene fuerte este año.
Y que ocurre en el caso de que nos interese un formulario accesible a nivel AAA? tendremos que tratar los campos una vez enviado para devolver el error sin el uso de javascript.
Muchas Gracias, me fue de mucha utilidad todos los tips
Muy buen tip, tienes razon, sobre todo cuando des-ensamblamos el boton de envio.
Justamente estoy en algo asi por el momento.
bye.
Si bien el contenido del artículo me ha parecido muy interesante, con respecto al código tengo que puntualizar que las validaciones javascript deberían ser del tipo “onsubmit=return validar(this)” y con recibir el valor false se cancela el envío.
Me parece que la linea que pone if (a.length == 0) return true, el return debería ser false.
Saludos 😉
El artículo, en mi opinión se queda cortísimo. No podemos separar usabilidad de accesibilidad, puesto que si es usuable solo a determinados s.o o entornos de navegación o determinadas personas, no es usuable. En primer lugar las validaciones las tienes que hacer sin usar javascript para que las personas que usan navegadores sin javascript pueda utilizarlo. Del lado del servidor.Aparte que cualquiera puede descargarse el formulario y saltarse los niveles de protección, lo cual es un gravísimo problema de seguridad. Por otro lado, veo que no etiquetas con label los campos del formulario, ni añades la propiedad tabindex, algo que, para personas con discapacidades, les puede ser realmente útiles.
JAMAS SEPARÉIS EL CONCEPTO USABILIDAD CON ACCESIBILIDAD¡¡
No obstante¡ enhorabuena por los artículos¡¡
PD: yo tengo ya hecho un formulario accesible/usuable, en php xhtml, con un captcha para videntes y otro para ciegos, bastante fácil de usar, si me decis como , os los envio.
Hola:
No estoy de acuerdo con el comentario de Karlos sobre no usar javascript, ya que se ahorra un tiempo valiosísimo de navegación, aunque mi consejo es que haya también una validación en el servidor (la más importante), por la misma razón que expone Karlos.
Saludos 😉
validar con javascript o php es algo que se ah hablado por mucho tiempo, mi comentario es, usenlo como ustedes crean y consideren despues de todos al final veran los resultados de su implementacion…….
tampoco podemos ir por el mundo pensando que javascript se deshabilitara, muy contadas ocasiones pasa eso y mayormente pasa con IE cuando fue dañado por algun tipo de virus, aunque la validacion por servidor es mas segura siempre debemos contar con javascript, podemos hacer scripts inteligentes sobre si la validacion del lado cliente fallo, entonces que entre al rescate la del servidor..
saludos!
Buen punto el que tocas Karlos, sin embargo temo que tendre que hacer un aporte que en cierta forma contradice a la vez que complementa lo que dices.
En un formulario de contacto la validacion mediante javascript es Usabilidad y deve hacerse de un modo que nos brinde un nivel al 100% de graceful degradation. La validacion mediante PHP es seguridad y deve proveer un sitema que informe al usuario las razones de el por que no se ha podido enviar el formulario de forma clara y consisa en caso de que el formulario no se pueda enviar. Esto no cubre en caso de que el javascript falle, sea desactivado o no este disponible y agrega un punto a la accesibilidad asi como lo hace tambien el uso de graceful degradation.
Para lograr accesibilidad total (si es que tal cosa existe) es necesario el uso semantico de (X)HTML.
No es una cuestión de opiniones. Es una cuestión de respestar standares. Las normas WAI:
“Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported.
If this is not possible, provide equivalent information on an alternative accessible page.”
Y con este script no se consigue.
Que se puede hacer validación javascript accesible? Desde luego que sí, que se ahorra tiempo? desde luego que sí. Pero que tienes un agujero en seguridad terrible es seguro.(si no validas de servidor) Hace poco un banco cometió este error.. en un ingreso de formulario para acceder a la gestión de la cuenta.
El último aporte de Buzu, si llevas razón, pero me refería a eso con etiquetar con label y for los campos del formulario, lo mínimo de semántica. (logicamente, en xhtml)
Es decir, validar con javascript los formularios, solo debería ser usado en entornos de excesiva carga de servidor (páginas de líneas areas de reserva de vuelos etc..). Y por supuesto añadiendo validación por servidor.(esto en todas).
Es decir páginas en las cuales te ahorres un tiempo de procesador de servidor que sea muy valioso debido a muchas peticiones. Si preferís siempre ahorrar ese tiempo, genial. Pero hacerlo que funcione con javascript desactivado, que es fácil de hacer y no pasa nada.Tenéis que tener en cuenta a ciegos(sus navegadores no suelen soportar), móviles, y paranoicos de seguridad(unos cuantos), que no tienen javascript activado, por que no quieren¡¡
Al final sumas y te das cuenta de que a lo mejor es el 2% de tus visitas. Estariais dispuestos a perder un 2% de vuestras ventas por que opinas que es mejor?
De todos modos, repito no es una cuestión de opiniones, es cuestión de respetar las normas de accesibilidad, por tanto no considero un buen ejemplo de usabilidad(esto sí s mi opinion).
Un saludo a todos¡
Pues tomando en cuenta que el titulo no dice nada con respecto a la accesibilidad podriamos decir que esta mas o menos. Pero Me boy con tu comentario Karlos. Como dije Javascript es para usabilidad siempre y cuando la pagina funcione aun sin el javascript. No podria poner en una balanza usabilidad contra accesibilidad por que es simplemente algo que no se compara mas bien va de la mano.
Si desarollas tomando en cuenta la usabilidad pero no la accesibilidad pierdes cliente y si desarollas tomando en cuenta la accebilidad pero no la usabilida tambien pierdes clientes.
Un simple test de usabilidad es mostrarle la pagina a usuarios relativamente nuevos que no hayan antes navegado por un sitio en internet. Si no se pierden y al contrario se siente comodos navegando y saben que hacer, a donde ir y en donde localizar la informacion que necesitan o cual es la razon por la que su formulario no puede ser enviado, entonces te has llevado un 100% en usabilidad.
Un 2% quiza no paresca ser mucho pero Dios, si el 2% de la poblacion mundial me regalara un dolar sin duda que estaria feliz…
Para mi desde que una web mescla XHTML y Javascript ha perdido un punto en usabilidad.
La mejor forma de asegurar que tu web se vera bien si el javascript no esta habilitado es desarollar la web entera sin el uso de javascript. Cuando estas conforme con el resultado agrega el javascript sin volver a tocar en XHTML y que el javascript este en su propio documento. Esto te asegura un 100% de graceful degradation.
cuando digo:
********
Para mi desde que una web mescla XHTML y Javascript ha perdido un punto en usabilidad.
*******
Me refiero a mesclarlos en el mismo documento.
Tampoco estoy de acuerdo en evitar el javascript.
Se puede usar, siendo usuable y accesible 100%, exige más disciplina, pero se puede, y ayuda.
Yo en toda slas páginas pongo javascript no obstrusivo, sobre todo a la hora de mover elementos, etc… o convertir una lista (ul-li) en un menu dinámico.
Un abrazo¡¡
Muy interesante. Buenos puntos. Especialmente el de no usar mas el boton de borrar, totalmente de acuerdo, es innecesario.
Buen post, tambien los codigos, cortos y sencillos, muy util. Despues agregas un css y te puede quedar un lindo formulario.
Saludos y exitos
saludos,
Estoy buscando información para aprender hacer un formulario de contacto, tengo uno creado en php con html pero al momento de dar click en enviar todo pasa pero nunca me llega a mi correo, por ahi mencinaban que tengo que usar o instalar hp en mi espacio de hostins, Probare el ejemplo mostrado aqui GRACIAS.
Claro Karlos, no me referia a evitar el uso de javascrip sino a mesclarlo en nuestro documento .html, El javascript siempre deveria estar en un documento aparte con extencion .js
Buenisimo este articulo!! ahora de los mejores formularios el que teneis para darse de alta en http://www.forosdelweb.com Yo en todos quito el botón: borrar. Gracias
Artículo interesante, yo estoy investigando bastante el tema de accesibilidad AAA y tambien web semántica, quiero basar mi tesis en ello. Si alguién tiene mas información al respecto les agradecería muchisimo que me envien al correo o lo posteen.
Gracias 😀
muy interesante el tema
Hola … miren estoy haciendo el formulario.. y necesitaria ayuda.. mi mail: [email protected]
El tema es el siguiente.. pongo todo el formulario pero a la hora de enviar no se como hacer para que se envie directamente a mi e-mail..
o sea sino pongo en vinculo : mailto:[email protected] pero si o si abre el outlook .. y quiero que en vez de que haga eso, que se envie directamente a mi mail
gracias..
y disculpas
hola soy nuevo en esto, estoy haciendo una pagina y necesito hacer una pagina de contactos, el programa qie uso es dreanweber, y la verdad no se que hacer…
Estoy haciendo una pagina soy nuevo en esto quiero hacer un formulario de contacto tengo varios modelos pero ninguno me funciona a la hora de enviar el mensaje si alguien puede ayudarmen se lo agradecere mi correo es [email protected]
gdf
Muy interesante aritculo, me pase varias horas leyendo sobre usabilidad en la web y con esto creo que mejorare muchas cosas en las paginas que hago.
[…] “Usabilidad al diseñar formularios de contacto” de Reynier Matos Padilla […]
[…] Usabilidad al diseñar formularios de contacto Compartir […]
mira yo tengo mi pagina pronta para subir pero necesito que me mande un email sin que aparesca el outlock… obiamente a mi correo personal… me mandarias la respuesta mi correo es [email protected]
Hola Karlos !
Creo que dices mucho al comentar usabilidad con accesibilidad. Me gustaria saber como has afrontado el tema de captcha.
Gracias Un saludo
Queria plantearte un inconveniente con esta clase de formularios. La gran problematica es que el visitante solo “apunta” su correo. En la red hay toda clase de personas, los que estan realmente interesados y por el apuro lo aprobechan, y estan los desequilibrados mentales que por facismo puro o “por competencia desleal” apuntan correos de otras personas que encuentran por internet, casualmente aca varios expusieron su correo publicamente (algo para nada conveniente)
¿hay manera de que en el formulario de contacto, cuando utilizan proxy oculto este revele su verdadero ip?. Me es imprescindible para realizar la demanda correspondiente.
Te pregunto esto porque vengo recibiendo la constante molestia en mi sitio de un mal nacido que apunta correos de lugares realmente comprometidos generandome molestias varias.
gracias por tu aporte y espero tu respuesta.