SAPO QA Sessions #2

QA Guidelines de Qualidade e Usabilidade para Designers e Developers

Sessão #1 - Capítulos: 1. Planeamento 2. User Experience 3. Acessibilidade 4. Software 5. Homepages 6. Páginas Interiores

1. Planeamento

Fornecer Conteúdos Úteis

Planeamento QA Fornecer 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 QA Fornecer 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 Considerar primeiro a interacção, depois o aspecto gráfico • 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 QA Considerar primeiro a interacção, depois o aspecto gráfico Card Sorting Permite definir a Arquitectura de Informação da navegação

Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico Prototipagem Definir os elementos do interface antes de começar o desenvolvimento

Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico Wireframes Primeiros esqueletos do website

Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico • O aspecto gráfico deve acompanhar os conteúdos e não devem ser os conteúdos a adaptar-se ao design; • Como testar? CTRL+ / + Design não se adapta aos conteúdos.

Demonstração

Planeamento QA Considerar primeiro a interacção, depois o aspecto gráfico http://simplebits.com/ publications/bulletproof/

Considerar vários casos de estudo

Planeamento QA Considerar 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 QA Considerar 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 QA Evitar 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 QA Evitar 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 QA Evitar o uso de popups ou gráficos não solicitados

Standardizar acções

User Experience QA Standardizar 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 QA Standardizar acções • Os ícones devem representar sempre a mesma acção e não devem ser reaproveitados para outras acções. Cancelar Cancelar Apagar Apagar

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

User Experience QA Nã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 QA Nã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 QA Nã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 QA Carregamento 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 QA Carregamento 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 QA Carregamento das páginas deve ser o mais rápido possível CSS Sprite da homepage do SAPO 1 imagem = 20 Kb 1 imagem = 1 pedido ao servidor Vs. 30 imagens = 30x1Kb = 30Kb 30 imagens = 30 pedidos ao servidor

User Experience QA Carregamento das páginas deve ser o mais rápido possível .sprite { background-image: url(mySprite.png); }

User Experience QA Carregamento 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 QA Carregamento 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 QA Carregamento das páginas deve ser o mais rápido possível • Ficheiros CSS e JavaScript devem ser minificados e comprimidos com gzip.

User Experience QA Carregamento 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 QA Carregamento 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 QA Carregamento das páginas deve ser o mais rápido possível Ferramentas • Firebug (Firefox) http://getfirebug.com/

User Experience QA Carregamento 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 QA Formatar 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 QA Formatar conteúdos para leitura e impressão media=”screen” media=”print”

Dar feedback sobre as acções do utilizador

User Experience QA Dar feedback sobre as acções do utilizador • O utilizador deve receber feedback imediato sobre as acções que executar;

User Experience QA Dar feedback sobre as acções do utilizador Formas de fornecer feedback aos utilizadores: • Ao passar sobre um link a:hover { ... } • Após clicar num link a:active { ... } • Ao navegar com o teclado a:focus { ... }

Demonstração

User Experience QA Dar feedback sobre as acções do utilizador Formas de fornecer feedback aos utilizadores: • Ao preencher os campos dos formulários input[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;

Demonstração

Informar quando os links apontam para ficheiros grandes

User Experience QA Informar 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 QA Atribuir 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 QA Atribuir 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 QA Atribuir labels a cada elemento dos formulários • Pode ser dado um feedback adicional quando o utilizador passa com o rato por cima do texto da “label” label:hover { cursor: pointer; }

Demonstração

Acessibilidade QA Atribuir 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 QA Atribuir 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 Não confiar apenas na cor para fornecer informação • 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 Não confiar apenas na cor para fornecer informação • 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 Não confiar apenas na cor para fornecer informação Recomendações: • 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;

Acessibilidade QA Não confiar apenas na cor para fornecer informação Ferramentas: • Verificação do contraste entre 2 cores: http://webaim.org/resources/contrastchecker/

Acessibilidade QA Não confiar apenas na cor para fornecer informação Ferramentas: • Simulação dos vários tipos de daltonismo: http://colororacle.cartography.ch

Demonstração

Acessibilidade QA Não confiar apenas na cor para fornecer informação Visão Normal 69

Acessibilidade QA Não confiar apenas na cor para fornecer informação Deuteranopia (vermelho): afecta 5% das pessoas do sexo masculino 70

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

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

Fornecer atalhos para saltar links repetitivos

Acessibilidade QA Fornecer 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;

Acessibilidade QA Fornecer atalhos para saltar links repetitivos Menu lateral da homepage do SAPO 75

Demonstração

Acessibilidade QA Fornecer atalhos para saltar links repetitivos Como fazer o link saltar para os conteúdos: <div id=”saltar”> <a href=”#conteudos”>Saltar o menu</a> </div> <div id=”menu”> ... </div> <div id=”conteudos”> ... </div>

Acessibilidade QA Fornecer atalhos para saltar links repetitivos Esconder o link no ecrã, mas mantendo-o “visível” para os screen-readers: #saltar { display: block; position: absolute; left: -9999px; overﬂow: hidden; width: 10px; }

Fornecer alternativas textuais aos elementos não-textuais

Acessibilidade QA Fornecer 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 QA Fornecer 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 QA Fornecer 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; Separação Conteúdos Apresentação HTML CSS

Acessibilidade QA Fornecer 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 QA Semâ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 QA Semântica dos conteúdos (SEO) <strong> = carregado <b> = ?? <em> = ênfase Vs. <i> = ?? Fornecem o mesmo visual Apenas fornecem o visual e que as tags <b> e <i>, não têm qualquer respectivamente e têm signiﬁcado semântico signiﬁcado para os screen readers.

Acessibilidade QA Semântica dos conteúdos (SEO) Como testar: • Desactivar as folhas de estilo e tentar ler (e perceber) o conteúdo do site;

Demonstração

Frames

Acessibilidade QA Frames • 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 QA Frames <frameset cols=\"15%, 85%\"> <frame src=\"menu.html\" title=\"Menu principal\" name=\"menu\"> <frame src=\"content1.html\" title=\"Conteúdos\" name=\"content\"> ...

Acessibilidade QA Frames ... <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 QA Evitar 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 QA Compatibilidade entre browsers

Software QA Compatibilidade entre browsers IE Firefox Safari Outros ANTIGAS 6 2.x Chrome ACTUAIS 7 3.0.x 3 Opera 9.6 NOVAS 8b2* 3.5.x 4 Opera 10

Software QA Compatibilidade entre browsers Internet Explorer 8 (beta2) <meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\" />

Não limitar as preferências do utilizador

Software QA Nã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 QA Fornecer 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 QA Limitar 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 QA Limitar o uso de texto em prosa Excepção • Sites noticiosos, em que é importante passar mais alguma informação do que apenas os títulos.

Limitar a altura da página

Planeamento QA Limitar 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 QA Limitar 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 QA Evitar 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 QA Evitar o uso de texto demasiado amontoado Bloco de Informação

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

Planeamento QA Usar 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 QA Usar 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 QA Estabelecer 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 QA Estabelecer 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>

QA Guidelines de Qualidade e Usabilidade para Designers e Developers

SAPO QA Sessions #2

0 comments

Notes on slide 1

Favorites, Groups & Events