Componentes da interface web
Formulários
Simplicidade do preenchimento
Quanto menor o formulário, menos tempo o usuário leva para preenchê-lo. E quanto maior a necessidade de participação do usuário para num site ou negócio através de formulários, mais importante é este tempo para o sucesso do site.
A maioria dos usuários de web sites resiste em preencher de formulários muito grandes.
-> Se por exemplo, o usuário vê que o formulário é longo o suficiente para apresentar uma barra de rolagem, só o preenche se vai ganhar alguma coisa que realmente valha a pena tanto esforço, como baixar um arquivo, comprar um artigo que precisa, ganhar um bom brinde ou ter acesso a informações preciosas.
Por isto, a quantidade e a extensão dos campos que o usuário precisa preencher deve ser cuidadosamente avaliada, para evitar que este perca o seu tempo escrevendo informações que não serão utilizadas. E o preenchimento deve ser facilitado ao máximo.
-> O tamanho das caixas de texto deve corresponder aproximadamente à expectativa de quantidade de texto. Ou seja, o campo para a inserção de um número de telefone não deve ter o mesmo tamanho que um campo para a inserção de endereço, por exemplo.
O formato dos campos relativos a datas e números, como os de endereços e telefones, por exemplo, também deve ser sinalizado.
■ Os campos de preenchimento obrigatório devem estar claramente sinalizados. Em formulário grandes, é educado sinalizar ao usuário quando um campo obrigatório deve ser preenchido em branco durante o preenchimento. É desagradável preencher um formulário grande, submetê-lo, e descobrir que campos obrigatórios estão vazios.
Em formulários pequenos, se o usuário deixar de preencher um campo obrigatório, deve ser avisado por mensagem e o cursor procurar o campo para preenchimento.
■ O processo de acompanhamento automatizado do preenchimento, com a verificação do preenchimento correto dos campos, é chamado de validação.
-> Se o formulário pede o endereço de email e a resposta não incluir o caracter "@" aparece um aviso de alerta para que o usuário reveja o texto digitado, ou então pedindo que preencha um campo de preenchimento obrigatório, por exemplo, .
A validação de formulários simples pode ser realizada no próprio browser do usuário, mas a checagem via servidor permite a inclusão de recursos mais sofisticados e a comparação dos dados inseridos com outros já armazenados anteriormente.
A validação é útil, mas não deve incomodar o usuário com mensagens de erro e comentários. Em alguns casos, quando o cursor é programado para procurar automaticamente o campo de preenchimento obrigatório, pode até atrapalhar o usuário que não quiser preenchê-lo. ► Exemplo
De qualquer forma, é necessário que estas mensagens não sejam severas nem subestimem a capacidade do usuário.
■ O preenchimento de campos que apresentam diferenças regionais, como estados, números de telefone ou números de endereçamento postal não deve estar sujeito a modelos de preenchimento (como o número de dígitos que comporta) muito rígidos.
Alguns usuários acrescentam espaços entre conjuntos de números telefônicos ou de cartão de crédito. É importante que os sistemas estejam preparados para aceitá-los ou excluí-los automaticamente.
■ Formulários muito grandes devem ser divididos em páginas menores, para que o usuário não precise enfrentar de uma única vez uma grande lista de itens e valide o preenchimento aos poucos, o que diminui a incidência de erros ou esquecimentos no final do processo.
-> O formulário do Imposto de Renda brasileiro é um exemplo de formulário longo, dividido em diversas páginas.
Muitos formulários de perfis de comunidades virtuais, como o do LinkedIn, por exemplo, também permitem o seu preenchimento no momento em que o cadastrado acha mais conveniente.
■ A incidência de formulários preenchidos incorretamente pode diminuir se, ao lado de campos com dados que exijam suporte ao usuário, é incluído um sinal "?" que abre uma janela ou quadro com instruções sobre o preenchimento.
■ Quando o usuário submeter o formulário, uma mensagem de agradecimento é sempre bem-vinda, não só para gerar uma acolhida personalizada como para indicar que o processo de envio dos dados foi bem-sucedido.
Exemplo de formulário:
| Sobre você | ||
| Nome* | ||
| Profissão | ||
| Nacionalidade | ||
| Endereço* | ||
| Cidade, país* | ||
| Telefone* | ||
| Celular | ||
| Fax | ||
| Email* | ||
| Projeto | ||
Participantes | ||
| Redação | Projeto visual | |
| Gênero | Ficção Documentário Publicitário | |
| Formato | 35mm 16mm Vídeo digital Vídeo | |
| Cor | Preto e branco Colorido | |
| Duração | ||
| Informação financeira | ||
| Orçamento | ||
| Parceiros | 1 | quantia |
| 2 | quantia | |
| 3 | quantia | |
| Descrição do projeto | ||
| Status | ||
| História | ||
Mais informaçao sobre formulários online
► HTML forms: From basics to style: Layouts, de Vincet Wright (HTML Goodies, acesso em 22.6.2010)
► Buscadores - Analisis 12 aerolineas internacionales, da Arquinauta Consulting (SlideShare, acesso em 23.4.2010)
► Is your registration process scaring away users? de Dana Oshiro (ReadWriteWeb, acesso em 24.1.2010)
► Usability and HTML forms (Webdeveloper's virtual library, 10.12.2001)
