“O design da experi\u00eancia do usu\u00e1rio (UX, UXD, UED ou XD) \u00e9 o processo de melhorar a satisfa\u00e7\u00e3o do usu\u00e1rio com um produto, melhorando a usabilidade, a acessibilidade e o prazer fornecidos na intera\u00e7\u00e3o com o produto.<\/em>.”<\/p>\n Usamos diferentes formas em nossos sites em quase todas as partes. De formul\u00e1rios de feedback para Caixa P\u00e1gina<\/a> tudo tem o seu prop\u00f3sito, e se eles n\u00e3o s\u00e3o projetados de acordo com o que eles s\u00e3o destinados, eles falhar\u00e3o em servir ao seu prop\u00f3sito.<\/p>\n Neste post, vou explicar 6 tais erros em um design de formul\u00e1rio do site que voc\u00ea nunca deve cometer se voc\u00ea quiser evitar retornos e piores experi\u00eancias do usu\u00e1rio em seu site.<\/p>\n “40% de pessoas abandonam um site que leva mais de 3 segundos para carregar.<\/em>"-Kissmetrics<\/a>. Isto \u00e9 quando o site abrandou por 1 seg, imagine qual seria a rea\u00e7\u00e3o se o seu site desperdi\u00e7a muito mais tempo do que isso apenas pedindo detalhes desnecess\u00e1rios para preencher os formul\u00e1rios.<\/p>\n Portanto, n\u00e3o perca seu tempo e sua convers\u00e3o pedindo informa\u00e7\u00f5es "n\u00e3o t\u00e3o importantes". Observe que h\u00e1 uma diferen\u00e7a entre informa\u00e7\u00f5es "desnecess\u00e1rias" e informa\u00e7\u00f5es "n\u00e3o t\u00e3o importantes".<\/p>\n Informa\u00e7\u00f5es como 'Etnia' ou 'Local de nascimento' da pessoa podem ser consideradas desnecess\u00e1rias para um site de com\u00e9rcio eletr\u00f4nico, mas podem ser importantes para o site de um partido pol\u00edtico. Ent\u00e3o, isso tamb\u00e9m \u00e9 discut\u00edvel e subjetivo, mas acredito que voc\u00ea entendeu a ideia.<\/p>\n Campos "n\u00e3o t\u00e3o importantes" podem ser:<\/p>\n Mesmo se voc\u00ea precisar desses detalhes, n\u00e3o \u00e9 necess\u00e1rio perguntar de uma s\u00f3 vez, voc\u00ea pode sempre dar uma op\u00e7\u00e3o para o usu\u00e1rio atualizar seu perfil. Pense como o Linkedin ou o Facebook, eles n\u00e3o perguntam tudo de uma s\u00f3 vez, em vez disso, eles primeiro se inscrevem com campos 3-5 e, em seguida, oferecem a op\u00e7\u00e3o de atualizar seu perfil mais tarde.<\/p>\n \u00c9 tudo sobre apresenta\u00e7\u00e3o, ent\u00e3o voc\u00ea deve perguntar apenas os detalhes mais importantes que voc\u00ea precisa: Se voc\u00ea est\u00e1 usando o formul\u00e1rio para feedback, ent\u00e3o pergunte sobre seus pontos de vista e coment\u00e1rios antes de perguntar seu nome ou ID de e-mail. Da mesma forma, se for um formul\u00e1rio de check-out e voc\u00ea j\u00e1 tiver determinadas informa\u00e7\u00f5es sobre o usu\u00e1rio, n\u00e3o as solicite novamente, em vez disso, preencha-as no formul\u00e1rio. Por exemplo, voc\u00ea pode preencher previamente as informa\u00e7\u00f5es no endere\u00e7o de cobran\u00e7a para preencher automaticamente o formul\u00e1rio de endere\u00e7o de entrega se ambos os endere\u00e7os forem iguais.<\/p>\n [Caption id = "attachment_4154" align = "aligncenter" width = "509"] Os r\u00f3tulos s\u00e3o usados \u200b\u200bnos formul\u00e1rios do site para facilitar o preenchimento das informa\u00e7\u00f5es necess\u00e1rias pelo usu\u00e1rio. Portanto, certifique-se de que os r\u00f3tulos sejam colocados em uma posi\u00e7\u00e3o correta que n\u00e3o confunda o usu\u00e1rio sobre o que preencher. Um alinhamento de r\u00f3tulos adequado \u00e9 essencialmente necess\u00e1rio quando voc\u00ea est\u00e1 projetando um formul\u00e1rio responsivo que serve para diferentes tamanhos de tela. Certifique-se de que as etiquetas permane\u00e7am alinhadas corretamente em todos os tamanhos de tela em que o formul\u00e1rio est\u00e1 sendo aberto.<\/p>\n [Caption id = "attachment_4155" align = "aligncenter" width = "291"] Os usu\u00e1rios em dispositivos m\u00f3veis usam o zoom para ver claramente os r\u00f3tulos nos formul\u00e1rios, para que eles preencham as informa\u00e7\u00f5es corretas. No entanto, conforme mostrado na imagem acima, se voc\u00ea mantiver o mesmo alinhamento nas vers\u00f5es para desktop e para dispositivos m\u00f3veis do formul\u00e1rio, ele ocultar\u00e1 todos os r\u00f3tulos enquanto clica no formul\u00e1rio no modo de zoom. Isso for\u00e7ar\u00e1 o usu\u00e1rio a reduzir o formul\u00e1rio toda vez que ele for para a pr\u00f3xima entrada.<\/p>\n Uma op\u00e7\u00e3o melhor para lidar com isso seria usar dois alinhamentos diferentes na vers\u00e3o para desktop e para dispositivos m\u00f3veis do formul\u00e1rio. Deixe os r\u00f3tulos alinhados na parte superior das vers\u00f5es para dispositivos m\u00f3veis e mantenha-os alinhados corretamente na \u00e1rea de trabalho.<\/p>\n Com o HTML 5, os marcadores de posi\u00e7\u00e3o no atributo text eram uma adi\u00e7\u00e3o valiosa. Eles s\u00e3o efetivamente usados \u200b\u200bpara fornecer uma breve sugest\u00e3o sobre um valor esperado no campo.<\/p>\n [Caption id = "attachment_4157" align = "aligncenter" width = "620"] Normalmente, um espa\u00e7o reservado permanece vis\u00edvel at\u00e9 o usu\u00e1rio clicar no campo. Assim que o usu\u00e1rio clica no campo para digitar algo, o espa\u00e7o reservado desaparece. O uso de espa\u00e7os reservados no design do formul\u00e1rio do site \u00e9 altamente confundido com o de r\u00f3tulos. Muitos designers usam esses espa\u00e7os reservados em vez de r\u00f3tulos para descrever os campos de entrada na esperan\u00e7a de obter um design mais limpo. Este \u00e9 um grande erro que compromete a experi\u00eancia do usu\u00e1rio.<\/p>\n Vamos levar uma situa\u00e7\u00e3o quando o usu\u00e1rio preencher um formul\u00e1rio longo como um formul\u00e1rio de pagamento. Depois de preencher o formul\u00e1rio, ele pode querer revisar os detalhes antes de poder enviar o formul\u00e1rio. Agora, se n\u00e3o houver um r\u00f3tulo no formul\u00e1rio, ele ficar\u00e1 confuso sobre os detalhes que preencheu.<\/p>\n [Caption id = "attachment_4158" align = "aligncenter" width = "529"] Ent\u00e3o, use sempre um r\u00f3tulo. N\u00e3o usar r\u00f3tulos pode ser uma prote\u00e7\u00e3o de espa\u00e7o, mas voc\u00ea ficar\u00e1 surpreso ao saber com que facilidade as pessoas esquecem o que o r\u00f3tulo era quando preenchiam as informa\u00e7\u00f5es no campo.<\/p>\n Outro grande erro que cometemos no design de formul\u00e1rios \u00e9 colocar muitos elementos em uma \u00fanica p\u00e1gina. Mais s\u00e3o o n\u00famero de elementos em uma \u00fanica p\u00e1gina mais \u00e9 a competi\u00e7\u00e3o entre eles para chamar a aten\u00e7\u00e3o.<\/p>\n A solu\u00e7\u00e3o \u00e9 deixar algum espa\u00e7o para respirar entre os elementos, mantendo espa\u00e7os em branco. Um fluxo adequado para seus usu\u00e1rios ser\u00e1 fornecido somente quando voc\u00ea manter um amplo espa\u00e7amento entre os campos e se\u00e7\u00f5es diferentes.<\/p>\n Este formul\u00e1rio de checkout de p\u00e1gina \u00fanica mostra como diferentes se\u00e7\u00f5es podem ser segregadas, mesmo se houver muitos elementos em uma \u00fanica p\u00e1gina. O formul\u00e1rio usa r\u00f3tulos de se\u00e7\u00e3o para separar se\u00e7\u00f5es diferentes, como Op\u00e7\u00f5es de login, Endere\u00e7o de cobran\u00e7a, Ordem de confirma\u00e7\u00e3o, M\u00e9todo de envio e M\u00e9todo de pagamento. Al\u00e9m disso, o layout de tr\u00eas colunas torna a forma ainda mais limpa.<\/p>\n [Caption id = "attachment_4159" align = "aligncenter" width = "648"] Ao preencher os formul\u00e1rios do site, h\u00e1 certas chances de que os usu\u00e1rios cometer\u00e3o alguns erros devido a qual formul\u00e1rio n\u00e3o seria enviado. Erros podem ocorrer por falta de uma entrada, ou preenchimento de uma informa\u00e7\u00e3o incorreta etc. Para lidar com este site, os designers usam valida\u00e7\u00f5es de entrada que mostram a (s) mensagem (ns) de erro ao enviar o formul\u00e1rio. Eles usam valida\u00e7\u00f5es do lado do servidor que geralmente aguardam a resposta do servidor para verificar os erros no formul\u00e1rio. Esse \u00e9 um erro maior que pode at\u00e9 mesmo frustrar o usu\u00e1rio quando ele v\u00ea uma mensagem de erro depois de enviar o formul\u00e1rio.<\/p>\n Em vez disso, voc\u00ea pode usar a valida\u00e7\u00e3o em linha do lado do usu\u00e1rio que informa no local se o usu\u00e1rio estiver preenchendo uma entrada incorreta em um campo. Ao fazer isso, os usu\u00e1rios n\u00e3o perder\u00e3o se tiverem inserido algo errado em um campo.<\/p>\n [Caption id = "attachment_4160" align = "aligncenter" width = "648"] Al\u00e9m disso, n\u00e3o use instru\u00e7\u00f5es confusas nas mensagens de valida\u00e7\u00f5es. Apenas explique por que a entrada est\u00e1 errada descrevendo como a entrada correta se pareceria.<\/p>\n Captchas s\u00e3o usados \u200b\u200bpelos sites para evitar ataques de spam, distinguindo um bot de humanos. Presume-se que esses captchas apresentem um desafio que seria f\u00e1cil para os humanos, enquanto os bots n\u00e3o podem pass\u00e1-los. Para a preven\u00e7\u00e3o de spam, \u00e0s vezes, os designers ficam t\u00e3o desesperados que integram os captchas que s\u00e3o desafiadores at\u00e9 mesmo para os humanos.<\/p>\n [Caption id = "attachment_4161" align = "aligncenter" width = "319"] Eu entendo que a preven\u00e7\u00e3o de spam \u00e9 importante, mas o captcha pode ser confuso e desafiador para os usu\u00e1rios decodific\u00e1-los. Voc\u00ea pode usar uma solu\u00e7\u00e3o alternativa do Google re-Captcha, que \u00e9 uma vers\u00e3o mais avan\u00e7ada e simples. O novo Google Capt-Captcha simplesmente pede que o usu\u00e1rio clique em uma caixa de sele\u00e7\u00e3o e a verifica\u00e7\u00e3o \u00e9 feita sem a necessidade de ver a mensagem de texto.<\/p>\n [Caption id = "attachment_4162" align = "aligncenter" width = "319"] Finalmente<\/strong>,<\/p>\n A melhoria da experi\u00eancia do usu\u00e1rio \u00e9 um processo cont\u00ednuo que s\u00f3 pode ser alcan\u00e7ado com atualiza\u00e7\u00f5es regulares usando os melhores m\u00e9todos dispon\u00edveis. Espero que descrevendo estes erros de design ir\u00e1 ajud\u00e1-lo a alcan\u00e7ar essa melhoria, n\u00e3o cometendo esses erros em qualquer um dos formul\u00e1rios que voc\u00ea usa em seu site.<\/p>\n Hist\u00f3rias relacionadas:<\/strong><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" UI (User Interface) e UX (User Experience) t\u00eam um papel importante na convers\u00e3o de web design amig\u00e1vel. A interface do usu\u00e1rio torna o site bonito e o UX se concentra na usabilidade e na facilidade do site. Se algum desses dois estiver faltando ou n\u00e3o estiver balanceado, o resultado ser\u00e1 a rejei\u00e7\u00e3o dos clientes. O […]<\/p>\n","protected":false},"author":1,"featured_media":4165,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[3232],"tags":[],"class_list":["post-19846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comercio-eletronico"],"acf":[],"yoast_head":"\n1. Solicitando muita informa\u00e7\u00e3o do usu\u00e1rio<\/h2>\n
\n
![\"envio](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/drupal-commerce-shipping-copy-profile-info-checkou.png\")
<\/a> A pr\u00e9-popula\u00e7\u00e3o de informa\u00e7\u00f5es de um formul\u00e1rio para outro pode economizar tempo e esfor\u00e7o dos usu\u00e1rios [\/ caption]<\/p>\n2. Posicionamento de r\u00f3tulos amb\u00edguo ou n\u00e3o responsivo<\/h2>\n
![\"Celular](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/1-291x300.jpeg\")
<\/a> Formul\u00e1rio de contato para celular [\/ caption] [id = "attachment_4156" align = "aligncenter" width = "300"]![\"tamanho](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/yyy-300x221.jpeg\")
A maioria dos formul\u00e1rios de websites usa os mesmos posicionamentos de marcadores em todos os tamanhos de tela, o que n\u00e3o \u00e9 uma op\u00e7\u00e3o recomendada [\/ caption]<\/p>\n3. Substituindo r\u00f3tulos por espa\u00e7os reservados<\/h2>\n
![\"hint-about-expected-value-in-form-field\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/3.png\")
<\/a> Os espa\u00e7os reservados fornecem uma breve sugest\u00e3o sobre os valores esperados no campo de formul\u00e1rio [\/ caption]<\/p>\n![\"espa\u00e7os](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/4.png\")
<\/a> Usar espa\u00e7os reservados no lugar dos r\u00f3tulos confundir\u00e1 seus clientes, especialmente em formul\u00e1rios longos [\/ caption]<\/p>\n4. Usando espa\u00e7amento insuficiente e layout distorcido<\/h2>\n
![\"segregando-evita-desordenando\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/5-1024x863.png\")
<\/a> Segregar se\u00e7\u00f5es diferentes impedir\u00e1 a confus\u00e3o entre diferentes se\u00e7\u00f5es [\/ caption]<\/p>\n5. Mensagens de erro incertas e valida\u00e7\u00f5es de entrada<\/h2>\n
![\"Valida\u00e7\u00e3o](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/6-1024x486.jpeg\")
<\/a> Valida\u00e7\u00e3o em linha para verificar e mostrar os erros no local evitar o envio do formul\u00e1rio p\u00f3s-frustra\u00e7\u00e3o [\/ caption]<\/p>\n6. Usando Captcha que n\u00e3o s\u00e3o projetados para humanos<\/h2>\n
![\"prevenir](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/8.jpeg\")
<\/a> Captcha que previne spam, mas frustra usu\u00e1rios humanos [\/ caption]<\/p>\n![\"Google](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/9.png\")
<\/a> O Google re-Captcha \u00e9 comparativamente mais f\u00e1cil de usar, apesar de ser dif\u00edcil para os bots [\/ caption]<\/p>\n\n