Fundamentos de design

Na primeira seção, você aprendeu a criar um formulário básico. Esta seção é sobre práticas recomendadas. Neste módulo, você vai aprender sobre a experiência do usuário (UX) e por que uma interface do usuário (UI) bem implementada pode fazer uma grande diferença.

Criar interfaces fáceis de usar

Preencher formulários pode ser demorado e frustrante, mas não precisa ser assim. Para criar uma ótima experiência do usuário, verifique se a interface é intuitiva. Ofereça uma estrutura de formulário e um design gráfico (layout, espaçamento, tamanho e cor da fonte) ideais, além de uma interface lógica (como texto do rótulo e tipos de entrada adequados). Veja como melhorar seu formulário e facilitar o uso dele.

Rótulos

Você se lembra para que serve o elemento <label>? Um rótulo descreve um controle de formulário. Um rótulo visível e bem escrito ajuda o usuário a entender a finalidade de um controle de formulário.

Use um rótulo para cada controle de formulário

Quer adicionar um novo controle de formulário? Comece adicionando o rótulo do novo campo. Assim, você não se esquece de adicionar.

Adicionar rótulos primeiro também ajuda a se concentrar nas metas do formulário: quais dados preciso aqui? Depois que isso estiver claro, você poderá se concentrar em ajudar o usuário a inserir dados e preencher o formulário.

Texto do rótulo

Diga que você quer descrever um campo de e-mail. Para isso, faça o seguinte:

<label for="email">Enter your email address</label>

Ou você pode descrever assim:

<label for="email">Email address</label>

Qual descrição você escolhe?

No nosso exemplo, a frase "Endereço de e-mail" é preferível, porque rótulos curtos são mais fáceis de verificar, reduzem a confusão visual e ajudam os usuários a entender mais rápido quais dados são necessários.

Posição do rótulo

Com CSS, é possível posicionar um rótulo na parte de cima, de baixo, à esquerda e à direita de um controle de formulário. Onde você coloca?

Pesquisas mostram que a prática recomendada é posicionar o rótulo acima do controle de formulário. Assim, o usuário pode verificar um formulário rapidamente e ver qual rótulo pertence a qual controle.

Criar formulários

Um bom design de formulário pode reduzir significativamente as taxas de abandono. Ajude os usuários a inserir dados usando o elemento e o tipo de entrada adequados. Há vários elementos de formulário e tipos de entrada para escolher. Para oferecer a melhor experiência do usuário, use o elemento e o tipo de entrada mais adequados para seu caso de uso. Se o usuário precisar preencher várias linhas de texto, use o elemento <textarea>. Quando for necessário aceitar os Termos e Condições do site, use <input type="checkbox">.

Também é recomendável diferenciar visualmente os diferentes tipos de controles de formulário. Um botão precisa parecer um botão. Uma entrada como uma entrada. Facilite para que os usuários reconheçam a finalidade de um controle de formulário. Por exemplo, se algo parecer um link, clicar nele deve abrir uma nova página, e não enviar um formulário.

Ajudar os usuários a navegar em formulários

Um layout extravagante pode ser divertido, mas pode atrapalhar o preenchimento de um formulário.

Em particular, a pesquisa mostra que é melhor usar apenas uma coluna. Os usuários não querem perder tempo procurando onde está o próximo controle de formulário. Ao usar uma coluna, há apenas uma direção a seguir.

Ajudar os usuários a interagir com formulários

Para evitar toques e cliques acidentais e ajudar os usuários a interagir com seu formulário, faça botões grandes o suficiente. O tamanho recomendado da área de toque de um botão é de pelo menos 48 px. Adicione também espaçamento suficiente entre os controles de formulário usando a propriedade margin do CSS para evitar interações acidentais.

O tamanho padrão dos controles de formulário é muito pequeno para ser realmente útil. Aumente o tamanho usando padding e mudando o font-size padrão.

É possível definir tamanhos diferentes para dispositivos apontadores diferentes, como um mouse, usando o recurso de mídia CSS pointer.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

Saiba mais sobre o recurso de mídia CSS pointer.

Mostrar erros onde eles acontecem

Para facilitar a identificação do controle de formulário que precisa da atenção dos usuários, mostre mensagens de erro ao lado do controle de formulário a que se referem. Ao mostrar erros no envio de formulários, navegue até o primeiro controle de formulário inválido.

Deixe claro para os usuários quais dados devem ser inseridos

Verifique se os usuários entendem como inserir dados válidos. Eles precisam inserir pelo menos oito caracteres para uma senha? Diga a eles.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

Deixe claro para os usuários quais campos são obrigatórios

<label for="name">Name (required)</label>
<input name="name" id="name" required>

Se um campo for obrigatório, deixe isso claro. The Anatomy of Accessible Forms (em inglês) explica alternativas para indicar campos obrigatórios. Se a maioria dos campos em um formulário for obrigatória, talvez seja melhor indicar os campos opcionais.

Como você pode conectar mensagens de erro a controles de formulário para torná-los acessíveis a leitores de tela? Saiba mais sobre isso no módulo Acessibilidade.

Teste seu conhecimento

Teste seus conhecimentos sobre design de formulários

Recursos

• Criar formulários incríveis
• Práticas recomendadas para design de formulários para dispositivos móveis
• Baymard Institute: pesquisa de UX em e-commerce (em inglês)
• Don't Make Me Think (em inglês)