Formularios en móviles: usos inteligentes de los labels

Desde hace una temporada hay un cierto debate buscando soluciones para hacer más fáciles de utilizar los formularios en móviles. En nuestro grupo de experiencia de usuario en Google+, UX con eñe, ha salido el tema varias veces, siempre con soluciones originales y diferentes.

Y es que rellenar un formulario es algo que casi nunca queremos hacer, casi siempre es algo que hacemos por necesidad (para lograr algo a cambio de esos datos que estamos dando). Si además añadimos al cócktail una pantalla pequeña y un teclado aún más pequeño, rellenar un formulario puede ser una experiencia muy tediosa.

Las soluciones nuevas en el mundo web casi siempre plantean dos tipos de problemas:

  • De accesibilidad.- A menudo las nuevas soluciones traen nuevos problemas de accesibilidad, porque nos servimos de nuevas tecnologías que aún no tienen un buen soporte accesible.
  • De compatibilidad.- Por los mismos motivos, al utilizar tecnologías nuevas, los navegadores antiguos no pueden interpretarlas (aunque hay soluciones como Modernizr que ayudan en muchos casos).

El problema

Hay un problema recurrente con los formularios en smartphones: falta de espacio. ¿Lo apiñamos todo, dejamos un scroll enorme, o lo dividimos en varias pantallas? ¿Qué solución es mejor en cada caso?

Formularios en smartphones

Los tres elementos que nos traen de cabeza: inputs, labels y placeholders.

Para que quede claro de lo que hablamos, unas definiciones rápidas:
Input.- Los inputs de un formulario son los campos donde introducimos información. Los hay de diferentes tipos: de texto, de números (para teléfonos, por ejemplo), de email, etc. Definir el tipo de input en HTML5 es especialmente útil para los usuarios de móvil, porque hace que cambie el teclado para que sea más fácil rellenar cada campo. Por ejemplo, en los inputs numéricos nos saca sólo los números en el teclado, en los campos de email nos pone la @ más a mano, etc.
Placeholder.- Placeholder es otro atributo que puede tener el input de un formulario. Es ese texto que aparece en gris dentro del campo que vamos a rellenar, y que desaparece cuando lo seleccionamos o empezamos a introducir texto.
Labels.- Los labels no son una novedad de HTML5, sino que llevan con nosotros mucho tiempo. Son los títulos de los diferentes inputs, ese texto que nos dice que hay que introducir el nombre, el apellido, el teléfono, o lo que sea.

Habitualmente los labels te dicen qué tipo de información hay que introducir, y los placeholders ayudan con un ejemplo o información adicional. Así, un campo con el label “fecha” nos indica el tipo de dato requerido, pero al ver el placeholder es cuando nos damos cuenta de que hay que introducirlo de la siguiente forma: dd/mm/aaaa (por ejemplo). Es decir, que a menudo podemos encontrarnos con que label y placeholder muestran la misma información, pero en muchos casos se complementan.

¿Por qué es importante esto? Porque veremos algunas soluciones que sitúan el label donde va el placeholder, o directamente se elimina uno de los dos. Esto puede suponer problemas de accesibilidad, así que hay que utilizarlo con cuidado.

¿Cómo ganar espacio en pantalla con los formularios?

En nuestro afán de ganar espacio en pantalla, podemos tener la tentación de eliminar los labels, y dejar la información de qué hay que rellenar en cada campo en el placeholder. Esto no es una solución, porque si pulsamos un campo sin fijarnos en lo que ponía el placeholder, perdemos este texto y podemos encontrarnos con que tenemos que pulsar fuera de nuevo, para que vuelva a mostrarse el texto del placeholder y enterarnos de qué dato había que poner. Esto es un problema de usabilidad, que puede ser especialmente molesto en formularios largos, así que hay que evitarlo a toda costa. No es una solución.

¿Donde situar los labels?

Hay dos sitios donde habitualmente se sitúan los labels en un formulario: Encima de cada input, o a su izquierda. ¿Qué solución es mejor? Depende de cada situación, pero casi siempre es una mejor opción ponerlos encima. Fíjate en la siguiente imagen:

¿Donde situar los labels de un formulario?

Movimiento de ojos en función del alineamiento de los labels. Imagen de thatwebguyblog

Como puede verse, los labels encima se leen más fácilmente, y se ha comprobado que los formularios con los labels alineados de este modo se completan más rápido.

Labels a izquierda

Formulario con los labels alineados a izquierda

Pero tampoco es una solución absoluta, ya que poner los labels encima tiene el inconveniente de hacer el formulario más largo verticalmente, por lo que si ya era largo de por sí, esta solución hará que lo sea aún más. Poner los labels a la izquierda puede ayudar con formularios largos, pero tiene sus inconvenientes: roba espacio a los inputs, y en ocasiones, si el texto del label es largo, tenemos un problema. Imagina que preparas un formulario multiidioma. En francés o alemán las palabras suelen ser más largas que en inglés, así que alinear a la izquierda puede quedar bien en unos idiomas y muy mal en otros. Me he encontrado adaptando formularios que funcionaban bien en equipos de escritorio, con los labels a izquierda, utilizando una media query para alinearlos encima en pantallas pequeñas.

Pero ¿y esas soluciones novedosas?

Vamos a ello. Ya hemos nombrado que podemos eliminar los labels y poner la información en los placeholders, pero tenemos el problema de perder la información en el input activo. Esta solución de Matt D. Smith abre otras posibilidades:

formulario con labels que cambian de lugar

formulario con labels que cambian de lugar – Matt D. Smith

Esta solución es elegante, pero tiene el inconveniente de que el label ocupa el sitio del placeholder, por lo que no podremos utilizarlo para añadir información adicional. Además, una vez relleno el label es bastante pequeño y pierde legibilidad, pero no es un gran problema porque al rellenar ya hemos leido esta información, así que figura más como referencia que porque tengamos que procesar esta información (esto ya lo hicimos antes de empezar a teclear, así que puede que miremos el label, pero más como recordatorio que para entender que va en ese input).

Diría que esta solución va a hacerse bastante popular, porque Google la ha incluido en Material, una guía que ha creado para el diseño visual y de interacción en sus apps. Es decir, que comenzaremos a verlo en Android muy frecuentemente. Pero posiblemente tardará algo más en popularizarse en la web, porque aún no se lleva demasiado bien con los navegadores antiguos.

El problema de este tipo de soluciones es lo que mencionábamos al principio: accesibilidad y compatibilidad. Si utiliza javascript, puede dar problemas de accesibilidad, y navegadores anteriores a Internet Explorer 10 ni siquiera entienden los placeholders. Esto significa que hay que utilizarlos con cuidado y testear en todo tipo de dispositivos.

En cualquier caso, no es la única solución que ha aparecido para este problema. Aquí puedes ver algunas opciones diferentes para labels flotantes, y aquí Brad Frost se extiende sobre los pros y contras de estas prácticas (en inglés).

Para mí, cuando rellenas un formulario, no necesitas verlo entero de una vez. Se agradece saber cuántos campos se van a rellenar, para saber si se puede realizar en el momento o es mejor dejarlo para otra ocasión. Pero mostrar todos los campos en pantalla no es la única forma de comunicar esta información. Estas mejoras pueden hacer la vida un poco más fácil a los usuarios de móvil, pero lo cierto es que mientras rellenas el campo de un formulario no necesitas ver nada más en pantalla, así que para mí ninguna de estas soluciones quedan mejor que utilizar un typeform (no, no cobro comisión por anunciarlos :).

Para saber más:
Enlace en inglés Placeholders are not Substitutes for Labels
Enlace en inglés Making Infield Form Labels Suck Less
Enlace en inglés The Form Usability Treasure Trove: 42 Top Resources
Enlace en inglés Web Form Design, by Luke Wroblewski

curso Divi actualizado y en español