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;
Considerar primeiro a interacção, depois o aspecto gráfico
Planeamento QAConsiderar primeiro a interacção, depois o aspecto gráfico
Card SortingPermite definir a Arquitectura de Informação da navegação
Planeamento QAConsiderar primeiro a interacção, depois o aspecto gráfico
PrototipagemDefinir os elementos do interface antes de começar o desenvolvimento
Planeamento QAConsiderar primeiro a interacção, depois o aspecto gráfico
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;
Considerar primeiro a interacção, depois o aspecto gráfico
Design não se adapta aos conteúdos.
• Como testar? CTRL+ / +
Demonstração
Planeamento QAConsiderar primeiro a interacção, depois o aspecto gráfico
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;
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;
User Experience QAEvitar 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;
User Experience QAEvitar o uso de popups ou gráficos não solicitados
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
User Experience QANã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)
User Experience QANão forçar os utilizadores a terem que se lembrar da informaçã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;
User Experience QACarregamento 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ó;
User Experience QACarregamento das páginas deve ser o mais rápido possível
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.
User Experience QACarregamento das páginas deve ser o mais rápido possível
.sprite { background-image: url(mySprite.png);
}
User Experience QACarregamento 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;
}
User Experience QACarregamento das páginas deve ser o mais rápido possível
• http://www.alistapart.com/articles/sprites/ (Tutorial)
• http://www.csssprites.com/ (Sprite Generator)
User Experience QACarregamento das páginas deve ser o mais rápido possível
• Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip.
User Experience QACarregamento 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/
User Experience QACarregamento das páginas deve ser o mais rápido possível
Ferramentas• Web Developer Toolbar (Firefox)
https://addons.mozilla.org/firefox/addon/60
User Experience QACarregamento das páginas deve ser o mais rápido possível
Ferramentas• Firebug (Firefox)
http://getfirebug.com/
User Experience QACarregamento das páginas deve ser o mais rápido possível
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;
User Experience QADar feedback sobre as acções do utilizador
• 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
User Experience QADar feedback sobre as acções do utilizador
• 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;
Acessibilidade QAAtribuir labels a cada elemento dos formulários
<p><label for="nome">Nome:</label><input type="text" name="nome" id="nome" /> </p>
Zona Clicável
Acessibilidade QAAtribuir labels a cada elemento dos formulários
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
Acessibilidade QAAtribuir 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.
Acessibilidade QAAtribuir labels a cada elemento dos formulários
<label for="horas">Hora/Min</label><input type="text" name="hora" id="horas" title=”horas” />
<input type="text" name="minutos" title=”minutos” />
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;
Não confiar apenas na cor para fornecer informação
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.
Não confiar apenas na cor para fornecer informação
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;
Não confiar apenas na cor para fornecer informação
Recomendações:
Acessibilidade QA
• Verificação do contraste entre 2 cores:http://webaim.org/resources/contrastchecker/
Não confiar apenas na cor para fornecer informação
Ferramentas:
Acessibilidade QA
• Simulação dos vários tipos de daltonismo:http://colororacle.cartography.ch
Não confiar apenas na cor para fornecer informação
Ferramentas:
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
Acessibilidade QAFornecer atalhos para saltar links repetitivos
<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:
Acessibilidade QAFornecer atalhos para saltar links repetitivos
#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;
Acessibilidade QAFornecer 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=” ”
Acessibilidade QAFornecer 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;
ConteúdosHTML
ApresentaçãoCSS
Separação
Acessibilidade QAFornecer 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>
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>);
Acessibilidade QASemântica dos conteúdos (SEO)
<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.
Acessibilidade QASemântica dos conteúdos (SEO)
• 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;
Acessibilidade QAFrames
<frameset cols="15%, 85%"><frame src="menu.html" title="Menu principal" name="menu"><frame src="content1.html" title="Conteúdos" name="content">...
Acessibilidade QAFrames
...<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
Software QACompatibilidade 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
Software QACompatibilidade entre browsers
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Internet Explorer 8 (beta2)
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