Etiquetas frente a placeholders

El formulario más limpio esconde sus propias instrucciones

Hay un diseño de formulario que gana todas las revisiones internas: sin etiquetas, solo indicaciones en gris claro dentro de cada campo vacío. Se ve tranquilo, moderno y más corto que la alternativa. El problema es que la revisión ocurre sobre un formulario vacío, y nadie rellena un formulario vacío. El visitante hace lo único para lo que existe el formulario (escribe), y la instrucción en la que confiaba desaparece bajo su propia respuesta.

Esa es toda la disputa en una frase. Una etiqueta está fuera del campo y se queda quieta. Un placeholder está dentro del campo y se borra en el momento en que alguien actúa sobre él. Todo lo demás en esta decisión se deriva de cuál de esos dos comportamientos puede permitirse.

Qué se pierde realmente cuando se va el placeholder

En un formulario de contacto de tres campos, no mucho: la mayoría de la gente puede retener nombre, correo, mensaje en la cabeza. Pero los formularios de las organizaciones con las que trabajamos rara vez tienen tres campos. Formularios de inscripción, consultas sobre subvenciones, preguntas de visado y consulares, renovaciones de membresía: una docena de campos, algunos parecidos entre sí. Una vez que cada campo está lleno, un formulario de solo placeholders es una página de cajas anónimas. El visitante que quiere revisar sus respuestas antes de enviar no tiene contra qué revisarlas.

Las interrupciones lo empeoran. Alguien empieza el formulario, atiende una llamada y vuelve a una pantalla que ya no se explica. ¿Esa segunda caja era un teléfono del trabajo o un móvil? La única forma de averiguarlo es borrar lo que escribió y ver qué reaparece, lo cual es algo genuinamente absurdo que pedirle a una persona, y sin embargo es el camino de recuperación real que este diseño le deja.

El autocompletado también lo rompe, y el autocompletado es cómo una gran parte de los visitantes reales completa formularios ahora. El navegador vierte los valores guardados en todos los campos a la vez, y el trabajo del visitante pasa de escribir a verificar. En un formulario etiquetado, verificar toma un vistazo. En un formulario de solo placeholders, cada campo rellenado ha tapado su propio nombre.

Qué oye un lector de pantalla

Para quien usa un lector de pantalla, la diferencia deja de ser una molestia y se convierte en un muro. Una etiqueta correctamente asociada se anuncia cuando el campo recibe el foco: el visitante oye qué se pregunta y después responde. El texto del placeholder no tiene esa garantía: la compatibilidad es inconsistente entre lectores de pantalla, y un placeholder nunca se diseñó para ser el nombre de un campo. Un formulario que depende solo de placeholders apuesta a que la tecnología de asistencia de cada visitante tapará un agujero en el marcado.

Para los organismos públicos y las instituciones públicas no es una cuestión de gusto. Las normas de accesibilidad a las que se someten los sitios del sector público esperan que las entradas de formulario tengan etiquetas adecuadas, y una entrada sin etiqueta es uno de los fallos más comunes que marcan las auditorías automáticas. La etiqueta visible y la etiqueta anunciada deben ser la misma cosa, asociada al campo en el marcado. Así la solución para la usabilidad y la solución para el cumplimiento son una sola, no dos.

Hay también un costo de accesibilidad más discreto: el texto del placeholder se renderiza por convención en un gris de bajo contraste, precisamente para que no parezca una respuesta. Un texto deliberadamente tenue es un lugar extraño para guardar la única copia de sus instrucciones.

Para qué sirven realmente los placeholders

Nada de esto hace inútil al placeholder. Es bueno exactamente en un trabajo: mostrar cómo se ve una respuesta correcta. Una etiqueta dice «Número de teléfono»; un placeholder dice «(555) 012-3456». La etiqueta lleva la pregunta, el placeholder demuestra el formato, y cuando la demostración desaparece bajo la escritura real, no se pierde nada. El visitante ya no necesita el ejemplo, y la etiqueta sigue ahí.

Las etiquetas flotantes (el patrón en el que el placeholder sube y se encoge hasta la posición de etiqueta cuando empieza la escritura) son un compromiso razonable cuando el espacio vertical escasea de verdad. Pero es un compromiso que hay que construir con cuidado: el texto flotado sigue necesitando contraste real, el marcado sigue necesitando una etiqueta real, y la animación le compra una línea de altura al costo de cierta fragilidad. La mayoría de los formularios no están tan apretados como para que una etiqueta visible normal no hubiera sido más simple.

El intercambio que está haciendo en realidad

Mantener las etiquetas visibles cuesta un poco de espacio vertical y un poco de silencio visual. Esconderlas cuesta comprensión para todos, recuperación para cualquiera interrumpido, verificación para todo el que autocompleta y acceso para quienes usan lectores de pantalla. Planteado así, no es gran decisión: la estética del formulario vacío es lo único al otro lado de la balanza, y nadie contactó nunca a su organización porque el formulario se veía bonito mientras estaba vacío.

Ese es el patrón al que esta serie vuelve una y otra vez: las pequeñas decisiones que parecen cuestiones de estilo suelen ser cuestiones operativas disfrazadas. Lo siguiente en la serie: qué debe pasar en los segundos después de que alguien pulsa enviar, y por qué «la página no se recargó» no es lo mismo que «funcionó».