Sugestões de design para seus formulários na Internet – Melhore a experiencia de seus usuários!

Banner Retail Media para e-commerce

Olá pessoal, tudo certo !
Há algum tempo atrás venho focando meus estudos e pesquisas dentro do assunto de Experiência do Usuário (EU), ou como é mais conhecido – User Experience (UX). Realmente fico incomodado com o comparativo de conversão entre operações americanas x operações brasileiras, e coloco uma boa parte dessa diferença sob responsabilidade da estrutura de navegação utilizada por boa parte dos sites.
Busquei compactar alguns pontos interessantes neste post. #BoaLeitura
Há aproximadamente 3 semanas, li uma matéria muito boa e gostaria de compartilhar com vocês.
Esse material foca nos principais erros de layout cometidos em estruturas básicas e muito utilizadas nos sites, como forms de contato, tabelas, caixas de seleção, etc.
Veja também:
Mobile ou Responsivo – Qual escolher?
Projeto AMP – Google
Vejam alguns exemplos que destaquei em relação as boas práticas de design.
Lista de seleção

“Listas de seleções com poucas opções sempre busque utilizar todas as opções aparentes e de forma horizontal.”


Forms

“Para a utilização de forms, busque trabalhar de maneira vertical e em uma sequencia lógica, favorecendo o preenchimento”.

https://cdn-images-1.medium.com/max/1600/1*XhzxeTnAuWoaeJmlPBP0bw.jpeg
Campos agrupados de inserção da informação.

“O espaçamento dos campos também é um fator muito relevante em relação a usabilidade no preenchimento de tabelas, e na inserção de dados, busque criar uma estrutura compacta e organizada”.

 
https://cdn-images-1.medium.com/max/1600/1*obwyjb54NCWy3sOPfm2WEg.jpeg
Texto em Caps Lock

“Textos em caixa alta não são uma boa opção para a apresentação do título dos campos, eles irão “pesar” o visual e diminuir o espaçamento entre os campos”.

 
https://cdn-images-1.medium.com/max/1200/1*w6nZOf5pZSha6FoWu3YtRw.jpeg
Usando o texto do marcador de posição como rótulos

“Todos os campos devem conter títulos orientativas a informação que será inserida no mesmo”.

 

https://cdn-images-1.medium.com/max/1200/1*XvUnJwHtQhJ3Wl8Apj9lhQ.jpeg

 

Coloque as caixas de seleção (e os rádios) embaixo umas das outras

“Dentro da mesma ótica, caixa de seleções também devem manter uma estrutura verticalizada, caso a quantidade de sugestões seja pequena”

 
https://cdn-images-1.medium.com/max/1200/1*VLqTEZP8OrH24FooksePbQ.jpeg
Tornar CTA’s descritivos

“Busque sempre deixar a ação do botão de ação (call to action), descrita no botão que a realizará”

 
https://cdn-images-1.medium.com/max/1600/1*x5Pd-IP-Z4Mf5TqZnJU2Yw.jpeg
Especificar erros na linha

“Acho que todo mundo já preencheu um formulário imenso e depois que clicou em enviar, ou salvar, o formulário não foi enviado e vários campos foram marcados com um erro, além disso o campo senha, e outros campos tiveram seus valores zerados – #QuemNunca”, a idéia é já realizar a validação do campo após a digitação ou durante a digitação.

https://cdn-images-1.medium.com/max/1200/1*xEJu91MpUlUblEfGbIQVhw.jpeg

 Use validação in-line depois que o usuário preenche o campo..

https://cdn-images-1.medium.com/max/1200/1*IvQg8ovqOJTjX1Tl6yMR0w.jpeg
O assistente de texto tem que dar assistência.. não o oculte !

Sempre que houver campos com direcionamento para a inserção da informação, deixe o assistente de digitação aparente, e busque sintetizar a informação – seja claro e objetivo.

 
https://cdn-images-1.medium.com/max/1200/1*BA2sPvjZq7a9BlbNFcqslg.jpeg
Sempre diferenciar as ações primarias das secundárias.

O que é importante? Qual é o foco/ objetivo… com perguntas como essas que você irá definir as ações primárias e secundárias, e isso deve ser destacado dentro do layout para que intuitivamente esse objetivo seja percebido pelo cliente.

 
https://cdn-images-1.medium.com/max/1200/1*PvvS04bY3ryTNFDirjPbdA.jpeg
Essas foram algumas dicas que sintetizei… é claro que alguns pontos podem ser questionados e alterados de acordo com a especificidade de cada operação.
 
 
Fonte: https://uxdesign.cc/design-better-forms-96fadca0f49c#.ck2ts3cgd

Serviço de otimização de conversão (CRO)

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *