Usabilidade em preencimento de pequenos formulários
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.
Assine o feed
Eduardo Miranda said,
July 23, 2007 @ 7:29 am
Outra fonte ótima de informação sobre designs de aplicativos é o web-site do Luke Wroblewski (http://www.lukew.com). Principalmente esta apresentação (http://www.lukew.com/resources/articles/HFES01_Web_Applications.pdf)
Emerson said,
July 23, 2007 @ 9:08 am
Só uma observação, coloca o CEP na antes, verifica na base de dados alguem com o mesmo CEP e carrega os demais campos na tela para o usuário não ter que digitar.
Carlos Oliveira said,
July 23, 2007 @ 11:24 am
Oi Emerson,
Não era minha intenção neste post mostrar estes detalhes, eles são bem vindos para a usabilidade, mas minha intenção foi mais para atentar à ordem de preenchimento e posicionamento dos campos.
Abraços
Carlos Oliveira said,
July 23, 2007 @ 11:35 am
Oi Eduardo,
Gostei muito da apresentação do Luke Wroblewski, sintetizou em um pdf muitos ótimos padrões para usabilidade. Valeu!
Abraços
Fabio Oliveira said,
July 23, 2007 @ 1:07 pm
Cara, isso sempre foi uma pedra no meu caminho, que acabou de ser retirada. Uma coisa que sempre achei muito interessante são aplicações que geram automaticamente a interface com o usuário através de metadados e instrospecção, como o projeto Naked Objects (www.nakedobjects.org). Mas gerar formulário automaticamente é fácil, o difícil é posicionar como a maioria dos web designers desejam, ocupando todo o espaço em branco. Esse é um problema computacionalmente difícil colocado dessa forma. Mas colocar um campo debaixo do outro como indica este padrão é muito mais fácil, e agora tenho o aval de um grande designer de interfaces. Muito bom!
Rosangela said,
July 25, 2007 @ 10:31 am
Muito bom seu texto, realmente é muito util para nós, desenvolvedores. Agora só uma observação: Este formulário em que estou preenchendo agora o comentário é um exemplo irrefutável de interface ruim e usabilidade zero. Repare como os campos de inserção vêm antes dos rótulos. Que paradoxo, não?
Abraço.
Carlos Oliveira said,
July 25, 2007 @ 1:58 pm
Oi Rosangela,
Realmente, falha grave. Na verdade eu preciso mesmo é criar vergonha na cara e criar um layout exclusivo para o meu blog =D, este atual é um template de outra pessoa e eu não gosto muito do código gerado por ele, mas está servindo provisoriamente aos propósitos =D.
Já corrigi essa falha, muito obrigado pelo aviso e pelo elogio!
Abraços
Refatorando Padrões » Blog Archive » Usabilidade em preenchimento de formulário complexos said,
July 30, 2007 @ 4:44 am
[...] Refatorando Padrões Programação orientada às melhores práticas « Refatorando Padrões home page « Usabilidade em preencimento de pequenos formulários [...]
O novo « File NoT Found said,
June 11, 2008 @ 3:32 pm
[...] usabilidade-em-preencimento-de-pequenos-formularios [...]