Poucos usuários se dão conta, mas uma das maiores dificuldades que encontram no manuseio de uma aplicação (seja web, desktop ou até mesmo móvel) está em preencher formulários, telas de login, de contato, de cadastros, de busca etc.

Vamos falar aqui justamente sobre usabilidade e acessibilidade em formulários de preenchimento. Sabemos que o usuário deve encontrar seu objetivo na aplicação com o menor número de cliques possível.

Há também alguns fatores fundamentais na concepção dos diversos tipos de formulários e boas práticas que devem ser muito bem estudados, desde a criação até o desenvolvimento, levando sempre em conta o público?alvo, seu conhecimento sobre o assunto abordado na aplicação e a facilidade de uso.

A interatividade é outro fator fundamental. O usuário deve se sentir participante da interação do formulário e ter despertado o interesse pela navegação e continuidade no preenchimento. É preciso tomar muito cuidado com essa interatividade, pois as coisas não devem acontecer do nada. No momento em que o usuário estiver preenchendo o formulário, por exemplo, não devem surgir animações que atrapalhem ou tirem o foco do cursor.

Vamos ver na prática alguns cuidados na hora da concepção de uma tela de login.

1. O foco do cursor deve sempre estar no primeiro campo do formulário, neste caso, normalmente é o campo do usuário.

Vamos demonstrar para tentar ajudar na prática:

onload significa que o comando será executado quando a página for carregada.

document.forms[0].nome_elemento.focus() seta o foco no campo desejado através da hierarquia apresentada, documento, formulário 0, nome do elemento e foco.

Esta tag deve ser incluída no body do documento html:

onload="document.forms[0].nome_elemento.focus()"

2. Delimite bem área de login dentro da página por meio de uma caixa, através de bordas.

3. Adicionar um título sugestivo para que o usuário saiba para que serve o determinado formulário.

4. Logo abaixo do título, ou logo no início do formulário, deixe um espaço para as mensagens diversas de interação com o usuário, estas mensagens podem ser em cores que chamem a atenção, como tons de vermelho (como “usuário inválido” ou “senha incorreta”). Uma dica para que o espaço desta mensagem não fique vazio é colocar um mini?texto explicativo.

Importante: a aplicação deve ter um tratamento que verifique onde está a falha no momento do login, de modo a identificar se é o nome do usuário que está incorreto ou a senha.. O ideal seria não retornar a mensagem dizendo algo como “Usuário ou senha incorretos”. Este “ou” confunde o usuário no momento do login. No entanto, é preciso precaução em relação à segurança, pois não devemos dizer onde está o erro no momento do login. Fica a questão: até que ponto devemos sacrificar a usabilidade para termos a segurança necessária na aplicação? Há muito a ser discutido ainda sobre isso.

5. Identifique o nome de cada campo do formulário. Por intuição, a maioria das pessoas sabe que em primeiro lugar vem o usuário e depois a senha. Mas a pergunta é: o que deve ser escrito no campo usuário?
Alguns sites usam e?mail como autenticação, outros usam o nome de usuário, outros usam código e assim por diante. Portanto, é interessante identificar o que deve ser digitado no campo.
6. A tela de login também deve ter botões que acionem para a validação de usuário e senha ou quaisquer outros dados a mais que forem solicitados. Pensando sempre em facilidade, devemos deixar um botão “Limpar” junto com o “Enviar”.

Estas considerações foram feitas diretamente para um formulário de login, porém algumas idéias podem ser aplicadas em outros tantos tipos de formulários que podem vir a existir.

Na seqüência deste artigo apresentaremos mais algumas métricas, cuidados e dicas para a criação e desenvolvimento de formulários de preenchimento. Até lá. [Webinsider]

.

Rodrigo Donini

<strong>Rodrigo Donini</strong> (donini@gmail.com) é analista/desenvolvedor, líder de desenvolvimento nas tecnologias Microsoft client/server/web.