Na primeira seção, você aprendeu a criar um formulário básico. Esta seção aborda as práticas recomendadas. Neste módulo, aprenda sobre a experiência do usuário (UX) e por que uma interface do usuário (IU) bem implementada pode fazer uma grande diferença.
Como criar interfaces fáceis de usar
Preencher formulários pode ser demorado e frustrante. Não precisa ser assim. Para garantir uma ótima UX, a interface precisa ser intuitiva. Envie a estrutura e o design gráfico ideais (layout, espaçamento, tamanho da fonte e cor) e uma interface lógica (como o texto dos rótulos e os tipos de entrada adequados). Vamos analisar como você pode melhorar e facilitar o uso do seu formulário.
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.
Usar um rótulo para cada controle de formulário
Quer adicionar um novo controle de formulário ao seu formulário? Comece adicionando o rótulo ao novo campo. Dessa forma, você não vai se esquecer de adicioná-la.
Adicionar rótulos primeiro também ajuda a se concentrar nas metas do formulário. Quais dados são necessários aqui? Assim que estiver claro, você poderá se concentrar em ajudar o usuário a inserir dados e preencher o formulário.
Texto do marcador
Digamos que você queira descrever um campo de e-mail. Você pode fazer isso da seguinte maneira:
<label for="email">Enter your email address</label>
Ou você poderia descrevê-lo assim:
<label for="email">Email address</label>
Qual descrição você escolhe?
Para nosso exemplo, é preferível usar o termo "Endereço de e-mail", já que marcadores curtos são mais fáceis de verificar, reduzem a confusão visual e ajudam os usuários a entender quais dados são necessários mais rapidamente.
Posição do rótulo
Com o CSS, é possível posicionar um rótulo na parte superior, inferior, esquerda e direita de um controle de formulário. Onde você coloca isso?
A pesquisa mostra que a prática recomendada é posicionar o rótulo acima do controle do formulário, para que o usuário possa verificar um formulário rapidamente e ver qual rótulo pertence a qual controle de formulário.
Como criar formulários
Um bom design pode
reduzir significativamente as taxas de abandono de formulário.
Ajude os usuários a inserir dados usando o elemento adequado e o tipo de entrada
Você pode escolher entre vários
elementos de formulário e tipos de entrada.
Para oferecer a melhor UX, 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>.
Nos locais em que for necessário aceitar os Termos e Condições do site, use <input type="checkbox">.
Você também deve diferenciar visualmente os diferentes tipos de controles de formulário. Um botão deve se parecer com um botão. Uma entrada, como uma entrada. Deixe claro para os usuários a finalidade de um controle de formulário. Por exemplo, se algo se parecer com um link, um clique nele abrirá uma nova página, e não enviará um formulário.
Ajudar os usuários a navegar pelos formulários
Um layout extravagante pode ser divertido, mas pode atrapalhar o preenchimento de um formulário.
Em particular, pesquisas mostram que é melhor usar apenas uma coluna. Os usuários não querem perder tempo pesquisando onde está o próximo controle de formulário. Usando 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 o formulário, deixe os botões grandes o suficiente.
O tamanho da área de toque recomendado para um botão é de pelo menos 48 px.
Também é necessário adicionar espaçamento suficiente entre os controles de formulário usando a propriedade CSS margin
para evitar interações acidentais.
O tamanho padrão dos controles de formulário é muito pequeno para ser realmente utilizável. Aumente o tamanho usando padding e mudando o font-size padrão.
É possível definir tamanhos diferentes para dispositivos apontadores distintos,
por exemplo, 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.
Mostre os erros onde eles ocorrem
Para que os usuários descubram facilmente qual controle de formulário precisa da atenção, exiba mensagens de erro ao lado do controle de formulário a que se referem. Ao mostrar erros no envio do formulário, navegue até o primeiro controle inválido.
Deixe claro para os usuários quais dados inserir
Confirme se os usuários sabem como inserir dados válidos. É necessário inserir pelo menos oito caracteres para uma senha? Conte 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-o óbvio. A anatomia de formulários acessíveis (em inglês) explica as alternativas para indicar os campos obrigatórios. Se a maioria dos campos em um formulário for obrigatória, pode ser melhor indicar campos opcionais.
Como conectar mensagens de erro a controles de formulário para torná-los acessíveis a leitores de tela? Você vai aprender sobre isso no próximo módulo.
Teste seu conhecimento
Teste seus conhecimentos sobre como criar formulários
Como você descreve um controle de formulário?
<description>.<label>.description.placeholder.Qual é o tamanho da área de toque recomendado?
Onde você deve colocar as mensagens de erro?
<form>.