Pocas cosas gustan menos en Internet que rellenar un formulario, y más si este es largo y caótico. Mucho se ha escrito al respecto, pero me encanta el trabajo de Luke Wroblewski para el IA Submit 2007: Best practices for form design.
Apoyándose en los resultados de un estudio de eyetracking en formularios publicado en UX Matters, propone las mejores opciones según el tipo de formulario que tengamos que rellenar. En concreto:
- Si tenemos que rellenar datos que son familiares (y no son muchos): Etiquetas en vertical encima del campo.
- Cuando necesitemos ajustar el espacio vertical: Etiquetas a la izquierda del campo, alineadas a la derecha.
- Hay que ajustar el espacio vertical, y los datos no nos son familiares o son complejos: Etiquetas al lado del campo, alineadas a la izquierda.
Etiquetas en vertical
Esta opción es la que provoca menos movimiento ocular al usuario, así como un menor esfuerzo mental. Si los datos son familiares verá la pareja etiqueta-campo de un solo vistazo sin tener que pensar qué es lo que debe rellenar.
Como problema, crea formularios excesivamente largos, y hay que asegurarse de la correcta separación visual para comprender la asociación de las etiquetas a los campos.
Asimismo se recomienda que las etiquetas estén en negrita, y los campos no tengan bordes muy fuertes.
Alineadas a la derecha
Con este formato ganamos mucho en espacio vertical, y además el usuario casi no tiene que hacer esfuerzo mentar para asociar las etiquetas con los campos.
Alineadas a la izquierda
Aquí puede darse el caso en que exista una excesiva separación entre etiqueta y campo, dando lugar a mayores tiempos para asociar ambos, parándose más a leer cada una de las etiquetas.
Por esto mismo esta organización es interesante cuando los datos a rellenar son complejos, ya que el usuario se parará más a pensar (si bien esto puede aumentar los ratios de abandono).
Podéis ver más sobre el tema en las slides de la charla (3.9 Mb PDF), que para ser una presentación está bastante completa y se entiende.