1 joelma de moura ferreira interação homem-computador xii engenharia de usabilidade na web profa....
TRANSCRIPT
1Joelma de Moura Ferreira
Interação Homem-Computador xIIEngenharia de Usabilidade
na Web
Profa. Joelma de Moura Ferreira
2Joelma de Moura Ferreira
Você tem menos de dois minutos para se comunicar na primeira
vez em que um potencial cliente visita seu website.
3Joelma de Moura Ferreira
Nada importante deve estar a mais de dois cliques de
distância
4Joelma de Moura Ferreira
Os usuários gastam em média 27 segundos em cada página. Você deve convence-los a ficar
5Joelma de Moura Ferreira
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?
6Joelma de Moura Ferreira
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;
7Joelma de Moura Ferreira
Olhando uma página Web “sem pensar”
8Joelma de Moura Ferreira
Olhando uma página Web “pensando”
9Joelma de Moura Ferreira
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
10Joelma de Moura Ferreira
Crie uma hierarquia visual clara
11Joelma de Moura Ferreira
Tire proveito das convenções
12Joelma de Moura Ferreira
Tire proveito das convenções
13Joelma de Moura Ferreira
Divida as páginas em áreas claras e definidas
14Joelma de Moura Ferreira
Deixe óbvio o que pode ser clicado
• sublinhado• cores• rollover• setas
15Joelma de Moura Ferreira
Minimize a confusão
• Poluição visual
16Joelma de Moura Ferreira
Alguns grandes erros na criação de Websites
17Joelma de Moura Ferreira
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”
18Joelma de Moura Ferreira
Grandes erros na criação de Websites
• Rolagem de tela na Horizontal
19Joelma de Moura Ferreira
Grandes erros na criação de Websites
• Janelas Pop-up
20Joelma de Moura Ferreira
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.
21Joelma de Moura Ferreira
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.
22Joelma de Moura Ferreira
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.
23Joelma de Moura Ferreira
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.
24Joelma de Moura Ferreira
Grandes erros na criação de Websites
Cronologicamente
25Joelma de Moura Ferreira
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
26Joelma de Moura Ferreira
Grandes erros na criação de Websites - Cronologicamente
• (1999)
1. Quebra ou modificação do botão Back
2. Abrir uma nova janela
3. Uso não-padrão de elementos de interface gráfica
4. Falta de identificação dos autores
5. Falta de arquivos
6. Mover a página para outra URL
7. Cabeçalhos ausentes ou que nada tem a ver com o conteúdo
8. Saltar para a última tecnologia do momento
9. Tempo de resposta lento do servidor
10.Qualquer coisa que se pareça com uma propaganda
27Joelma de Moura Ferreira
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
28Joelma de Moura Ferreira
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.
29Joelma de Moura Ferreira
Grandes erros na criação de Websites - Cronologicamente
• (2004)
1. Substituição de textos "planos" por textos contidos em imagens.
2. Textos em PDF
3. Poluição de informação: informação excessiva, desnecessária ou advertência idiota.
4. Information foraging: Satisfação de informação, faz com que usuários procurem opções que lhes satisfaçam com simplicidade.
30Joelma de Moura Ferreira
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
31Joelma de Moura Ferreira
Metodologia de Projetos Web
32Joelma de Moura Ferreira
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
33Joelma de Moura Ferreira
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. Ajustes7) Implementação
8) Desenvolvimento
9) Lançamento
Metodologia de Projetos Web
34Joelma de Moura Ferreira
Diretrizes
35Joelma de Moura Ferreira
• 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
36Joelma de Moura Ferreira
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.
Diretrizes
37Joelma de Moura Ferreira
• 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
38Joelma de Moura Ferreira
• 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
39Joelma de Moura Ferreira
• 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
40Joelma de Moura Ferreira
• 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
41Joelma de Moura Ferreira
• 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
Diretrizes
42Joelma de Moura Ferreira
• 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
43Joelma de Moura Ferreira
• 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
44Joelma de Moura Ferreira
• Design gráfico
• Usar contrastes sempre altos entre textos e
panos de fundo.
• Evitar a rolagem horizontal a 800 x 600
Diretrizes
45Joelma de Moura Ferreira
• 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
46Joelma de Moura Ferreira
• 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
47Joelma de Moura Ferreira
• 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
48Joelma de Moura Ferreira
• 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
49Joelma de Moura Ferreira
• Boas-vindas
• Não dê boas-vindas aos usuários do site.
Experimente utilizar o espaço das boas-
vindas para criar um slogan .
Diretrizes
50Joelma de Moura Ferreira
• 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.
Diretrizes