Os slides da minha apresentação para o CodeBits 2008 (http://codebits.sapo.pt) sobre desenho de formulários web, basedada no livro ‘Web Form Design’ do Luke Wroblewski. Luke kindly provided a discount code for anyone interested in buying the book or his recent webinar "Modern Web Form Design", just use the code 'CUSTODIO' -> http://www.rosenfeldmedia.com/

1. FORMS 101
Pedro Custódio
CodeBits 2008
Lisboa, Portugal

2. Quem sou
eu? :)
Pedro Custódio
http://blog.centopeia.com
http://sapo.pt
Responsável 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 apresentação são
extraídas do livro e podem ser consultadas em:
http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

4. Formulários, hein?

5. 5
Os formulários são essenciais em quase tudo o que fazemos
online:
e-commerce
comunidades
etc.

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

7. 7
entre nós e o utilizador
photo by http://flickr.com/photos/thetruthabout

8. 8
Desenhar
Formulários

9. 9
Quem preenche
formulários?

10. Todos odiamos formulários...

11. 11
É preciso estabelecer um
diálogo com os utilizadores

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

13. Formulário...

14. 14
mas então como
garantir que obtemos
um bom formulário?

15. 15
Testes de Usabilidade +
Estudos etnográficos +
Atenção no apoio ao cliente +
Análise de trafego +
Eye tracking +
e muito cuidado com convenções WEB. =
Um bom formulário!

16. 16

17. 17
A ter sempre em mente!
Minimizar desconforto;
Indicar o caminho para o sucesso;
Ter em conta o contexto;
Consistência na comunicação;
os utilizadores preocupam-se SEMPRE com o que lhes é
perguntado!

18. 18
Organização de
formulários

19. 19
Organizar um formulário
Criar grupos lógicos para os vários campos;
separar grupos visualmente;
estruturar o formulário como se de um diálogo se tratasse;
considerar adiar algumas perguntas;
cuidado com convenções (ex: *);
considerar a partição do formulário por páginas/tabs.

20. Organizar um
formulário
Criar grupos lógicos para os
vários campos;
separar grupos visualmente;
estruturar o formulário como se
de um diálogo se tratasse;
considerar adiar algumas
perguntas;

21. Organizar um
formulário
cuidado com convenções (ex: *);
considerar a partição do
formulário por páginas/tabs.

22. 22
Formulação de perguntas
ao formular as questões ter sempre em conta os seguintes
critérios:
cortar
manter
adiar
explicar

23. 23
A caminho do sucesso!

24. Nomes
Títulos dos formulários
Introdução ao preenchimento/
formulário
Títulos dos grupos
Nomes/Etiquetas dos campos

25. Página inicial
Quando o processo é complexo e
demorado e envolve um conjunto
não trivial de passos/dados...
... é importante criar uma página
de introdução ao formulário onde
são indicadas todas as
necessidades e restrições
aplicáveis ao formulário.

26. 26
Linhas Visuais

27. 27
Linhas Visuais

28. Minimizar
Distracções
Se o processo é complexo e
sujeito a múltiplos problemas, a
ideia deve ser de minimizar as
distracções do objectivo final

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 formulário -> etiquetas alinhadas à direita
varrimento visual do formulário -> etiquetas à esquerda
em condições extremas de espaço, usar etiquetas dentro dos
próprios campos, com cuidado para não quebrar interacção.

37. 37
Campos

38. 38
Tipos de
Campos

39. Tamanho dos Campos

40. Campos
Obrigatórios vs
Opcionais
Evitar sempre que possível a utilização
de campos opcionais, e quando tal não
for possível, adicionar uma legenda
para clarificação da terminologia usada.

41. Desenho
estrutural de
Campos
É importante ter em conta aspectos
como a relação entre campos, o seu
agrupamento visual e funcional, as
suas interdependências...

42. 42
Campos Inteligentes

43. 43
Acções

44. 44
Acções Primárias vs
Secundárias

45. 45
Posição/
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 necessário usar ‘inline
help’ nos pontos onde os
utilizadores pareçam ter
dúvidas ou incertezas de
preenchimento.

55. Validações
Inline
usar com cautela, de modo
a garantir consistência visual
e funcional.

56. Extras
Em caso de ser necessário
uma ‘ajuda’ mais longa/
complexa, criar uma página
específica de ajuda ao
preenchimento.

57. 57
Mensagens de
Erro e Sucesso !

58. 58
Mensagens
As mensagens, quer sejam de erros, ou sucessos nunca
são fáceis...
nem de ler... nem de as escrever!
São um elemento crítico na avaliação subjectiva dos
utilizadores sobre a experiência de utilização e de
usabilidade de um formulário.

59. 59
1º passo...
Inventariar todas as possíveis mensagens de um serviço,
como e onde estas são usadas e a determinar a
quantidade de mensagens
permite simplificar, re-utilizar e garantir consistência
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 não consegue ‘digerir’
e como tal não é possível continuar!
2. Algo de MUITO errado aconteceu e o utilizador não consegue
prosseguir.
tudo o resto NÃO são 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
genérica no topo do formulário 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 explícita o sucesso de uma acção

65. 65
Regras para mensagens
Revelar problemas o mais cedo possível e não somente no
final de todo o formulário;
Evitar páginas de sucesso/erro sem saídas

66. 66
Envolvimento
progressivo!

67. 67
Colocar as questões
certas !

68. 68
Um longo namoro...

69. 69
Perguntas?

70. Saber mais?
‘Web Form Design’ by
Luke Wroblewski (aka LukeW)
Desconto 15% - usar código ‘CUSTODIO’
http://www.rosenfeldmedia.com/books/webforms/
A maioria das imagens presentes nesta apresentação são
extraídas do livro e podem ser consultadas em:
http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

71. 71

72. 72
Obrigado ;)