SAPO QA Sessions #2
-
Upload
sapoqualidade -
Category
Documents
-
view
600 -
download
1
description
Transcript of SAPO QA Sessions #2
![Page 1: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/1.jpg)
Guidelines de Qualidade e Usabilidade para Designers e Developers
QA
Thursday, June 4, 2009
![Page 2: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/2.jpg)
7. Navegação8. Títulos e Cabeçalhos9. Links10. Aparência do Texto
Sessão #2 - Capítulos:
Thursday, June 4, 2009
![Page 3: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/3.jpg)
7. Navegação
Thursday, June 4, 2009
![Page 4: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/4.jpg)
Fornecer Sempre Opçõesde Navegação
Thursday, June 4, 2009
![Page 5: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/5.jpg)
Navegação QAFornecer Sempre Opções de Navegação
• O menu principal deve estar sempre presente em todas as páginas do site;
• Não devem existir páginas sem elementos de navegação que encurralem o utilizador;
Thursday, June 4, 2009
![Page 6: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/6.jpg)
Diferenciar e agrupar elementosde navegação
Thursday, June 4, 2009
![Page 7: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/7.jpg)
Navegação QADiferenciar e agrupar elementos de navegação
• Os links de navegação devem ser distinguíveis dos restantes elementos de navegação local;
• Devem ser colocados consistentemente nos mesmos locais;
Thursday, June 4, 2009
![Page 8: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/8.jpg)
Navegação QA
• Um sistema de navegação comum em todas as páginas ajuda os utilizadores a aprenderem e perceberem a estrutura do site;
Diferenciar e agrupar elementos de navegação
Thursday, June 4, 2009
![Page 9: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/9.jpg)
Fornecer feedback sobre a localização do utilizador
Thursday, June 4, 2009
![Page 10: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/10.jpg)
Navegação QA
• Deve ser fornecido feedback aos utilizadores sobre a sua localização no site;
Fornecer feedback sobre a localização do utilizador
Thursday, June 4, 2009
![Page 11: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/11.jpg)
Navegação QAFornecer feedback sobre a localização do utilizador
BreadcrumbsMostrar caminho hierárquico desde a página inicial até à página actual(útil quando + de 2 níveis)
Thursday, June 4, 2009
![Page 12: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/12.jpg)
Navegação QAFornecer feedback sobre a localização do utilizador
Texto dos linksFazer com que o texto dos links corresponda ao título das páginas de destino
Thursday, June 4, 2009
![Page 13: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/13.jpg)
Navegação QAFornecer feedback sobre a localização do utilizador
Texto dos linksFazer com que o texto dos links corresponda ao título das páginas de destino
Thursday, June 4, 2009
![Page 14: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/14.jpg)
Navegação QAFornecer feedback sobre a localização do utilizador
Estrutura de URLsUsar uma estrutura de URLs relacionada com a localização do utilizador no site
http://noticias.sapo.pt/
http://noticias.sapo.pt/desporto/
http://noticias.sapo.pt/desporto/fotos/
Thursday, June 4, 2009
![Page 15: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/15.jpg)
Navegação QAFornecer feedback sobre a localização do utilizador
Item do menuAlterar a cor do item do menu em que o utilizador se encontra
Incluindo sub-categorias!
Thursday, June 4, 2009
![Page 16: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/16.jpg)
Assegurar que os títulos dos menus são claramente perceptíveis
Thursday, June 4, 2009
![Page 17: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/17.jpg)
Navegação QA
• Textos dos menus devem ser claros para que o utilizador perceba quais os conteúdos que irá ver nesse link;
• Sempre que possível, evitar abreviaturas;
Assegurar que os títulos dos menus são claramente perceptíveis
Thursday, June 4, 2009
![Page 18: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/18.jpg)
Navegação QA
• Textos dos menus devem ser claros para que o utilizador perceba quais os conteúdos que irá ver nesse link;
• Sempre que possível, evitar abreviaturas;
Assegurar que os títulos dos menus são claramente perceptíveis
Thursday, June 4, 2009
![Page 19: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/19.jpg)
Assegurar que os items clicáveis parecem clicáveis
Thursday, June 4, 2009
![Page 20: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/20.jpg)
Navegação QA
• É importante que o utilizador não tenha dúvidas se um item é clicável ou não;
• Links no meio do texto devem ser imediatamente identificáveis (aspecto deve-se manter por todo o site);
• Botões e tabs devem ter aspecto de... botões e tabs.
Assegurar que os items clicáveis parecem clicáveis
Thursday, June 4, 2009
![Page 21: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/21.jpg)
Navegação QAAssegurar que os items clicáveis parecem clicáveis
Thursday, June 4, 2009
![Page 22: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/22.jpg)
Navegação QAAssegurar que os items clicáveis parecem clicáveis
botão não é botão
Thursday, June 4, 2009
![Page 23: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/23.jpg)
Navegação QAAssegurar que os items clicáveis parecem clicáveis
tabs não são tabslink 1 link 2 link 3 link 4
botão não é botão
Thursday, June 4, 2009
![Page 24: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/24.jpg)
Fornecer espaçamento extra nos links de paginação
Thursday, June 4, 2009
![Page 25: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/25.jpg)
Navegação QA
• Nos links para cada página deve-se aumentar o espaçamento interior (padding);
• Links com um dígito/caracter tornam-se estreitos demais e assim, difíceis de clicar;
Fornecer espaçamento extra nos links de paginação
Thursday, June 4, 2009
![Page 26: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/26.jpg)
Navegação QAFornecer espaçamento extra nos links de paginação
Thursday, June 4, 2009
![Page 27: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/27.jpg)
8. Títulos e Cabeçalhos
Thursday, June 4, 2009
![Page 28: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/28.jpg)
Diferenciar claramente as diferentes secções dos conteúdos
Thursday, June 4, 2009
![Page 29: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/29.jpg)
Títulos e Cabeçalhos QADiferenciar claramente as diferentes secções dos conteúdos
• Através do uso de cabeçalhos (h1, h2, h3) podemos estruturar o texto de forma semântica;
• Tentar seguir a linearidade sem saltar nenhum nível de cabeçalho: h1 - h2 - h3 e não h1 - h3 - h5;
Thursday, June 4, 2009
![Page 30: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/30.jpg)
Títulos e Cabeçalhos QADiferenciar claramente as diferentes secções dos conteúdos
Thursday, June 4, 2009
![Page 31: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/31.jpg)
Títulos e Cabeçalhos QADiferenciar claramente as diferentes secções dos conteúdos
• Deve ser criada uma árvore de conteúdos de forma a que faça sentido independentemente da apresentação usada;
Thursday, June 4, 2009
![Page 32: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/32.jpg)
Títulos e Cabeçalhos QADiferenciar claramente as diferentes secções dos conteúdos
• Deve ser criada uma árvore de conteúdos de forma a que faça sentido independentemente da apresentação usada;
h1 - Título da Páginah2 - Secção A
h3 - Sub-secção da Secção Ah2 - Secção Bh2 - Secção C
h3 - Sub-secção da Secção Ch4 - Sub-sub-secção
h3 - Sub-secção da Secção CThursday, June 4, 2009
![Page 33: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/33.jpg)
Fornecer títulos descritivos
Thursday, June 4, 2009
![Page 34: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/34.jpg)
Títulos e Cabeçalhos QAFornecer títulos descritivos
• <title> deve descrever a página em que está, não apenas o site;
• Duas páginas com <title> iguais vão parecer a mesma em motores de busca, em listas de bookmarks e no histórico do browser;
Thursday, June 4, 2009
![Page 35: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/35.jpg)
Títulos e Cabeçalhos QAFornecer títulos descritivos
• Ainda no <title>, é boa prática usar a seguinte estrutura para o título:
Título da Página - Título do Site
Thursday, June 4, 2009
![Page 36: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/36.jpg)
Distinguir visualmente a informação crítica / que requer a
atenção do utilizador
Thursday, June 4, 2009
![Page 37: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/37.jpg)
Títulos e Cabeçalhos QADistinguir visualmente a informação crítica / que requer a atenção do utilizador
• Informação crítica ou que requer atenção, deve ser distinguida visualmente (ex: highlight);
• Tipicamente é conteúdo alterado ou validação de algum campo num formulário;
Thursday, June 4, 2009
![Page 38: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/38.jpg)
Títulos e Cabeçalhos QADistinguir visualmente a informação crítica / que requer a atenção do utilizador
Thursday, June 4, 2009
![Page 39: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/39.jpg)
Títulos e Cabeçalhos QADistinguir visualmente a informação crítica / que requer a atenção do utilizador
• Não abusar, uma vez que qualquer efeito de destaque apenas é eficaz quando usado poucas vezes numa página;
Thursday, June 4, 2009
![Page 40: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/40.jpg)
Assegurar que as linhas e colunas principais das tabelas têm cabeçalhos
Thursday, June 4, 2009
![Page 41: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/41.jpg)
Títulos e Cabeçalhos QADistinguir visualmente a informação crítica / que requer a atenção do utilizador
• Devem ser usados cabeçalhos de linhas ou de colunas para identificar claramente o conteúdo da tabela;
• Screen-readers vão ler “título - dados” referindo sempre que tipo de dados está em cada célula;
Thursday, June 4, 2009
![Page 42: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/42.jpg)
Títulos e Cabeçalhos QADistinguir visualmente a informação crítica / que requer a atenção do utilizador
Thursday, June 4, 2009
![Page 43: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/43.jpg)
Títulos e Cabeçalhos QADistinguir visualmente a informação crítica / que requer a atenção do utilizador
• Só isto já chega, mas ainda há <thead> <tbody> e <tfooter>
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
Thursday, June 4, 2009
![Page 44: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/44.jpg)
9. Links
Thursday, June 4, 2009
![Page 45: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/45.jpg)
Texto dos links deve fazer sentido quando lido fora do seu contexto
Thursday, June 4, 2009
![Page 46: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/46.jpg)
Links QA
• Utilizadores devem poder olhar para os links e perceber algo sobre o destino;
• Termos como “clique aqui” e “ver mais”, lidos fora de contexto, não adiantam nada sobre o destino;
• Alguns utilizadores de screenreaders activam o modo de ler apenas os links da página;
Texto dos links deve fazer sentido quando lido fora do seu contexto
Thursday, June 4, 2009
![Page 47: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/47.jpg)
Texto dos links deve reflectir o título da página de destino
Thursday, June 4, 2009
![Page 48: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/48.jpg)
Links QA
• O texto dos links deve ser consistente com o título ou cabeçalho principal com a página destino;
• Ajuda os utilizadores a perceberem que chegaram à página certa e a confiar mais nos links que seguem em todo o site;
Texto dos links deve reflectir o título da página de destino
Thursday, June 4, 2009
![Page 49: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/49.jpg)
Assegurar que os itens não clicáveis não se parecem com links
Thursday, June 4, 2009
![Page 50: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/50.jpg)
Links QA
• Texto sublinhado (que não seja link) deve ser evitado a todo o custo;
• Não usar cores diferentes para palavras no meio do texto (que não sejam links). Texto deve ser consistentemente duma cor e apenas os links poderão ter uma cor diferente;
Assegurar que os itens não clicáveis não se parecem com links
Thursday, June 4, 2009
![Page 51: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/51.jpg)
Assegurar que os itens clicáveis se distinguem
claramente do resto do texto
Thursday, June 4, 2009
![Page 52: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/52.jpg)
Links QA
• Items clicáveis devem ser imediatamente identificáveis como tal;
• Links no meio do texto devem ser imediatamente identificáveis;
• O aspecto dos links deve-se manter por todo o site;
Assegurar que os itens clicáveis se distinguem claramente do resto do texto
Thursday, June 4, 2009
![Page 53: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/53.jpg)
Links QA
• Todo o elemento visual do link deve ser clicável e não só o texto;
Assegurar que os itens clicáveis se distinguem claramente do resto do texto
Thursday, June 4, 2009
![Page 54: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/54.jpg)
Links QA
• Todo o elemento visual do link deve ser clicável e não só o texto;
Assegurar que os itens clicáveis se distinguem claramente do resto do texto
a { display: block; }Thursday, June 4, 2009
![Page 55: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/55.jpg)
Usar texto em vez de imagens para os links
Thursday, June 4, 2009
![Page 56: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/56.jpg)
Links QA
• Links textuais são, geralmente, mais facilmente identificáveis como clicáveis;
• Também carregam mais rápido e mais facilmente se dá aspecto diferente para dar feedback quando rato passar por cima ou é clicado;
Usar texto em vez de imagens para os links
Thursday, June 4, 2009
![Page 57: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/57.jpg)
Links QA
• É mais fácil indicar o destino por texto do que numa imagem;
• Em alguns estudos, os utilizadores demonstraram alguma confusão sobre sobre se determinadas imagens seriam clicáveis;
• Outro benefício: screenreaders ou se não houver suporte de imagens, links continuam usáveis;
Usar texto em vez de imagens para os links
Thursday, June 4, 2009
![Page 58: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/58.jpg)
Links QA
• Outro benefício: screenreaders ou se não houver suporte de imagens, links continuam usáveis;
• Tamanho do texto dos links pode ser ajustado de acordo com as opções do browser;
Usar texto em vez de imagens para os links
Thursday, June 4, 2009
![Page 59: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/59.jpg)
Informar quando apontam para sites externos ou para downloads
Thursday, June 4, 2009
![Page 60: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/60.jpg)
Links QA
• Utilizador deve saber antes de clicar no link se vai ser levado para um site externo ou para um download;
• Por omissão, assumem que todos os links apontam para dentro do próprio site, é necessário avisar das excepções;
Informar quando apontam para sites externos ou para downloads
Thursday, June 4, 2009
![Page 61: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/61.jpg)
Links QA
• Links externos devem ter um ícone explicativo a seguir ao link;
Informar quando apontam para sites externos ou para downloads
Thursday, June 4, 2009
![Page 62: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/62.jpg)
Links QAInformar quando apontam para sites externos ou para downloads
<a href=”http://siteexterno.com”class=”external”>Site Externo</a>
.external { background: url(“endereço do ícone”)
no‐repeat right center; padding‐right: 20px;
}
Thursday, June 4, 2009
![Page 63: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/63.jpg)
Links QA
• Links para downloads (.pdf, .doc, .xls, etc.) superiores a 250Kb, deve ser indicado o tamanho do ficheiro;
Informar quando apontam para sites externos ou para downloads
Thursday, June 4, 2009
![Page 64: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/64.jpg)
Links QA
• Como bónus, podem indicar o tipo de ficheiro com um ícone associado;
Informar quando apontam para sites externos ou para downloads
a[href$='.doc'] { ...a[href$='.zip'] { ...a[href^='mailto:'] { ...
Thursday, June 4, 2009
![Page 65: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/65.jpg)
10. Aparência do Texto
Thursday, June 4, 2009
![Page 66: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/66.jpg)
Assegurar uma consistência visual ao longo de todas as páginas
Thursday, June 4, 2009
![Page 67: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/67.jpg)
Aparência do Texto QAAssegurar uma consistência visual ao longo de todas as páginas
• O texto deve-se manter consistente por todas as páginas;
• Elementos como telefone, código postal, etc. devem ter o mesmo aspecto em todas as páginas;
211 234 56721 123456721 123 45 67
211 234 567211 234 567
211 234 567Thursday, June 4, 2009
![Page 68: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/68.jpg)
Aparência do Texto QAAssegurar uma consistência visual ao longo de todas as páginas
• A consistência também inclui manter sempre o mesmo tipo de letra, mesmos tamanhos de texto, os mesmos espaçamentos, mesmas cores nos títulos e labels, localização dos títulos, textos, etc.;
Thursday, June 4, 2009
![Page 69: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/69.jpg)
Aparência do Texto QAAssegurar uma consistência visual ao longo de todas as páginas
• Isto permite que:‣Utilizadores encontrem mais depressa o que procuram;
‣Não cometam tantos erros de navegação;
‣ Aumentar a satisfação dos utilizadores;
‣Reduzir a curva de aprendizagem a usar o site.
Thursday, June 4, 2009
![Page 70: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/70.jpg)
Não abusar de textos a negrito
Thursday, June 4, 2009
![Page 71: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/71.jpg)
Aparência do Texto QA
• O texto a negrito deve ser usado apenas quando é importante focar a atenção do utilizador num pedaço específico de informação;
• Usado em demasia, texto a negrito torna-se comum e perde o efeito de destaque;
Não abusar de textos a negrito
Thursday, June 4, 2009
![Page 72: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/72.jpg)
Não usar texto com tamanho inferior a 12px
Thursday, June 4, 2009
![Page 73: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/73.jpg)
Aparência do texto QA
• Textos com tamanho inferior a 12 píxeis tornam a leitura de conteúdos mais lenta;
• Para utilizadores com +65 anos, mínimo 14px;
• Para informações acessórias (footers, notas, etc.) pode-se usar até 9px;
Não usar texto com tamanho inferior a 12pt
Thursday, June 4, 2009
![Page 74: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/74.jpg)
Aparência do texto QA
• Evitar a definição de tamanhos de texto em unidades fixas (px) para permitir redimensionamento pelo browser;
• Deve-se usar ems ou %;
Não usar texto com tamanho inferior a 12pt
Thursday, June 4, 2009
![Page 75: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/75.jpg)
Altura de linha nunca inferior a 1.5x
Thursday, June 4, 2009
![Page 76: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/76.jpg)
Aparência do texto QA
• O que diz na embalagem: não usar altura de linha inferior a 1.5x em blocos de texto (conteúdo);
• Maior espaçamento ajuda a leitura e reduz o cansaço após leituras longas;
• Uma linha de CSS:
Altura de linha nunca inferior a 1.5x
line-height: 1.5; /* sem unidades px, em, ... */
Thursday, June 4, 2009
![Page 77: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/77.jpg)
Aparência do texto QAAltura de linha nunca inferior a 1.5x
1.3x 1.5x 1.8x
Thursday, June 4, 2009
![Page 78: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/78.jpg)
Aparência do texto QAAltura de linha nunca inferior a 1.5x
1.3x 1.5x 1.8xhttp://www.alistapart.com/articles/indefenseofreaders/
Thursday, June 4, 2009
![Page 79: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/79.jpg)
Usar fontes não serifadas
Thursday, June 4, 2009
![Page 80: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/80.jpg)
Aparência do texto QAUsar fontes não serifadas
Thursday, June 4, 2009
![Page 81: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/81.jpg)
Aparência do texto QA
• Todos os textos do site devem usar fontes não serifadas;
• Serifadas, apenas em títulos de secções ou títulos de conteúdos;
Usar fontes não serifadas
Thursday, June 4, 2009
![Page 82: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/82.jpg)
Aparência do texto QA
• Fontes com serifa lêem-se melhor em papel do que no ecrã (conteúdos);
• Podem modificar o tipo de letra na folha de estilos para impressão (media=“print”);
Usar fontes não serifadas
Thursday, June 4, 2009
![Page 83: SAPO QA Sessions #2](https://reader036.fdocument.pub/reader036/viewer/2022062406/559aea941a28ab7d4e8b4806/html5/thumbnails/83.jpg)
Guidelines de Qualidade e Usabilidade para Designers e Developers
QA
Thursday, June 4, 2009