FORMS 101
   Pedro Custódio
     CodeBits 2008
    Lisboa, Portugal
Quem sou
eu? :)	
 Pedro Custódio
 http://blog.centopeia.com


 http://sapo.pt
  Responsável pela Qualidade e
  Usabilidade
Disclaimer
‘Web Form Design’ by
Luke Wroblewski (aka LukeW)

http://www.rosenfeldmedia.com/books/webforms/




A maioria d...
Formulários, hein?
5




    Os formulários são essenciais em quase tudo o que fazemos
    online:
       e-commerce
       comunidades
     ...
...no entanto
quase todos funcionam como
        verdadeiras barreiras
7




    entre nós e o utilizador

                photo by http://flickr.com/photos/thetruthabout
8




      Desenhar
    Formulários
9




    Quem preenche
       formulários?
Todos odiamos formulários...
11




        É preciso estabelecer um
     diálogo com os utilizadores
12



     Num diálogo real, existem alguns aspectos que fazem
     com que uma conversa seja um sucesso ou insucesso
    ...
Formulário...
14




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



     Testes de Usabilidade +
     Estudos etnográficos +
     Atenção no apoio ao cliente +
     Análise de trafego +...
16
17
A ter sempre em mente!
 Minimizar desconforto;
 Indicar o caminho para o sucesso;
 Ter em conta o contexto;
 Consistênc...
18




     Organização de
         formulários
19
Organizar um formulário
 Criar grupos lógicos para os vários campos;
 separar grupos visualmente;
 estruturar o formulá...
Organizar um
formulário
 Criar grupos lógicos para os
 vários campos;
 separar grupos visualmente;
 estruturar o formulári...
Organizar um
formulário

 cuidado com convenções (ex: *);
 considerar a partição do
 formulário por páginas/tabs.
22
Formulação de perguntas
 ao formular as questões ter sempre em conta os seguintes
 critérios:


  cortar
  manter
  adi...
23




     A caminho do sucesso!
Nomes


 Títulos dos formulários
 Introdução ao preenchimento/
 formulário
 Títulos dos grupos
 Nomes/Etiquetas dos campos
Página inicial

 Quando o processo é complexo e
 demorado e envolve um conjunto
 não trivial de passos/dados...
 ... é imp...
26




     Linhas Visuais
27




     Linhas Visuais
Minimizar
Distracções

 Se o processo é complexo e
 sujeito a múltiplos problemas, a
 ideia deve ser de minimizar as
 dist...
29




     Indicador de Progresso
Etiquetas
31
Posicionamento
 topo
 direita
 esquerda
 dentro dos campos
32
Posicionamento
 topo
 direita
 esquerda
 dentro dos campos
33
Posicionamento
 topo
 direita
 esquerda
 dentro dos campos
34
Posicionamento
 topo
 direita
 esquerda
 dentro dos campos
35
Posicionamento
 topo
 direita
 esquerda
 dentro dos campos
36
Regras para etiquetas
 serem sucintas, claras e consistentes em termos de escrita
 se o objectivo é:
  reduzir tempo de...
37




     Campos
38
Tipos de
Campos
Tamanho dos Campos
Campos
Obrigatórios vs
Opcionais
Evitar sempre que possível a utilização
de campos opcionais, e quando tal não
for possíve...
Desenho
estrutural de
Campos
É importante ter em conta aspectos
como a relação entre campos, o seu
agrupamento visual e fu...
42




     Campos Inteligentes
43




     Acções
44




     Acções Primárias vs
            Secundárias
45
Posição/
Formato
46
47
48
49
Formato
50
Progresso
51




     Ajuda
KIS
quanto menos texto
melhor...


ser conciso!
53




     Explicar
Inline
se necessário usar ‘inline
help’ nos pontos onde os
utilizadores pareçam ter
dúvidas ou incertezas de
preenchimento.
Validações
Inline
usar com cautela, de modo
a garantir consistência visual
e funcional.
Extras
Em caso de ser necessário
uma ‘ajuda’ mais longa/
complexa, criar uma página
específica de ajuda ao
preenchimento.
57




      Mensagens de
     Erro e Sucesso !
58
Mensagens
 As mensagens, quer sejam de erros, ou sucessos nunca
 são fáceis...
 nem de ler... nem de as escrever!
 São ...
59
1º passo...
 Inventariar todas as possíveis mensagens de um serviço,
 como e onde estas são usadas e a determinar a
 qu...
60
61
Tipos de Mensagens
conhecer os diferentes tipos de mensagens é adaptá-las
às necessidades dos utilizadores:


 erro

 s...
62
       Mensagens de ERRO!
 só devem surgir quando:
1. o utilizador introduziu algo que o sistema não consegue ‘digerir’...
63
Regras para mensagens
 Utilizar um layout uniforme para mensagens
 Oferecer mensagens de erro dentro do contexto onde e...
64
Regras para mensagens
 Quando existe mais do que um erro, usar uma mensagem
 genérica no topo do formulário com uma lis...
65
Regras para mensagens
 Revelar problemas o mais cedo possível e não somente no
 final de todo o formulário;
 Evitar pági...
66




     Envolvimento
      progressivo!
67




     Colocar as questões
                 certas !
68




     Um longo namoro...
69




     Perguntas?
Saber mais?
‘Web Form Design’ by
Luke Wroblewski (aka LukeW)

Desconto 15% - usar código ‘CUSTODIO’
http://www.rosenfeldme...
71
72




     Obrigado ;)
Upcoming SlideShare
Loading in...5
×

Forms Usability 101

3,508

Published on

Published in: Technology

Forms Usability 101

  1. 1. FORMS 101 Pedro Custódio CodeBits 2008 Lisboa, Portugal
  2. 2. Quem sou eu? :) Pedro Custódio http://blog.centopeia.com http://sapo.pt Responsável pela Qualidade e Usabilidade
  3. 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. 4. Formulários, hein?
  5. 5. 5 Os formulários são essenciais em quase tudo o que fazemos online: e-commerce comunidades etc.
  6. 6. ...no entanto quase todos funcionam como verdadeiras barreiras
  7. 7. 7 entre nós e o utilizador photo by http://flickr.com/photos/thetruthabout
  8. 8. 8 Desenhar Formulários
  9. 9. 9 Quem preenche formulários?
  10. 10. Todos odiamos formulários...
  11. 11. 11 É preciso estabelecer um diálogo com os utilizadores
  12. 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. 13. Formulário...
  14. 14. 14 mas então como garantir que obtemos um bom formulário?
  15. 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. 16
  17. 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. 18 Organização de formulários
  19. 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. 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. 21. Organizar um formulário cuidado com convenções (ex: *); considerar a partição do formulário por páginas/tabs.
  22. 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. 23 A caminho do sucesso!
  24. 24. Nomes Títulos dos formulários Introdução ao preenchimento/ formulário Títulos dos grupos Nomes/Etiquetas dos campos
  25. 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. 26 Linhas Visuais
  27. 27. 27 Linhas Visuais
  28. 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. 29 Indicador de Progresso
  30. 30. Etiquetas
  31. 31. 31 Posicionamento topo direita esquerda dentro dos campos
  32. 32. 32 Posicionamento topo direita esquerda dentro dos campos
  33. 33. 33 Posicionamento topo direita esquerda dentro dos campos
  34. 34. 34 Posicionamento topo direita esquerda dentro dos campos
  35. 35. 35 Posicionamento topo direita esquerda dentro dos campos
  36. 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. 37 Campos
  38. 38. 38 Tipos de Campos
  39. 39. Tamanho dos Campos
  40. 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. 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. 42 Campos Inteligentes
  43. 43. 43 Acções
  44. 44. 44 Acções Primárias vs Secundárias
  45. 45. 45 Posição/ Formato
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49 Formato
  50. 50. 50 Progresso
  51. 51. 51 Ajuda
  52. 52. KIS quanto menos texto melhor... ser conciso!
  53. 53. 53 Explicar
  54. 54. Inline se necessário usar ‘inline help’ nos pontos onde os utilizadores pareçam ter dúvidas ou incertezas de preenchimento.
  55. 55. Validações Inline usar com cautela, de modo a garantir consistência visual e funcional.
  56. 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. 57 Mensagens de Erro e Sucesso !
  58. 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. 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. 60
  61. 61. 61 Tipos de Mensagens conhecer os diferentes tipos de mensagens é adaptá-las às necessidades dos utilizadores: erro sucesso marketing educacionais ...
  62. 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. 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. 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. 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. 66 Envolvimento progressivo!
  67. 67. 67 Colocar as questões certas !
  68. 68. 68 Um longo namoro...
  69. 69. 69 Perguntas?
  70. 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. 71
  72. 72. 72 Obrigado ;)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×