UI (User Interface) e UX (User Experience) têm um papel importante na conversão de web design amigável. A interface do usuário torna o site bonito e o UX se concentra na usabilidade e na facilidade do site. Se algum desses dois estiver faltando ou não estiver balanceado, o resultado será a rejeição dos clientes. O design do formulário do site é a parte do design da Web que garante a geração de leads e a coleta de informações sem interrupções com a satisfação adequada do usuário em um site. Neste blog, vamos nos concentrar principalmente na experiência do usuário, já que a interface do usuário é algo muito subjetivo e será definido pelas diretrizes de marca da sua empresa ou pela escolha de cores, faixas e fontes.
Wikipedia diz:
“O design da experiência do usuário (UX, UXD, UED ou XD) é o processo de melhorar a satisfação do usuário com um produto, melhorando a usabilidade, a acessibilidade e o prazer fornecidos na interação com o produto..”
Usamos diferentes formas em nossos sites em quase todas as partes. De formulários de feedback para Caixa Página tudo tem o seu propósito, e se eles não são projetados de acordo com o que eles são destinados, eles falharão em servir ao seu propósito.
Neste post, vou explicar 6 tais erros em um design de formulário do site que você nunca deve cometer se você quiser evitar retornos e piores experiências do usuário em seu site.
1. Solicitando muita informação do usuário
“40% de pessoas abandonam um site que leva mais de 3 segundos para carregar."-Kissmetrics. Isto é quando o site abrandou por 1 seg, imagine qual seria a reação se o seu site desperdiça muito mais tempo do que isso apenas pedindo detalhes desnecessários para preencher os formulários.
Portanto, não perca seu tempo e sua conversão pedindo informações "não tão importantes". Observe que há uma diferença entre informações "desnecessárias" e informações "não tão importantes".
Informações como 'Etnia' ou 'Local de nascimento' da pessoa podem ser consideradas desnecessárias para um site de comércio eletrônico, mas podem ser importantes para o site de um partido político. Então, isso também é discutível e subjetivo, mas acredito que você entendeu a ideia.
Campos "não tão importantes" podem ser:
- ID de email adicional
- Número de telefone adicional
- Data de nascimento
- Número de Fax
- Pergunta de segurança e resposta
- Número de Segurança Social, etc.
Mesmo se você precisar desses detalhes, não é necessário perguntar de uma só vez, você pode sempre dar uma opção para o usuário atualizar seu perfil. Pense como o Linkedin ou o Facebook, eles não perguntam tudo de uma só vez, em vez disso, eles primeiro se inscrevem com campos 3-5 e, em seguida, oferecem a opção de atualizar seu perfil mais tarde.
É tudo sobre apresentação, então você deve perguntar apenas os detalhes mais importantes que você precisa: Se você está usando o formulário para feedback, então pergunte sobre seus pontos de vista e comentários antes de perguntar seu nome ou ID de e-mail. Da mesma forma, se for um formulário de check-out e você já tiver determinadas informações sobre o usuário, não as solicite novamente, em vez disso, preencha-as no formulário. Por exemplo, você pode preencher previamente as informações no endereço de cobrança para preencher automaticamente o formulário de endereço de entrega se ambos os endereços forem iguais.
[Caption id = "attachment_4154" align = "aligncenter" width = "509"]
A pré-população de informações de um formulário para outro pode economizar tempo e esforço dos usuários [/ caption]
2. Posicionamento de rótulos ambíguo ou não responsivo
Os rótulos são usados nos formulários do site para facilitar o preenchimento das informações necessárias pelo usuário. Portanto, certifique-se de que os rótulos sejam colocados em uma posição correta que não confunda o usuário sobre o que preencher. Um alinhamento de rótulos adequado é essencialmente necessário quando você está projetando um formulário responsivo que serve para diferentes tamanhos de tela. Certifique-se de que as etiquetas permaneçam alinhadas corretamente em todos os tamanhos de tela em que o formulário está sendo aberto.
[Caption id = "attachment_4155" align = "aligncenter" width = "291"]
Formulário de contato para celular [/ caption] [id = "attachment_4156" align = "aligncenter" width = "300"]
A maioria dos formulários de websites usa os mesmos posicionamentos de marcadores em todos os tamanhos de tela, o que não é uma opção recomendada [/ caption]
Os usuários em dispositivos móveis usam o zoom para ver claramente os rótulos nos formulários, para que eles preencham as informações corretas. No entanto, conforme mostrado na imagem acima, se você mantiver o mesmo alinhamento nas versões para desktop e para dispositivos móveis do formulário, ele ocultará todos os rótulos enquanto clica no formulário no modo de zoom. Isso forçará o usuário a reduzir o formulário toda vez que ele for para a próxima entrada.
Uma opção melhor para lidar com isso seria usar dois alinhamentos diferentes na versão para desktop e para dispositivos móveis do formulário. Deixe os rótulos alinhados na parte superior das versões para dispositivos móveis e mantenha-os alinhados corretamente na área de trabalho.
3. Substituindo rótulos por espaços reservados
Com o HTML 5, os marcadores de posição no atributo text eram uma adição valiosa. Eles são efetivamente usados para fornecer uma breve sugestão sobre um valor esperado no campo.
[Caption id = "attachment_4157" align = "aligncenter" width = "620"]
Os espaços reservados fornecem uma breve sugestão sobre os valores esperados no campo de formulário [/ caption]
Normalmente, um espaço reservado permanece visível até o usuário clicar no campo. Assim que o usuário clica no campo para digitar algo, o espaço reservado desaparece. O uso de espaços reservados no design do formulário do site é altamente confundido com o de rótulos. Muitos designers usam esses espaços reservados em vez de rótulos para descrever os campos de entrada na esperança de obter um design mais limpo. Este é um grande erro que compromete a experiência do usuário.
Vamos levar uma situação quando o usuário preencher um formulário longo como um formulário de pagamento. Depois de preencher o formulário, ele pode querer revisar os detalhes antes de poder enviar o formulário. Agora, se não houver um rótulo no formulário, ele ficará confuso sobre os detalhes que preencheu.
[Caption id = "attachment_4158" align = "aligncenter" width = "529"]
Usar espaços reservados no lugar dos rótulos confundirá seus clientes, especialmente em formulários longos [/ caption]
Então, use sempre um rótulo. Não usar rótulos pode ser uma proteção de espaço, mas você ficará surpreso ao saber com que facilidade as pessoas esquecem o que o rótulo era quando preenchiam as informações no campo.
4. Usando espaçamento insuficiente e layout distorcido
Outro grande erro que cometemos no design de formulários é colocar muitos elementos em uma única página. Mais são o número de elementos em uma única página mais é a competição entre eles para chamar a atenção.
A solução é deixar algum espaço para respirar entre os elementos, mantendo espaços em branco. Um fluxo adequado para seus usuários será fornecido somente quando você manter um amplo espaçamento entre os campos e seções diferentes.
Este formulário de checkout de página única mostra como diferentes seções podem ser segregadas, mesmo se houver muitos elementos em uma única página. O formulário usa rótulos de seção para separar seções diferentes, como Opções de login, Endereço de cobrança, Ordem de confirmação, Método de envio e Método de pagamento. Além disso, o layout de três colunas torna a forma ainda mais limpa.
[Caption id = "attachment_4159" align = "aligncenter" width = "648"]
Segregar seções diferentes impedirá a confusão entre diferentes seções [/ caption]
5. Mensagens de erro incertas e validações de entrada
Ao preencher os formulários do site, há certas chances de que os usuários cometerão alguns erros devido a qual formulário não seria enviado. Erros podem ocorrer por falta de uma entrada, ou preenchimento de uma informação incorreta etc. Para lidar com este site, os designers usam validações de entrada que mostram a (s) mensagem (ns) de erro ao enviar o formulário. Eles usam validações do lado do servidor que geralmente aguardam a resposta do servidor para verificar os erros no formulário. Esse é um erro maior que pode até mesmo frustrar o usuário quando ele vê uma mensagem de erro depois de enviar o formulário.
Em vez disso, você pode usar a validação em linha do lado do usuário que informa no local se o usuário estiver preenchendo uma entrada incorreta em um campo. Ao fazer isso, os usuários não perderão se tiverem inserido algo errado em um campo.
[Caption id = "attachment_4160" align = "aligncenter" width = "648"]
Validação em linha para verificar e mostrar os erros no local evitar o envio do formulário pós-frustração [/ caption]
Além disso, não use instruções confusas nas mensagens de validações. Apenas explique por que a entrada está errada descrevendo como a entrada correta se pareceria.
6. Usando Captcha que não são projetados para humanos
Captchas são usados pelos sites para evitar ataques de spam, distinguindo um bot de humanos. Presume-se que esses captchas apresentem um desafio que seria fácil para os humanos, enquanto os bots não podem passá-los. Para a prevenção de spam, às vezes, os designers ficam tão desesperados que integram os captchas que são desafiadores até mesmo para os humanos.
[Caption id = "attachment_4161" align = "aligncenter" width = "319"]
Captcha que previne spam, mas frustra usuários humanos [/ caption]
Eu entendo que a prevenção de spam é importante, mas o captcha pode ser confuso e desafiador para os usuários decodificá-los. Você pode usar uma solução alternativa do Google re-Captcha, que é uma versão mais avançada e simples. O novo Google Capt-Captcha simplesmente pede que o usuário clique em uma caixa de seleção e a verificação é feita sem a necessidade de ver a mensagem de texto.
[Caption id = "attachment_4162" align = "aligncenter" width = "319"]
O Google re-Captcha é comparativamente mais fácil de usar, apesar de ser difícil para os bots [/ caption]
Finalmente,
A melhoria da experiência do usuário é um processo contínuo que só pode ser alcançado com atualizações regulares usando os melhores métodos disponíveis. Espero que descrevendo estes erros de design irá ajudá-lo a alcançar essa melhoria, não cometendo esses erros em qualquer um dos formulários que você usa em seu site.
Histórias relacionadas:
- Elementos do site 5 que podem desapontar seus clientes de comércio eletrônico
- 5 maneiras infalíveis de coletar dados de e-mail em sua loja on-line
- 6 Checkout Page erros que podem estar matando suas conversões
- Dicas de 6 Prompt para criar uma campanha de promoção eficaz no Prestashop
- 6 Razões que você precisa de um aplicativo móvel Magento para sua loja de moda
