Artigo Introdução de wulin.com (www.vevb.com): Uma breve discussão sobre design de formulário no web design diário.
A caixa de entrada (entrada) deve ser dividida logicamente em grupos para que o cérebro possa lidar bem com a relação entre grandes áreas. - "Guia HTML autoritário"
Os aplicativos da Web sempre usam formulários para lidar com a entrada e configuração de dados, mas nem todos os formulários são consistentes. O alinhamento da área de entrada, os respectivos rótulos, métodos de operação e os elementos visuais circundantes afetarão mais ou menos o comportamento do usuário.
Formulário de layout
Considerando que o usuário deve concluir o formulário o mais curto possível, e os dados coletados são familiares para o usuário (como nome, endereço, informações pagas etc.), pode -se dizer que rótulos alinhados verticalmente e caixas de entrada são os melhores. Cada par de tags e caixas de entrada está alinhado verticalmente para dar uma sensação de estar perto de ambos, e um alinhamento esquerdo consistente reduz o movimento dos olhos e o tempo de processamento. O usuário só precisa se mover em uma direção: para baixo.
Neste layout, são recomendados rótulos em negrito, o que pode aumentar seu peso visual e aumentar sua saliência. Se não for negrito, da perspectiva do usuário, o texto da tag e a caixa de entrada será quase o mesmo.
Se os dados em um formulário não estiverem familiarizados ou agrupados logicamente (como vários componentes de um endereço), as tags alinhadas à esquerda poderão ler facilmente as informações do formulário. Os usuários precisam apenas olhar para cima e para baixo para o rótulo na coluna esquerda sem interromper o pensamento deles na caixa de entrada. Mas, dessa maneira, a distância entre o rótulo e sua caixa de entrada correspondente geralmente é prolongada por uma etiqueta mais longa, o que pode afetar o tempo para preencher o formulário. O usuário deve pular para frente e para trás para encontrar as duas tags correspondentes e caixas de entrada.
Isso cria uma solução alternativa, layout alinhado à direita das tags, tornando a conexão entre as tags e as caixas de entrada mais próximas. No entanto, o resultado é que os espaços em branco e rótulos irregulares à esquerda dificultam a recuperação rapidamente do que o formulário precisa ser preenchido. Nos países ocidentais, as pessoas estão acostumadas a escrever da esquerda para a direita, portanto esse layout alinhado à direita causa dislexia para os usuários.
Com a ajuda de elementos visuais
Devido às vantagens do layout alinhado à esquerda do rótulo (fácil de recuperar e reduzir a altura vertical), é tentador corrigir suas principais desvantagens (a separação do rótulo e da caixa de entrada).
Uma solução é adicionar cores de fundo e linhas divididas. Diferentes cores de fundo produzem uma coluna de rótulos verticais e uma coluna de caixas de entrada vertical. Cada conjunto de etiquetas e caixas de entrada é separado por linhas horizontais transparentes. Embora isso pareça bom, ainda existem problemas.
Comparando o formulário anterior (distinção visual subjetiva do usuário), isso adiciona 15 elementos visuais: linhas médias, células cor de fundo e linhas horizontais. Esses elementos desviam a atenção do usuário e dificultam o foco do usuário em elementos importantes, como tags e caixas de entrada. Como Edward Tufte apontou: existem diferenças na própria informação, o que inevitavelmente leva a diferenças sensoriais. Em outras palavras, qualquer elemento visual inútil para o layout interrompe constantemente o layout. Quando você tenta procurar as tags à esquerda, descobrirá que sua visão é sempre interrompida, pare para pensar nessas linhas horizontais, células e cores de fundo.
É claro que isso não significa desistir de cores e linhas de fundo. Eles ainda são muito eficazes na divisão de informações relevantes da área. Por exemplo, uma linha horizontal fina ou uma cor de fundo clara pode ser visualmente combinada com dados relevantes. As cores e linhas de fundo são especialmente eficazes para os principais botões de operação que distinguem o formulário.
Operações primárias e secundárias
A operação principal de um formulário (geralmente enviando ou salva) requer um peso visual relativamente forte (no exemplo acima, tons brilhantes, fontes em negrito, cores de fundo, etc.). Isso é equivalente a dar ao usuário um prompt: você está prestes a preencher o formulário.
Quando um formulário possui várias operações, como continuar e retornar, é necessário reduzir o peso visual das operações secundárias. Isso minimiza o risco de possíveis erros operacionais para os usuários.
Embora o conteúdo acima possa permitir que você projete formulários, combinando layout, elementos visuais e conteúdo ainda requer teste de usuário e análise de dados (avaliação de conclusão, relatório de erros etc.).