SAPO QA Sessions #2

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

2. Sessão #1 - Capítulos: 1. Planeamento 2. User Experience 3. Acessibilidade 4. Software 5. Homepages 6. Páginas Interiores

3. 1. Planeamento

4. Fornecer Conteúdos Úteis

5. Planeamento QA Fornecer Conteúdos Úteis • Conteúdos são o elemento mais importante do website; • Se os conteúdos não forem úteis, não interessa que o site seja acessível, usável ou bonito esteticamente;

6. Planeamento QA Fornecer Conteúdos Úteis • Se o utilizador não encontrar o conteúdo que pretende, vai procurá-lo em outro site concorrente; • Títulos devem ser descritivos e facilmente perceptíveis;

7. Considerar primeiro a interacção, depois o aspecto gráfico

8. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico • Planificar inicialmente as páginas necessárias, respectivas funções e objectivos de cada uma; • Decidir primeiro sobre como o utilizador vai usar o website;

9. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico Card Sorting Permite definir a Arquitectura de Informação da navegação

10. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico Prototipagem Definir os elementos do interface antes de começar o desenvolvimento

11. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico Wireframes Primeiros esqueletos do website

12. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico • O aspecto gráfico deve acompanhar os conteúdos e não devem ser os conteúdos a adaptar-se ao design; • Como testar? CTRL+ / + Design não se adapta aos conteúdos.

13. Demonstração

14. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico http://simplebits.com/ publications/bulletproof/

15. Considerar vários casos de estudo

16. Planeamento QA Considerar vários casos de estudo • Contexto em que os utilizadores visitam o website; • Nível de experiência; • Tarefas que o utilizador vai realizar no website;

17. Planeamento QA Considerar vários casos de estudo • Utilizadores diferentes terão um comportamento diferente no site / irão procurar informação diferente;

18. 2. User Experience

19. Evitar o uso de popups ou gráficos não solicitados

20. User Experience QA Evitar o uso de popups ou gráficos não solicitados • Janelas ou gráficos que aparecem sem solicitação do utilizador são irritantes e distractivos; • Retira a atenção das tarefas que os utilizadores estão a realizar;

21. User Experience QA Evitar o uso de popups ou gráficos não solicitados • Janelas ou gráficos que aparecem sem solicitação do utilizador são irritantes e distractivos; • Retira a atenção das tarefas que os utilizadores estão a realizar;

22. User Experience QA Evitar o uso de popups ou gráficos não solicitados • Caso seja estritamente necessário abrir uma janela popup, o utilizador deve ser avisado previamente; • Em vez de abrir novas janelas do browser, é preferível abrir janelas modais;

23. User Experience QA Evitar o uso de popups ou gráficos não solicitados

24. Standardizar acções

25. User Experience QA Standardizar acções • Tarefas a realizar no website devem ser consistentes com a forma como tipicamente são executadas; • Utilizadores podem repetir as mesmas acções sem ter que pensar em como as executar;

26. User Experience QA Standardizar acções • Os ícones devem representar sempre a mesma acção e não devem ser reaproveitados para outras acções. Cancelar Cancelar Apagar Apagar

27. Não forçar os utilizadores a terem que se lembrar da informação

28. User Experience QA Não forçar os utilizadores a terem que se lembrar da informação • Não forçar o utilizador a lembrar-se de informação que inseriu anteriormente No segundo passo o utilizador não tem informação sobre os dados que já preencheu

29. User Experience QA Não forçar os utilizadores a terem que se lembrar da informação • Mostrar ao utilizador a sua localização actual Breadcrumbs (no caso de haver mais do que 2 níveis de navegação)

30. User Experience QA Não forçar os utilizadores a terem que se lembrar da informação • Não pedir novamente dados que o utilizador já preencheu anteriormente

31. Carregamento das páginas deve ser o mais rápido possível

32. User Experience QA Carregamento das páginas deve ser o mais rápido possível • Tempos de carregamento lentos são das coisas que mais irrita os utilizadores; • Evitar uso de gráficos e scripts demasiado pesados; • Elementos decorativos devem estar todos num ficheiro CSS à parte;

33. User Experience QA Carregamento das páginas deve ser o mais rápido possível • Código JavaScript deve também estar num ficheiro à parte; • Usar CSS Sprites para combinar várias imagens numa só;

34. User Experience QA Carregamento das páginas deve ser o mais rápido possível CSS Sprite da homepage do SAPO 1 imagem = 20 Kb 1 imagem = 1 pedido ao servidor Vs. 30 imagens = 30x1Kb = 30Kb 30 imagens = 30 pedidos ao servidor

35. User Experience QA Carregamento das páginas deve ser o mais rápido possível .sprite { background-image: url(mySprite.png); }

36. User Experience QA Carregamento das páginas deve ser o mais rápido possível .sprite { background-image: url(mySprite.png); background-position: -196px -2px; width: 115px; height: 128px; }

37. User Experience QA Carregamento das páginas deve ser o mais rápido possível • http://www.alistapart.com/articles/sprites/ (Tutorial) • http://www.csssprites.com/ (Sprite Generator)

38. User Experience QA Carregamento das páginas deve ser o mais rápido possível • Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip.

39. User Experience QA Carregamento das páginas deve ser o mais rápido possível • Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip. • http://developer.yahoo.com/yui/compressor/ • http://dean.edwards.name/packer/

40. User Experience QA Carregamento das páginas deve ser o mais rápido possível Ferramentas • Web Developer Toolbar (Firefox) https://addons.mozilla.org/firefox/addon/60

41. User Experience QA Carregamento das páginas deve ser o mais rápido possível Ferramentas • Firebug (Firefox) http://getfirebug.com/

42. User Experience QA Carregamento das páginas deve ser o mais rápido possível Ferramentas • YSlow (extensão do Firebug) http://developer.yahoo.com/yslow/

43. Formatar conteúdos para leitura e impressão

44. User Experience QA Formatar conteúdos para leitura e impressão • Preparar os conteúdos para serem lidos no ecrã e para serem lidos em papel; • De preferência usar um CSS específico para impressão: <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

45. User Experience QA Formatar conteúdos para leitura e impressão media=”screen” media=”print”

46. Dar feedback sobre as acções do utilizador

47. User Experience QA Dar feedback sobre as acções do utilizador • O utilizador deve receber feedback imediato sobre as acções que executar;

48. User Experience QA Dar feedback sobre as acções do utilizador Formas de fornecer feedback aos utilizadores: • Ao passar sobre um link a:hover { ... } • Após clicar num link a:active { ... } • Ao navegar com o teclado a:focus { ... }

49. Demonstração

50. User Experience QA Dar feedback sobre as acções do utilizador Formas de fornecer feedback aos utilizadores: • Ao preencher os campos dos formulários input[type=text]:focus, textarea:focus { ... } • Ao seguir um link com âncora (links na mesma página) #elemento:target { ... } • Quando a acção demora a ser processada, fornecer uma barra de progresso ou outro indicador visual;

51. Demonstração

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 extensão/tipo de ficheiro e o tamanho do mesmo: Tabela de Preços (PDF – 564 Kb)

54. 3. Acessibilidade

55. Atribuir labels a cada elemento dos formulários

56. Acessibilidade QA Atribuir labels a cada elemento dos formulários • Todos os elementos (campos) dos formulários devem ter uma “label” associada; • O uso de “labels” permite aumentar a área clicável dos elementos, incluindo a sua legenda;

57. Acessibilidade QA Atribuir labels a cada elemento dos formulários <p> <label for=quot;nomequot;>Nome:</label> <input type=quot;textquot; name=quot;nomequot; id=quot;nomequot; /> </p> Zona Clicável

58. Acessibilidade QA Atribuir labels a cada elemento dos formulários • Pode ser dado um feedback adicional quando o utilizador passa com o rato por cima do texto da “label” label:hover { cursor: pointer; }

59. Demonstração

60. Acessibilidade QA Atribuir labels a cada elemento dos formulários • Podem também acontecer casos em que os campos não têm ou não podem ter legenda; • Nesses casos, o campo em si deverá ter o atributo “title” definido.

61. Acessibilidade QA Atribuir labels a cada elemento dos formulários <label for=quot;horasquot;>Hora/Min</label> <input type=quot;textquot; name=quot;horaquot; id=quot;horasquot; title=”horas” /> <input type=quot;textquot; name=quot;minutosquot; title=”minutos” />

62. Não confiar apenas na cor para fornecer informação

63. Acessibilidade QA Não confiar apenas na cor para fornecer informação • Assegurar que todas as informações fornecidas através de um código de cores possam ser visualizadas sem o uso da cor; • Nunca usar a cor como único meio de indicar actividades críticas;

64. Acessibilidade QA Não confiar apenas na cor para fornecer informação • 8% da população masculina e 0,5% da população feminina têm problemas de daltonismo; • A maior parte das dificuldades ocorre na visualização do espectro verde.

65. Acessibilidade QA Não confiar apenas na cor para fornecer informação Recomendações: • Assegurar que existe um contraste suficiente entre o texto e o fundo; • Acompanhar as mensagens mais críticas com iconografia; • Escolher combinações de cores que consigam ser distinguíveis por todas as pessoas, incluindo daltónicos;

66. Acessibilidade QA Não confiar apenas na cor para fornecer informação Ferramentas: • Verificação do contraste entre 2 cores: http://webaim.org/resources/contrastchecker/

67. Acessibilidade QA Não confiar apenas na cor para fornecer informação Ferramentas: • Simulação dos vários tipos de daltonismo: http://colororacle.cartography.ch

68. Demonstração

69. Acessibilidade QA Não confiar apenas na cor para fornecer informação Visão Normal 69

70. Acessibilidade QA Não confiar apenas na cor para fornecer informação Deuteranopia (vermelho): afecta 5% das pessoas do sexo masculino 70

71. Acessibilidade QA Não confiar apenas na cor para fornecer informação Protanopia (verde): afecta 2,5% das pessoas do sexo masculino 71

72. Acessibilidade QA Não confiar apenas na cor para fornecer informação Tritanopia (azul): afecta 0,5% das pessoas do sexo masculino 72

73. Fornecer atalhos para saltar links repetitivos

74. Acessibilidade QA Fornecer atalhos para saltar links repetitivos • Blocos de links que se repetem em todas as páginas devem fornecer uma forma de saltar directamente para os conteúdos;

75. Acessibilidade QA Fornecer atalhos para saltar links repetitivos Menu lateral da homepage do SAPO 75

76. Demonstração

77. Acessibilidade QA Fornecer atalhos para saltar links repetitivos Como fazer o link saltar para os conteúdos: <div id=”saltar”> <a href=”#conteudos”>Saltar o menu</a> </div> <div id=”menu”> ... </div> <div id=”conteudos”> ... </div>

78. Acessibilidade QA Fornecer atalhos para saltar links repetitivos Esconder o link no ecrã, mas mantendo-o “visível” para os screen-readers: #saltar { display: block; position: absolute; left: -9999px; overﬂow: hidden; width: 10px; }

79. Fornecer alternativas textuais aos elementos não-textuais

80. Acessibilidade QA Fornecer alternativas textuais aos elementos não-textuais • Todos os elementos não textuais (imagens, gráficos, etc) devem conter uma forma alternativa de aceder ao conteúdo; • Nas imagens, o texto alternativo deve ser colocado usando o atributo alt;

81. Acessibilidade QA Fornecer alternativas textuais aos elementos não-textuais • No caso das imagens não transmitirem nenhuma informação relevante, o atributo alt deverá ser adicionado, mas vazio: alt=” ”

82. Acessibilidade QA Fornecer alternativas textuais aos elementos não-textuais • As imagens decorativas e todos os elementos relacionados com a apresentação/decoração da página devem ser adicionados através de CSS; Separação Conteúdos Apresentação HTML CSS

83. Acessibilidade QA Fornecer alternativas textuais aos elementos não-textuais • Apenas as imagens que fazem parte do próprio conteúdo devem vir incluídas no HTML; • As imagens no HTML devem ser introduzidas através da tag <img> e não como imagem de fundo de uma <div>

84. Semântica dos conteúdos (SEO)

85. Acessibilidade QA Semântica dos conteúdos (SEO) • Os conteúdos devem fazer sentido quando lidos sem nenhuma folha de estilos aplicada; • Estruturação dos conteúdos de forma hierárquica através de cabeçalhos (<h1>, <h2>, <h3>, ...), parágrafos (<p>) e listas (<ul>, <ol>);

86. Acessibilidade QA Semântica dos conteúdos (SEO) <strong> = carregado <b> = ?? <em> = ênfase Vs. <i> = ?? Fornecem o mesmo visual Apenas fornecem o visual e que as tags <b> e <i>, não têm qualquer respectivamente e têm signiﬁcado semântico signiﬁcado para os screen readers.

87. Acessibilidade QA Semântica dos conteúdos (SEO) Como testar: • Desactivar as folhas de estilo e tentar ler (e perceber) o conteúdo do site;

88. Demonstração

89. Frames

90. Acessibilidade QA Frames • O uso de frames deve ser evitado; • Caso seja estritamente necessário usar frames, devem ser atribuídos títulos a cada uma; • Deve também ser incluído um bloco <noframe> com informações e links para os utilizadores que não conseguem aceder aos conteúdos com frames;

91. Acessibilidade QA Frames <frameset cols=quot;15%, 85%quot;> <frame src=quot;menu.htmlquot; title=quot;Menu principalquot; name=quot;menuquot;> <frame src=quot;content1.htmlquot; title=quot;Conteúdosquot; name=quot;contentquot;> ...

92. Acessibilidade QA Frames ... <noframes> <p>Esta página contém os seguintes elementos:</p> <ul> <li><a href=quot;menu.htmlquot;>Menu principal</a></li> <li><a href=quot;content1.htmlquot;>Conteúdos</a></ li> </ul> </noframes> </frameset>

93. Evitar elementos que piscam ou mudam de cores rapidamente

94. Acessibilidade QA Evitar elementos que piscam ou mudam de cores rapidamente • Não usar elementos que façam a página piscar ou mudar de cor em frequências superiores a 2Hz e inferiores a 55Hz (1Hz = 1 rotação/oscilação/imagem por segundo); • Cinco por cento dos epilépticos são foto-sensíveis e podem ter ataques causados por determinadas frequências de elementos a piscar.

95. 4. Software

96. Compatibilidade entre browsers

97. Software QA Compatibilidade entre browsers

98. Software QA Compatibilidade entre browsers

99. Software QA Compatibilidade entre browsers IE Firefox Safari Outros ANTIGAS 6 2.x Chrome ACTUAIS 7 3.0.x 3 Opera 9.6 NOVAS 8b2* 3.5.x 4 Opera 10

100. Software QA Compatibilidade entre browsers Internet Explorer 8 (beta2) <meta http-equiv=quot;X-UA-Compatiblequot; content=quot;IE=EmulateIE7quot; />

101. Não limitar as preferências do utilizador

102. Software QA Não limitar as preferências do utilizador • Os sites não devem quebrar quando o utilizador define um tamanho de letra maior ou menor; • Assegurar que os blocos de informação são escaláveis e não têm alturas fixas; • Como testar? CTRL+ / +

103. 5. Homepage

104. Fornecer acesso à homepage em todas as páginas

105. Planeamento QA Fornecer acesso à homepage em todas as páginas • Deve ser fornecido um acesso fácil e directo à homepage em todas as páginas do site. • Muitos utilizadores voltam à homepage para reiniciar a sua navegação pelo site;

106. Limitar o uso de texto em prosa

107. Planeamento QA Limitar o uso de texto em prosa • A primeira acção dos utilizadores é procurar pelos títulos principais e links de acesso aos conteúdos; • Não forçar o utilizador a ler textos extensos na homepage (são ignorados na maior parte dos casos);

108. Planeamento QA Limitar o uso de texto em prosa Excepção • Sites noticiosos, em que é importante passar mais alguma informação do que apenas os títulos.

109. Limitar a altura da página

110. Planeamento QA Limitar a altura da página • Se possível, limitar a homepage a ter apenas informação útil; • Todos os elementos que tenham que atrair a atenção imediata do utilizador devem ser colocados “above the fold”;

111. Planeamento QA Limitar a altura da página • A maior parte dos utilizadores faz scroll, mas há grupos específicos de utilizadores que têm tendência em não ver os conteúdos abaixo da área visível.

112. 6. Páginas Interiores

113. Evitar o uso de texto demasiado amontoado

114. Planeamento QA Evitar o uso de texto demasiado amontoado • Os conteúdos “amontoados” dificultam a leitura da informação; • O espaço em branco ajuda a separar visualmente as áreas de conteúdos;

115. Planeamento QA Evitar o uso de texto demasiado amontoado Bloco de Informação

116. Usar a mesma consistência ao longo de todas as páginas

117. Planeamento QA Usar a mesma consistência ao longo de todas as páginas • Os utilizadores, à medida que começam a conhecer o site, antecipam a localização da informação no ecrã e começam a procurar os conteúdos na página mesmo antes da mesma ter carregado

118. Planeamento QA Usar a mesma consistência ao longo de todas as páginas • Localização constante dos elementos leva a uma navegação mais rápida; • Os utilizadores mais experientes começam a mover o rato para as áreas importantes mesmo antes de lá chegarem com o olhar.

119. Estabelecer níveis de importância

120. Planeamento QA Estabelecer níveis de importância • A informação mais importante deve aparecer mais acima na página de forma a ser localizada rapidamente. • Normalmente as pessoas preferem a informação hierárquica e tendem a centrar a sua atenção num nível hierárquico de cada vez.

121. Planeamento QA Estabelecer níveis de importância • Esta hierarquia é mais fácil de implementar se forem usados correctamente os cabeçalhos para separar os conteúdos no texto. <h1>Título da Secção</h1> <p>Parágrafo</p> <h2>Sub-título da Secção</h2> <p>Parágrafo</p> <h3>Sub-sub-título da Secção</h3> <p>Parágrafo</p>

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

SAPO QA Sessions #2

Recomendados

Recomendados

Más contenido relacionado

Similar a SAPO QA Sessions #2

Similar a SAPO QA Sessions #2 (20)

SAPO QA Sessions #2