recomendaçõespara o design dequestionários webEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e im...
O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de I...
questionários webÉ raro um aplicativo ou página da webque não faz uso de questionários para aentrada de dados.Mas, nem tod...
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>“ Elementos de ent...
questionários webVariações no alinhamento de campos deentrada, seus respectivos rótulos, osbotões de ação, etc. podem prej...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
recomendações para o design de questionários web:     rótulos verticais
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
recomendações para o design de questionários web:  rótulos horizontais
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
recomendações para o design de questionários web:   rótulos em negrito
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
recomendações para o design de questionários web:    rótulos alinhados      pela esquerda
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
recomendações para o design de questionários web:    rótulos alinhados       pela direita
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
recomendações para o design de questionários web:          alinhamento          dos rótulos
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-pa...
recomendações para o design de questionários web:       cores de fundo          e linhas
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
recomendações para o design de questionários web:                  ajuda
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms, Part 2" - <http://www.smashingmagazine.com/2008/07/08/web-form-d...
* Fonte: artigo "Web Form Design Patterns: Sign-Up Forms, Part 2" - <http://www.smashingmagazine.com/2008/07/08/web-form-d...
recomendações para o design de questionários web:      botões de ação
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
* Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>                  ...
recomendações para o design de questionários webNome:                           Nome:E-mail:                         E-mai...
recomendações para o design de questionários web:       “cancelar - ok”
“cancelar - ok”A opção “cancelar - ok” auxilia o fluxo denavegação, pois o “ok” funciona como aconclusão da caixa de diálo...
recomendações para o design de questionários web:       “ok - cancelar”
“ok - cancelar”A opção “ok - cancelar” está de acordocom a ordem natural de leitura.Além disso, essa opção está padronizad...
“ok - cancelar”Os usuários também precisam utilizar obotão “ok” com muito mais freqüênciaque o botão “cancelar”.Por isso, ...
“ok - cancelar”Usuários que navegam pelo tecladotambém são beneficiados através daopção “ok - cancelar”, por utilizaremmen...
recomendações para o design de questionários web:       “ok - cancelar”              ou       “cancelar - ok”
* Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html>                   recomendações...
“ok - cancelar” ou “cancelar - ok”•  A Windows utiliza “ok - cancelar”.•  O MacOs (Apple) utiliza “cancelar - ok”.Ao proje...
“ok - cancelar” ou “cancelar - ok”No caso da web a decisão é mais difícil.Recomenda-se utilizar o sistemaoperacional adota...
* Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html>                   recomendações...
“ok - cancelar” ou “cancelar - ok”Uma análise de 100 sites revelou que:•  56% utilizam a opção “ok - cancelar”.•  26% util...
recomendações para o design de questionários web:        nomenclatura          do botão
nomenclatura do botãoAo invés de uma nomenclatura genérica,como “ok”, é melhor utilizar um rótuloque explique a função do ...
* Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html>                   recomendações...
* Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html>                   recomendações...
recomendações para o design de questionários web:      elimine o botão         “cancelar”
elimine o botão “cancelar”Apresentar 2 botões na interface, tornamais difícil a visualização de qual é opróximo passo a se...
* Fonte: artigo "Reset and Cancel Buttons" - <http://www.useit.com/alertbox/20000416.html>                    recomendaçõe...
recomendações para o design de questionários web:      elimine o botão          “limpar”
elimine o botão “limpar”Raramente um questionário éapresentado para o usuário de formapreenchida.Mesmo quando isso acontec...
recomendações para o design de questionários web:        radio-buttons
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
recomendações para o design de questionários web:         check-boxes
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
recomendações para o design de questionários web                      #fail
recomendações para o design de questionários web                                                   #fail 1                ...
recomendações para o design de questionários web                                                   #fail 2                ...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
recomendações para o design de questionários web:        radio-buttons              e        check-boxes
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
* Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html>                    recomend...
recomendações para o design de questionários web:         referências        bibliográficas
referências bibliográficas:    artigos
referências bibliográficas: artigos•  Web Form Design Patterns: Sign-Up Forms•  Smashing Magazine•  http://www.smashingmag...
referências bibliográficas: artigos•  Checkboxes vs. Radio Buttons•  Jakob Nielsen•  http://www.useit.com/alertbox/2004092...
recomendações para o design de questionários web:   sobre o professor
sobre o professor       Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da       equipe d...
fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com
Próximos SlideShares
Carregando em…5
×

Recomendações para o design de questionários web

2.198 visualizações

Publicada em

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/recomendacoes-para-o-design-de-questionarios-web/

Publicada em: Educação
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.198
No SlideShare
0
A partir de incorporações
0
Número de incorporações
291
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Recomendações para o design de questionários web

  1. 1. recomendaçõespara o design dequestionários webEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  2. 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  3. 3. questionários webÉ raro um aplicativo ou página da webque não faz uso de questionários para aentrada de dados.Mas, nem todas essas aplicações epáginas utilizam os questionários deforma consistente.
  4. 4. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html>“ Elementos de entrada de dados devem ser organizados em grupos lógicos, para que o cérebro possa processar o layout do questionário em blocos de áreas afins. ”
  5. 5. questionários webVariações no alinhamento de campos deentrada, seus respectivos rótulos, osbotões de ação, etc. podem prejudicar aconclusão da(s) tarefa(s) do usuário.Por conta disso, apresenta-se a seguiralgumas recomendações para o designde questionários web.
  6. 6. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Questionários curtos são melhores. Certamente, proporcionam dados mais confiáveis do que questionários extensos - que poucas pessoas terminam de preencher (se, por acaso, começarem). Desde que o usuário decida preencher um questionário, o processo para completar essa tarefa deve ser óbvio e o mais simples possível. É por esse motivo que muitos designers projetam questionários com layout minimalista.
  7. 7. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web No questionário de cadastro do Yahoo!, por exemplo, o usuário fornece apenas os dados para criar uma conta, nada mais. Consequentemente, não há distrações. Além disso, a linguagem é apresentada em forma de conversa, dando um tom amigável.
  8. 8. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Em uma análise de 100 sites que utilizam questionários de cadastro, 93% destes questionários são de apenas uma página. Aparentemente, os designers projetaram tais questionários com a intenção de ajudar seus usuários a fazerem seus cadastros de forma mais simples e rápida possível. Mesmo assim, alguns sites, como o Meebo, por exemplo, usam questionários com mais de uma página, combinando o processo de cadastro com uma tentativa de explorar as preferências dos seus usuários.
  9. 9. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web O site Flixter é um exemplo de questionário repleto de informações adicionais que não estão de acordo com as necessidades dos seus usuários. A página de cadastro oferece várias possibilidades de navegação de uma só vez. Este tipo de abordagem não é amigável e só confunde o usuário.
  10. 10. recomendações para o design de questionários web: rótulos verticais
  11. 11. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Rótulo Rótulo maior Rótulos verticais Rótulo maior ainda Recomenda-se utilizar o Mais um rótulo alinhamento vertical dos rótulos e dos campos de um questionário: Ação principal •  Quando é preciso minimizar o Vantagem: O rótulo e o seu campo correspondente estão dispostos de forma adjacente •  tempo para completar um Rótulo •  questionário. Vantagem: Processamento Rótulo maior rápido Desvantagem: •  Quando a informação a ser Rótulo maior ainda Aumento do espaço vertical •  coletada é familiar para o Mais um rótulo •  usuário (por exemplo, informar •  o nome, endereço, etc.). Ação principal
  12. 12. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Rótulo Rótulo maior Rótulos verticais Rótulo maior ainda Cada rótulo está agrupado com Mais um rótulo cada campo através de uma proximidade vertical. Ação principal A consistência deste Vantagem: alinhamento reduz o movimento O rótulo e o seu campo correspondente estão dispostos de forma adjacente dos olhos e o tempo de Rótulo Vantagem: processamento da informação. Processamento Rótulo maior rápido Rótulo maior ainda Desvantagem: Aumento do espaço vertical Os usuários só precisam se mover em uma direção: para Mais um rótulo baixo. Ação principal
  13. 13. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Rótulos verticais O site Box.net, por exemplo, oferece um formulário de cadastro muito simples, com os campos diagramados de maneira vertical. Quando o usuário insere a informação em cada campo, seus olhos se mantém fixos através do eixo vertical no lado esquerdo de cada campo.
  14. 14. recomendações para o design de questionários web: rótulos horizontais
  15. 15. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Rótulos horizontais O site Mint possui um formulário de cadastro com os campos diagramados de forma horizontal. Quando o usuário insere um novo dado, seus olhos precisam pular de um campo para outro (aumentando o tempo de processamento da informação).
  16. 16. recomendações para o design de questionários web: rótulos em negrito
  17. 17. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Rótulo Rótulo maior Rótulo maior ainda Mais um rótulo Rótulos em negrito Ação principal Recomenda-se o uso de fontes em negrito para os rótulos de cada campo do questionário. Isso aumenta o seu peso visual, destacando cada rótulo. Rótulo Rótulo maior Quando os rótulos são utilizados em fonte regular, Rótulo maior ainda eles competem com os campos do questionário Mais um rótulo pela atenção do usuário (pelo fato de possuírem quase o mesmo peso visual). Ação principal
  18. 18. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Rótulo Rótulo maior Rótulo maior ainda Mais um rótulo Rótulos em negrito Ação principal Numa análise de 100 sites que utilizam questionários de cadastro, foi constatado que 62% destes sites utilizam fontes em negrito para destacar o rótulo associado a cada campo. Para tornar os rótulos mais visíveis, 20% destes Rótulo sites também utilizam cores além do texto em Rótulo maior negrito. Rótulo maior ainda É importante frisar que nenhum destes 100 sites Mais um rótulo usou o recurso da fonte em itálico para dar ênfase ao rótulo. Ação principal
  19. 19. recomendações para o design de questionários web: rótulos alinhados pela esquerda
  20. 20. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Rótulos alinhados pela esquerda Rótulo Rótulo maior Quando a informação a ser Rótulo maior ainda coletada não é familiar para o Mais um rótulo usuário, ou é difícil de ser organizada em grupos (como as Ação principal várias partes de um endereço), rótulos alinhados do lado Desvantagem: esquerdo dos campos do O rótulo e o seu campo correspondente não estão dispostos de forma adjacente Rótulo questionário são mais fáceis de Vantagem: Rótulos Rótulo maior Vantagem: serem lidos. fáceis de Diminuição do visualizar Rótulo maior ainda espaço vertical Mais um rótulo O usuário pode ler somente a coluna esquerda com os rótulos, Ação principal sem ser interrompido pelos campos correspondentes para inserir seus dados.
  21. 21. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Rótulos alinhados pela esquerda Rótulo Rótulo maior Entretanto, a distância entre os Rótulo maior ainda rótulos e os campos fica maior Mais um rótulo na medida que rótulos mais longos são utilizados. Ação principal Como resultado, o tempo para Desvantagem: O rótulo e o seu campo correspondente não estão dispostos de forma adjacente completar o questionário pode Vantagem: Rótulo aumentar, pois o usuário, antes Vantagem: Rótulos fáceis de Rótulo maior Diminuição do de inserir seus dados, irá Rótulo maior ainda espaço vertical visualizar precisar pular de coluna em Mais um rótulo coluna para achar a associação correta entre cada rótulo e cada Ação principal campo.
  22. 22. recomendações para o design de questionários web: rótulos alinhados pela direita
  23. 23. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Rótulos alinhados pela direita Uma solução alternativa se dá através do alinhamento dos Rótulo rótulos pela direita. Rótulo maior Rótulo maior ainda Desta forma, a associação entre Mais um rótulo cada rótulo com cada campo é mais clara. Ação principal No entanto, esta diagramação Vantagem: O rótulo e o seu campo correspondente estão dispostos de forma adjacente reduz a eficiência de uma leitura Rótulo rápida para verificar que tipo de Vantagem: Desvantagem: Aumento do tempo Rótulo maior Diminuição do informação o questionário espaço vertical de leitura Rótulo maior ainda solicita (já que a margem Mais um rótulo esquerda apresenta-se de forma irregular - nossos olhos Ação principal necessitam de uma margem regular ao longo do lado esquerdo do texto).
  24. 24. recomendações para o design de questionários web: alinhamento dos rótulos
  25. 25. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Alinhamento dos rótulos Numa análise de 100 sites que utilizam questionários de cadastro, não foi possível identificar uma tendência quanto ao alinhamento dos rótulos em relação aos campos dos questionários.
  26. 26. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms" - <http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/> recomendações para o design de questionários web Alinhamento dos rótulos •  Rótulos alinhados pela direita •  são utilizados em 41% do sites •  (por exemplo: YouTube, •  Facebook e Metacafe). •  Rótulos alinhados pelo topo são •  utilizados 30% dos sites (por •  exemplo: Behance.net, Wufoo, •  Tickspot, Mixx e DZone). •  Rótulos alinhados pela esquerda •  são utilizados em 29% dos sites •  (por exemplo: Digg, Ning, •  Wykop.pl, 43things e StudiVZ).
  27. 27. recomendações para o design de questionários web: cores de fundo e linhas
  28. 28. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários webCores de fundo e linhas horizontais / verticais Rótulo Rótulo maior Rótulo maior ainda Mais um rótulo Cores de fundo e linhasElementos visuais adicionais Ao utilizar cores de fundo Rótulo diferentes para distinguir rótulos Rótulo maior e campos, é possível criar uma Rótulo maior ainda unidade vertical de rótulos e Mais um rótulo uma unidade vertical de campos. Além disso, uma linha horizontalLeitura prejudicada cria uma relação entre cada Rótulo rótulo e seu respectivo campo. Rótulo maior Rótulo maior ainda Mais um rótulo
  29. 29. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários webCores de fundo e linhas horizontais / verticais Rótulo Cores de fundo e linhas Rótulo maior Rótulo maior ainda No entanto, este tipo de solução Mais um rótulo causa problemas. De acordo com a gestaltElementos visuais adicionais (percepção visual), essa solução Rótulo introduz 15 elementos adicionais Rótulo maior ao layout do questionário: cada Rótulo maior ainda Mais um rótulo box com cor de fundo, cada linha vertical e cada linha horizontal.Leitura prejudicada Estes elementos distraem os Rótulo olhos do usuário, tornando mais Rótulo maior Rótulo maior ainda difícil focalizar o que é mais Mais um rótulo importante: os rótulos e os campos.
  30. 30. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Cores de fundo e linhas Apesar dos problemas descritos anteriormente, isso não significa que cores de fundo nuncaConteúdo relacionado separado e agrupado devem ser utilizadas no layout Rótulo de questionários. Rótulo maior Rótulo maior ainda Quando há a necessidade de Mais um rótulo apresentar informações agrupadas para os usuários, uma linha horizontal bem fina ou Rótulo um fundo bem claro podem Rótulo maior Rótulo maior ainda servir como solução para unir, visualmente, informações relacionadas. Ação principal Estes 2 elementos (linha ou cor de fundo), inclusive, podem ser especialmente úteis para chamar a atenção para as áreas de ação do questionário.
  31. 31. recomendações para o design de questionários web: ajuda
  32. 32. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms, Part 2" - <http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/> recomendações para o design de questionários web Ajuda Ao providenciar algum tipo de ajuda, é necessário ter certeza que esta ajuda será facilmente encontrada e compreendida pelos usuários do questionário (este usuário não pode cometer erros quando associar a ajuda ao campo correspondente do questionário). Numa análise de 100 sites que utilizam questionários, observou- se que 57% dos sites promovem ajuda estática. Apenas 10% dos sites apresentam uma ajuda através da ação de mouse-over em um ícone, ou quando o usuário está inserindo uma informação no campo.
  33. 33. * Fonte: artigo "Web Form Design Patterns: Sign-Up Forms, Part 2" - <http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/> recomendações para o design de questionários web Ajuda Sobre o posicionamento do recurso de ajuda: •  Abaixo do campo (57%). •  No lado direito do campo (26%). •  Acima do campo (13%). •  No lado esquerdo do campo •  (4%). Na maioria dos casos, o recurso de ajuda é apresentado em cores diferentes, geralmente, mais claras que a cor do texto do conteúdo principal.
  34. 34. recomendações para o design de questionários web: botões de ação
  35. 35. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Botões de ação A ação principal associada a um questionário (geralmente, o botão “enviar”) necessita de um peso visual muito forte emAções primárias e secundárias relação aos demais elementos Ação principal Ação secundária do questionário (no exemplo ao lado, os recursos para criar esse peso são: cor brilhante, fonte em Ação principal Ação secundária negrito e cor de fundo). Além disso, a ação principal Ação principal Ação secundária deve ser apresentada verticalmente alinhada com os demais campos do questionário. Isso cria uma sensação de caminho para os usuários, guiando-os para a ação de completar a tarefa (inserir os dados e enviá-los).
  36. 36. * Fonte: artigo "Web Application Form Design" - <http://www.lukew.com/resources/articles/web_forms.html> recomendações para o design de questionários web Botões de açãoAções primárias e secundárias Ação principal Ação secundária Desvantagem: Probabilidade de Quando um questionário possui erros ações múltiplas, como “Continuar” e “Voltar”, é Vantagem: Ação principal Ação secundária Ação principal recomendável diminuir o peso claramente identificada visual da ação secundária. Ação principal Ação secundária Isso minimiza os riscos de erros, além de direcionar o usuário para o final da tarefa.
  37. 37. recomendações para o design de questionários webNome: Nome:E-mail: E-mail: Botões de açãoAssunto: Assunto: Logo, em interfaces com 2Mensagem: Mensagem: botões, como “ok- cancelar”, por exemplo, o botão correspondente à ação principal deve ser destacado. ok cancelar cancelar ok Situação 1: “ok - cancelar” Situação 2: “cancelar - ok”
  38. 38. recomendações para o design de questionários web: “cancelar - ok”
  39. 39. “cancelar - ok”A opção “cancelar - ok” auxilia o fluxo denavegação, pois o “ok” funciona como aconclusão da caixa de diálogo (indica opróximo passo para o usuário).Como nos botões “anterior - próximo”, o“ok” faz com que o usuário se movimentepara a frente, enquanto o “cancelar” fazcom que o usuário se movimente paratrás.
  40. 40. recomendações para o design de questionários web: “ok - cancelar”
  41. 41. “ok - cancelar”A opção “ok - cancelar” está de acordocom a ordem natural de leitura.Além disso, essa opção está padronizadaem relação a outros botões que possuemuma ordem lógica de leitura, como:•  “sim - não”
  42. 42. “ok - cancelar”Os usuários também precisam utilizar obotão “ok” com muito mais freqüênciaque o botão “cancelar”.Por isso, colocar o “ok” como 1ª opçãopode ser mais vantajoso para o usuário.
  43. 43. “ok - cancelar”Usuários que navegam pelo tecladotambém são beneficiados através daopção “ok - cancelar”, por utilizaremmenos teclas para concluir uma ação.
  44. 44. recomendações para o design de questionários web: “ok - cancelar” ou “cancelar - ok”
  45. 45. * Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html> recomendações para o design de questionários web “ok - cancelar” ou “cancelar - ok” ? Nome: Nome: E-mail: E-mail: Assunto: Assunto: Mensagem: Mensagem: ok cancelar cancelar ok Situação 1: “ok - cancelar” Situação 2: “cancelar - ok”
  46. 46. “ok - cancelar” ou “cancelar - ok”•  A Windows utiliza “ok - cancelar”.•  O MacOs (Apple) utiliza “cancelar - ok”.Ao projetar uma interface para 1 destes 2sistemas operacionais, a decisão é fácil!Basta seguir o padrão do sistema.
  47. 47. “ok - cancelar” ou “cancelar - ok”No caso da web a decisão é mais difícil.Recomenda-se utilizar o sistemaoperacional adotado pela maioria dosusuários.Como o Windows tem mais usuários queo Macintosh, a melhor opção é“ok - cancelar”.
  48. 48. * Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html> recomendações para o design de questionários web “ok - cancelar” ou “cancelar - ok” ? Exemplo dos botões “salvar - cancelar” utilizados no Office 2007.
  49. 49. “ok - cancelar” ou “cancelar - ok”Uma análise de 100 sites revelou que:•  56% utilizam a opção “ok - cancelar”.•  26% utilizam apenas o botão “ok”•  alinhado pelo centro.•  17% utilizam a opção “cancelar - ok”.
  50. 50. recomendações para o design de questionários web: nomenclatura do botão
  51. 51. nomenclatura do botãoAo invés de uma nomenclatura genérica,como “ok”, é melhor utilizar um rótuloque explique a função do botão.Uma nomenclatura clara e explícita servecomo uma ajuda, dando aos usuáriosmais confiança na escolha da açãocorreta.
  52. 52. * Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html> recomendações para o design de questionários web Nome: Nome: E-mail: E-mail: Assunto: Assunto: Mensagem: Mensagem: Enviar Enviar Situação 1 Situação 2 Pergunta da enquete? Pergunta da enquete? Resposta 1 da enquete Resposta 1 da enquete Resposta 2 da enquete Resposta 2 da enquete Resposta 3 da enquete Resposta 3 da enquete Resposta 4 da enquete Resposta 4 da enquete Votar Votar Situação 3 Situação 4
  53. 53. * Fonte: artigo "OK–Cancel or Cancel–OK?" - <http://www.useit.com/alertbox/ok-cancel.html> recomendações para o design de questionários web Chat Chat Escolha uma sala Escolha uma sala Entrar Entrar no chat Situação 5 Situação 6 Buscar OK Buscar Situação 7 Situação 8
  54. 54. recomendações para o design de questionários web: elimine o botão “cancelar”
  55. 55. elimine o botão “cancelar”Apresentar 2 botões na interface, tornamais difícil a visualização de qual é opróximo passo a ser realizado.•  Alguns usuários podem demorar para•  decidir qual dos 2 botões é o correto.•  Ou podem selecionar o botão por•  engano (como o “cancelar” ao invés do•  “ok”).
  56. 56. * Fonte: artigo "Reset and Cancel Buttons" - <http://www.useit.com/alertbox/20000416.html> recomendações para o design de questionários web Elimine o botão “cancelar” Nome: Nome: E-mail: E-mail: Assunto: Assunto: Mensagem: Mensagem: ok cancelar cancelar ok Situação 1: “ok - cancelar” Situação 2: “cancelar - ok”
  57. 57. recomendações para o design de questionários web: elimine o botão “limpar”
  58. 58. elimine o botão “limpar”Raramente um questionário éapresentado para o usuário de formapreenchida.Mesmo quando isso acontece, como emuma atualização de cadastro, porexemplo, é mais rápido editar os dadosantigos do que apagar os campos epreencher tudo novamente.
  59. 59. recomendações para o design de questionários web: radio-buttons
  60. 60. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Radio-buttons Radio-buttons são usados quando há uma lista de opções mutuamente excludentes: o usuário deve selecionar apenas 1 opção. Recomenda-se utilizar uma lista vertical, com apenas 1 opção por linha.
  61. 61. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Radio-buttons Um layout horizontal, com várias opções por linha, torna mais difícil a visualização do radion-button correto. No exemplo ao lado, qual é o radio-button correspondente à opção “Four”?
  62. 62. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Radio-buttons É melhor utilizar radio-buttons ao invés de menus drop-down, pois eles deixam todas as opções visíveis para os usuários. Os radio-buttons também são mais fáceis para os usuários que têm dificuldades para fazer movimentos precisos com o mouse.
  63. 63. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Radio-buttons Os radio-buttons sempre devem oferecer 1 opção default. Além disso, também devem oferecer uma opção neutra. Muitos questionários não têm a opção “nenhum”, impedindo o usuário, após escolher 1 das opções, de se arrepender e voltar atrás.
  64. 64. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Radio-buttons Os radio-buttons devem permitir que os usuários selecionem a opção desejada através do clique na nomenclatura/rótulo do botão: uma área maior é mais fácil de clicar e zonas de clique generosos reduzem as possibilidades de erro do usuário.
  65. 65. recomendações para o design de questionários web: check-boxes
  66. 66. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Check-boxes Check-boxes são utilizados quando há uma lista de opções e o usuário pode selecionar qualquer uma dessas opções: zero, uma ou várias ao mesmo tempo.
  67. 67. recomendações para o design de questionários web #fail
  68. 68. recomendações para o design de questionários web #fail 1 #fail
  69. 69. recomendações para o design de questionários web #fail 2 #fail
  70. 70. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Check-boxes Para as nomenclaturas/rótulos dos check-boxes, recomenda- se utilizar palavras/frases formuladas em tom positivo e na voz ativa, deixando claro para o usuário o que irá acontecer caso ele selecione uma determinada opção. Deve-se evitar palavras/frases formuladas em tom negativo, como “não me mande e- mails”. Isso obriga o usuário a selecionar o check-box para evitar situações indesejadas.
  71. 71. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Mantenha-se informado! Receba atualizações sobre os nossos produtos em destaque, soluções, serviços e oportunidades educacionais. Permita que a Acme Corp. forneça informações sobre suas ofertas. Check-boxes Nós podemos enviar nossa newsletter? No exemplo ao lado, o layout dá a q  Sim, por favor use sua newsletter para me impressão que os 2 check-boxes q  enviar informações sobre suas ofertas abordam temas distintos. Se você preferir, nós não vamos usar as Mas, na verdade, são opções informações que você forneceu para fazer alternativas para um único tópico. contato. q  Por favor, não use as minhas informações q  de contato para enviar newsletter sobre as q  suas ofertas.
  72. 72. recomendações para o design de questionários web: radio-buttons e check-boxes
  73. 73. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Radio-buttons e check-boxes Recomenda-se definir teclas de acesso tanto para os radio- buttons quanto para os check- boxes. Isso permite que os usuários selecionem rapidamente, a partir do teclado, suas opções preferidas, aumentando a acessibilidade para os deficientes e otimizando a navegação para os usuários experientes. No exemplo ao lado, as teclas Alt+5 poderiam ser utilizadas para selecionar a opção “Five”.
  74. 74. * Fonte: artigo "Checkboxes vs. Radio Buttons" - <http://www.useit.com/alertbox/20040927.html> recomendações para o design de questionários web Check-boxes e radio- buttons Os radio-buttons e os check- boxes devem ser utilizados apenas para alterar configurações, nunca como botões de ação. Além disso, as configurações não devem ser alteradas antes do usuário selecionar um botão de ação (como “ok”, por exemplo, onde esse botão “ok” representa o próximo passo em um fluxo).
  75. 75. recomendações para o design de questionários web: referências bibliográficas
  76. 76. referências bibliográficas: artigos
  77. 77. referências bibliográficas: artigos•  Web Form Design Patterns: Sign-Up Forms•  Smashing Magazine•  http://www.smashingmagazine.com/2008/07/04/web-form-design-•  patterns-sign-up-forms/•  Web Form Design Patterns: Sign-Up Forms, Part 2•  Smashing Magazine•  http://www.smashingmagazine.com/2008/07/08/web-form-design-•  patterns-sign-up-forms-part-2/•  Web Application Form Design•  Luke Wroblewski•  http://www.lukew.com/resources/articles/web_forms.html•  OK-Cancel or Cancel-OK?•  Jakob Nielsen•  http://www.useit.com/alertbox/ok-cancel.html
  78. 78. referências bibliográficas: artigos•  Checkboxes vs. Radio Buttons•  Jakob Nielsen•  http://www.useit.com/alertbox/20040927.html•  Reset and Cancel Buttons•  Jakob Nielsen•  http://www.useit.com/alertbox/20000416.html
  79. 79. recomendações para o design de questionários web: sobre o professor
  80. 80. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  81. 81. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×