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 JoinvilleBruno 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.

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.

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.

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.

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.

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.

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’.

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.

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.

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