Os formulários de contato são um componente essencial de muitos sites. Embora sejam geralmente diretos, você precisa se certificar de que sejam fáceis de usar se quiser coletar leads e manter contato com seus usuários. Isso geralmente não é um problema com o tráfego do escritório, mas o uso de formulários pode ser difícil se você estiver usando um dispositivo móvel.

Neste tutorial, vamos falar um pouco sobre a importância de criar formulários compatíveis com dispositivos móveis. A seguir, mostraremos cinco dicas para garantir que seus formulários funcionem perfeitamente em dispositivos móveis.

Vamos começar a trabalhar!

Por que é importante que seus formulários sejam compatíveis com dispositivos móveis

Os formulários vêm em todas as formas e tamanhos. Na maioria das vezes, você lidará com formulários de contato:

exemplo de formulário de contato.png

Os formulários de registro (assinatura) também são muito populares porque permitem que você colete e-mails e os direcione durante as campanhas:

e-mails de segmentação durante o campaigns.png

No entanto, os formulários podem ser usados ​​para todos os outros fins. Por exemplo, você pode coletar informações usando uma pesquisa on-line ou questionário , nesse caso você precisará de formulários que permitam aos usuários inserir respostas.

Em outras palavras, os formulários são muito versáteis e quase todos os sites usam formulários de uma forma ou de outra. Portanto, é essencial que seus formulários sejam fáceis de usar (a menos que você queira proporcionar uma experiência frustrante para seus visitantes).

Usar formulários de um computador desktop ou laptop geralmente é muito fácil. Você tem um mouse e teclado completos, portanto, selecionar o campo que deseja usar e inserir dados não deve ser um problema. No entanto, navegar na web a partir de seu smartphone ou outro dispositivo compacto tem complicações.

Ao trabalhar com os dedos em uma tela pequena, a interação com os formulários às vezes pode ser opressora devido a decisões de design inadequadas. Isso é algo que você deve evitar em seus próprios projetos. Afinal, se os usuários móveis não podem interagir com seus formulários, você pode perder conversões, leads ou apenas irritar os visitantes.

Também é fundamental entender que o tráfego móvel agora é, se não mais, importante do que as fontes de desktop. Na verdade, o tráfego móvel já ultrapassou o último nos últimos anos. Isso significa que criar um site compatível com dispositivos móveis deve ser seu principal objetivo ao iniciar um novo projeto.

Dicas 5 para projetar formulários móveis fáceis de usar

Felizmente, projetar formulários compatíveis com dispositivos móveis não é tão difícil quanto você pode imaginar. Na maioria dos casos, você só precisa manter alguns fundamentos em mente e testar seus formulários completamente antes de colocá-los em uso. Vamos conversar sobre como fazer!

1. Exclua todas as seções desnecessárias

Quanto mais campos houver no formulário, mais difícil será o uso no celular. Na verdade, o uso de formulários no celular é simplesmente mais complicado. Ao reduzir o número de campos ou seções incluídos em seus formulários, você pode maximizar suas chances de os visitantes preenchê-los.

Aqui está um exemplo rápido de um formulário de contato com alguns campos adicionais que não são necessários no celular:

campos não necessários no mobile.png

Na maioria dos casos, tudo o que você precisa para um ótimo formulário de contato é um nome, e-mail e o corpo da mensagem que você deseja receber. Todo o resto depende do tipo de site que você está usando e se está tentando coletar leads.

Em última análise, quanto menos campos o formulário tiver, mais fácil será para os visitantes móveis usá-los. Afinal, selecionar um campo usando uma tela sensível ao toque pode ser complicado, não importa o quão bem projetado, de forma a minimizar o número de saltos que os usuários precisam fazer.

Seu objetivo neste ponto é revisar os formulários existentes em seu site. Passe por cada uma de suas seções e determine se você realmente precisa de outros campos adicionais além dos mencionados anteriormente. Se houver um campo supérfluo, basta excluí-lo.

2. Use listas suspensas, se possível

A maioria de nós se sente confortável digitando em dispositivos móveis e usando telas sensíveis ao toque. No entanto, enviar uma mensagem de texto para um amigo e preencher um formulário de contato são duas experiências muito diferentes. Com isso, há uma boa chance de você ficar frustrado se precisar digitar muitas informações.

Uma maneira de facilitar a vida do seu visitante móvel é simplificar as escolhas que ele precisa fazer sobre os elementos do seu site. Para você ter uma ideia do que estamos falando, vamos aproveitar nosso exemplo anterior de reserva restaurante:

faça uma reserva.png

Fazer um reserva, você provavelmente precisará deixar um nome, e-mail, telefone  et  indicar um horário, bem como o número de pessoas presentes. Existem duas maneiras de criar um campo de formulário para validar uma hora do dia. reserva:

  1. Configure um campo que aceite apenas entradas numéricas.
  2. Crie uma lista suspensa incluindo todos os horários disponíveis para uma reserva.

Como você pode imaginar, o último é mais amigável para usuários móveis. Com essa abordagem, eles não precisam inserir números e podem apenas escolher o que funciona melhor para eles nas opções que você inclui.

A ideia para você olhar seus formulários e ver se eles incluem campos que você poderia substituir por menus suspensos. Isso nem sempre será o caso, pois você não pode usar menus suspensos para coletar nomes ou e-mails, mas outras opções podem ser usadas.

Qualquer que seja o caso de uso, você deseja garantir que seus menus suspensos incluam opções fáceis de selecionar em dispositivos móveis. Em outras palavras, torne o menu grande o suficiente para que ninguém precise bicar para escolher a opção certa.

3. Verifique se os botões de envio são fáceis de tocar

Essa dica é bastante simples, mas ainda precisa ser mencionada. Cada formulário que você projeta deve incluir uma maneira de os usuários confirmarem que desejam enviar os dados inseridos. Na maioria dos casos, isso significa criar um botão de envio:

crie um botão de envio.png

Ao usar um computador normal, clicar em um botão de envio é a coisa mais natural do mundo. No entanto, encontramos alguns formulários no celular em que é muito mais difícil pressionar um botão.

Se os visitantes não puderem enviar as informações inseridas em seus formulários, todos os seus esforços serão em vão. Além disso, nada parece tão pouco profissional quanto um botão Enviar  isso não funciona conforme o esperado.

Para criar melhores botões de envio para dispositivos móveis, aqui estão três dicas a serem consideradas:

  1. Certifique-se de que sejam grandes o suficiente para que você possa tocar facilmente em um dispositivo móvel.
  2. Não coloque os botões muito perto de outros itens para que os usuários não os toquem adequadamente.
  3. Destaque seus botões, por exemplo, usando cores contrastantes ou tipografia criativa.

Além de tudo isso, você também deseja testar seus botões antes de seu site ir ao ar. Veremos com mais detalhes como fazer isso em um minuto. Por enquanto, vamos falar sobre desempenho.

4. Certifique-se de que seus formulários sejam carregados rapidamente

Falamos muito sobre o desempenho do site em muitos de nossos artigos e não é porque precisamos de velocidade. A questão é que a maioria das pessoas não gosta de sites lentos, o que faz todo o sentido.

Com a velocidade da Internet mais rápida, pode ser difícil esperar um site carregar por muito tempo. Além disso, as velocidades da Internet móvel tendem a variar muito mais do que as conexões domésticas regulares. Isso significa que seu site precisará ser altamente otimizado para dispositivos móveis se você quiser manter esses usuários felizes, pois nem todos eles terão acesso à Internet (ou seja, rápido).

Essa dica específica pode se aplicar a todo o seu site, mas também é importante para páginas móveis que exibem seus formulários. Se essas partes do seu site estão demorando muito para carregar, voc perder conversões e oportunidades de se conectar com seus visitantes.

Geralmente, um site não leva mais de dois segundos para carregar. Depois que você ultrapassa esse limite, as taxas de rejeição tendem a aumentar drasticamente, o que é uma péssima notícia para você. Dada a natureza da navegação móvel, é melhor manter esse tempo o mais baixo possível. .

Com isso em mente, há muitas maneiras de melhorar o desempenho geral do seu site. Por exemplo, você pode atualizar para um plano melhoralojamento, use um tema responsivo otimizado para velocidade e comprima suas imagens. Claro, eles ajudarão todos os usuários, mas serão especialmente úteis para aqueles que usam dispositivos menores.

5. Teste seus formulários antes de publicar

Considerando que os formulários são uma parte fundamental da maioria dos sites, faz sentido testá-los completamente antes de postar. Com o WordPress, esse processo é bastante direto. Você pode ir em frente e projetar páginas específicas para exibir seus formulários e não publicá-los antes de testá-los totalmente.

Claro, qualquer plugin ou tema que você deseja usar depende de você (desde que possa ajudar a desenvolver sites para celular). No entanto, quando se trata da fase de teste, recomendamos que você mantenha a simplicidade e use ferramentas como ferramentas de desenvolvimento Chrome fazer o trabalho.

Vamos ver um exemplo rápido. Se você estiver usando o Chrome, vá em frente e visualize a página com o formulário que deseja testar. Em seguida, clique com o botão direito em qualquer lugar desta página e escolha a opção inspecionar . O Chrome exibirá um conjunto de ferramentas que você pode usar para revisar e editar o código-fonte da página à direita e à esquerda, você pode ver uma prévia de sua aparência em um dispositivo móvel:

Uma visão geral das ferramentas de desenvolvimento do Chrome.

Na parte superior da tela, você pode usar um menu para alternar entre diferentes resoluções. O Chrome inclui configurações para vários dispositivos móveis populares, mas você também pode inserir uma resolução personalizada.

Neste ponto, você deve verificar a aparência e o comportamento do seu formulário de contato em vários dispositivos. Veja o exemplo abaixo - o formulário funciona bem, mas você pode ver que não se encaixa tão bem quanto deveria. Preste atenção especial ao texto e aos ícones em particular, que estão muito próximos da borda da tela:

design de formulário para mobile.png

Uma forma de evitar esse problema é manter seus formulários simples, como mencionamos na primeira dica. No exemplo abaixo, o formulário usa várias listas suspensas e requer apenas três campos. Isso o torna fácil de usar e, mais importante, o formulário é tão simples que deve ser um ajuste perfeito para todos os dispositivos:

Um exemplo de um formulário sem problemas de dimensionamento.

Se você tiver problemas com qualquer um dos seus formulários, obviamente precisará resolvê-los imediatamente. Caso contrário, você corre o risco de alienar seu público móvel, o que tentamos evitar primeiro!

Conclusão

Garantir que seu site seja compatível com dispositivos móveis é fundamental para manter o tráfego e não frustrar os visitantes. Especificamente, seus formulários devem ser fáceis de usar em dispositivos móveis, se você não quiser perder o recebimento de mensagens ou a coleta de leads valiosos.

Quando se trata de criar formulários compatíveis com dispositivos móveis, aqui estão cinco dicas para simplificar sua vida:

  1. Exclua todas as seções desnecessárias.
  2. Use listas suspensas, se possível.
  3. Verifique se os botões de envio são fáceis de pressionar.
  4. Certifique-se de que seus formulários sejam carregados rapidamente.
  5. Teste seus formulários antes de publicá-los.