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

16

Estou criando um formulário que irá pedir um visitante para o seu firstname, middle initiale lastname. Quero que os 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.

html usability user-input forms Shane Stillwell
fonte
Isso não é mais apropriado para uxexchange.com? ( uxexchange.com )
Bobby Jack
Uau, eu não sabia que o uxechange.com existia, obrigado. A julgar pelo número de votos positivos sobre esta questão, é definitivamente na mente dos Pro Webmasters.
21410 Shane Stillwell
Sim - é um pouco de um 'problema'. Acredito que o uxexchange foi configurado usando o modelo 'SO antigo'. Sites que usam o novo modelo, como webmasters, parecem estar recebendo muito mais atenção. Então, algo mais relevante para o uxexchange acaba tendo mais sucesso nos webmasters. Não sei ao certo qual é a solução - migrar uxexchange?
Bobby Jack

Respostas:

10

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

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

Grant Palin
fonte
+1 eu postaria exatamente os mesmos recursos. Realmente, qualquer resposta a essa pergunta deve incluir estudos.
Virtuosi Media
Era isso que eu estava procurando, algumas comparações entre esquerda e superior. Tenho certeza de que muito disso é subjetivo, mas, no entanto, deve haver alguns layouts que são um pouco melhores e todas as coisas são iguais. Obrigado.
Shane Stillwell
O que também é interessante no artigo do UXmatters foi que eles encontraram rótulos em negrito que distraíam os visitantes e ... "Os rótulos em negrito eram mais difíceis para os usuários lerem e perceberem - provavelmente porque havia mais confusão visual entre o texto em negrito e as bordas adjacentes pesadas dos campos de entrada ". Bom saber.
Shane Stillwell
para não ser um nelly negativo, mas o uxmatters.com não tem uma seção "principais artigos" ou nem usa as ferramentas para webmasters do google para encontrar os artigos mais lidos, o que não é muito experiência do usuário!
Neil McGuigan
5

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.

Ben Hoffman
fonte
3
De qualquer forma, não esqueça o foratributo.
Pierre-Alain Vigeant
4

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

Kevin
fonte
3

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.

GSto
fonte
1

Resposta: Nenhuma das opções acima. Use o texto do espaço reservado 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.

Adam L Davis
fonte
0

Isso é um pouco tangente - mas por favor, 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 /programming/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 para obter mais informações.

Bevan
fonte
Vejo o valor em sua recomendação, mas a pergunta principal será "quem é seu público-alvo?" Se 99% da minha audiência for americana, eu usaria o nome / MI / sobrenome. Eu acho que muitos americanos não entenderiam imediatamente o que seria um nome de família. Como o @RandomBen disse, você precisa ser consistente e a maioria dos sites nos EUA usa Firstname / MI / Lastname.
achou