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”.
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”.
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”.
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”.
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”
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á”
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.
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.
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.
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
