Cómo no diseñar formularios web

Una mirada un tanto sarcástica a los errores que los diseñadores web suelen cometer al crear formularios, junto con consejos para hacerlos bien.

Cómo no diseñar formularios web

Índice de contenidos

Formularios web. Son el corazón del diseño de producto (la mayoría de los productos, desde el punto de vista del usuario, no son más que un montón de formularios) y, por lo general, la parte más importante de cualquier página web en la que aparecen. Dada esa importancia, uno pensaría que, después de 25 años creándolos, ya los tendríamos dominados.

Pero ni de lejos.

O mejor dicho, los tenemos bastante controlados, pero parece que la buena nueva se ha difundido de forma... desigual. Así que echemos un vistazo a algunos de los problemas más comunes que nos presentan los formularios web y profundicemos en cómo hacer las cosas mejor.

Etiquétalo todo, dentro del campo

¿Sabes qué es lo que me encanta? Las etiquetas de campo que desaparecen cuando hago clic en ellos. Porque claro, seguro que me acuerdo de qué me estaban preguntando.

Claro, las etiquetas dentro del campo parecen una solución elegante a los problemas de diseño de formularios. Los formularios suelen ser lo más importante de una página. Pero como distan mucho de ser estéticamente agradables, no es difícil imaginar por qué querrías ahorrar un poco de espacio en la página.

De hecho, apuesto a que el primer diseñador que movió esas etiquetas dentro del campo se sintió un genio durante un día. Es más, espero de verdad que así fuera.

Pero, como muchas ideas que parecen geniales al ponerlas en práctica, esta se desinfla. Plantea importantes problemas de accesibilidad para personas con dificultades cognitivas y, sinceramente, para el resto de nosotros. Porque la mayor parte del tiempo, cuando rellenamos formularios, vamos en piloto automático. No prestamos atención cuidadosa a la etiqueta de cada campo ni a lo que estamos escribiendo en él.

Así que tener la etiqueta visible para recordarme qué estoy haciendo es súper útil. Me ayuda a lograr mi objetivo más rápido y me asegura no tener que borrar o cortar lo que ya he escrito solo para estar seguro de que puse el contenido correcto.

Ahora bien, esto no significa que tengas que ceñirte a las prácticas estándar de diseño de formularios. Está muy bien si quieres hacer magia, sacar la etiqueta del campo y colocarla encima cuando hago clic. Si crees que es una buena inversión de tu tiempo, adelante, colega.

Pero a mí, personalmente, me da igual.

‍Si quieres usar etiquetas dentro del campo, asegúrate de que permanezcan visibles de alguna manera.

Definitivamente, no me permitas iniciar sesión con redes sociales

Porque, en serio, ¿quién querría algo tan cómodo como iniciar sesión con un solo clic?

Vale, probablemente no debería sentirme tan libre de entregar mis credenciales sociales a cualquier aplicación que las pida. Y estoy de acuerdo en que no es la opción más preparada para el futuro. Como el reciente cierre de Vine debería recordarnos a todos, estas "redes" en las que prácticamente vivimos pueden desaparecer en un instante.

Pero, maldita sea, qué satisfactorio es. Usar un inicio de sesión social hace que me sienta como si tuviera la llave de todo internet. Solo tengo que dejarte usarla y, ¡pum!, ya estoy dentro. Mucho mejor que rellenar un montón de campos.

Fíjate en cómo Medium me ofrece opciones de inicio de sesión tanto sociales como por correo electrónico, y me informa de qué harán con el acceso a mi cuenta social si se lo concedo.

Está claro que hay muchas razones para no usar el inicio de sesión social, así que no seré demasiado duro con esto. Pero espero que al menos hayas considerado hacérmelo así de fácil.

Ah, y si usas el inicio de sesión social, asegúrate también de:

  • Dame la opción de hacerlo por correo electrónico, por si no me apetece darte las llaves de mis datos sociales.
  • Explica claramente qué harás y qué no con el acceso a mis cuentas sociales; lo más importante, por supuesto, es aclarar si publicarás algo en mi nombre sin mi permiso explícito.

El proceso de diseño web moderno

Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.

→
↗
►
↓
←
↑
Leer ahora

Usa términos como "inválido" en los mensajes de error, claro que sí.

Claro, adelante, conviértete en el juez de la validez. Seguro que has comprobado qué tipo de caracteres "especiales" se usan realmente en los nombres de la gente, ¿verdad?

Imagen cortesía de Kristin Staton-Heit (@kmstaton).

Hace poco escribí largo y tendido sobre el uso de términos como "inválido" en los mensajes de error, así que no profundizaré demasiado aquí. Pero lo importante al redactar mensajes de error es ser informativo y útil. Decirme que una entrada es "inválida" no solo puede resultar ofensivo, sino que tampoco ayuda, porque no explica cómo debería ser una entrada "válida". Así que, simplemente, dime qué es lo que quieres.

Decirme que una entrada es "inválida" no solo puede resultar ofensivo, sino que tampoco ayuda, porque no explica cómo debería ser una entrada "válida".

Sí, pídeme un "nombre de usuario".

Porque, sin duda, lo que quiero es tener otra cosa más que intentar recordar, además de los correos y contraseñas de los otros 120 sitios web en los que me he registrado.

¿Qué pasa, estamos en los 90 o qué?

Noticia de última hora: el atractivo del internet anónimo se ha explorado y se considera insignificante, así que, a menos que tu sitio necesite una capa intermedia entre mi avatar y mi identidad, por favor, deshazte de esta abstracción. Solo añade una carga cognitiva innecesaria y aumenta drásticamente mi necesidad de hacer clic en ese botón de "ayuda para iniciar sesión".

MailChimp pide un nombre de usuario, pero en su caso tiene todo el sentido del mundo. Al fin y al cabo, un hacker en tu cuenta de MailChimp podría arruinar todo un negocio.

Vale, hay sitios web donde el anonimato (o su tentadora posibilidad) es sin duda parte de su propuesta de valor. Vosotros seguid a lo vuestro. Y puedo imaginar razones de seguridad para solicitar un nombre de usuario, ya que es una capa más entre un hacker y mi cuenta.

Pero para la mayoría de los sitios y formularios, esto es solo una molestia innecesaria. Y para aquellos sitios que sí lo necesitan, una explicación rápida como...

Crear un nombre de usuario ayuda a mantener tu cuenta más segura, ya que es más difícil de descubrir que una dirección de correo electrónico.

Podría ayudar mucho a aliviar mi sensación de que solo me estás complicando la vida. Recuerda: tus clientes no saben qué haces ni por qué lo haces. Así que, ¿qué daño hace contárselo?

Por supuesto, escóndeme la información que necesito saber.

¿Alguna vez has terminado de rellenar un formulario, has hecho clic en enviar y luego te has topado con el detalle importante sobre cómo crear una contraseña para ese sitio en particular, que hiciste mal porque no te avisaron?

Porque, sí, lo que quiero es descubrir que hice algo mal con mi contraseña después de haber pensado que ya estaba dentro. Un plan genial.

Como he mencionado antes, entiendo el atractivo de un diseño de formulario más ágil, sencillo y limpio. Pero si mi contraseña tiene que llevar obligatoriamente una letra mayúscula, una minúscula y un carácter "especial", ¿no deberías simplemente decírmelo?

Esto va más allá del diseño de formularios de inicio de sesión: en cualquier lugar donde necesites información específica, introducida de una forma concreta, avisar a los usuarios con antelación agilizará su flujo de trabajo y reducirá su frustración.

No me dejes ver lo que escribo

Lo entiendo. Los puntos están ahí en lugar de los caracteres que escribo para que nadie pueda practicar el truco más viejo del mundo: mirar por encima de mi hombro.

Pero seguro que podrías darme la opción de arriesgarme, ¿no? Quiero decir, estoy en la oficina, en una silla bien cómoda y sin nadie acechando. ¿Puedo echar un vistazo?

Mejorando nuestros formularios web

Al repasar todas mis quejas sobre la experiencia con los formularios, una cosa queda clara: los formularios excelentes requieren una comunicación excelente.

Hacer que las etiquetas sean persistentes y no desaparezcan al hacer clic: eso es comunicación clara. ¿Evitar términos como "inválido"? Bingo, comunicación. ¿Revelar información necesaria antes de que cometa un error? Pues sí, lo has adivinado.

La comunicación también entra en juego con los problemas de seguridad que he mencionado. Sin saber que se hacen para protegerme, simplemente parecen molestos sin motivo. Pero si estos sitios se tomaran un momento para informarme de su propósito... bueno, eso podría ser un momento muy positivo para mi relación con la marca, ¿no crees?

Por supuesto, el otro ingrediente clave es simplificarme las cosas: reducir mi carga cognitiva permitiéndome iniciar sesión con una red social, proporcionando mensajes de error útiles, etc. Así que no olvides buscar formas de agilizar tus formularios, incluyendo limitar las preguntas a la información estrictamente necesaria.


Última actualización
November 8, 2016
Categoría

Artículos relacionados

Cómo construí mi portafolio de diseño de contenidos desde cero
Cómo construí mi portafolio de diseño de contenidos desde cero

Cómo construí mi portafolio de diseño de contenidos desde cero

Cómo construí mi portafolio de diseño de contenidos desde cero

Inspiración
Por
Kasturi Roy
,
,
Leer artículo
Cómo no escribir un mensaje de error
Cómo no escribir un mensaje de error

Cómo no escribir un mensaje de error

Cómo no escribir un mensaje de error

Diseño
Por
John Moore Williams
,
,
Leer artículo
Cómo estructurar tus colecciones del CMS de Webflow
Cómo estructurar tus colecciones del CMS de Webflow

Cómo estructurar tus colecciones del CMS de Webflow

Cómo estructurar tus colecciones del CMS de Webflow

Desarrollo
Por
John Moore Williams
,
,
Leer artículo
Comunicación con diseñadores web: guía práctica para especialistas en marketing digital
Comunicación con diseñadores web: guía práctica para especialistas en marketing digital

Comunicación con diseñadores web: guía práctica para especialistas en marketing digital

Comunicación con diseñadores web: guía práctica para especialistas en marketing digital

Estrategia
Por
Elijah-Blue Vieau
,
,
Leer artículo
5 formas en las que el contenido puede mejorar la accesibilidad de tu sitio web y su experiencia de usuario general
5 formas en las que el contenido puede mejorar la accesibilidad de tu sitio web y su experiencia de usuario general

5 formas en las que el contenido puede mejorar la accesibilidad de tu sitio web y su experiencia de usuario general

5 formas en las que el contenido puede mejorar la accesibilidad de tu sitio web y su experiencia de usuario general

Estrategia
Por
John Moore Williams
,
,
Leer artículo
El proceso de diseño web moderno: lanzar
El proceso de diseño web moderno: lanzar

El proceso de diseño web moderno: lanzar

El proceso de diseño web moderno: lanzar

Diseño
Por
John Moore Williams
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.