5 abordagens práticas para melhora websites

TADS
Usabilidade e Acessibilidade
Multimídia
Aula 6 – Segundo Bimestre
Abordagens Práticas Para
Melhorar a Interação com Sites

Anselmo Battisti - anselmo@webgenium.com.br 2

Objetivos
• Analisar as principais falhas na
elaboração de formulários web.

Formulários

Formulários
• Principal elemento de entrada de
dados em um site;
• Cada navegador estiliza elementos
dos formulários de maneira
diferente;

Formulários – Seja Breve.
• Seja breve. O matemático Blaise Pascal diz que
“Ficou mais longo do que deveria porque não tive
tempo de deixar mais curto”. A frase também se
aplica a escrita? Eliminar campos desnecessários
requer tempo, mas as vantagens para os usuários faz
esse tempo extra valer a pena. Considere coletar
alguns daqueles dados mais tarde, ou de uma outra
forma. Nem tudo precisa ser pedido de uma vez só.

Formulários – Agrupe visualmente
campos relacionados.
• Use rótulos para descrever os campos
imediatamente próximos. Evite espaçamento
ambíguo, onde os rótulos estão à mesma distância
de vários campos de formulário diferentes. Se seu
formulário pede informações de tópicos diferentes,
divida-o em seções e agrupe os campos de forma
que faça mais sentido para o usuário — ao invés de
tratar todos os campos como uma coisa só.

Formulários – Apresente os campos em
uma única coluna.
• Usar um layout de múltiplas colunas pode
distrair o usuário ao invés de deixá-lo focado
em uma tarefa só. Empilhe os campos
sempre que possível. A exceção para essa
regra são campos extremamente curtos
(como CEP, ou Estado), que podem ser
colocados lado a lado

Formulários – Siga uma sequência lógica.
• Toda vez que apresentar campos, faça na sequência
lógica. Quando for pedir os dados de um cartão de
crédito, por exemplo, peça primeiro o número do cartão,
depois a data de validade, depois o código de
segurança — já que é também nessa ordem que o
usuário vai ler esses dados quando estiver com o cartão
de crédito em mãos. Para campos com múltiplos
valores, considere deixar os valores mais
frequentemente usados no topo da lista.

Formulários – Evite texto de marcação
que são difíceis de ler.
• Esse é óbvio, mas muitos designers ainda
esquecem: quando for usar textos claros,
tenha certeza que a cor escolhida tem um
mínimo de contraste com o fundo da página
para evitar problemas de legibilidade e,
consequentemente, de acessibilidade.

Formulários – Use o tipo certo de campo
para o tipo certo de informação.
• Evite dropdowns quando for apresentar
somente 2 ou 3 opções (que poderiam ser
melhor visualizadas com radio buttons). Os
campos de texto devem ser do tamanho
aproximado da informação que você espera
que os usuários incluam ali.

Formulários – Diferencia campos
opcionais de campos obrigatórios.
• Primeiro, elimine ao máximo os campos
opcionais — se eles são opcionais, por que
você está pedindo? Tente limitar o número de
campos opcionais a apenas 1 ou 2, e
identifique claramente para os usuários que
eles são opcionais. Antes deles preencherem
o campo, obviamente.

Formulários – Explique requisitos de
formatação.
• Se você espera que o usuário crie um password,
não espere que ele adivinhe os requisitos do seu
sistema para a criação do mesmo. O mesmo serve
para sintaxe, pontuação, espaços em branco para
telefones ou cartões de crédito. O ideal é que o
formulário aceite qualquer tipo de formatação e o
usuário não tenha nem que se preocupar com isso.

Formulários – Chega de botões de
“Limpar”.
• O risco do usuário clicar acidentalmente no
botão limpar e perder tudo que já preencheu é
grande. Pense mil vezes antes de colocar um
botão desses no formulário — e considere a
hierarquia visual dele em relação ao botão de
“Enviar”. Pense bastante. Pense mais. Em
que ano estamos?

Formulários – Ofereça mensagens de
erro visíveis e bem escritas.
• Erros devem ser indicados através de vários
affordances visuais diferentes — não somente
mudança de cor. Use ícones, fontes em
negrito, bordas, setas. Ser sutil não é uma
boa ideia quando erros acontecem e o
usuário já está frustrado com o seu produto.

https://www.google.com/recaptcha/intro/index.html

Exercícios
• O que poderia ser melhorado no cadastro
de cliente do submarino.com.br?
• O que poderia ser melhorado no cadastro
de cliente do magazineluiza.com.br?
• O que você melhoraria na tela de login do
site estante virtual?

Referências
•https://brasil.uxdesign.cc/10-boas-
pr%C3%A1ticas-essenciais-para-
formul%C3%A1rios-online-c8c6accc66f2
•http://form.guide/best-practices/form-
validations-definitive-guide.html

5 abordagens práticas para melhora websites

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 5 abordagens práticas para melhora websites

Semelhante a 5 abordagens práticas para melhora websites (20)

Mais de Anselmo Battisti

Mais de Anselmo Battisti (11)

5 abordagens práticas para melhora websites