Por qué no deberías usar placeholders

Un placeholder es una etiqueta de texto colocada dentro de un campo de un formulario. La traducción es «marcador de posición», pero es uno de esos términos tecnológicos que se suele usar en inglés.

Los placeholders se usan sobre todo para informar al usuario de qué debe escribir en un campo de un formulario. Esta imagen de ejemplo es del formulario de registro de Facebook. Los cuatro textos que se ven dentro de los campos son placeholders.

Placeholders de los campos de registro de Facebook."

La mayoría de campos de formularios incluyen tres elementos: Una etiqueta de título, el campo de formulario en sí y un texto placeholder.

Esquema de las partes que componen un campo de un formulario.

Ni la etiqueta de título ni el placeholder son obligatorios. Si buscas y comparas formularios de diferentes páginas web, verás que no todos usan los mismos elementos.

Para qué sirven los placeholders

Los placeholders se usan por diversas razones. Una de las principales es cuestión de marketing, porque se supone que mejoran la tasa de conversión. Cuanto más fáciles pongas las cosas al usuario, más probabilidades habrá de que te dé sus datos.

Por otro lado, hay diseñadores y copywriters que creen que añadir esas breves aclaraciones mejora la usabilidad. Si tienes un pequeño texto que te explique o te recuerde qué debes escribir en un campo, el formulario será más claro, ¿no? El problema es que esta teoría no es cierta. Los placeholders no mejoran la usabilidad, la empeoran.

Por qué los placeholders empeoran la usabilidad

El ejemplo más habitual de placeholder mal usado es cuando se prescinde de la etiqueta de título del campo del formulario y se usa el placeholder en sí como etiqueta. Este es un error que cometen muchas páginas web. Se suele hacer para reducir el número de elementos, ahorrar espacio o acortar la longitud del formulario para que parezca más rápido de rellenar.

El mayor problema de este enfoque es que el placeholder desaparece al escribir cualquier cosa en el campo del formulario. Esto estresa a muchos usuarios. ¿Cuántas veces te has puesto a escribir tu fecha de nacimiento en un formulario y has tenido que volver atrás porque no recordabas el formato en el que debías escribirla?

Además, una vez escrito algo es imposible saber si lo has escrito en el campo correcto, porque no tienes ninguna referencia que te indique para qué era ese campo.

Por ejemplo, en este formulario de registro de Facebook hay un correo electrónico en el campo «Nombre» y un nombre en el campo «Apellidos», pero no hay nada que lo indique. Es imposible saber que hemos escrito en los campos equivocados.

Formulario de registro de Facebook con datos en campos equivocados.

Sin embargo, en este formulario de registro de Trello es obvio que hemos escrito datos en los campos equivocados. Las etiquetas de título sirven para eso, entre otras cosas, así que no es buena idea prescindir de ellas.

Formulario de registro de Trello con datos en campos equivocados.

Otro inconveniente de omitir las etiquetas es que en los formularios muy largos es difícil ver si te has olvidado de rellenar algo. Si tienes decenas de campos uno detrás de otro, es fácil ver si uno de ellos está completamente vacío. Si en lugar de estar vacío tiene un placeholder, ya no se ve tan fácilmente a simple vista.

En las páginas peor implementadas hay incluso otro problema adicional, que el placeholder no desaparece solo. Antes de escribir en el campo, tienes que borrar el placeholder a mano. Esto me lo encuentro muchas veces en campos de búsqueda de blogs y es muy molesto.

Los placeholders también son malos para la accesibilidad

Después de lo dicho, podrías pensar que prescindir de las etiquetas no es correcto, pero añadir placeholders además de etiquetas sí. La respuesta es no. Nunca deberías usar placeholders, en ningún caso, por temas de accesibilidad.

El principal problema a nivel de accesibilidad es que algunos lectores de pantalla no leen los placeholders. Un lector de pantalla es un software que usan las personas ciegas o con problemas de visión graves. Si una persona ciega tiene que rellenar un formulario y el lector de pantalla no lee los placeholders, no sabrá qué tiene que escribir en cada campo.

Otro inconveniente más general es que los placeholders son casi siempre de un tono gris claro. El contraste con el fondo del campo del formulario es muy bajo. Esto es fatal para cualquier usuario que tenga problemas de vista.

Existen muchas páginas web que ayudan a comprobar si el contraste entre el color de un texto y el del fondo es suficiente para poder leer con claridad. Yo suelo usar el verificador de contraste de WebAIM. Si introduces el color habitual del texto y del fondo de los placeholders, este es el resultado. Cero en accesibilidad.

Resultado fallido de verificación de contraste entre el color de un placeholder y el fondo en un campo de un formulario.

Un problema adicional de accesibilidad y usabilidad es que la mayoría de navegadores con opciones de traducción automática no traducen los placeholders. Esto significa que los usuarios no verán los placeholders en su idioma y no sabrán qué datos deben rellenar.

Entonces, ¿qué hago en lugar de usar placeholders?

La alternativa más sencilla para no usar placeholders es usar etiquetas de título y escribir cualquier aclaración necesaria fuera del campo del formulario. Este es el formulario de registro de MediaMarkt. No hay ningún placeholder, solo los nombres de los campos.

Formulario de registro de MediaMarkt sin placeholders.

En el campo de contraseña hay una aclaración y no está incluida como placeholder, sino debajo del campo. Hay muchas páginas que incluyen los criterios de seguridad de la contraseña como placeholder y ese es un gran error, porque en cuanto escribes el primer carácter de la contraseña ya no te acuerdas de cuáles eran los criterios.

Quizá sería más claro incluir los criterios de contraseña directamente debajo del campo, en lugar de en una ventana emergente, que es lo que hace MediaMarkt, pero ese sería un tema para otra ocasión. Lo importante es no usar placeholders. Coloca cualquier aclaración o ejemplo necesario debajo o encima del campo, o usa alternativas como tooltips (información adicional que aparece al colocar el cursor sobre un elemento).

No obstante, la mejor solución es que todo sea lo más claro y sencillo posible. Así que mi consejo es pensar muy bien qué debes escribir en las etiquetas del formulario para que no haga falta añadir explicaciones adicionales en ningún sitio.

¿Quieres comentar algo?

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.