Na primeira seção, você aprendeu a criar um formulário básico. Nesta seção, falaremos sobre as práticas recomendadas. Neste módulo, você vai aprender sobre a experiência do usuário (UX), e porque uma interface do usuário (UI) bem implementada pode fazer uma grande diferença.
Criar interfaces amigáveis
Preencher formulários pode ser demorado e frustrante. Não precisa ser assim. Para garantir uma ótima UX, a interface precisa ser intuitiva. Garanta a qualidade da estrutura do formulário e do design gráfico (layout, espaçamento, tamanho da fonte e cor), e lógica (como texto dos rótulos e tipos de entrada apropriados). Vamos dar uma olhada em como você pode melhorar seu formulário e torná-lo mais fácil de usar.
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ários.
Usar um rótulo para cada controle de formulário
Quer adicionar um novo controle de formulário ao seu formulário? Para começar, adicione o rótulo ao novo campo. Dessa forma, você não se esquecerá de adicioná-la.
Adicionar rótulos primeiro também ajuda você a se concentrar nas metas do formulário. De quais dados eu preciso aqui? Quando isso 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 forma:
<label for="email">Enter your email address</label>
Ou você pode descrevê-lo assim:
<label for="email">Email address</label>
Qual descrição você escolheria?
Para nosso exemplo, o texto "Endereço de e-mail" de preferência, porque rótulos curtos são mais fáceis de ler, reduzem a confusão visual e ajudar 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ê o coloca?
Programas de pesquisa essa prática recomendada é posicione o rótulo acima do controle de formulário, para que o usuário possa verificar um formulário rapidamente e ver qual marcador pertence a qual controle de formulário.
Como criar formulários
Um bom design de formulário pode
de reduzir significativamente as taxas de abandono de formulários.
Ajudar os usuários a inserir dados usando o elemento e o tipo de entrada apropriados
Existem várias
elementos de formulário e tipos de entrada disponíveis.
Para oferecer a melhor UX, use o elemento e o tipo de entrada mais adequados ao seu caso de uso.
Caso o usuário precise preencher várias linhas de texto, use o elemento <textarea>.
Onde for necessário aceitar os Termos e Condições do site, use <input type="checkbox">.
Também é necessário diferenciar visualmente os diferentes tipos de controles de formulários. Um botão deve ser semelhante a um botão. Uma entrada, como uma entrada. Facilite o trabalho dos usuários para reconhecer a finalidade de um controle de formulário. Por exemplo, se algo parece um link, um clique abre uma nova página, e não enviar um formulário.
Ajudar usuários a navegar pelos formulários
Um layout extravagante pode ser divertido, mas pode atrapalhar o preenchimento de um formulário.
Especificamente, programas de pesquisa o melhor é usar só 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 seu formulário, deixar os botões grandes o suficiente.
As recomendações
tamanho do ponto de toque de um botão é de pelo menos 48 px.
Também adicione espaçamento suficiente entre os controles de formulário usando margin.
propriedade CSS 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 para cada dispositivo apontador,
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
pointer Recurso de mídia CSS.
Mostre os erros onde eles ocorrem
Para que os usuários descubram qual controle de formulário precisa de atenção, exibir mensagens de erro ao lado do controle de formulário ao qual se referem. Ao exibir erros no envio do formulário, navegue até o primeiro controle de formulário inválido.
Deixar claro para os usuários quais dados precisam ser inseridos
Confirme se os usuários sabem como inserir dados válidos. É necessário inserir pelo menos oito caracteres para a 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>
Deixar claro para os usuários quais campos são obrigatórios
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Deixe claro se um campo é obrigatório. A Anatomia dos formulários acessíveis (link em inglês) explica alternativas para indicar campos obrigatórios. Se a maioria dos campos de um formulário for obrigatória, talvez seja melhor indicar campos opcionais.
Como conectar mensagens de erro aos controles de formulário para torná-los acessíveis aos leitores de tela? Você vai aprender sobre isso no próximo módulo.
Teste seu conhecimento
Teste seus conhecimentos sobre como projetar formulários
Como você descreve um controle de formulário?
<description>.<label>.description.placeholder.Qual é o tamanho recomendado para o ponto de toque?
Onde você deve colocar as mensagens de erro?
<form>.