1. FORMS 101 Pedro Custdio CodeBits 2008 Lisboa, Portugal

2. Quem sou eu? :) Pedro Custdio http://blog.centopeia.com http://sapo.pt Responsvel pela Qualidade e Usabilidade

3. Disclaimer Web Form Design by Luke Wroblewski (aka LukeW) http://www.rosenfeldmedia.com/books/webforms/ A maioria das imagens presentes nesta apresentao so extradas do livro e podem ser consultadas em: http://www.ickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

4. Formulrios, hein?

5. 5 Os formulrios so essenciais em quase tudo o que fazemos online: e-commerce comunidades etc.

6. ...no entanto quase todos funcionam como verdadeiras barreiras

7. 7 entre ns e o utilizador photo by http://ickr.com/photos/thetruthabout

8. 8 Desenhar Formulrios

9. 9 Quem preenche formulrios?

10. Todos odiamos formulrios...

11. 11 preciso estabelecer um dilogo com os utilizadores

12. 12 Num dilogo real, existem alguns aspectos que fazem com que uma conversa seja um sucesso ou insucesso em termos de comunicao: pistas visuais (dadas por cada interlocutor durante uma conversa); ateno aos detalhes (abrir uma caixa apple por exemplo, receber um presente, etc.) no entanto online tudo se resume a um...

13. Formulrio...

14. 14 mas ento como garantir que obtemos um bom formulrio?

15. 15 Testes de Usabilidade + Estudos etnogrcos + Ateno no apoio ao cliente + Anlise de trafego + Eye tracking + e muito cuidado com convenes WEB. = Um bom formulrio!

16. 16

17. 17 A ter sempre em mente! Minimizar desconforto; Indicar o caminho para o sucesso; Ter em conta o contexto; Consistncia na comunicao; os utilizadores preocupam-se SEMPRE com o que lhes perguntado!

18. 18 Organizao de formulrios

19. 19 Organizar um formulrio Criar grupos lgicos para os vrios campos; separar grupos visualmente; estruturar o formulrio como se de um dilogo se tratasse; considerar adiar algumas perguntas; cuidado com convenes (ex: *); considerar a partio do formulrio por pginas/tabs.

20. Organizar um formulrio Criar grupos lgicos para os vrios campos; separar grupos visualmente; estruturar o formulrio como se de um dilogo se tratasse; considerar adiar algumas perguntas;

21. Organizar um formulrio cuidado com convenes (ex: *); considerar a partio do formulrio por pginas/tabs.

22. 22 Formulao de perguntas ao formular as questes ter sempre em conta os seguintes critrios: cortar manter adiar explicar

23. 23 A caminho do sucesso!

24. Nomes Ttulos dos formulrios Introduo ao preenchimento/ formulrio Ttulos dos grupos Nomes/Etiquetas dos campos

25. Pgina inicial Quando o processo complexo e demorado e envolve um conjunto no trivial de passos/dados... ... importante criar uma pgina de introduo ao formulrio onde so indicadas todas as necessidades e restries aplicveis ao formulrio.

26. 26 Linhas Visuais

27. 27 Linhas Visuais

28. Minimizar Distraces Se o processo complexo e sujeito a mltiplos problemas, a ideia deve ser de minimizar as distraces do objectivo nal

29. 29 Indicador de Progresso

30. Etiquetas

31. 31 Posicionamento topo direita esquerda dentro dos campos

32. 32 Posicionamento topo direita esquerda dentro dos campos

33. 33 Posicionamento topo direita esquerda dentro dos campos

34. 34 Posicionamento topo direita esquerda dentro dos campos

35. 35 Posicionamento topo direita esquerda dentro dos campos

36. 36 Regras para etiquetas serem sucintas, claras e consistentes em termos de escrita se o objectivo : reduzir tempo de preenchimento -> etiquetas sobre os campos encurtar o formulrio -> etiquetas alinhadas direita varrimento visual do formulrio -> etiquetas esquerda em condies extremas de espao, usar etiquetas dentro dos prprios campos, com cuidado para no quebrar interaco.

37. 37 Campos

38. 38 Tipos de Campos

39. Tamanho dos Campos

40. Campos Obrigatrios vs Opcionais Evitar sempre que possvel a utilizao de campos opcionais, e quando tal no for possvel, adicionar uma legenda para claricao da terminologia usada.

41. Desenho estrutural de Campos importante ter em conta aspectos como a relao entre campos, o seu agrupamento visual e funcional, as suas interdependncias...

42. 42 Campos Inteligentes

43. 43 Aces

44. 44 Aces Primrias vs Secundrias

45. 45 Posio/ Formato

46. 46

47. 47

48. 48

49. 49 Formato

50. 50 Progresso

51. 51 Ajuda

52. KIS quanto menos texto melhor... ser conciso!

53. 53 Explicar

54. Inline se necessrio usar inline help nos pontos onde os utilizadores paream ter dvidas ou incertezas de preenchimento.

55. Validaes Inline usar com cautela, de modo a garantir consistncia visual e funcional.

56. Extras Em caso de ser necessrio uma ajuda mais longa/ complexa, criar uma pgina especca de ajuda ao preenchimento.

57. 57 Mensagens de Erro e Sucesso !

58. 58 Mensagens As mensagens, quer sejam de erros, ou sucessos nunca so fceis... nem de ler... nem de as escrever! So um elemento crtico na avaliao subjectiva dos utilizadores sobre a experincia de utilizao e de usabilidade de um formulrio.

59. 59 1 passo... Inventariar todas as possveis mensagens de um servio, como e onde estas so usadas e a determinar a quantidade de mensagens permite simplicar, re-utilizar e garantir consistncia entre mensagens!

60. 60

61. 61 Tipos de Mensagens conhecer os diferentes tipos de mensagens adapt-las s necessidades dos utilizadores: erro sucesso marketing educacionais ...

62. 62 Mensagens de ERRO! s devem surgir quando: 1. o utilizador introduziu algo que o sistema no consegue digerir e como tal no possvel continuar! 2. Algo de MUITO errado aconteceu e o utilizador no consegue prosseguir. tudo o resto NO so mensagens de erro!

63. 63 Regras para mensagens Utilizar um layout uniforme para mensagens Oferecer mensagens de erro dentro do contexto onde estas podem ser resolvidas Oferecer alternativas perante os problemas Indicar claramente quando algo que depende do utilizador impeditivo de continuar

64. 64 Regras para mensagens Quando existe mais do que um erro, usar uma mensagem genrica no topo do formulrio com uma lista de todos os erros presentes. Indicar visualmente quais os campos que apresentam erros Reservar o texto a vermelho e cones de alerta para as mensagens de erro Indicar clara e de forma explcita o sucesso de uma aco

65. 65 Regras para mensagens Revelar problemas o mais cedo possvel e no somente no nal de todo o formulrio; Evitar pginas de sucesso/erro sem sadas

66. 66 Envolvimento progressivo!

67. 67 Colocar as questes certas !

68. 68 Um longo namoro...

69. 69 Perguntas?

70. Saber mais? Web Form Design by Luke Wroblewski (aka LukeW) Desconto 15% - usar cdigo CUSTODIO http://www.rosenfeldmedia.com/books/webforms/ A maioria das imagens presentes nesta apresentao so extradas do livro e podem ser consultadas em: http://www.ickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

71. 71

72. 72 Obrigado ;)