Como otimizar Formas para dispositivos móveis

Os formulários são usados ​​em sites para coletar informações dos usuários. Sites usar essas informações para concluir transações e registros, ou para completar outras tarefas, como a apresentação de uma reivindicação de seguro online.

Ao se aproximar de design de formulário para dispositivos móveis, mantendo a experiência móvel física em mente é importante. Se você fizer seu formulário lento para carregar ou excessivamente complicado, os visitantes vão provavelmente abandonar a forma no meio, ou até mesmo antes de começarem.

Manter essas melhores práticas em mente ao projetar seus formulários-friendly móveis:

• Mantenha os formulários curto e doce. Faça as suas formas fácil de concluir, minimizando o número de campos necessários. Tendo um campo para # 147-Name # 148-, em vez de dois campos para o primeiro e último nome é um bom exemplo de uma maneira fácil de fazer o seu campo de formulário mais curto.

  Pedir muito e você pode acabar com nada.

• Quando eles não podem ser curto, criar formulários de várias páginas. Se você deve ter uma forma longa, dividi-lo em várias páginas, presente apenas alguns campos acima da dobra em cada página (# 147-acima da dobra # 148- significa antes que você tem que começar a rolar a tela para baixo), e incluem claras Próxima botões para que os visitantes não têm para se deslocar excessivamente. Uma barra de progresso também pode ajudar a manter os usuários comprometidos com multipage formas móveis.

• Faça o botão Enviar eo tamanho do dedo campos do formulário. Seus usuários móveis são o preenchimento de formulários com as pontas dos dedos, para que seus campos e botões precisa ser grande o suficiente para fazer a interação da torneira fácil. Não existe tamanho padrão que funciona melhor para todos os dispositivos móveis, mas a criação de botões e campos de formulário que são 44 pixels de largura por 44 pixels de altura é geralmente uma regra segura de ouro.

• Minimizar digitação usando menus drop-down, botões de rádio e respostas selecionadas automaticamente. Qualquer coisa que você pode fazer para limitar a quantidade de digitação necessária vai ajudar a acelerar o processo e melhorar a satisfação do cliente. Por exemplo, se o formulário pede um estado, permitir aos usuários selecionar seu estado a partir de um menu drop-down para que eles não tem que digitá-lo.

• Faça o que você está pedindo clara. Acima de cada campo, especifique claramente exatamente o que você deseja que o usuário colocar no campo de formulário. Se você está perguntando para um aniversário, por exemplo, esclarecer se a forma quer que o ano de nascimento inserida como dois ou quatro dígitos. Veja um exemplo de Progressive.

  
  Mostrar aos usuários como eles devem inserir informações data de nascimento.

  Se você está pedindo um pedaço de informação que requer uma explicação adicional, incluindo um botão que oferece mais informações quando aproveitado (muitas vezes chamado de tooltip) Pode ajudar a experiência do usuário. Aqui está um formulário usando uma dica de ferramenta para explicar o que significa CCV.

  
  Um botão dica explica o requisito de campo de formulário.

• Claramente especificar quais campos são obrigatórios. Se o formulário tem mais de um campo, certifique-se de que seus usuários saibam exatamente quais campos são de preenchimento obrigatório e que eles podem ignorar. Colocar um asterisco (*) ao lado de campos de formulários necessários é uma convenção comum. Se todos os campos do formulário são necessários, colocar um asterisco ao lado de todos os seus campos. Não presuma que os visitantes vão entender que eles são todos necessários.

• Permitir log-in usando um provedor de terceiros como o Google ou Amazon.com. Às vezes, um formulário de inscrição pode se tornar uma barreira à entrada de um usuário de primeira vez. Permitindo que seus clientes fazer login usando um provedor de terceiros que eles já estão conectados a pode acelerar o processo e eliminar a barreira de inscrição.

  Confira um exemplo de integração de terceiros que permite que os usuários de primeira vez para fazer login usando suas informações de conta Google. Isto é muito mais fácil para o usuário do que digitar as informações de registro em um formulário.

  
  Porque HubSpot Sidekick tem autenticação de terceiros opcional, os usuários móveis de primeira viagem pode ignorar o formulário e registrar com as informações da conta Google.

  De terceiros log-in também é uma ótima maneira de obter clientes através do formulário de compra. Ao permitir que os usuários façam login e pagar usando um serviço para o qual eles já têm informações de cartão de crédito armazenado, tais como Amazon.com, você permite que seu cliente para saltar um formulário de autorização de cartão de crédito com diversos campos.

  
  Um exemplo de integração de terceiros.

• Mantenha o foco no formulário e minimizar outros conteúdos na página. Quando os visitantes desembarcaram em uma página web com um formulário, eles estão em uma conversão página, e você deseja que o conteúdo da página para fazer tudo ao seu alcance para manter o ritmo de conversão indo. Você deseja obter o visitante a interagir com a forma e tocando no botão Enviar, o mais rapidamente possível.

  Adicionando um monte de conteúdo em cima ou ao lado do seu formulário pode acabar sendo uma distração de conversão que pode retardar ou completamente descarrilar o processo de envio do formulário. Para minimizar a distração, tente incluir apenas o conteúdo explicativo que ajuda o usuário preencher o formulário. Se você quiser incluir conteúdo que não é explicativo, mantê-lo conciso e directamente relacionado com a forma - assim como o exemplo a partir BruceClay.com.

  
  Mantenha a linguagem em formas ao ponto de aumentar a conversão.

• Visualmente validar quando uma linha formulário seja preenchido corretamente. Os usuários móveis não ama o preenchimento de formulários pela primeira vez, e eles realmente não amo ter que voltar e preenchê-los uma segunda vez porque o formulário tem erros.

  Usando sinais visuais para deixar o seu usuário saiba terem completado cada linha do formulário corretamente - ou mal - pode economizar tempo e limitar frustração. Uma marca de seleção verde ao lado do campo é uma ótima maneira de indicar claramente que o campo tenha sido concluída da maneira certa, e um X vermelho funciona bem para se comunicar quando algo está errado. Se algo está errado com a linha, certifique-se de explicar claramente como o usuário pode corrigir o erro.

  
  Use pistas visuais e verbais para que os usuários saibam se eles completaram cada linha do formulário corretamente.