SAPO QA Sessions #1

  • Published on
    05-Aug-2015

  • View
    416

  • Download
    6

Transcript

1. QA Guidelines de Qualidade e Usabilidade para Designers e Developers 2. Sesso #1 - Captulos: 1. Planeamento 2. User Experience 3. Acessibilidade 4. Software 5. Homepages 6. Pginas Interiores 3. 1. Planeamento 4. Fornecer Contedos teis 5. PlaneamentoQA Fornecer Contedos teis Contedos so o elemento mais importante do website; Se os contedos no forem teis, no interessa que o site seja acessvel, usvel ou bonito esteticamente; 6. Planeamento QA Fornecer Contedos teis Se o utilizador no encontrar o contedo que pretende, vai procur-lo em outro site concorrente; Ttulos devem ser descritivos e facilmente perceptveis; 7. Considerar primeiro a interaco,depois o aspecto grfico 8. PlaneamentoQA Considerar primeiro a interaco, depois o aspecto grfico Planificar inicialmente as pginas necessrias, respectivas funes e objectivos de cada uma; Decidir primeiro sobre como o utilizador vai usar o website; 9. PlaneamentoQA Considerar primeiro a interaco, depois o aspecto grficoCard SortingPermite definir a Arquitecturade Informao da navegao 10. PlaneamentoQA Considerar primeiro a interaco, depois o aspecto grficoPrototipagemDefinir os elementos do interfaceantes de comear o desenvolvimento 11. PlaneamentoQA Considerar primeiro a interaco, depois o aspecto grficoWireframes Primeiros esqueletos do website 12. Planeamento QA Considerar primeiro a interaco, depois o aspecto grfico O aspecto grfico deve acompanhar os contedos e no devem ser os contedos a adaptar-se ao design; Como testar? CTRL+ /+Design no se adapta aoscontedos. 13. Demonstrao 14. Planeamento QA Considerar primeiro a interaco, depois o aspecto grficohttp://simplebits.com/ publications/bulletproof/ 15. Considerar vrios casos de estudo 16. PlaneamentoQA Considerar vrios casos de estudo Contexto em que os utilizadores visitam o website; Nvel de experincia; Tarefas que o utilizador vai realizar no website; 17. Planeamento QA Considerar vrios casos de estudo Utilizadores diferentes tero um comportamento diferente no site / iro procurar informao diferente; 18. 2. User Experience 19. Evitar o uso de popups ou grficos no solicitados 20. User Experience QA Evitar o uso de popups ou grficos no solicitados Janelas ou grficos que aparecem sem solicitao do utilizador so irritantes e distractivos; Retira a ateno das tarefas que os utilizadores esto a realizar; 21. User Experience QA Evitar o uso de popups ou grficos no solicitados Janelas ou grficos que aparecem sem solicitao do utilizador so irritantes e distractivos; Retira a ateno das tarefas que os utilizadores esto a realizar; 22. User ExperienceQA Evitar o uso de popups ou grficos no solicitados Caso seja estritamente necessrio abrir uma janela popup, o utilizador deve ser avisado previamente; Em vez de abrir novas janelas do browser, prefervel abrir janelas modais; 23. User ExperienceQA Evitar o uso de popups ou grficos no solicitados 24. Standardizar aces 25. User Experience QA Standardizar aces Tarefas a realizar no website devem ser consistentes com a forma como tipicamente so executadas; Utilizadores podem repetir as mesmas aces sem ter que pensar em como as executar; 26. User ExperienceQA Standardizar aces Os cones devem representar sempre a mesma aco e no devem ser reaproveitados para outras aces.CancelarCancelar ApagarApagar 27. No forar os utilizadores a teremque se lembrar da informao 28. User Experience QA No forar os utilizadores a terem que se lembrar da informao No forar o utilizador a lembrar-se de informao que inseriu anteriormenteNo segundo passo o utilizadorno tem informao sobre osdados que j preencheu 29. User Experience QA No forar os utilizadores a terem que se lembrar da informao Mostrar ao utilizador a sua localizao actual Breadcrumbs (no caso de haver mais do que 2 nveis de navegao) 30. User Experience QA No forar os utilizadores a terem que se lembrar da informao No pedir novamente dados que o utilizador j preencheu anteriormente 31. Carregamento das pginas deve ser o mais rpido possvel 32. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Tempos de carregamento lentos so das coisas que mais irrita os utilizadores; Evitar uso de grficos e scripts demasiado pesados; Elementos decorativos devem estar todos num ficheiro CSS parte; 33. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Cdigo JavaScript deve tambm estar num ficheiro parte; Usar CSS Sprites para combinar vrias imagens numa s; 34. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel CSS Sprite da homepage do SAPO 1 imagem = 20 Kb1 imagem = 1 pedido ao servidorVs.30 imagens = 30x1Kb = 30Kb30 imagens = 30 pedidos ao servidor 35. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel .sprite { background-image: url(mySprite.png); } 36. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel .sprite { background-image: url(mySprite.png); background-position: -196px -2px; width: 115px; height: 128px; } 37. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel http://www.alistapart.com/articles/sprites/ (Tutorial) http://www.csssprites.com/ (Sprite Generator) 38. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip. 39. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip. http://developer.yahoo.com/yui/compressor/ http://dean.edwards.name/packer/ 40. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Ferramentas Web Developer Toolbar (Firefox) https://addons.mozilla.org/firefox/addon/60 41. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Ferramentas Firebug (Firefox) http://getfirebug.com/ 42. User ExperienceQA Carregamento das pginas deve ser o mais rpido possvel Ferramentas YSlow (extenso do Firebug) http://developer.yahoo.com/yslow/ 43. Formatar contedos para leitura eimpresso 44. User ExperienceQA Formatar contedos para leitura e impresso Preparar os contedos para serem lidos no ecr e para serem lidos em papel; De preferncia usar um CSS especfico para impresso: 45. User ExperienceQA Formatar contedos para leitura e impresso media=screen media=print 46. Dar feedback sobre as aces doutilizador 47. User ExperienceQA Dar feedback sobre as aces do utilizador O utilizador deve receber feedback imediato sobre as aces que executar; 48. User Experience QA Dar feedback sobre as aces do utilizador Formas de fornecer feedback aos utilizadores: Ao passar sobre um link a:hover { ... } Aps clicar num link a:active { ... } Ao navegar com o teclado a:focus { ... } 49. Demonstrao 50. User Experience QA Dar feedback sobre as aces do utilizador Formas de fornecer feedback aos utilizadores: Ao preencher os campos dos formulrios input[type=text]:focus, textarea:focus { ... } Ao seguir um link com ncora (links na mesma pgina) #elemento:target { ... } Quando a aco demora a ser processada, fornecer uma barra de progresso ou outro indicador visual; 51. Demonstrao 52. Informar quando os links apontam para ficheiros grandes 53. User Experience QA Informar quando os links apontam para ficheiros grandes Links para ficheiros externos devem informar o utilizador sobre a extenso/tipo de ficheiro e o tamanho do mesmo:Tabela de Preos (PDF 564 Kb) 54. 3. Acessibilidade 55. Atribuir labels a cada elemento dosformulrios 56. Acessibilidade QA Atribuir labels a cada elemento dos formulrios Todos os elementos (campos) dos formulrios devem ter uma label associada; O uso de labels permite aumentar a rea clicvel dos elementos, incluindo a sua legenda; 57. AcessibilidadeQA Atribuir labels a cada elemento dos formulrios

Nome:

Zona Clicvel 58. Acessibilidade QA Atribuir labels a cada elemento dos formulrios Pode ser dado um feedback adicional quando o utilizador passa com o rato por cima do texto da labellabel:hover {cursor: pointer; } 59. Demonstrao 60. AcessibilidadeQA Atribuir labels a cada elemento dos formulrios Podem tambm acontecer casos em que os campos no tm ou no podem ter legenda; Nesses casos, o campo em si dever ter o atributo title definido. 61. AcessibilidadeQA Atribuir labels a cada elemento dos formulrios Hora/Min 62. No confiar apenas na cor parafornecer informao 63. Acessibilidade QA No confiar apenas na cor para fornecer informao Assegurar que todas as informaes fornecidas atravs de um cdigo de cores possam ser visualizadas sem o uso da cor; Nunca usar a cor como nico meio de indicar actividades crticas; 64. AcessibilidadeQA No confiar apenas na cor para fornecer informao 8% da populao masculina e 0,5% da populao feminina tm problemas de daltonismo; A maior parte das dificuldades ocorre na visualizao do espectro verde. 65. Acessibilidade QA No confiar apenas na cor para fornecer informao Recomendaes: Assegurar que existe um contraste suficiente entre o texto e o fundo; Acompanhar as mensagens mais crticas com iconografia; Escolher combinaes de cores que consigam ser distinguveis por todas as pessoas, incluindo daltnicos; 66. Acessibilidade QA No confiar apenas na cor para fornecer informao Ferramentas: Verificao do contraste entre 2 cores: http://webaim.org/resources/contrastchecker/ 67. Acessibilidade QA No confiar apenas na cor para fornecer informao Ferramentas: Simulao dos vrios tipos de daltonismo: http://colororacle.cartography.ch 68. Demonstrao 69. Acessibilidade QA No confiar apenas na cor para fornecer informao Viso Normal69 70. Acessibilidade QA No confiar apenas na cor para fornecer informao Deuteranopia (vermelho): afecta 5% das pessoas do sexo masculino70 71. AcessibilidadeQA No confiar apenas na cor para fornecer informao Protanopia (verde): afecta 2,5% das pessoas do sexo masculino 71 72. Acessibilidade QA No confiar apenas na cor para fornecer informao Tritanopia (azul): afecta 0,5% das pessoas do sexo masculino72 73. Fornecer atalhos para saltar linksrepetitivos 74. Acessibilidade QA Fornecer atalhos para saltar links repetitivos Blocos de links que se repetem em todas as pginas devem fornecer uma forma de saltar directamente para os contedos; 75. Acessibilidade QA Fornecer atalhos para saltar links repetitivos Menu lateral da homepage do SAPO75 76. Demonstrao 77. Acessibilidade QA Fornecer atalhos para saltar links repetitivosComo fazer o link saltar para os contedos:

Saltar o menu
...
...

78. AcessibilidadeQA Fornecer atalhos para saltar links repetitivosEsconder o link no ecr, mas mantendo-o visvel para os screen-readers: #saltar { display: block; position: absolute; left: -9999px; overow: hidden; width: 10px; } 79. Fornecer alternativas textuais aos elementos no-textuais 80. AcessibilidadeQA Fornecer alternativas textuais aos elementos no-textuais Todos os elementos no textuais (imagens, grficos, etc) devem conter uma forma alternativa de aceder ao contedo; Nas imagens, o texto alternativo deve ser colocado usando o atributo alt; 81. AcessibilidadeQA Fornecer alternativas textuais aos elementos no-textuais No caso das imagens no transmitirem nenhuma informao relevante, o atributo alt dever ser adicionado, mas vazio: alt= 82. AcessibilidadeQA Fornecer alternativas textuais aos elementos no-textuais As imagens decorativas e todos os elementos relacionados com a apresentao/decorao da pgina devem ser adicionados atravs de CSS; SeparaoContedos Apresentao HTML CSS 83. AcessibilidadeQA Fornecer alternativas textuais aos elementos no-textuais Apenas as imagens que fazem parte do prprio contedo devem vir includas no HTML; As imagens no HTML devem ser introduzidas atravs da tag e no como imagem de fundo de uma

84. Semntica dos contedos (SEO) 85. AcessibilidadeQA Semntica dos contedos (SEO) Os contedos devem fazer sentido quando lidos sem nenhuma folha de estilos aplicada; Estruturao dos contedos de forma hierrquica atravs de cabealhos (, , , ...), pargrafos (

) e listas (

  • ,
  1. ); 86. Acessibilidade QA Semntica dos contedos (SEO) =carregado
=?? =nfaseVs. =??Fornecem o mesmo visualApenas fornecem o visual eque as tags e , no tm qualquerrespectivamente e tmsignicado semnticosignicado para os screenreaders. 87. Acessibilidade QA Semntica dos contedos (SEO)Como testar: Desactivar as folhas de estilo e tentar ler (e perceber) o contedo do site; 88. Demonstrao 89. Frames 90. Acessibilidade QA Frames O uso de frames deve ser evitado; Caso seja estritamente necessrio usar frames, devem ser atribudos ttulos a cada uma; Deve tambm ser includo um bloco com informaes e links para os utilizadores que no conseguem aceder aos contedos com frames; 91. Acessibilidade QA Frames ... 92. AcessibilidadeQA Frames ...

Esta pgina contm os seguinteselementos:

Menu principal Contedos li> 93. Evitar elementos que piscam oumudam de cores rapidamente 94. AcessibilidadeQA Evitar elementos que piscam ou mudam de cores rapidamente No usar elementos que faam a pgina piscar ou mudar de cor em frequncias superiores a 2Hz e inferiores a 55Hz (1Hz = 1 rotao/oscilao/imagem por segundo); Cinco por cento dos epilpticos so foto-sensveis e podem ter ataques causados por determinadas frequncias de elementos a piscar. 95. 4. Software 96. Compatibilidade entre browsers 97. Software QA Compatibilidade entre browsers 98. Software QA Compatibilidade entre browsers 99. SoftwareQA Compatibilidade entre browsers IE Firefox SafariOutros ANTIGAS 62.x Chrome ACTUAIS7 3.0.x 3Opera 9.6NOVAS8b2* 3.5.x 4Opera 10 100. Software QA Compatibilidade entre browsersInternet Explorer 8 (beta2) 101. No limitar as preferncias do utilizador 102. Software QA No limitar as preferncias do utilizador Os sites no devem quebrar quando o utilizador define um tamanho de letra maior ou menor; Assegurar que os blocos de informao so escalveis e no tm alturas fixas; Como testar? CTRL+/+ 103. 5. Homepage 104. Fornecer acesso homepage emtodas as pginas 105. PlaneamentoQA Fornecer acesso homepage em todas as pginas Deve ser fornecido um acesso fcil e directo homepage em todas as pginas do site. Muitos utilizadores voltam homepage para reiniciar a sua navegao pelo site; 106. Limitar o uso de texto em prosa 107. Planeamento QA Limitar o uso de texto em prosa A primeira aco dos utilizadores procurar pelos ttulos principais e links de acesso aos contedos; No forar o utilizador a ler textos extensos na homepage (so ignorados na maior parte dos casos); 108. Planeamento QA Limitar o uso de texto em prosa Excepo Sites noticiosos, em que importante passar mais alguma informao do que apenas os ttulos. 109. Limitar a altura da pgina 110. PlaneamentoQA Limitar a altura da pgina Se possvel, limitar a homepage a ter apenas informao til; Todos os elementos que tenham que atrair a ateno imediata do utilizador devem ser colocados above the fold; 111. PlaneamentoQA Limitar a altura da pgina A maior parte dos utilizadores faz scroll, mas h grupos especficos de utilizadores que tm tendncia em no ver os contedos abaixo da rea visvel. 112. 6. Pginas Interiores 113. Evitar o uso de texto demasiadoamontoado 114. Planeamento QA Evitar o uso de texto demasiado amontoado Os contedos amontoados dificultam a leitura da informao; O espao em branco ajuda a separar visualmente as reas de contedos; 115. PlaneamentoQA Evitar o uso de texto demasiado amontoado Bloco de Informao 116. Usar a mesma consistncia ao longo de todas as pginas 117. Planeamento QA Usar a mesma consistncia ao longo de todas as pginas Os utilizadores, medida que comeam a conhecer o site, antecipam a localizao da informao no ecr e comeam a procurar os contedos na pgina mesmo antes da mesma ter carregado 118. PlaneamentoQA Usar a mesma consistncia ao longo de todas as pginas Localizao constante dos elementos leva a uma navegao mais rpida; Os utilizadores mais experientes comeam a mover o rato para as reas importantes mesmo antes de l chegarem com o olhar. 119. Estabelecer nveis de importncia 120. PlaneamentoQA Estabelecer nveis de importncia A informao mais importante deve aparecer mais acima na pgina de forma a ser localizada rapidamente. Normalmente as pessoas preferem a informao hierrquica e tendem a centrar a sua ateno num nvel hierrquico de cada vez. 121. PlaneamentoQA Estabelecer nveis de importncia Esta hierarquia mais fcil de implementar se foremusados correctamente os cabealhos para separar oscontedos no texto.Ttulo da Seco

Pargrafo

Sub-ttulo da Seco

Pargrafo

Sub-sub-ttulo da Seco

Pargrafo

122. QA Guidelines de Qualidade e Usabilidade para Designers e Developers