10 regras para fazer formulários da Web amigáveis

Sep 14, 2025

Como

Illustration of web forms on an iMac and tablet

Apesar da evolução da interação humana-computador, os formulários ainda permanecem um dos tipos mais importantes de interação para os usuários. As pessoas que usam sua inscrição ou site têm um objetivo específico, e muitas vezes a única coisa entre o usuário e seu objetivo é um formulário. Todos os dias, nós os usamos para nossas atividades essenciais - para completar as compras, para se inscrever em redes sociais, para fornecer feedback sobre um produto que compramos, e mais - eles são uma grande parte de experiência de usuário .

Como resultado, é muito importante para nós sermos capazes de completar formulários on-line rapidamente e sem confusão. Quanto menos esforço temos que gastar, mais felizes somos. Como designers e desenvolvedores, devemos nos esforçar para produzir experiências de forma mais rápidas, mais fáceis e mais produtivas para nossos usuários.

No segundo dos meus dois artigos explorando como construir formas melhores ( Encontre o primeiro aqui ), Aqui estão as minhas 10 dicas para projetar formulários que são fáceis de usar. Não é bem o que você está procurando? Você pode precisar de nossos guias para o topo Construtor de sites ou armazenamento na núvem serviço.

01. Só pergunte o que é necessário

Cortar a quantidade de informações necessárias torna o formulário mais fácil de preencher. Você deve sempre questionar por que e como as informações solicitadas estão sendo usadas. Tente minimizar o número de campos o máximo possível, porque cada campo que você adiciona a um formulário afetará sua taxa de conversão. Limitar o número de perguntas e campos tornam sua forma menos carregada, especialmente quando você solicita muitas informações de seus usuários.

02. Encomende os campos logicamente

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Pense na sua forma como uma conversa; você quer agrupar e pedir os campos em uma ordem que faz sentido ao usuário

É útil pensar em uma forma como semelhante a uma conversa. Como qualquer conversa normal, deve ser representado por uma comunicação lógica entre duas partes: uma pessoa e seu aplicativo. Detalhes devem ser solicitados em um pedido que seja lógico da perspectiva de um usuário, não o da aplicação ou banco de dados. Por exemplo, é incomum solicitar o endereço de alguém antes de seu nome.

Também é muito importante agrupar questões relacionadas em blocos, então o fluxo de um conjunto de perguntas para o próximo será melhor se assemelhar a uma conversa. Agrupar campos relacionados também ajuda os usuários a entender as informações que devem preencher.

Retratado acima são exemplos de dois formulários de registro. Formas longas podem se sentir esmagador se você não agrupar campos relacionados - comparar o formulário à esquerda para a versão melhorada à direita.

O agrupamento precisa ser realizado visualmente, bem como no código. Por exemplo, você poderia usar o & lt; fieldset & gt; e & lt; legend & gt; Elementos para associar controles de formulários relacionados:

 & lt; fieldset & gt;
  & lt; Legend & GT; Informações pessoais: & lt; / legend & gt;
  & lt; div & gt;
    & lt; etiqueta para = "first_name" & gt; primeiro nome & lt; / label & gt;
    & lt; entrada tipo = "texto" nome = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; etiqueta para = "last_name" & gt; sobrenome & lt; / label & gt;
    & lt; entrada tipo = "texto" nome = "last_name" id = "last_name" & gt;
  & lt; / div & gt;
    & lt; etiqueta para = "gênero" & gt; profissão & lt; / etiqueta & gt;
    & lt; entrada tipo = "texto" nome = "profissão" id = "profissão" & gt;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Mantenha as etiquetas curtas

Os rótulos de campo dizem aos usuários quais significam os campos de entrada correspondentes. O texto claro da etiqueta é uma das maneiras primárias de tornar as uis mais acessíveis. Etiquetas informa ao usuário o propósito do campo, mas eles não são ajudam os textos. Portanto, garantindo que eles digitalizem facilmente é uma prioridade - você deve projetar etiquetas sucintas, curtas e descritivas (mantê-las a uma palavra ou duas).

04. Não duplique os campos

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Não faça seus usuários digitarem informações duas vezes - você os frustrará apenas desperdiçando seu tempo

Esse problema é particularmente comum para formas de registro: quase todos encontram um formulário que exige que você digite um endereço de e-mail ou senha duas vezes. Historicamente, isso foi projetado para evitar erros de mictipagem. No entanto, a maioria dos usuários simplesmente copia o campo necessário sempre que o aplicativo permitiu. E se os dados do campo original continham um erro, foi duplicado.

05. Destaque campos opcionais

Idealmente, é melhor não ter campos opcionais. Em linha com o número 1, se uma informação não for necessária, não há sentido desperdiçando o tempo de um usuário. Mas se você usá-los, você deve distinguir claramente quais campos de entrada não podem ser deixados em branco. Geralmente uma pequena marca como um rótulo de asterisco (*) ou "opcional" é suficiente.

06. Tenha cuidado com os padrões

Evite incluir um padrão estático, a menos que você acredite que uma grande parte de seus usuários (por exemplo, 90%) selecione esse valor - particularmente se for um campo obrigatório. Porque? Com esta abordagem, você provavelmente introduzirá erros porque as pessoas digitalizam formulários rapidamente online. Não assuma que eles vão ter tempo para analisar todas as escolhas. Eles podem empurralmente pular algo que já tem um valor.

A única exceção para este ponto é de padrões inteligentes - como aqueles que presenciam o país do usuário com base em seus dados de geolocalização - que podem fazer a conclusão do formulário mais rápido e mais preciso. Mas você ainda deve usá-los com cautela, porque os usuários tendem a deixar campos pré-selecionados como eles são.

07. Minimize a necessidade de digitar

A digitação é um processo lento e propenso a erros, e é especialmente doloroso em um celular, onde os usuários enfrentam as restrições de propriedade de tela limitada. E com mais e mais pessoas usando telas pequenas, qualquer coisa que possa ser feita para evitar que digitar desnecessária melhore a experiência do usuário. Quando apropriado, você pode usar recursos como autocomplete e preencher dados, portanto, os usuários precisam apenas digitar a quantidade mínima de informação.

Preenchimento de suas informações de endereço é muitas vezes a parte mais complicada de qualquer formulário de inscrição on-line, graças a vários campos, nomes longos e assim por diante. Salve seus usuários de ter que digitar seu endereço inteiro implementando pré-preenchimentos para esses campos. Bibliotecas como o Google Maps oferecer uma simples API JavaScript Para alcançar isto. Você pode Encontre uma solução de trabalho aqui .

08. Use validação em tempo real

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Usuários de alerta imediatamente se eles cometerem um erro - não os faça esperar até que tenham completado todo o formulário

Em um mundo ideal, os usuários preenchem formas com informações necessárias e terminam seu trabalho com sucesso, mas no mundo real, as pessoas freqüentemente cometem erros. É frustrante passar pelo processo de preenchimento de uma forma inteira apenas para descobrir no ponto de submissão que você cometeu um erro.

O momento certo para informar alguém sobre o sucesso ou fracasso dos dados que eles forneceram é logo após o envio das informações. É aqui que a validação em tempo real entra em jogo. Ele alerta os usuários para erros imediatamente e torna possível para eles corrigi-los mais rápido, sem ter que esperar até que eles pressionem o botão "enviar".

E lembre-se, a validação não deve apenas dizer aos usuários o que eles fizeram de errado; Também deve dizer-lhes o que estão fazendo certo. Isso dá aos usuários mais confiança para se mover pelo formulário.

Salsinha é uma excelente biblioteca de validação de formulário JavaScript. É de código aberto e foco em Ux, para que você possa substituir quase todos os comportamentos padrão para atender às suas necessidades exatas. No código a seguir, é um exemplo simples de validação de parsa para um campo 'mensagem'. O campo deve ter pelo menos 20 caracteres, mas não mais que 100.

 & lt; etiqueta para = "mensagem" & gt; mensagem (20 caracteres min, 100 max): & lt; / lt; / etiqueta & gt;
& lt; textarea id = "mensagem" Class = "Form-Control" Name = "Message" Data-Parsley-Trigger = "KeyUp" Data-Parsley-Parsley-MinLength = "20" Data-Parsley-MaxLength = "100" Data-Parsley -minlength-Message = "Vamos lá! Você precisa inserir pelo menos um comentário de 20 caracteres". Data-Parsley-validation-threshold = "10" e gt; & lt; / textarea & gt;

Você pode Encontre a amostra completa do código aqui .

09. Evite formatos de entrada fixos

O motivo mais comum para forçar um formato fixo é a limitação de script de validação (o back-end não pode determinar o formato necessário), que na maioria dos casos é um problema de implementação. Em vez de forçar o formato de algo como um número de telefone durante a entrada do usuário, você deve tornar possível transformar o que o usuário digita no formato que deseja exibir ou armazenar.

10. Não use botões de redefinição

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Pouco boa vez veio de incluir um botão de reset ao lado da opção Enviar

Um botão de reset quase nunca ajuda os usuários. É difícil imaginar que alguém queira um botão que desfaça todo o trabalho, muito menos que eles querem que o botão estivesse sentado ao lado do botão que a salva. A Web seria um lugar mais feliz se virtualmente todos os botões de redefinição foram removidos.

Quer saber como seus usuários estão respondendo ao seu site? Um decente hospedagem na web. O serviço lhe dará a analítica que você precisa.

Este artigo originalmente apareceu em internet , a revista para web designers e desenvolvedores profissionais. Inscreva-se na NET AQUI .

Artigos relacionados:

29 ferramentas de design web para acelerar o seu fluxo de trabalho
As 41 melhores fontes web gratuitas
13 melhores pedaços de software de teste de usuário

10 regras para fazer formulários da Web amigáveis

01. Só pergunte o que é necessário

02. Encomende os campos logicamente

03. Mantenha as etiquetas curtas

04. Não duplique os campos

05. Destaque campos opcionais

06. Tenha cuidado com os padrões

07. Minimize a necessidade de digitar

08. Use validação em tempo real

09. Evite formatos de entrada fixos

10. Não use botões de redefinição

Como - Artigos mais populares

Criar arte css animada

Como adicionar animação ao SVG com CSS

Faça o seu trabalho de aplicativo offline com trabalhadores de serviço

Como usar texturas no Photoshop

Construa uma cena complexa de ficção científica 3D no Blender

Criar um cavaleiro de fantasia realista

Converta uma foto em um conjunto de VR

A Anatomia da Caricatura: 15 Top Dicas

Categorias

10 regras para fazer formulários da Web amigáveis ​​

01. Só pergunte o que é necessário

02. Encomende os campos logicamente

03. Mantenha as etiquetas curtas

04. Não duplique os campos

05. Destaque campos opcionais

06. Tenha cuidado com os padrões

07. Minimize a necessidade de digitar

08. Use validação em tempo real

09. Evite formatos de entrada fixos

10. Não use botões de redefinição

Como - Artigos mais populares

Categorias

10 regras para fazer formulários da Web amigáveis