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;
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.
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;
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
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
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/
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”
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 { ... }
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;
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)
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;
}
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” />
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
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
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;
overflow: hidden;
width: 10px;
}
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>
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 significado semântico
significado 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;
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;
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.
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; />
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+ / +
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;
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.
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.
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.
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>