Refatorando Padrões

Continuando com o assunto do artigo anterior, vou procurar demonstrar como um layout de formulário complexo pode alcançar melhor usabilidade com simples mudanças de posicionamento dos campos e rótulos (labels).

Suponhamos este exemplo de formulário abaixo.

Detalhe importante: o formulário acima não parece complexo pois é um pequeno exemplo com alguns campos para ajudar no entendimento do artigo, seria inútil criar um enorme cadastro sendo que o importante é o princípio que vou demonstrar =D.

Antes de criar o layout de um formulário desse tipo, devemos nos fazer duas perguntas:

É um formulário que o usuário irá utilizar constantemente ?

Se a resposta for sim então imaginem um típico trabalhador de almoxarifado, ele recebe várias notas fiscais todos os dias para dar entrada no sistema, ele já conhece de cabo a rabo, na sequência, todos os campos a serem digitados. Ou seja, o formulário fica melhor se for cada campo e rótulo em uma linha, exatamente como no artigo anterior, para que ele faça tudo sempre na mesma sequência. Automatize isso na mente dele.

Se a resposta for não então voltemos ao exemplo do formulário acima. Vamos supor que ele esteja disponível ao público. Nesse caso, o formato tem que ser mais defensivo, deixar a pessoa informada sobre o que é preciso para preenchê-lo. Exemplo remodelado:

Cada rótulo e campo juntos ocupam uma linha sozinhos, todos os rótulos no mesmo alinhamento à esquerda, assim como os campos. O que vai acontecer aqui é o seguinte, o usuário vai prestar atenção primeiro no que está escrito nos rótulos. Indo de cima para baixo ele irá ler “nome, rg, cic, etc” sem dar a mínima atenção para os campos. Por consequência, ele irá se preparar para o preenchimento deles e até mesmo pensar: “preciso dos meus documentos antes de começar”. Aí sim, ele volta ao início de tudo, presta atenção no rótulo na esquerda e preenche o campo na direita, desce uma linha e prossegue assim até o fim, na mesma sequência de movimentação dos olhos.

Se tivesse utilizado o esquema de layout do artigo anterior, a pessoa ia ter a leitura dos rótulos atrapalhada pelos campos, e não se “preparia” para o preenchimento, esse “preparo” forçado é bom pois o usuário nunca viu este formulário.

Há um espaço em branco entre cada rótulo e campo, procurem minimizar este espaço não colocando rótulos de comprimento muito desiguais, pois atrapalharia a concentração na leitura da esquerda para direita.

É um formulário que pode ser agrupado em formulários menores ?

No exemplo, observem que podemos agrupar os campos:

Em um grupo temos os dados pessoais e em outro grupo temos os dados de usuário. É muito importante fazer essa separação, mantêm o usuário focado em um pequeno assunto dentro do formulário. Procurem colocar uma demarcação visual para separar estes agrupamentos, sem nunca esquecer as regras de posicionamento dos campos, mesmo nestes formulários menores, mantenham um padrão.

Claro que podemos ajudar ainda mais, é imprescindível colocar pequenas dicas e ajudas de preenchimento, mas nosso foco aqui no artigo é posicionamento dos objetos no formulário, fica para um futuro artigo falar sobre estes pequenos auxílios visuais.