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>
.