Refatorando Padrões

Quem diria que um layout pré-aprovado pelo cliente seria sumariamente rejeitado na entrega do layout final. Atônito, já pensava em refazê-lo. É dura a vida de freelancer, nem posso pedir a um estagiário que refaça =D.

Antes de recomeçar, é sempre importante parar e pensar: “Onde está o erro, qual o problema desse layout ?”, pense como seu cliente, como ele gosta de ver sites e como é o seu público. Foi exatamente o que fiz, percebi que o meu cliente e também o público alvo do website possuem pelo menos mais de 45 anos e segundo suas próprias palavras “Este site parece coisa de gente jovem!”

Voltando no tempo, nas aulas de IHC da faculdade, minha professora já tinha dito “Com o passar dos anos as pessoas vão ficando mais sensíveis às cores, portanto o vermelho que vemos hoje não é o mesmo que veremos amanhã, por isso os idosos acabam preferindo cores mais opacas”, claro que há exceções, sempre existem idosos radicais =D

Na verdade o website não parecia muito de gente jovem, o problema foram as cores usadas que tinham tonalidades fortes para alguém mais velho.

Pois bem, lembrando disso minha alteração foi apenas abrir o CSS e diminuir as tonalidades das cores, deixa-as mais opacas e enviei ao cliente.

SUCESSO! Layout aprovado com honras. Nem perceberam que era o mesmo layout…

Portanto entendam seu cliente, pensem como ele, somente o cliente é capaz de fornecer dicas valiosas sobre o público alvo, depois disso façam o website pensando nesse público alvo. O conteúdo é a parte mais importante de um website, dedique sempre muito mais horas a isto mas não se esqueça da embalagem. Pensar em uma cor parece uma coisa boba, mas me salvou horas de retrabalho.

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.

Usabilidade para mim era o mesmo que design, nunca me importei com a melhoria delas no sentido de ajudar o usuário. O tempo passou e fui percebendo as dificuldades encontradas até mesmo em preenchimentos de formulários simples. Na minha arrogância, imaginei que fosse problema das pessoas em se adaptarem ao sistema, até que Jakob Nielsen finalmente abriu meus olhos.

Vejamos um exemplo:

Parece um inocente formulário, dados simples e fáceis de serem preenchidos, mas por um momento tente mentalmente preencher este formulário. Normalmente nossos olhos vão de cima para baixo, da esquerda para direita, mas por algumas vezes voltamos para verificar se preenchemos os dados anteriores e quando terminamos essa verificação temos que lembrar onde paramos. Mesmo após preencher tudo não sabemos exatamente onde focar nossa atenção.

É muito comum encontrarmos formulários assim, o designer tenta preencher todos os buracos vazios na tela, criar uma estética simétrica, sem pensar que o usuário irá interagir com esses campos.

As normas da usabilidade recomendam a forma abaixo para expor os campos para preenchimento:

A mudança é simples, cada campo e rótulo (label) ocupa sozinho uma linha, o usuário fará apenas uma única leitura de cima para baixo, sem chances de dispersar os olhos. Ele lê o rótulo, preenche o campo e segue para o rótulo seguinte até chegar no botão enviar. Muito mais rápido para preenchimento, o usuário foca em uma única informação por vez.

Claro que ficou um buraco branco no formulário, mas se formos criativos no design, o buraco branco será facilmente disfarçado.

Lembrem-se, quanto mais rápido e fácil um usuário preencher um formulário, mais chance temos que ele compre nossos produtos =D. Preencher formulários é tedioso, se o usuário sentir que é difícil continuar com o preenchimento ele não vai pedir ajuda para a atendente online, vai simplesmente comprar no site do concorrente. Sempre que possível procurem fazer um teste com pessoas não técnicas para preenchimento de seus formulários.

O que demonstrei acima é válido para formulários rápidos e comuns, como preenchimento de endereço. Para formulários mais complexos a recomendação é outra, no próximo post vou continuar com esta explicação.