Noções básicas: design de formulários para dispositivos móveis

Os compradores on-line estão usando cada vez mais seus dispositivos móveis para descobrir novas lojas, pesquisar produtos e fazer compras. Somente nos EUA, mais de 35% das compras on-line foram feitas por meio de um dispositivo móvel, e esse número continua crescendo a cada ano. 

Para garantir a conversão desses clientes em assinantes, é fundamental que seus formulários de inscrição sejam tão bons no celular quanto no desktop. 

Se o senhor precisar de mais de três campos, por exemplo, se quiser coletar consentimento por e-mail e SMS ao mesmo tempo, considere um formulário de várias etapas. 

Um formulário de várias etapas permite que o senhor colete mais informações sem sobrecarregar os possíveis assinantes. Além disso, ter uma etapa separada para SMS é uma prática recomendada de conformidade ao coletar vários tipos de consentimento em um único formulário. 

Como alternativa, o senhor pode saber mais sobre seus assinantes redirecionando-os posteriormente na jornada do cliente. Talvez o senhor pergunte sobre o aniversário de seus assinantes atuais mostrando-lhes outro formulário após 30 dias, ou talvez pergunte como parte de sua série de boas-vindas.

Mesmo que todos os campos de um formulário sejam obrigatórios, ainda é estranho perguntar a data de nascimento de alguém antes do nome. 

Em geral, solicite informações do menos para o mais pessoal. Por exemplo: 

1. Nome
2. E-mail ou número de telefone
3. Aniversário

Uma coluna única significa que todas as entradas, campos e botões seguem uma única linha no formulário. Embora os formatos de várias colunas sejam bons para uso em desktops, eles podem fazer com que os formulários móveis pareçam desordenados ou lotados. Os formulários de coluna única também são mais fáceis de digitalizar no celular.

Formulário de coluna única	Formulário com várias colunas

O botão de CTA deve estar no final da jornada de varredura do visualizador, para que seja a última coisa que ele veja. O senhor não quer que eles tenham que rolar a tela para cima para preencher o formulário ou que tenham que procurar o botão. 

Normalmente, o botão de CTA é colocado no centro ou no lado esquerdo. 

O motivo pelo qual o botão Fechar precisa estar no canto superior direito é simplesmente porque é onde os usuários esperam vê-lo. 

Se a colocar em outro lugar, como no canto superior esquerdo ou perto da parte inferior, os usuários poderão gastar tempo procurando uma maneira de fechar o formulário e ficarão frustrados enquanto procuram. Isso pode fazer com que eles saiam com uma impressão negativa da sua marca, o que significa que é menos provável que visitem seu site no futuro ou se tornem clientes.

Coloque um rótulo diretamente acima de cada campo do formulário que descreva claramente as informações que devem ser fornecidas. 

Além disso, coloque os rótulos próximos aos campos que estão descrevendo, para que fique claro que os dois estão juntos.

Cada rótulo deve ocupar menos de uma única linha quando visualizado em qualquer dispositivo móvel, portanto, ser conciso é fundamental.

Em todos os campos em que os usuários precisarem inserir texto ou números, inclua marcadores de posição para mostrar ao seu público como deve ser a entrada (por exemplo, um exemplo de e-mail, nome, formato de data etc.).

Isso ajuda a reduzir o número de erros que o senhor pode cometer. O trabalho conjunto com rótulos e espaços reservados facilita a navegação dos usuários pelo formulário. 

Dica de profissional: os botões também devem ter rótulos. Ser mais descritivo no texto do botão também ajuda o usuário. 

Por exemplo, em vez de uma simples chamada para ação "Enviar", dizer "Assinar o boletim informativo" ou "Inscrever-se para receber SMS" dá uma ideia mais clara do que o botão faz. Além disso, isso pode ajudar o senhor a economizar um espaço precioso no formato menor. 

Informar aos seus clientes quais campos eles precisam preencher e quais não precisam simplifica a experiência do usuário. O senhor pode tornar certos elementos do formulário obrigatórios e outros opcionais, 

Inclua uma mensagem de sucesso depois que alguém enviar o formulário para que o usuário saiba que foi bem-sucedido. 

Usar um tamanho de fonte de 16 pixels ou mais ajuda a garantir a legibilidade do texto. Dessa forma, os usuários não precisam aumentar o zoom para ler.

16 pixels é o tamanho mínimo de fonte recomendado para qualquer texto em seu formulário móvel, inclusive rótulos, espaços reservados e texto de botão. 

Deixe espaço suficiente entre as ações individuais do formulário para que os usuários não tenham dificuldade para clicar no campo desejado. Caso contrário, eles podem decidir se afastar em vez de continuar tentando. 

Ao criar o formulário, tente dificultar ao máximo que os usuários cometam um erro. Teste a experiência do usuário em diferentes tipos de dispositivos. 

Todos os "alvos de toque", como campos de entrada ou botões, devem ser grandes e fáceis de clicar. 

O dedo médio de um adulto tem 11 mm, o que equivale a cerca de 41,6 pixels. Para levar isso em conta, uma prática recomendada é fazer com que os alvos de toque tenham pelo menos 48 pixels. 

Use um teaser de formulário para que os visitantes móveis possam abrir e fechar o formulário conforme desejado enquanto navegam e para que o formulário não cubra o conteúdo do seu site.
Observe que o Google aplica uma penalidade aos sites com intersticiais intrusivos. Os teasers ajudam a evitar essa penalidade, mas o senhor também deve usar um longo intervalo de tempo com os formulários. 

O contraste de cores é a diferença de luz entre o texto ou os objetos em primeiro plano e o plano de fundo. Um bom contraste de cores melhora a legibilidade do formulário e é um componente essencial da acessibilidade. Use um verificador de contraste de cores para verificar o contraste de cores.

O menor contraste é de 1:1 e é impossível de ler (pense em um texto branco em um fundo branco). O maior contraste disponível é de 21:1, ou seja, texto preto em um fundo branco. Em outras palavras, quanto maior for a proporção, melhor será o contraste. 

De acordo com as WCAG (Web Content Accessibility Guidelines, Diretrizes de acessibilidade de conteúdo da Web), o contraste mínimo de cores é de 4,5:1 para textos pequenos, imagens e textos em imagens e de 3:1 para textos grandes ou elementos importantes. 

O ideal é que o contraste seja ainda maior. De acordo com as WCAG, um mínimo melhor é:

• 7:1 para textos menores, imagens ou imagens de texto
• 4,5:1 para textos maiores, elementos visuais importantes, etc. 

É importante que todos possam apreciar o conteúdo no qual o senhor trabalha tão arduamente. O uso de determinadas combinações de cores pode dificultar ou mesmo impedir a leitura do formulário por alguns grupos. 

Quanto aos que não devem ser usados, lembre-se de que há muitos tipos de daltonismo (não é apenas vermelho e verde).