sapo qa sessions #2

Guidelines de Qualidade e Usabilidade para Designers e Developers

QA

Thursday, June 4, 2009

7. Navegação8. Títulos e Cabeçalhos9. Links10. Aparência do Texto

Sessão #2 - Capítulos:


7. Navegação


Fornecer Sempre Opçõesde Navegação


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;


Diferenciar e agrupar elementosde navegação


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;


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


Fornecer feedback sobre a localização do utilizador


Navegação QA

• Deve ser fornecido feedback aos utilizadores sobre a sua localização no site;

Fornecer feedback sobre a localização do utilizador


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)



Texto dos linksFazer com que o texto dos links corresponda ao título das páginas de destino



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/


http://noticias.sapo.pt









Item do menuAlterar a cor do item do menu em que o utilizador se encontra

Incluindo sub-categorias!


Assegurar que os títulos dos menus são claramente perceptíveis


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


Assegurar que os items clicáveis parecem clicáveis


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


Navegação QAAssegurar que os items clicáveis parecem clicáveis



botão não é botão



tabs não são tabslink 1 link 2 link 3 link 4

botão não é botão


Fornecer espaçamento extra nos links de paginação


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


Navegação QAFornecer espaçamento extra nos links de paginação


8. Títulos e Cabeçalhos


Diferenciar claramente as diferentes secções dos conteúdos


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;



• Deve ser criada uma árvore de conteúdos de forma a que faça sentido independentemente da apresentação usada;



• 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

Fornecer títulos descritivos


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;


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


Distinguir visualmente a informação crítica / que requer a

atenção do utilizador


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;



• Não abusar, uma vez que qualquer efeito de destaque apenas é eficaz quando usado poucas vezes numa página;


Assegurar que as linhas e colunas principais das tabelas têm cabeçalhos



• 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;



• Só isto já chega, mas ainda há <thead> <tbody> e <tfooter>

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/




9. Links


Texto dos links deve fazer sentido quando lido fora do seu contexto


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


Texto dos links deve reflectir o título da página de destino


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


Assegurar que os itens não clicáveis não se parecem com links


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


Assegurar que os itens clicáveis se distinguem

claramente do resto do texto


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


Links QA

• Todo o elemento visual do link deve ser clicável e não só o texto;



Links QA

• Todo o elemento visual do link deve ser clicável e não só o texto;


a { display: block; }Thursday, June 4, 2009

Usar texto em vez de imagens para os links


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;



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;



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;



Informar quando apontam para sites externos ou para downloads


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;



Links QA

• Links externos devem ter um ícone explicativo a seguir ao link;



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;

}


http://site

http://site

Links QA

• Links para downloads (.pdf, .doc, .xls, etc.) superiores a 250Kb, deve ser indicado o tamanho do ficheiro;



Links QA

• Como bónus, podem indicar o tipo de ficheiro com um ícone associado;


a[href$='.doc'] { ...a[href$='.zip'] { ...a[href^='mailto:'] { ...


10. Aparência do Texto


Assegurar uma consistência visual ao longo de todas as páginas


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


• 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.;



• 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.


Não abusar de textos a negrito


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


Não usar texto com tamanho inferior a 12px


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



• 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


Altura de linha nunca inferior a 1.5x



• 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, ... */


Aparência do texto QAAltura de linha nunca inferior a 1.5x

1.3x 1.5x 1.8x


Aparência do texto QAAltura de linha nunca inferior a 1.5x

1.3x 1.5x 1.8xhttp://www.alistapart.com/articles/indefenseofreaders/


http://www.alistapart.com/articles/indefenseofreaders/

http://www.alistapart.com/articles/indefenseofreaders/

Usar fontes não serifadas


Aparência do texto QAUsar fontes não serifadas



• 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;




• 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”);



Guidelines de Qualidade e Usabilidade para Designers e Developers

QA


sapo qa sessions #2

Documents