Alineación de Etiquetas en Formularios

Independientemente de lo que a todos nos pueda parecer mas o me menos bonito, siempre debemos tener en mente la experiencia de usuario, cuando vayamos a diseñar un form. Diseñar un formulario es un trago por el que todo diseñador/desarrollador ha de pasar, una página que no siempre tiene en cuenta al usuario, y que sin embargo se retroalimenta (mas directamente que cualquier otro), de la interacción entre el usuario y el interfaz.

Existen distintas opciones, cada cual tiene ventajas e inconveniente, y cada cual tiene sobre todo a un desarrollador capaz de exprimir al máximo cada ventaja y tapar (por propias sensaciones) los inconvenientes. A la izquierda de los campos de texto, encima de los campos de texto, los campos de texto alineados a la izquierda, sin alinear, mas gustos que estudios y análisis.

Tenia pensado hablar de los movimientos sacádicos y las fijaciones en otro post, pues el gran Jakob Nielsen y Kara Pernice, autores de cabecera del que suscribe (disculpenme Kawasaki, Pink, Neruda y García Márquez) disponen de ingentes cantidades de información y análisis dignos de mencionar y escudriñar.

Que son los movimientos sacádicos?

Por partes, primero que son las fijaciones?:
Nuestros ojos realizan un mapa mental de todo lo que ven, como se construye ese mapa mental?. A través de las fijaciones. Una fijación no es mas que un descanso del ojo sobre algo, algo en lo que se “fija”, un objeto sobre el que posamos suavemente la mirada.

Cuando nuestros ojos se posan sobre un objeto, lo escudriñan de una forma no tan suave como podríamos imaginarnos. Sufrimos constantes movimientos entre esas fijaciones, esos movimientos / saltos, no dejan de ser unas pocas decimas de segundos, son tan rápidos que no vemos absolutamente nada durante esos movimientos, somos completamente ciegos. Simplemente las imágenes quedan difuminadas, esos saltos “ciegos” son los denominados movimientos sacádicos.

Por que son tan importantes los movimientos sacádicos para ver o entender nuestros formularios?. Pues simplemente por que esos movimientos sacádicos son los que nos generan las sensación de dificultad o problemas de comprensión. En pocas palabras, minimizar el tiempo de esfuerzo necesario para que los usuarios comprendan el funcionamiento del formulario a medida que vayan rellenándolo.

“si reducimos el número de fijaciones necesarias, también reduciremos el número de movimientos sacádicos necesarios”.

Generalmente solo valoramos y cuantificamos el número de fijaciones. Sin embargo tal y como nos dice Jacob Nielsen, reduciendo significativamente las fijaciones necesarias, obviamente reduciremos los movimientos sacádicos necesarios.

Partiendo de estas premisas, debemos tener presentes que el diseño ideal de un formulario, es aquel donde el el usuario mira rápidamente, rellena, comprende y obtiene una experiencia satisfactoria en dicho proceso.

Alineaciones

Alineados a la izquierda

Es la forma mas utilizada en los diseños web actuales. Cognitivamente se genera una rápida asociación entre los labes y los campos de texto.

El espacio en blanco generado entre ellos, es directamente proporcional a la rapidez cognitiva de asociación. En los casos en los que exista un label con un texto bastante largo y otro con un tamaño bastante exiguo, el tiempo de respuesta y la asociación es mas lento en espacios mayores y desiguales a elementos que se encuentre “en sandwich” entre ellos. Es decir existirán mas fijaciones y mas movimientos sacádicos.

Esos “ríos de blanco” dificultan la compresión generada entre las asociaciones de etiquetas y campos de texto.

Ejemplos:

Alineados a la derecha

Espacio vertical, mucho espacio vertical. La alineación de las etiquetas a la derecha, crean una escalera de zonas, perfectamente alineadas y asentadas en la línea vertical de los campos. Dicho formato nos permite que para asociar las etiquetas con los campos no necesitemos un gran esfuerzo ni visual ni mental.

Si conseguimos que la zona que separa a las etiquetas de los campos sea una zona reducida,  y menor que la separación entre la siguiente etiqueta y su campo, la asociación (siempre que hayamos hecho nuestros deberes al simplificar los formularios) sera muy rápida y la sensación de asociación y comprensión será muy satisfactoria.

Ejemplos:

Encima de los campos

Los formularios generalmente tienen una orientación vertical.
Procedemos a rellenar los campos comenzando de arriba hacia abajo.
La orientación vertical genera una asociación directa y visual, amen de conseguir que los usuarios puedan examinar rápida y fácilmente todo el formulario en un vistazo.

Es la opción mas recomendable cuando son pocos los campos del form.

Ejemplos:

http://www.juanhidalgoreina.com/contacto/ ( mi propio formulario de contacto ).

En Números:

Según las estadísticas:

• Alineadas a la derecha (41% de los sitios revisados)
• Alineadas a la izquierda (29% de los sitios revisados)
• Situadas encima de los campos (30% de los sitios revisados)

IMHO

“In my Humble Opinion”
Los labels deben ir situados encima de los campos del form.
Pero siempre debemos situarlos en función de una serie de análisis de usuarios, a los que casi nunca tenemos en cuenta y que casi siempre tiene razón.

Recomendaciones:

Algunas recomendaciones, para definir “con sentido común” como dice mi buen amigo Pedro “rebeco”, “el menos común de los sentidos”.

Como podemos evitar que los usuario realicen fijaciones que no les aporten nada:

• Colocando la etiqueta encima del campo al que este asociado.
• Alineando ambas a la izquierda
• El espacio entre la etiqueta y el campo, han de ser menor al que separe entre si cada conjunto asociado (label + campo).
• Evitemos la utilización de mas de una columna en el diseño de nuestros formularios.
• Ni hablar de hacer “eses” “zetas” entre las columnas. Por mucho que lo tengamos super ordenado con Tabindex.
• Ir generando dinámicamente la visualización de campos en función de lo que el usuario vaya seleccionado. Con ello evitamos que los usuarios visualicen campos innecesarios.
• No me gustan los textos de indicios, o textos por defectos en los campos. Es cierto como la vida misma, que un usuario puede ver “periféricamente” que ese campo ya lo ha rellenado y pasar al siguiente. Problema.
• Simplicidad cuando generemos los nombres de las etiquetas, evitemos que que nuestro usuario pierda tiempo teniendo que comprender la etiqueta.

Bibliografía y Referencias

• Wroblewski, Luke; Web Forms: http://www.lukew.com/resources/articles/web_forms.html
• UXmatters; Label Placement in forms: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
• Jakob Nielsen & Kara Pernice: Eyetracking Web Usability. New Riders, 2010