desenv-web-rp.com

Posição da etiqueta do formulário para melhor usabilidade

Estou criando um formulário que solicitará a um visitante seus firstname, middle initial e lastname. Quero que esses campos de texto estejam todos em linha, mas onde devo colocar os rótulos? À esquerda, em cima ou embaixo dos campos.

Estou procurando a melhor abordagem do ponto de vista da usabilidade.

16
Shane Stillwell

Dê uma olhada em este estudo de UXmatters . É bastante detalhado, inclui dados sobre rastreamento ocular e conclui que as etiquetas no topo são, em geral, a melhor solução.

artigo semelhante de Luke Wroblewski , também bastante detalhado. Vale a pena ler os dois artigos!

10
Grant Palin

O mais importante é ser consistente com o resto do seu site. Em geral, a maioria dos sites faz os rótulos à esquerda dos campos de texto. Por essa causa, seria uma descrição longa, portanto, verifique se você tem espaço e corre bem.

Se à esquerda não parecer direito ou se não houver espaço para fazê-lo, eu o faria acima. Como isso é muito claro.

O único método que eu evitaria é colocar os rótulos nos campos de texto. quando os rótulos estão sob os campos, é mais confuso.

5
Ben Hoffman

Normalmente, para sua situação, no topo ou na esquerda é o melhor. Apenas verifique se o rótulo vem antes do campo de entrada para acessibilidade.

Ainda existem muitas maneiras diferentes de fazer o layout de uma página e ser acessível.

Os rótulos dos formulários podem realmente aparecer em qualquer lugar que você desejar, desde que seja necessário. Este recurso vale uma olhada, http://patterntap.com/tap/collection/forms

4
Kevin

Existem duas opções consideradas melhores:

  • rótulos à esquerda do campo, alinhados à direita para que fiquem próximos à entrada.
  • etiquetas acima do próprio campo

outra coisa importante a ser observada na usabilidade para garantir que você esteja usando o atributo for do rótulo, para que clicar no rótulo se concentre no campo que rotula.

3
GSto

Resposta: Nenhuma das opções acima. Use espaço reservado texto dentro do próprio campo. O atributo placeholder é uma parte interna do HTML-5.

Caso contrário, eu diria que coloque-o acima dos campos, alinhado à esquerda.

1
Adam L Davis

Isso é um pouco tangente - mas não use nome/sobrenome/inicial. Nem o nome de todos se enquadra nesse grupo arrumado.

Citando-me no StackOverflow:

Muitas culturas asiáticas colocam o nome da família em primeiro lugar, porque a família é considerada mais importante que o indivíduo.

Observando que há um número razoável de pessoas que usam um nome que não é o concedido pelos pais, usei o seguinte esquema com algum sucesso:

Nome completo (normalmente escrito para endereçar correspondência); Sobrenome; Conhecido como (o nome comumente usado na conversa).

Por exemplo.:

Nome completo: William Gates III; Nome de Família: Gates; Conhecido como: Bill

Nome completo: Soong Li; Nome de Família: Soong; Conhecido como: Lisa

Consulte https://stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 para obter mais informações.

0
Bevan