5 dicas para criar formulários compatíveis com dispositivos móveis

Os formulários de contato são um componente essencial de muitos sites. Embora geralmente tenham uma funcionalidade simples, você ainda precisa garantir 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 da área de trabalho, mas usar formulários pode ser complicado se você estiver em um dispositivo móvel.

Neste artigo, vamos falar um pouco sobre a importância de criar formulários compatíveis com dispositivos móveis. Em seguida, orientaremos você em cinco dicas para garantir que seus formulários funcionem perfeitamente em dispositivos móveis.

Vamos ao trabalho!

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. Mais comumente, você lidará com formulários de contato:

Os formulários de inscrição (ou opt-ins) também são extremamente populares, pois permitem que você colete e-mails e os direcione durante as campanhas:

No entanto, os formulários podem ser usados ​​para todos os outros fins. Por exemplo, você pode querer coletar informações usando uma enquete ou questionário online; nesse caso, você precisará de formulários para os usuários inserirem as 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, garantir que seus formulários sejam fáceis de usar é fundamental (a menos que você queira fornecer uma experiência frustrante para seus visitantes).

Usar formulários de um computador desktop ou laptop geralmente é muito simples. Você tem um mouse e um teclado completo, 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 de formato pequeno oferece complicações.

Quando você está trabalhando com os dedos em uma tela pequena, interagir com os formulários às vezes pode ser uma dor devido a decisões de design inadequadas. Isso é algo que você precisa evitar em seus próprios projetos. Afinal, se os usuários móveis não puderem interagir com seus formulários, você poderá perder conversões, leads ou apenas irritar os visitantes.

Também é essencial entender que o tráfego móvel agora é tão - senão mais - importante do que as origens de desktop. Na verdade, o tráfego móvel já ultrapassou este último nos últimos anos. Isso significa que criar um site compatível com dispositivos móveis deve ser seu objetivo principal ao lançar um novo projeto.

5 dicas para criar formulários compatíveis com dispositivos móveis

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

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

Quanto mais campos seus formulários incluirem, mais difícil será seu uso no celular. Isso porque, por mais bem projetados que sejam, 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 ele poderia dispensar:

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

Em última análise, quanto menos campos seu formulário incluir, mais fácil será para os visitantes móveis usá-los. Afinal, selecionar um campo usando uma tela de toque pode ser difícil, mesmo se for bem projetado, então você deseja minimizar o número de 'saltos' que os usuários precisam dar.

Seu objetivo neste estágio é dar uma olhada nos formulários existentes em seu site. Reveja cada uma de suas seções e considere se você realmente precisa de algum campo adicional além dos mencionados anteriormente. Se houver um campo supérfluo, simplesmente corte-o.

2. Use listas suspensas quando 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 mensagens de texto a um amigo e preencher um formulário de contato são duas experiências muito diferentes. Com o último, é provável que você fique frustrado se precisar digitar muitas informações.

Uma das maneiras de facilitar a vida do seu visitante móvel é simplificar as escolhas que ele precisa fazer em relação aos elementos do seu site. Para lhe dar uma ideia do que estamos falando, vamos desenvolver nosso exemplo anterior de reserva de restaurante:

Para fazer uma reserva, provavelmente você precisará deixar um nome, e-mail, telefone e indicar um horário, bem como quantas pessoas estarão presentes. Existem duas maneiras de criar um campo de formulário para validar um horário de 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 precisarão digitar números e podem apenas escolher o que funciona melhor para eles entre as opções incluídas.

A ideia para você dar uma olhada em seus formulários e ver se eles incluem algum campo que você possa 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 há outras opções em que eles podem funcionar.

Independentemente de qual 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. Certifique-se de que seus botões de envio sejam fáceis de tocar

Essa dica é bastante direta, mas ainda assim vale a pena mencionar. Cada formulário que você criar precisará incluir uma maneira de os usuários confirmarem que desejam enviar os dados que inseriram. Na maioria dos casos, isso significa criar um botão de envio:

Quando você está usando 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 pressionar um botão é muito mais difícil do que deveria ser.

Se seus 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 que não funciona conforme o esperado.

Para criar botões de envio melhores para dispositivos móveis, aqui estão três dicas rápidas que você precisa ter em mente:

1. Certifique-se de que eles sejam grandes o suficiente para pressioná-los com facilidade ao usar um dispositivo móvel.
2. Não coloque seus botões muito perto de outros elementos, para que os usuários não acertem o botão errado.
3. Destaque seus botões de alguma forma, como usando cores contrastantes ou tipografia criativa.

Além de tudo isso, você também deseja testar seus botões completamente antes de seu site ir ao ar. Aprofundaremos mais sobre 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 vários de nossos artigos, e não é porque precisamos de velocidade. O fato é que a maioria das pessoas não gosta de sites lentos, o que faz todo o sentido.

Com a velocidade da Internet cada vez mais rápida, esperar muito tempo para um site carregar pode ser uma tarefa árdua. 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 satisfeitos, já que nem todos eles terão acesso adequado (ou seja, rápido) à Internet.

Essa dica específica pode se aplicar a todo o seu site em geral, mas também é importante para as páginas móveis que exibem seus formulários. Se essas partes do seu site demorarem muito para carregar, você perderá leads e oportunidades de estabelecer contato com seus visitantes. Como regra geral, um site não deve demorar mais de dois segundos para carregar. Depois que você ultrapassa essa linha, as taxas de rejeição tendem a aumentar dramaticamente, o que é uma péssima notícia para você.

Dada a natureza da navegação no celular, reduzir esse tempo o máximo possível é uma vantagem. Com isso em mente, há várias maneiras de aumentar o desempenho geral do seu site. Por exemplo, você pode atualizar para um plano de hospedagem melhor, usar um tema responsivo otimizado para velocidade e compactar suas imagens. Claro, isso vai ajudar todos os usuários, mas será um benefício particular para aqueles que usam dispositivos menores.

5. Teste seus formulários antes de publicá-los

Considerando que os formulários são um elemento-chave para a maioria dos sites, é lógico que você deve testar o seu completamente antes de publicá-los. Com o WordPress, esse processo é bastante simples. 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, o plugin ou tema que deseja usar depende de você (desde que possa ajudar a desenvolver sites para celular). No entanto, no que diz respeito à fase de teste, recomendamos que você mantenha as coisas simples e use algo como as ferramentas de desenvolvimento do Chrome para fazer o trabalho.

Vamos examinar um exemplo rápido. Se você estiver usando o Chrome, vá em frente e visualize a página que inclui o formulário que você deseja testar. Em seguida, clique com o botão direito em qualquer lugar da página e escolha a opção Inspecionar . O Chrome mostrará 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 como seria a aparência em um dispositivo móvel:

Na parte superior da tela, há um menu que você pode usar 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 como seu formulário de contato se parece e se comporta em vários dispositivos. Veja o exemplo abaixo - o formulário funciona perfeitamente, mas você pode ver que não é dimensionado tão bem quanto deveria. Preste muita atenção ao texto e aos ícones em particular, que estão muito próximos da borda da tela:

Uma maneira de evitar esse problema é manter seus formulários simples, conforme destacamos durante a 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 dimensionado perfeitamente em todos os dispositivos:

Se você tiver problemas com qualquer um dos seus formulários, obviamente deve corrigi-los imediatamente. Caso contrário, você corre o risco de alienar seu público móvel, que é o que estamos tentando evitar em primeiro lugar!

Conclusão

Garantir que seu site seja compatível com dispositivos móveis é fundamental para manter o tráfego e não frustrar seus visitantes. Especificamente, seus formulários precisam 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 rápidas para tornar sua vida mais fácil:

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

Você tem alguma dúvida sobre como criar formulários compatíveis com dispositivos móveis usando o Divi? Pergunte na seção de comentários abaixo!

Imagem em miniatura do artigo por Irina Adamovich / shutterstock.com.