SAPO QA Sessions #2

649
-1

Published on

Slides da segunda edição das SAPO QA (quality assurance) Sessions, versão pública.

by André Luís.
http://ux.sapo.pt/

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
649
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SAPO QA Sessions #2

  1. 1. QA Guidelines de Qualidade e Usabilidade para Designers e Developers
  2. 2. Sessão #1 - Capítulos: 1. Planeamento 2. User Experience 3. Acessibilidade 4. Software 5. Homepages 6. Páginas Interiores
  3. 3. 1. Planeamento
  4. 4. Fornecer Conteúdos Úteis
  5. 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. 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. 7. Considerar primeiro a interacção, depois o aspecto gráfico
  8. 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. 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. 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. 11. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico Wireframes Primeiros esqueletos do website
  12. 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. 13. Demonstração
  14. 14. Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico http://simplebits.com/ publications/bulletproof/
  15. 15. Considerar vários casos de estudo
  16. 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. 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. 18. 2. User Experience
  19. 19. Evitar o uso de popups ou gráficos não solicitados
  20. 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. 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. 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. 23. User Experience QA Evitar o uso de popups ou gráficos não solicitados
  24. 24. Standardizar acções
  25. 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. 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. 27. Não forçar os utilizadores a terem que se lembrar da informação
  28. 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. 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. 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. 31. Carregamento das páginas deve ser o mais rápido possível
  32. 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. 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. 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. 35. User Experience QA Carregamento das páginas deve ser o mais rápido possível .sprite { background-image: url(mySprite.png); }
  36. 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. 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. 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. 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. 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. 41. User Experience QA Carregamento das páginas deve ser o mais rápido possível Ferramentas • Firebug (Firefox) http://getfirebug.com/
  42. 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. 43. Formatar conteúdos para leitura e impressão
  44. 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. 45. User Experience QA Formatar conteúdos para leitura e impressão media=”screen” media=”print”
  46. 46. Dar feedback sobre as acções do utilizador
  47. 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. 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. 49. Demonstração
  50. 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. 51. Demonstração
  52. 52. Informar quando os links apontam para ficheiros grandes
  53. 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. 54. 3. Acessibilidade
  55. 55. Atribuir labels a cada elemento dos formulários
  56. 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. 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. 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. 59. Demonstração
  60. 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. 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. 62. Não confiar apenas na cor para fornecer informação
  63. 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. 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. 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. 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. 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. 68. Demonstração
  69. 69. Acessibilidade QA Não confiar apenas na cor para fornecer informação Visão Normal 69
  70. 70. Acessibilidade QA Não confiar apenas na cor para fornecer informação Deuteranopia (vermelho): afecta 5% das pessoas do sexo masculino 70
  71. 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. 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. 73. Fornecer atalhos para saltar links repetitivos
  74. 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. 75. Acessibilidade QA Fornecer atalhos para saltar links repetitivos Menu lateral da homepage do SAPO 75
  76. 76. Demonstração
  77. 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. 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; overflow: hidden; width: 10px; }
  79. 79. Fornecer alternativas textuais aos elementos não-textuais
  80. 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. 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. 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. 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. 84. Semântica dos conteúdos (SEO)
  85. 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. 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 significado semântico significado para os screen readers.
  87. 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. 88. Demonstração
  89. 89. Frames
  90. 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. 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. 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. 93. Evitar elementos que piscam ou mudam de cores rapidamente
  94. 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. 95. 4. Software
  96. 96. Compatibilidade entre browsers
  97. 97. Software QA Compatibilidade entre browsers
  98. 98. Software QA Compatibilidade entre browsers
  99. 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. 100. Software QA Compatibilidade entre browsers Internet Explorer 8 (beta2) <meta http-equiv=quot;X-UA-Compatiblequot; content=quot;IE=EmulateIE7quot; />
  101. 101. Não limitar as preferências do utilizador
  102. 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. 103. 5. Homepage
  104. 104. Fornecer acesso à homepage em todas as páginas
  105. 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. 106. Limitar o uso de texto em prosa
  107. 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. 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. 109. Limitar a altura da página
  110. 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. 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. 112. 6. Páginas Interiores
  113. 113. Evitar o uso de texto demasiado amontoado
  114. 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. 115. Planeamento QA Evitar o uso de texto demasiado amontoado Bloco de Informação
  116. 116. Usar a mesma consistência ao longo de todas as páginas
  117. 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. 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. 119. Estabelecer níveis de importância
  120. 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. 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. 122. QA Guidelines de Qualidade e Usabilidade para Designers e Developers
  1. A particular slide catching your eye?

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

×