Successfully reported this slideshow.

Forms

396 views

Published on

Best Practices from Luke Wroblewski's book

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Forms

  1. 1. Forms<br />It’s a dirty job but someone’s gotta do it<br />Mauricio Wolff<br />
  2. 2. Resumo das Best Practices do Livro<br />O que realmente importa?<br />Por um caminho claro<br />O mundo dos Labels<br />Inputz<br />Ações do Form<br />Textos de Ajuda<br />Erros e Acertos<br />Validação<br />HTML5<br />
  3. 3. O querealmenteimporta<br /><ul><li>O mínimo possível de campos
  4. 4. Labels compactos
  5. 5. Se o label for ambíguo, use linguagem coloquial
  6. 6. Organização em grupos lógicos
  7. 7. Grupos em forma de diálogo
  8. 8. Deve-se usar o mínimo de informação visual para distinguir grupos, e a primeira letra maiúscula
  9. 9. Opcionais depois de completar o form aumentou de 10% a 40% a quantidade de respostas</li></li></ul><li>Por um caminhoclaro<br /><ul><li>Explique para que serve o Form
  10. 10. Se for preciso buscar documentos, start page
  11. 11. Mostrar o caminho até a conclusão (Indicador de progresso)
  12. 12. Em Checkouts ou signups, elimine elementos que podem causar abandono
  13. 13. tabindex</li></li></ul><li>O mundo dos Labels<br /><ul><li>Alinhar pelo topo é geralmente melhor
  14. 14. Pela direita quando se precisa de espaço vertical
  15. 15. Pela esquerda quando a leitura deve ser atenta
  16. 16. Labels e respostas devem ser claramente diferentes, principalmente dentro dos inputs</li></li></ul><li>Inputz<br /><ul><li>Tipo certo para a pergunta
  17. 17. O tamanho do input indica o tamanho da resposta (affordance)
  18. 18. Asteriscos junto aos labels
  19. 19. Se todos são required, marcar somente os opcionais
  20. 20. Um “optional” vale mais que um * com legenda
  21. 21. Coerência (pattern)
  22. 22. Programadores shouldn’t be lazy (flexible inputs)</li></ul>Telefone:<br />(51) 3333.3333<br />51 3333-3333<br />51 3333 3333<br />3333-3333<br />
  23. 23. Ações do Form<br /><ul><li>Evitar ações secundárias, caso necessárias torná-las visualmente distintas
  24. 24. Alinhar ação primária com inputs
  25. 25. Se a ação secundária for destrutiva, confirme
  26. 26. Animação para evitar duplos
  27. 27. Disable no submit ao invés de texto de ajuda
  28. 28. Juntar a ação de Agree com Submit</li></li></ul><li>Textos de Ajuda<br /><ul><li>Quanto menos, melhor
  29. 29. Explicar porque se está perguntando, questões de privacidade, recomendações de como se responder
  30. 30. Texto conciso e perto da pergunta
  31. 31. Dentro dos inputs, só recomendações de como preencher
  32. 32. Ícones devem ser colocados perto dos labels, não dos inputs</li></li></ul><li>Erros e Acertos<br /><ul><li>Caso haja mais de um erro, na mensagem principal todos devem estar listados
  33. 33. Erros devem aparecer no contexto e definindo próximas ações
  34. 34. Associar visualmente o input que precisa ser resolvido
  35. 35. Mostrar também quando o usuário acerta</li></li></ul><li>Validação<br /><ul><li>Inline depois de completado o input
  36. 36. Qualidade da senha ao invés de exigências
  37. 37. Limitador de caracterestwitter style</li></li></ul><li>HTML5<br />Autofocus<br />Autocomplete<br />List<br />Multiple<br />Placeholder<br />Required<br />Regex<br />Validation<br />Numbers, Integers, Floats<br />Dates, Times<br />Urls, Emails, Telephone, Color<br />
  38. 38. HTML5<br />
  39. 39. HTML5<br />Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets<br />
  40. 40. Q&A?<br />

×