sapo qa sessions #1

Guidelines de Qualidade e Usabilidade para Designers e Developers

QA

1. Planeamento2. User Experience3. Acessibilidade4. Software5. Homepages6. Páginas Interiores

Sessão #1 - Capítulos:

1. Planeamento

Fornecer Conteúdos Úteis

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

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

Considerar primeiro a interacção, depois o aspecto gráfico

Planeamento QA

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


Planeamento QAConsiderar primeiro a interacção, depois o aspecto gráfico

Card SortingPermite definir a Arquitectura de Informação da navegação


PrototipagemDefinir os elementos do interface antes de começar o desenvolvimento


WireframesPrimeiros esqueletos do website

Planeamento QA

• O aspecto gráfico deve acompanhar os conteúdos e não devem ser os conteúdos a adaptar-se ao design;


Design não se adapta aos conteúdos.

• Como testar? CTRL+ / +

Demonstração


http://simplebits.com/publications/bulletproof/





Considerar vários casos de estudo

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

Planeamento QAConsiderar vários casos de estudo

• Utilizadores diferentes terão um comportamento diferente no site / irão procurar informação diferente;

2. User Experience

Evitar o uso de popups ou gráficos não solicitados

User Experience QAEvitar 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;


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

Standardizar acções

User Experience QAStandardizar 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;

User Experience QAStandardizar acções

Cancelar

Apagar

Cancelar

Apagar

• Os ícones devem representar sempre a mesma acção e não devem ser reaproveitados para outras acções.

Não forçar os utilizadores a terem que se lembrar da informação

User Experience QANã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


• Mostrar ao utilizador a sua localização actual

Breadcrumbs (no caso de haver mais do que 2 níveis de navegação)


• Não pedir novamente dados que o utilizador já preencheu anteriormente

Carregamento das páginas deve ser o mais rápido possível

User Experience QACarregamento 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;


• Código JavaScript deve também estar num ficheiro à parte;

• Usar CSS Sprites para combinar várias imagens numa só;


CSS Sprite da homepage do SAPO

1 imagem = 20 Kb1 imagem = 1 pedido ao servidor

30 imagens = 30x1Kb = 30Kb30 imagens = 30 pedidos ao servidor

Vs.


.sprite { background-image: url(mySprite.png);

}


.sprite { background-image: url(mySprite.png); background-position: -196px -2px;width: 115px;height: 128px;

}


• http://www.alistapart.com/articles/sprites/ (Tutorial)

• http://www.csssprites.com/ (Sprite Generator)

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

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

http://www.csssprites.com

http://www.csssprites.com


• Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip.


• Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip.

• http://developer.yahoo.com/yui/compressor/• http://dean.edwards.name/packer/

http://developer.yahoo.com/yui/compressor/

http://developer.yahoo.com/yui/compressor/

http://dean.edwards.name/packer/

http://dean.edwards.name/packer/


Ferramentas• Web Developer Toolbar (Firefox)

https://addons.mozilla.org/firefox/addon/60

https://addons.mozilla.org/pt-PT/firefox/addon/60



Ferramentas• Firebug (Firefox)

http://getfirebug.com/




Ferramentas• YSlow (extensão do Firebug)

http://developer.yahoo.com/yslow/



Formatar conteúdos para leitura e impressão

User Experience QAFormatar 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” />

User Experience QAFormatar conteúdos para leitura e impressão

media=”screen”

media=”print”

Dar feedback sobre as acções do utilizador

User Experience QADar feedback sobre as acções do utilizador

• O utilizador deve receber feedback imediato sobre as acções que executar;


• Ao passar sobre um linka:hover { ... }

• Após clicar num linka:active { ... }

• Ao navegar com o tecladoa:focus { ... }

Formas de fornecer feedback aos utilizadores:

Demonstração


• Ao preencher os campos dos formuláriosinput[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;

Formas de fornecer feedback aos utilizadores:

Demonstração

Informar quando os links apontam para ficheiros grandes

User Experience QAInformar 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)

3. Acessibilidade

Atribuir labels a cada elemento dos formulários

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


<p><label for="nome">Nome:</label><input type="text" name="nome" id="nome" /> </p>

Zona Clicável


label:hover {cursor: pointer;

}

• Pode ser dado um feedback adicional quando o utilizador passa com o rato por cima do texto da “label”

Demonstração


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

Não confiar apenas na cor para fornecer informação

Acessibilidade QA

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


Acessibilidade QA

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


Acessibilidade QA

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


Recomendações:

Acessibilidade QA

• Verificação do contraste entre 2 cores:http://webaim.org/resources/contrastchecker/


Ferramentas:

http://webaim.org/resources/contrastchecker/

http://webaim.org/resources/contrastchecker/

Acessibilidade QA

• Simulação dos vários tipos de daltonismo:http://colororacle.cartography.ch


Ferramentas:

http://colororacle.cartography.ch

http://colororacle.cartography.ch

Demonstração

69

Acessibilidade QANão confiar apenas na cor para fornecer informaçãoVisão Normal

70

Acessibilidade QANão confiar apenas na cor para fornecer informaçãoDeuteranopia (vermelho): afecta 5% das pessoas do sexo masculino

71

Acessibilidade QANão confiar apenas na cor para fornecer informaçãoProtanopia (verde): afecta 2,5% das pessoas do sexo masculino

72

Acessibilidade QANão confiar apenas na cor para fornecer informaçãoTritanopia (azul): afecta 0,5% das pessoas do sexo masculino

Fornecer atalhos para saltar links repetitivos

Acessibilidade QAFornecer 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 QAFornecer atalhos para saltar links repetitivosMenu lateral da homepage do SAPO

Demonstração


<div id=”saltar”><a href=”#conteudos”>Saltar o menu</a>

</div>

<div id=”menu”> ... </div>

<div id=”conteudos”> ... </div>

Como fazer o link saltar para os conteúdos:


#saltar { display: block; position: absolute;left: -9999px;overflow: hidden;width: 10px;

}

Esconder o link no ecrã, mas mantendo-o “visível” para os screen-readers:

Fornecer alternativas textuais aos elementos não-textuais

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


• No caso das imagens não transmitirem nenhuma informação relevante, o atributo alt deverá ser adicionado, mas vazio: alt=” ”


• As imagens decorativas e todos os elementos relacionados com a apresentação/decoração da página devem ser adicionados através de CSS;

ConteúdosHTML

ApresentaçãoCSS

Separação


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

Semântica dos conteúdos (SEO)

Acessibilidade QASemâ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>);


<strong> = carregado

<em> = ênfase

<b> = ??

<i> = ??Vs.

Apenas fornecem o visual e não têm qualquer significado semântico

Fornecem o mesmo visual que as tags <b> e <i>, respectivamente e têm significado para os screen readers.


• Desactivar as folhas de estilo e tentar ler (e perceber) o conteúdo do site;

Como testar:

Demonstração

Frames

Acessibilidade QAFrames

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


<frameset cols="15%, 85%"><frame src="menu.html" title="Menu principal" name="menu"><frame src="content1.html" title="Conteúdos" name="content">...


...<noframes>

<p>Esta página contém os seguintes elementos:</p><ul>

<li><a href="menu.html">Menu principal</a></li><li><a href="content1.html">Conteúdos</a></li>

</ul></noframes>

</frameset>

Evitar elementos que piscam ou mudam de cores rapidamente

Acessibilidade QAEvitar 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.

4. Software

Compatibilidade entre browsers

Software QACompatibilidade entre browsers


IE Firefox Safari Outros

ANTIGAS 6 2.x

ACTUAIS 7 3.0.x 3 ChromeOpera 9.6

NOVAS 8b2* 3.5.x 4 Opera 10

Não limitar as preferências do utilizador

Software QANã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+ / +

5. Homepage

Fornecer acesso à homepage em todas as páginas

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

Limitar o uso de texto em prosa

Planeamento QALimitar 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);

Planeamento QALimitar o uso de texto em prosa

• Sites noticiosos, em que é importante passar mais alguma informação do que apenas os títulos.

Excepção

Limitar a altura da página

Planeamento QALimitar 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”;

Planeamento QALimitar 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.

6. Páginas Interiores

Evitar o uso de texto demasiado amontoado

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

Planeamento QAEvitar o uso de texto demasiado amontoado

Bloco de Informação

Usar a mesma consistência ao longo de todas as páginas

Planeamento QAUsar 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

Planeamento QAUsar 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.

Estabelecer níveis de importância

Planeamento QAEstabelecer 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.

Planeamento QAEstabelecer 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>

Guidelines de Qualidade e Usabilidade para Designers e Developers

QA

sapo qa sessions #1

Technology