Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Este material baseia-se nos artigos do Baymard
Institute (www.baymard.com). Caso utilize esta
apresentação para fins comer...
Nächste SlideShare
Wird geladen in …5
×

Recomendações de usabilidade para formulários

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.

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Recomendações de usabilidade para formulários

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

×