Um guia para iniciantes para converter usuários móveis

Pense em uma ocasião em que você estava no trem, sentado no aeroporto ou simplesmente deitado no sofá e teve que preencher um formulário online em seu smartphone. Você já prestou atenção ao design do formulário móvel?

É provável que você não tenha notado. Esse é o objetivo: oferecer aos usuários uma experiência intuitiva que os leve a preencher o formulário sem problemas e continuar com o dia.

Neste guia, analisaremos as maneiras mais eficazes de fazer exatamente isso. Aqui, você aprenderá como criar formulários móveis que não sejam desajeitados ou desalinhados, mas que ajudem a aumentar as conversões e criar uma ótima experiência do usuário.

Índice

Design de formulário móvel x desktop

Hoje, os visitantes do seu site não estão apenas navegando em seu site, visualizando seu conteúdo e preenchendo seus formulários em seus computadores desktop. Eles também estão concluindo essas tarefas em seus dispositivos móveis.

O celular foi responsável por quase 60% do tráfego global do site de abril a junho de 2022. Isso significa que é fundamental que seu formulário seja simples de revisar, preencher e enviar por meio de um dispositivo móvel.

Por que o design de formulário móvel é importante?

O melhor design de formulário móvel permite uma experiência de usuário positiva, o que garante um visitante do site feliz, com maior probabilidade de se converter em um cliente e se tornar um usuário recorrente.

O design, o layout e a funcionalidade de seus formulários móveis desempenham um papel importante na experiência geral do usuário em seu site.

Se seus formulários não forem compatíveis com dispositivos móveis, você poderá ter menos conversões, uma perda no tráfego do site para dispositivos móveis e um aumento de clientes insatisfeitos e frustrados. E quem quer isso?

Por que o design de formulário móvel deve ser diferente do design de desktop?

“Tudo funciona de maneira diferente em dispositivos móveis, portanto, os profissionais de marketing precisam garantir que todos os elementos de seus sites sejam sempre otimizados para dispositivos móveis”, diz Lilach Bullock, um premiado influenciador e estrategista de marketing.

“E isso, é claro, inclui formulários – especialmente porque parece que você constantemente precisa preencher formulários no celular.”

Especificamente, pense na diferença na exibição ou no tamanho da tela entre um dispositivo móvel, como um iPhone da Apple, que normalmente varia de 4,7 ″ a 6,7 ​​″ de tamanho; e um laptop ou desktop Mac, que normalmente varia de 13” a 24” de tamanho. É seguro presumir que um formulário que cabe na tela do iPhone não caberia perfeitamente na tela do desktop.

Se seus visitantes móveis não puderem ler, preencher e enviar seu formulário com facilidade, você poderá perder seus negócios. Portanto, criar um formulário compatível com dispositivos móveis que se encaixe na tela de qualquer dispositivo móvel é crucial para criar uma ótima experiência do usuário, a fim de deixar uma impressão duradoura em seus visitantes e ajudá-lo a aumentar as conversões.

O que é web design responsivo?

Se você deseja levar o design de formulário móvel um passo adiante e garantir que todo o seu site seja funcional em todos os tipos de dispositivos, você pode implementar um design de site responsivo.

O web design responsivo leva em consideração o tamanho da tela, a plataforma, a orientação e o ambiente do usuário. Esta é uma maneira simples e eficaz de criar uma ótima experiência do usuário, já que muitas pessoas estão constantemente visitando e navegando em diferentes sites em vários dispositivos.

Existem várias maneiras de garantir que seu site tenha um design responsivo. Por exemplo, se você for um usuário do WordPress, existem vários temas WordPress responsivos que você pode instalar e usar para criar seu site.

Além disso, se você está construindo ou já construiu seu site com um software como o Squarespace, seu site pode vir automaticamente com um web design responsivo.

Hoje, o web design responsivo é uma escolha popular para empresas devido ao grande número de pessoas que visitam sites por meio de uma variedade de dispositivos móveis diferentes. Mas, por enquanto, vamos voltar a discutir o design de formulário móvel.

Design de formulário móvel: 11 diretrizes de UX

“Ao projetar seus formulários móveis”, explica Bullock, “é importante manter as coisas simples e torná-las o mais rápidas possível. [Formulários] são mais difíceis de preencher no celular e tudo parece levar mais tempo do que deveria.”

Em outras palavras, o mais importante é a simplicidade para o usuário final. Ao criar um formulário compatível com dispositivos móveis, há algumas etapas que você deve seguir para fornecer a melhor experiência de usuário possível para seus visitantes. Vamos revisar 11 dessas práticas recomendadas de design de formulário móvel que você pode começar a implementar hoje.

1. Minimize o número de campos de formulário.

Já ouviu o ditado, “menos é mais”? Bem, isso é exatamente o que você deve pensar ao criar seu formulário móvel.

Entre o tamanho da tela de um dispositivo móvel e a quantidade de conteúdo que você precisa colocar em seu formulário, é fácil acidentalmente deixar seu formulário confuso. Lembre-se de remover cotão desnecessário. Guarde os campos do formulário apenas para as informações que você realmente precisa .

Para agilizar o processo, você também deve rotular os campos do formulário de forma clara e sucinta e marcar os campos opcionais como “opcionais” ou incluir um asterisco ao lado dos obrigatórios.

Fonte da imagem

O objetivo é tornar o formulário o mais fácil possível de preencher para que as chances de as pessoas preencherem o formulário aumentem.

2. Automatize as entradas quando possível.

Se você acidentalmente digitar incorretamente seu endereço e o formulário corrigir a ortografia para você, o formulário corrige automaticamente sua resposta.

Se você começar a digitar seu endereço de entrega e uma caixa aparecer com o restante do endereço perguntando se você deseja “preencher automaticamente” o restante dos campos do formulário com o endereço salvo, seu formulário está preenchendo automaticamente sua resposta para você.

Ao implementar os recursos de autocorreção e preenchimento automático em seus formulários móveis, você melhorará a experiência do usuário tornando-o rápido, simples e direto para os usuários inserirem seus detalhes.

No exemplo abaixo, uma pessoa pode facilmente preencher automaticamente suas informações clicando no pequeno pop-up que aparece.

Fonte da imagem

3. Use um layout de coluna única.

Ao criar um formulário longo ou com várias etapas, liste todo o seu conteúdo em um layout de coluna única.

Fonte da imagem

Os layouts de formulário de coluna única são:

uma. Mais fácil de ler.

Colocar todos os campos do formulário em um formato de coluna única permite que seus visitantes se concentrem em apenas um item por vez, facilitando a leitura do formulário.

b. Menos assustador.

Se você olhar para um formulário, especialmente em um espaço apertado como faria em um dispositivo móvel, e ver uma grande quantidade de conteúdo compactado, poderá se sentir sobrecarregado. É por isso que separar seu conteúdo por linhas e colocar seus campos de formulário em um formato de coluna única faz com que seu conteúdo pareça menos intimidador.

c. Mais rápido para concluir.

Quando você coloca seu formulário de várias etapas em uma única coluna, os leads podem concluí-lo mais rapidamente do que em um formulário de várias colunas. Isso porque o formato torna o formulário mais fácil de ler e trabalhar passo a passo.

Dê uma olhada neste formulário de inscrição no site da HubSpot quando visualizado em um desktop ou laptop.

Fonte da imagem

O layout de duas colunas faz sentido aqui, pois há muito espaço na tela mais ampla para trabalhar. Agora confira o mesmo formulário quando visualizado em um dispositivo móvel.

Fonte da imagem

Esse layout de coluna única permite que o olho flua naturalmente, evitando a confusão na tela móvel compacta.

4. A consistência é importante (assim como a aparência da forma).

Como você fecha uma pasta ou uma guia aberta em seu laptop?

Ao clicar no botão 'x' no canto superior direito.

Mas e se o botão não aparecer em um aplicativo específico? Como você se sentiria quando fosse fechar a janela?

Confuso ou irritado, talvez. Você pode gastar um ou dois minutos tentando descobrir como fechar o aplicativo.

Este é apenas um exemplo amplo, mas serve bem para ilustrar a importância da consistência. Assista a este vídeo para saber mais.

A consistência no design da forma se aplica não apenas ao estilo (cores, tipografia, logotipo, etc.), mas também às convenções geralmente aceitas às quais as pessoas estão acostumadas.

Aqui estão algumas dicas para garantir uma experiência consistente:

• Combine a aparência do seu formulário com a sua marca e site.
• Certifique-se de que o estilo e a formatação do seu formulário sejam consistentes e complementares (nada deve parecer estranho ou fora do lugar).
• Alinhe suas entradas de campo de formulário à esquerda.
• Afixe cada etiqueta acima de sua caixa de entrada correspondente e alinhe-a à esquerda.
• Use um asterisco para indicar perguntas obrigatórias.

Fonte da imagem

As primeiras impressões deixam uma impressão duradoura (na vida e nos negócios). Isso vale para seus formulários móveis. Ninguém quer completar um formulário escuro, difícil de ler, confuso e pouco atraente.

Seu formulário móvel deve ser altamente funcional e esteticamente agradável. Sua aparência deve contribuir para sua legibilidade e experiência positiva do usuário. Para conseguir isso, use um estilo e tamanho de fonte simples e fáceis de ler, uma paleta de cores que não pareça sobrecarregada e campos de formulário mínimos.

5. Tenha em mente a experiência do toque.

Pense em como você segura o telefone enquanto envia mensagens de texto.

Provavelmente, segurando o telefone com as duas mãos enquanto usa os polegares para interagir com a tela. Ou você pode até fazê-lo sozinho ou digitar usando o dedo indicador.

Interagimos com smartphones de maneira muito diferente de um laptop ou desktop (deixe o polegar de mensagens de texto), e o design do formulário móvel deve refletir isso.

Aqui estão algumas sugestões para manter em mente:

• Tenha espaço em branco adequado para manter o formulário organizado e evitar pressionamentos acidentais de botões.
• Certifique-se de que os botões estejam posicionados logicamente (por exemplo, o botão enviar próximo à parte inferior do formulário, para que os usuários não precisem rolar para cima para encontrá-lo).
• Verifique se o texto (tamanho e estilo da fonte) está legível na tela pequena do celular (ninguém quer beliscar a tela e aumentar o zoom para poder ler o texto).
• Certifique-se de que os campos e botões do formulário sejam grandes o suficiente para serem tocados confortavelmente com o dedo.
• Faça com que o formulário apareça na parte inferior da tela (quando possível) para facilitar o acesso.

Fonte da imagem

6. Aproveite as restrições de entrada.

As restrições de entrada restringem o tipo de resposta que uma pessoa pode inserir em um campo de formulário. Isso pode incluir um limite de palavras (digamos, ao preencher um formulário de solicitação de emprego) ou apenas inserir dígitos (no caso de um número de telefone).

Isso é visto no formulário abaixo, onde um teclado numérico aparece quando uma pessoa digita seu número de telefone.

Fonte da imagem

As restrições de entrada maximizam a eficiência do formulário, limitando erros inadvertidos, atrasos ou confusão. Por exemplo, se alguém estivesse tentando fazer uma reserva para uma mesa em um restaurante e acidentalmente selecionasse uma data no passado, a restrição impediria que eles realmente pudessem selecionar e confirmar essa data.

Isso é especialmente crucial ao projetar para dispositivos móveis, pois telas menores dificultam a inserção de informações com precisão. Ao definir restrições de entrada, você economizará o tempo das pessoas ao preencher os campos do formulário e evitará receber respostas longas ou inválidas.

Aqui está outro exemplo de uma restrição de entrada.

Fonte da imagem

7. Crie botões de ação claros.

Os botões são um aspecto subestimado do design de formulário móvel. Pense nisso: você recebe um envio de formulário ou conversão somente depois que o botão direito é pressionado. Portanto, você realmente não pode ignorar esse elemento.

Esta folha de dicas de interface do usuário e o blog UX Planet são ótimos recursos para projetar botões eficazes. Aqui está um rápido resumo de alguns dos princípios mencionados que você pode aplicar aos seus formulários móveis.

• Muitos botões estragam o caldo (assim como os campos do formulário, mantenha apenas os botões essenciais).
• Estilize e rotule seus botões de forma consistente (capitalização, formatação, alinhamento, etc.).
• Deixe o foco brilhar no botão principal (a ação principal que você deseja que o usuário execute), destacando-o por tamanho ou cor.
• Certo é certo — uma regra comum para dispositivos móveis é posicionar o botão principal no lado direito e o segundo no lado esquerdo (embora isso possa variar de acordo com as necessidades individuais).
• Rótulos específicos são quase sempre a resposta (“Editar esta página” em vez de “Editar”).

Fonte da imagem

8. Forneça scanners de cartão para pagamentos.

Tentou inserir os detalhes do seu cartão de crédito em um formulário pelo smartphone? Digitar vários números em uma tela pequena com um teclado pequeno pode ser um processo tedioso.

Aplicativos de digitalização de cartões, como o Microblink, tornaram-se cada vez mais populares exatamente por esse motivo. Ao fazer uma compra, seus visitantes podem clicar em um botão que os leva a uma tela onde podem usar a câmera de seu dispositivo móvel para tirar uma foto segura da frente e do verso de seu cartão, seja sua licença ou cartão de crédito.

Fonte da imagem

Com apenas algumas fotos, seus leads serão concluídos com uma das partes mais demoradas do processo de preenchimento de formulário móvel – mantendo seus visitantes eficientes, bem como frustrados e sem erros.

9. Explique a necessidade de informações específicas.

Ao preencher uma simples inscrição de e-mail ou um formulário de registro, você já foi solicitado a fornecer informações pessoais que não têm nada a ver com o próprio formulário de inscrição?

Esta é uma ocorrência comum em todos os tipos de formulários (não apenas móveis). Pedir a alguém informações pessoais ou outras informações confidenciais sem explicar sua necessidade pode parecer superficial.

Ao fazer uma pergunta que não esteja diretamente relacionada ao motivo pelo qual seu visitante está preenchendo o formulário, é essencial criar uma caixa de resumo (com informações adicionais) na qual a pessoa possa clicar para entender por que você está solicitando essas informações.

Esses indicadores também podem ajudar a fornecer orientação extra sobre o preenchimento de um campo de formulário quando as instruções não forem imediatamente aparentes. Na imagem abaixo, uma caixa de resumo aparece quando uma pessoa passa o mouse sobre o ícone.

Fonte da imagem

Esses pequenos detalhes farão com que seu formulário pareça profissional e atencioso, reduzindo as chances de o usuário sair no meio do caminho.

10. Obtenha validação e feedback.

A experiência do usuário está no centro de um bom design de formulário móvel. E a validação e o feedback desempenham um papel importante no fornecimento de um ótimo UX.

A validação permite que as pessoas saibam se as informações inseridas estão corretas (ou não). Observe os carrapatos verdes nos campos do formulário abaixo.

Fonte da imagem

Ao preencher formulários móveis, seus visitantes podem cometer um erro aqui ou ali. O formulário deve sinalizar esses erros em tempo real para que o usuário possa corrigi-los imediatamente.

Por exemplo, se alguém adicionar o CEP incorreto ao lado do endereço, o formulário móvel deve exibir uma mensagem de erro. Isso deve indicar — em linguagem de fácil compreensão — o local do erro e como a pessoa pode corrigi-lo (conforme imagem abaixo).

Fonte da imagem

Também é crucial dar feedback às pessoas conforme elas preenchem o formulário. Por exemplo, uma barra de progresso em formulários longos e com várias etapas pode tornar o processo de preenchimento do formulário mais envolvente, mostrando aos usuários até onde chegaram e quanto tempo faltam para completá-lo.

Fonte da imagem

Considere uma pessoa preenchendo o formulário acima sem uma barra de progresso. Eles estarão clicando no botão 'próximo' sem nenhuma ideia de quando o formulário termina e podem até abandoná-lo pouco antes da etapa final em frustração.

Depois que as pessoas enviarem seus formulários, você deve encaminhá-las para outra tela ou página que diga algo como “Sucesso!” ou “Obrigado” para que saibam que o envio funcionou.

Aqui está um exemplo de uma página de sucesso no HubSpot que aparece depois que um usuário se inscreve para receber um kit gratuito do Google Ads.

Fonte da imagem

11. Torne os formulários acessíveis.

Acessibilidade é fundamental para a usabilidade do seu formulário. Os formulários projetados com acessibilidade em mente podem ser usados ​​por uma ampla gama de pessoas, incluindo aquelas com deficiências visuais, físicas, sensoriais e cognitivas.

Aqui estão algumas recomendações específicas para a criação de formulários acessíveis do World Wide Web Consortium Web Accessibility Initiative, WebAIM e The A11Y Project Checklist).

• Verifique se o texto não está pixelado ou confuso ao ampliar o formulário (para melhor visualização).
• Rotule seus elementos de formulário de forma que possam ser claramente compreendidos quando lidos por um leitor de tela.
• Certifique-se de que seu formulário esteja acessível nos modos retrato e paisagem.
• Evite o uso de um limite de tempo (quando possível) para dar às pessoas tempo suficiente para responder.
• Inclua legendas ou transcrições para qualquer componente de vídeo ou áudio em seu formulário.
• Lembre-se do contraste de cores. Aqui está uma ferramenta gratuita que pode ajudar com isso.
• Verifique se o seu formulário é totalmente utilizável com apenas um teclado.

Uma ótima maneira de garantir que todas as estratégias de design de formulário móvel acima sejam válidas é explorando o que você não deve fazer no design de formulário. O vídeo abaixo mostra alguns exemplos do que não fazer ao criar formulários em dispositivos móveis e computadores.

De volta para você

Não é nenhum segredo que os visitantes do seu site estão preenchendo e enviando seus formulários da web por meio de seus dispositivos móveis. Isso porque é conveniente e eficiente, já que a maioria das pessoas carrega algum tipo de dispositivo móvel com elas em todos os lugares, tornando crucial que seus formulários sejam compatíveis com dispositivos móveis.

Caso contrário, seus formulários serão difíceis de ler, preencher e enviar, o que pode frustrar seus leads ou fazer com que você perca seus negócios.

Ao considerar o design do formulário móvel e implementar essas diretrizes, você aprimorará a experiência do usuário do formulário móvel, criará relacionamentos positivos com seus leads e clientes e aumentará suas conversões.

Nota do editor: esta postagem foi publicada originalmente em dezembro de 2018 e foi atualizada para maior abrangência.