Recomendações de usabilidade com foco em formulários. Baseado nos artigos do Baymard Institute (baymard.com) e licenciado neste formato sob CC-BY-SA. Caso utilize a apresentação para fins comerciais, por gentileza contate o instituto sobre o direito de uso das imagens.

1. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações de Usabilidade: Formulários
por IxDA Joinville
Bruno Duarte, João Menezes, Monica Possel
Licenciado sob CC-BY-SA
Este material baseia-se nos artigos do Baymard Institute (www.baymard.com).
Caso utilize esta apresentação para fins comerciais, por gentileza contate o
instituto em relação ao licenciamento das imagens.

2. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
A ação ‘Continuar’ é
contextual: p. ex.,
continuar comprando ou
continuar para o
próximo passo?
Os microtextos devem
deixar claro o que é
atribuição do sistema e
o que é do usuário.
Todos os campos de
cadastro devem ser
claros, evitando
dualidades como
‘Endereço 1’ e
‘Endereço 2’ ou ‘Nome’
e ‘Sobrenome.
Usuário tende a
acreditar que ao
preencher seu e-mail em
cadastros ele passará a
receber spam.
O destaque de links e
área de toque continuam
sendo essenciais.
A largura de um campo
de formulário deve ser
diretamente
proporcional ao tamanho
esperado da sua
informação.

3. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Preferir o uso de e-
mail como chave
identificadora do
usuário.
Utilizar o novo
NOCAPTCHA do Google,
evitando o desconforto
de captchas
tradicionais.
E-mails de confirmação
de contato devem ter
títulos que facilitem a
busca.
Pedir informações
complementares após a
efetivação inicial do
cadastro.
Após concluir um
cadastro, usuário deve
ser logado
automaticamente.
Preferir um único login
para todas os pontos de
contato do usuário com
a marca.

4. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Evitar diagramar
formulários em
múltiplas colunas.
Pedir a confirmação de
e-mail é ainda mais
essencial do que pedir
a confirmação de senha.
Para termos de uso
complexos, o ideal é
separá-los em sub-
checkboxes.
Evitar textos dentro
dos campos, exceto
quando descrevem um
exemplo ou exibem
login/senha.
Evitar a falsa
simplicidade: algumas
informações são
essenciais para o
entendimento.
Cuidar ao utilizar
botões de ‘Aplicar’.
Preferir updates
automáticos das
informações.

5. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Em dispositivos móveis,
a separação entre itens
de lista de produtos
deve ser bastante
distinta.
Considerar que ao
interagir em celulares
todos temos ‘dedos
gordinhos’: isso se
traduz em áreas de
toque retangulares, de
50x60px.
Conduza o usuário até
os campos que tem erro
de preenchimento ao
invés de atualizar a
página toda.
Evitar textos dentro
dos campos, exceto
quando descrevem um
exemplo.
Não há ação de hover em
dispositivos touch, o
que faz com que alguns
elementos sejam
deduzidos por tentativa
e erro.
O campo de telefone
deve ser um só, com DDD
e Número separados por
máscara.

6. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Na orientação vertical,
os labels dos campos
devem vir acima; na
horizontal, trazê-los à
esquerda.
Considerar a
implementação de HTML
de teclado numérico
quando possível.
Considerar 2
breadcrumbs: navegação
hierárquica e
histórico.
Garantir uma boa área
de zoom da lupa nativa
de digitação.
Auto-detectar o máximo
de informações
possíveis, como
localização.
Evitar anúncios acima
das listagens de
produtos por sua baixa
leitura.

7. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Permitir sempre o
‘Voltar’ nativo do
navegador, evitando
janelas modais e
paginação por Ajax.
Busca aberta é
preferível quando se
sabe o produto exato;
página de Categoria
quando ainda se está
explorando as
alternativas.
Abas e menus sanfona
devem deixar claro se
as ações são aplicáveis
ao todo ou apenas à
área aberta.
Considerar a
implementação do HTML5
History API, para
permitir navegação por
tarefa.
Validação de
formulários é mais
recomendada do que
avisos de erros.
As mensagens de
validação devem ser
contextuais, evitando
textos genéricos como
‘Há um erro’.

8. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Autocomplete deve
exibir dados auxiliares
com uma formatação
diferente.
Autocomplete deve
evitar barras de
rolagem, deixando o
espectro de busca mais
estreito.
Autocomplete deve ser
amigável para navegação
pelo teclado.
Autocomplete deve ter
ação de hover
pronunciada, de bom
contraste.
Autocomplete deve
exibir o histórico
passado de buscas.
Autocomplete deve
reduzir ruídos de
navegação, sendo mais
objetivo.

9. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Recomendações
Busca exata deve listar
um produto específico.
Busca por tipo de
produto deve listar as
categorias
correspondentes.
Busca por sintoma deve
listar queries por
problema, e não por
solução.
Busca por não-produto
deve permitir a
navegação a outras
áreas do site.
O uso de qualidades e
adjetivos é utilizado
como filtro pelo
usuário. Detalhes aqui.
Erros de sistema devem
aparecer como mensagens
leves aos olhos, dentro
da interface do
usuário.

10. Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comerciais, por gentileza
contate o instituto em relação ao licenciamento das
imagens.
Obrigado!
fb.com/ixdajlle