El uso de labels (etiquetas, descripciones o rotulos en español) dentro de los mismos campos de texto, se ha convertido en una tendencia en el diseño de formularios.
Muchas veces no contamos con el espacio suficiente para colocar el label al lado del campo de texto, o simplemente queremos hacer nuestro formulario mas amigable y atractivo. Esta solución viene como anillo al dedo.
Sin embargo hay que saber como implementar la solución. Tenemos que tener mucho cuidado de no confundir a nuestros usuarios. Vamos a ver como podemos hacerlo muy fácilmente.
Antes que nada, debemos decidir que uso le vamos a dar a este método en nuestro sitio. Para mi, existen dos formas de utilizarlo:
- Como un label. En este caso simplemente ponemos que es lo que debe ir en el campo de texto. Un ejemplo es el de la imagen de arriba que dice «Buscar».
- Mostrar información adicional. En este caso usaríamos un label normal y dentro del campo de texto daríamos una información que ayude al usuario a ingresar el texto correctamente. Por ejemplo:
Lo importante es mantener la coherencia dentro de nuestro sitio, pues no queremos que el usuario se confunda. Esto es clave,siempre debemos pensar en la experiencia del usuario final.
Como decía al comienzo, hay que tener cuidado a la hora de implementar los labels dentro de los campos de texto. La función del campo de texto es el ingreso de información por parte del usuario (una búsqueda, un nombre, un teléfono, etc.), pero en este caso le estamos dando otra utilidad, lo cual puede ir en contra de lo que el usuario espera. Tenemos que diferenciar apropiadamente el label que hemos colocado del texto que ingresa el usuario (por ejemplo con el color del texto). Afortunadamente ya estamos acostumbrados a ver esta solución en muchísimos sitios, empezando por facebook, por lo cual no creo que haya mucho riesgo al utilizarla en nuestro sitio.
Bueno, y como les decía, hay una forma muy fácil de implementar esta solución, gracias a este script de jQuery: http://attardi.org/labels2/#javascript. Este fue el que utilicé para el campo de ejemplo. Solo falta que lo prueben en sus sitios!