Os formulários permitem que o usuário forneça, a partir de um site, plataforma web, ou aplicativo móvel, diversos tipos de informações e as envie para destinatários definidos, para realizar ações como pagamentos de impostos, compras de mercadorias, contratos de serviços, registros de participação em comunidades.

As informações encaminhadas podem ser incluídas em bancos de dados e gerar respostas automáticas – como para a compra de um produto ou a contratação de um serviço, por exemplo. Podem também ser enviadas por email para uma pessoa responsável pela resposta ou por seu encaminhamento a terceiros.

Contextos comerciais que dependam dos dados fornecidos, da interlocução com os usuários, ou dos relacionamentos que se estabelecem a partir dos dados submetidos, dependem essencialmente da funcionalidade dos formulários.

Seu rendimento deve ser acompanhado e testado para a verificação do desempenho comercial e funcional, o que permite seu contínuo aperfeiçoamento e adaptação às necessidades dos usuários.

Para o projeto de formulários

Informações claras e programação visual simples, para que o preenchimento seja fácil e intuitivo, com leitura adequada ao contexto de uso. No caso de campos com preenchimento de números, isto deve ser indicado.

Redigir claramente as informações e simplificar o layout dos formulários facilita o preenchimento dos formulários

O formulário acima provê, ao lado dos campos, informações que ajudam os usuários a preenchê-los com segurança. As instruções são sucintas, amigáveis e úteis, sem que os clientes precisem selecionar links ou abrir janelas adicionais para visualizá-los. Pode-se também ver pelos asteriscos antes do título de cada campo aqueles que devem ser preenchidos em caráter obrigatório.

Durante do projeto da interface, uma análise do preenchimento dos campos permite a antecipação do comportamento dos usuários. Testes ajudam a verificar se as primeiras percepções são acertadas. Depois do lançamento, o acompanhamento das ações permite a verificação da efetividade das soluções e seu aperfeiçoamento.

Formulários amigáveis para dispositivos móveis, em caráter prioritário. Se funcionam bem com as limitações da tela pequena, funcionarão bem também na tela grande de computadores.

Indicação dos campos de preenchimento obrigatório, especialmente se não forem a maioria.

Incluir apenas os campos de preenchimento essenciais. Isto é especialmente importante para sites com design responsivo, sites para dispositivos móveis, ou aplicativos, pois o preenchimento em telas pequenas é mais difícil do que nas telas dos computadores.

Se o campo de input de número de telefone está dividido em três, as pessoas precisam selecionar os três campos para preenchê-los. Em cada um, precisa esperar pelo aparecimento do teclado, mudar para o o modo “número”, escrever e teclar no novo campo. Por que não reduzir as informações para que exijam apenas uma entrada?

Preenchimento automático de campos, quando possível, como os campos de CEP, por exemplo.

Caso o usuário tecle “Enter” e receba uma mensagem para preencher um campo em branco, o resto do formulário deve permanecer preenchido, em vez de limpar todos os campos.

Elementos obedecem a convenções amplamente aceitas, como no caso dos botões de rádio e caixas de seleção.

Informação prévia do que vai acontecer a partir do preenchimento do formulário, para fortalecer a relação de confiança com o cliente.

Teste de usabilidade da solução adotada, caso haja captchas para garantir o preenchimento dos formulários por pessoas (e não mecanismos automatizados). Captchas em formato imagem são resolvidas em média em 9.8 segundos e consenso de 71% entre 3 pessoas; já captchas sonoras são resolvidas em 28.4 segundos e consenso de 31.2% entre 3 pessoas. (1, PDF)

Textos de ajuda junto ao input apenas quando necessários. Pode-se usar um ícone próximo do campo, que apareça com um clique, ou que apareça no próprio campo quando o usuário digitar os dados.

Rótulos associados aos campos do formulário, com uso doo atributo “for”, para selecionar o rótulo ao campo dos formulários, o que provê uma área maior para seleção, especialmente em listas de opção (radio buttons) e conjunto de escolhas (checkboxes), além de facilitar a navegação por teclado.

Recursos de HTML5 e JavaScript que permitam a validação no próprio dispositivo do cliente em celulares, pois reduzem a quantidade de dados transferidos, especialmente em caso de conexão frágil. No entanto, alguns dispositivos, como os Blackberries não aceitam JavaScript por default.

Também em celulares, facilidade de preenchimento automático de campos, baseado no preenchimento de outros, como o preencimento de campo de CEP a partir dos dados de rua + cidade. Também a repetição do preenchimento de email para usuários logados em um sistema pode ser evitada.

Possibilidade de entrada de dados a partir do mouse ou teclado e a saída de dados em impressora escolhida pelo usuário.

(Atualizado em 28.4.2015)

 

 

Referências

How to build an awesome form, Kuba Chrześcijanek (Brad Frost, acesso em 13.10.2015)

Designing an effective donate form, Brad Frost (Brad Frost, acesso em 28.4.2015)

The God Login, Jeff Atwood (Coding Horror, acesso em 6.2.2015)

(PDF) The F variation and its effects, Jakub Linowski (Good UI, acesso em 3.9.2014)

An extensive guide to web form usability, Justin Mifsud (Smashing Magazine, acesso em 6.7.2014)

HTML5 forms input types, de Richard Clark (HTML5 Doctor, acesso em 21.3.2013)

Removing stumbling blocks in mobile forms, Robert Brauer (Smashing Machine, acesso em 8.5.2012)

20 Excellent examples of forms in web design (WDL, acesso em 19.11.2011)

1) How good are humans at solving CAPTCHAs? A large scale evaluation (PDF), Elie Bursztein, Steven Bethard, Celine Fabry, John C. Mitchell, Dan Jurafsky (Stanford University, acesso em 30.6.2010)

Patterns for sign up & ramp up – Inspiration and guidelines from the web 2.0 landscape (Adaptive Path, acesso em 23.4.2010)

The $300 million button, Jared Spool (User Interface Engeneering, acesso em 27.12.2009)

 Livro: Web form design, de Luke Wroblewski. Rosenfeld Media, 2008 (LukeW, acesso em 27.12.2009)

Formulários acessíveis e-gov (link direto para PDF, 160Kb) – recomendações para o desenvolvimento de formulários acessíveis

Grid layout para formulário (RamonPage, de Ramon Bispo, acesso em 5.8.2007)