Posicionamento das etiquetas nos formulários Web

Um estudo recente, com recurso a técnicas de eyetracking (rastreio do olhar), tentou descobrir qual a melhor disposição das etiquetas (labels) nos formulários Web.

web form

As conclusões a que chegaram foram as seguintes:

  • Posicionamento das etiquetas: Posicionar a etiqueta acima do campo de introdução de dados (input field), geralmente resulta melhor, pois os utilizadores não são obrigados a olhar separadamente para a etiqueta e para o campo de introdução;
  • Alinhamento das etiquetas: Na maior parte dos casos, quando se coloca a etiqueta do lado esquerdo do campo de introdução, exige um maior esforço cognitivo por parte do utilizador. É preferível colocar a etiqueta por cima do campo de introdução, mas se tiver que obrigatoriamente colocar a etiqueta ao lado do campo de introdução, pelo menos coloque-a alinhada à direita;
  • Etiquetas a negrito: Ao contrário do que seria de esperar, não é boa ideia colocar as etiquetas a negrito, pois torna-as de difícil leitura.
  • Caixa de selecção (drop-down list): Utilizar com moderação! São o elemento mais proeminente normalmente existente num formulário Web, ainda superior aos botões.
  • Posicionamento das etiquetas para as caixas de selecção: Para garantir que os utilizadores sabem imediatamente que tipo de selecção vão ter que fazer numa caixa de selcção, a etiqueta deve ser a primeira opção da lista.

 

Tópicos: 

Comentários

eu uso esse modelo ai == ao do sistema de comentario
seu
usando fieldset
label for="nome">Nome:
input

e nao podemos esquecer do css para
colocar cursor:pointer
no input
para ganhar um pouco de acessibilidade dentro
do formulario

henrique