comparte el articulo 

Posicionamiento de labels en un formulario

Actualizado el 12/02/2013 < > 0 Comentarios

Resumen: En este artículo explicamos las ventajas y desventajas que conllevan todos los tipos de alineados que podemos darle a un label dentro de un formulario

Cuando estamos trabajando con la elaboración de formularios para un sitio web, uno de las tantas cosas que se debe determinar, es el tipo de alineación que utilizaremos para mostrar los elementos “label”. Dichos elementos son utilizados generalmente para establecer los nombres de cada uno de los campos a llenar en el formulario, es por ello que alineación tiende a tomar cierta relevancia al elaborar la estructura de nuestro sitio.

Por más simple que parezca, la alineación de un label no es una decisión insignificante, ya que la posición de este elemento en base a los inputs, puede afectar la lectura y usabilidad de un formulario. Si el usuario puede detectar adecuadamente cada uno de los labels en un formulario, su velocidad de llenado puede aumentar, así como su satisfacción al avanzar a través de los campos sin problemas.

Sin embargo, no existe una forma única o completamente comprobada como la mejor, por lo que esta decisión se debe tomar en base a ciertos factores y necesidades específicas de tu formulario, tomando como referencia el diseño de tu página.

En este artículo mostraremos los distintos tipos de alineados que se le puede dar a estos elementos, desplegando las ventajas y desventajas que representa cada uno.

Alineado en la parte superior

El alineado en la parte superior del campo, representa una de las mejores opciones para reducir el tiempo de llenado de un formulario. Esto se debe a que aminora la necesidad de realizar movimientos extraños con el ojo, ya que tanto el label como el campo se pueden observar con una simple mirada, y gracias a esto se disminuye la posibilidad de que exista una confusión.

Otra ventaja de este tipo de alineado, es que no es necesario hacer uso de mucho del espacio horizontal de la página, por lo que son ideales para ser utilizados en barras laterales. De igual manera, este espacio puede ser aprovechado para agregar alguna clase de descripción o traducción que ayude al usuario a completar el formulario.

En caso de requerir más espacio vertical, este tipo de alineado no es el adecuado para ti. Si tu formulario se torna algo largo, al agregar labels en la parte superior de cada campo, este crecerá mucho y muy rápido, por lo que al usuario le podrá parecer muy tedioso llenar tanta información, además de que necesita de un constante desplazamiento a través de las barras.

Alineado a la izquierda

Al colocar el label horizontalmente enseguida del campo, tenemos dos opciones de alineamiento. Una de estas opciones es alinear a la izquierda, es decir, que el texto luzca separado del campo y el borde izquierdo del texto se ajuste al margen izquierdo del elemento que contiene el formulario.

La ventaja principal de este tipo de alineado, es que representa la manera más sencilla de realizar un escaneado rápido de los valores relacionados a cada label. Debido a que todos se encuentran alineados al límite izquierdo del elemento y no son distorsionados por algún campo, es más sencillo identificar a que se refiere cada label, siendo esto ideal para formularios que hacen peticiones de información poco común.

Otro factor a considerar, es que con este tipo de alineado ahorramos mucho espacio de manera vertical, pero sacrificamos espacio horizontal, por lo que su uso dependerá en gran medida del tipo de diseño que utilicemos en la página.

La mayor desventaja que presenta este tipo de alineado, es que su tiempo de de llenado es el más lento, esto se debe en gran medida al espacio que existe entre el label y el campo. Entre más pequeño sea el label, más distancia existirá entre él y el campo con el que se relaciona. Para evitar esta clase de problemas, se puede optar por utilizar un poco de CSS y dar un sombreado o cambio de fondo al label cuando el campo se encuentre seleccionado.

Alineado a la derecha

El segundo tipo de alineado que se puede utilizar al tener el label a un lado del campo, es el alineado a la derecha. Este alineado, toma el texto y lo ajusta al margen derecho, ya sea pegándolo al input o al extremo derecho del elemento que contiene el label.

Con este tipo de alineado se obtiene las mismas ventajas de espacio que con el alineado a la izquierda, más espacio vertical pero menos horizontal. Quedando así poco espacio para agregar algún tipo de información extra al lado del campo, como por ejemplo una traducción, una recomendación o una validación.

La gran ventaja de utilizar este alineado, es su gran conexión visual entre el label y el campo. Gracias a esto, el tiempo de llenado de formularios que cuentan con este alineado, puede llegar a ser hasta el doble de rápido que el de formularios con alineados a la izquierda. Además de esto, este alineado proporciona más flexibilidad para que el formulario pueda adaptarse a la variación de tamaño de los labels.

Sin embargo con este tipo de alineado, el escaneo de los labels puede resultar más difícil, ya que sus valores no se encontrarán alineados a un margen, dificultando de esta manera la lectura.

Publicado el 12/02/2013, última actualización 12/02/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras