SAPO QA Sessions #2

Guidelines de Qualidade e Usabilidade para Designers e Developers

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/

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;

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

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;

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/

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

SAPO QA Sessions #2

Documents

Fotos Sapo

Sapo Enamorado

Sapo Kuartam

SAPO Datacenter

2017 - SAPO

O SOLDADINHO DE CHUMBO · o sapo na beira da lagoa o sapo, o sapo, na beira da lagoa nÃo tem, nÃo tem, rabinho e nem orelha. o sapo, o sapo, na beira da lagoa nÃo tem, nÃo tem,

Sapo sessions linux power tools

Blogs SAPO

SAPO Videos

SAPO Broker

sapo flaco.pdf

B04262 SAPO

Sapo apaixonado

O sapo-apaixonado

Guerilla - SAPO

SAPO QA Sessions #1

Sapo enamorado instrumental

Sapo Sessions PHP

QA Jquestion and answers sessions

SAPO GROUP