Interação Homem-Computador xII Engenharia de Usabilidade na Web Profa. Joelma de Moura Ferreira

Você tem menos de dois minutos para se comunicar na primeira vez em que um potencial cliente visita seu website.

Nada importante deve estar a mais de dois cliques de distância

Os usuários gastam em média 27 segundos em cada página Os usuários gastam em média 27 segundos em cada página. Você deve convence-los a ficar

Problema de Usabilidade na Web O sistemas tem a informação ou o serviço que eu preciso? Onde posso encontrar? Como posso solicitar esse serviço? Quais informações devo fornecer? Qual o resultado? Era o que eu queria? Para que serve esse elemento? O que significa essa figura? Para onde leva esse link?

Na web: Não me faça pensar ! Ao olhar uma página web, ela deve ser evidente por si só, auto-explicativa; O usuário deve ser capaz de sacá-la: O que ela é; Como usá-la sem fazer nenhum esforço;

Olhando uma página Web “sem pensar”

Olhando uma página Web “pensando”

Como o usuário pode compreender seu Website Crie uma hierarquia visual clara Tire proveito das convenções Divida as páginas em áreas claras e definidas Deixe óbvio o que pode ser clicado Minimize a confusão

Crie uma hierarquia visual clara

Tire proveito das convenções

Tire proveito das convenções

Divida as páginas em áreas claras e definidas

Deixe óbvio o que pode ser clicado sublinhado cores rollover setas

Minimize a confusão Poluição visual

Alguns grandes erros na criação de Websites

Grandes erros na criação de Websites Grandes blocos ou “paredes” de texto: “Escreva para uma leitura on line e não para impressão”

Grandes erros na criação de Websites Rolagem de tela na Horizontal

Grandes erros na criação de Websites Janelas Pop-up

Grandes erros na criação de Websites Mecanismo de busca inflexível Programas de busca que não conseguem interpretar palavras similares, em grafia ou fonia, tendem a perder mercado.

Grandes erros na criação de Websites Fontes de tamanho fixo ou via CSS O uso de folhas de estilo inibe a possibilidade do usuário visualizar textos do tamanho que prefere. Respeite a preferência do usuário. Use sempre fontes de tamanho relativo e não absoluto.

Grandes erros na criação de Websites URL com mais de 75 caracteres URL muito longa, desencoraja que alguém digite a mesma no seu browser. Alguns browsers têm pequeno espaço para mostrar o endereço, e parte dos grandes endereços não fica visível.

Grandes erros na criação de Websites "Mailto" inesperados em links Quando se clica num link espera-se que o browser mostre o próximo hipertexto. Abrir uma janela para que o usuário envie um E-mail é desastroso, pois o usuário espera ler alguma coisa, não escrever.

Grandes erros na criação de Websites Cronologicamente

Grandes erros na criação de Websites - Cronologicamente (1996) 1. Frames 2. Tecnologia de Ponta 3. Objetos rolantes, Blink e animações 4. URL complexa e codificada 5. Páginas Órfãs 6. Páginas com scroll longos 7. Falta de suporte de navegação 8. Cores de links, não padrão 9. Informações desatualizadas 10. Longo tempo de download

Grandes erros na criação de Websites - Cronologicamente (1999) Quebra ou modificação do botão Back Abrir uma nova janela Uso não-padrão de elementos de interface gráfica Falta de identificação dos autores Falta de arquivos Mover a página para outra URL Cabeçalhos ausentes ou que nada tem a ver com o conteúdo Saltar para a última tecnologia do momento Tempo de resposta lento do servidor Qualquer coisa que se pareça com uma propaganda

Grandes erros na criação de Websites - Cronologicamente (2002) 1 - Página comercial sem preços 2 - Mecanismo de busca inflexível 3 - Scroll Horizontal 4 - Fontes de tamanho fixo ou via CSS 5 - Blocos gigantes de texto 6 - Javascript em links 7 - Perguntas infrequentes em FAQ 8 - Colecionar E-mails sem autorização 9 - URL com mais de 75 caracteres 10 - "Mailto" inesperados em links

Grandes erros na criação de Websites - Cronologicamente (2003) 1 - Definição de objetivos obscura 2 - Novas URLs para arquivar conteúdos 3 - Conteúdos sem datas 4 - Amostra de grandes fotos sem clareza 5 - Detalhamento de textos para <ALT> 6 - Falta de suporte para "What-if" 7 - Longas listas que não podem ser filtradas por atributos 8 - Produtos classificados apenas por marca ou atributo único 9 - Evitar formatos de entrada de dados restritivos 10 - Páginas que se ligam a si próprias.

Grandes erros na criação de Websites - Cronologicamente (2004) Substituição de textos "planos" por textos contidos em imagens. Textos em PDF Poluição de informação: informação excessiva, desnecessária ou advertência idiota. Information foraging: Satisfação de informação, faz com que usuários procurem opções que lhes satisfaçam com simplicidade.

Grandes erros na criação de Websites - Cronologicamente (2005) 1. Problemas de legibilidade 2. Links não padrão 3. Uso inadequado de Flash 4. Conteúdo que não foi escrito para a Web 5. Pesquisa mal sucedida 6. Incompatibilidade de Browser 7. Formulários pesados 8. Sem informação da empresa ou de contato 9. Lay-out congelado em páginas com tamanho fixo 10. Ampliação inadequada de fotos

Metodologia de Projetos Web

Metodologia de Projetos Web Metodologia sugerida por Mario Pinheiro, antigo coordenador da equipe de design de interface e AI da Globo.com 1) Demanda/Definição da estratégia 2) Benchmark 3) Levantamento de funcionalidades desejadas (brainstorm) 4) Macroarquitetura da informação 5) Verificação da viabilidade tecnológica

Metodologia de Projetos Web 6) Continuação do projeto a. Detalhamento da AI b. Desenho da experiência do usuário c. Projeto de interface d. Projeto de branding e. Ajustes 7) Implementação 8) Desenvolvimento 9) Lançamento

Diretrizes

Exemplos que devem ser evitados: Texto pequeno Diretrizes Exemplos que devem ser evitados: Texto pequeno Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Link pequeno e pouco contraste Clique aqui clique aqui clique aqui clique aqui clique aqui clique aqui clique aqui

Diretrizes Exemplos que devem ser evitados: Contraste insuficiente Help, I am small non-resizable text that is hard to read because of its use of color. Help, I am small non-resizable text that is hard to read because of its use of color. Help, I am small non-resizable text that is hard to read because of its use of color. Help, I am small non-resizable text that is hard to read because of its use of color. Help, I am small non-resizable text that is hard to read because of its use of color.

Informando o objetivo do site Diretrizes Informando o objetivo do site Exibir o nome da empresa e/ou logotipo, em tamanho razoável e em um local de destaque Incluir um slogan resumindo explicitamente o que o site ou a empresa faz Enfatizar o que o site faz de diferente sob a perspectiva dos usuários, qual é o seu diferencial? Enfatizar tarefas mais importantes Designar explicitamente uma página do site como a home A estrutura da Home diferente de todas as outras páginas

Diretrizes Criando conteúdo Usar seções e categorias de rótulo, com idioma centrado no cliente, de acordo com a importância dessas seções e categorias para o cliente e não para a empresa. Evitar conteúdo redundante Não utilizar frases eruditas nem dialeto de marketing - exemplo: “grite” ao invés de “fale conosco” Explique o significado de abreviações, acrônimos, etc. Evite utilizar todas as letras de um título em caixa alta. Por exemplo, “PSCICOLOGIA DAS PALAVRAS” não é tão legível quanto “Psicologia das Palavras”. Evitar usar inadequadamente espaços e pontuação para dar ênfase – por exemplo, L A G O S T A ou L.A.G.O.S.T.A.

Diretrizes Links Diferenciar os links e torná-los fácil de visualizar, torne óbvio o que é clicável Não usar instruções genéricas, como “Clique aqui”, como nome de um link. Por exemplo, em vez de dizer “Clique aqui” para obter os itens de Layette, basta dizer “itens da Layette.” Não usar links genéricos, como “Mais...”, no final de uma lista de itens. Em vez disso, informe o que os usuários obterão, em links como “Mais ficção nova”

Diretrizes Links (cont.) Permitir links coloridos para indicar os estados visitados e não-visitados Não usar a palavra “Links” para indicar links existentes na página. Indicar a presença de links com sublinhado e cor azul. No caso de links para arquivos PDF, DOC, PPT, MP3, vídeo, etc., certifique-se de eu o link indique explicitamente o que acontecerá se clicado.

Diretrizes Gráficos e animação Usar gráficos para apresentar o conteúdo real, não somente para decorar o site. Rotular gráficos e fotos se os respectivos significados não estiverem claros no contexto Editar fotos e diagramas adequadamente, segundo o tamanho de exibição

Gráficos e animação (cont.) Diretrizes Gráficos e animação (cont.) Evitar o uso de gráficos de marca d´água (imagens de pano de fundo com texto sobreposto). Use animações com moderação e evite utilizá-las apenas para chamar atenção.A animação distrai a atenção sobre os outros itens do site.

Diretrizes Gráficos e animação (cont.) Não repita animações longas, coloque um botão para reproduzir o clip. Jamais animar elementos críticos da página, como logotipo, slogan ou o título principal. Permitir que os usuários decidam se desejam ver uma introdução animada do seu site – não deixar a opção de animação predefinida.

Diretrizes Design gráfico Usar contrastes sempre altos entre textos e panos de fundo. Evitar a rolagem horizontal a 800 x 600

Diretrizes Design gráfico (cont.) Os elementos mais críticos da página devem estar visíveis “acima da dobra do jornal” (na primeira tela de conteúdo, sem rolar). Usar layout fluído para permitir o ajuste do tamanho da homepage a diversas resoluções de tela.

Diretrizes Janelas Pop-up e páginas intermediárias Conduzir os usuários à “verdadeira” homepage quando digitarem o URL principal ou clicarem em um link para seu site. As telas de abertura devem morrer. Exceção: sites com material impróprio para menores

Diretrizes Publicidade A maioria de usuários com experiência já adquiriu uma cegueira aos banners com propagandas O mais eficiente modelo de publicidade online é o do Google, em texto e com conteúdo similar ao pesquisado Amazon também tem um bom modelo utilizando referências cruzadas de outros compradores.

Diretrizes Publicidade (cont.) Manter os anúncios externos pequenos e o mais discretos possível em relação ao conteúdo central da homepage. Se voce posiciona anúncios fora da área de banner padrão, no início da página, rotule-os como publicidade, para que os usuários não os confundam com o conteúdo de seu site.

Diretrizes Boas-vindas Não dê boas-vindas aos usuários do site. Experimente utilizar o espaço das boas-vindas para criar um slogan .

Comunicando problemas e emergências Diretrizes Comunicando problemas e emergências Se o Website ficar paralisado ou partes importantes do site não estiverem funcionando, informar isso claramente na homepage. Ter um plano para lidar com o conteúdo crítico do Website, para o caso de uma emergência.