Interação Homem-Computador xII
Engenharia de Usabilidade
na Web
Profa. Joelma de Moura Ferreira
Joelma de Moura Ferreira
1
Você tem menos de dois minutos
para se comunicar na primeira
vez em que um potencial
cliente visita seu website.
Joelma de Moura Ferreira
2
Nada importante deve estar a
mais de dois cliques de
distância
Joelma de Moura Ferreira
3
Os usuários gastam em média
27 segundos em cada página.
Você deve convence-los a ficar
Joelma de Moura Ferreira
4
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?
Joelma de Moura Ferreira
5
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;
Joelma de Moura Ferreira
6
Olhando uma página Web “sem pensar”
Joelma de Moura Ferreira
7
Olhando uma página Web “pensando”
Joelma de Moura Ferreira
8
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
Joelma de Moura Ferreira
9
Crie uma hierarquia visual clara
Joelma de Moura Ferreira
10
Tire proveito das convenções
Joelma de Moura Ferreira
11
Tire proveito das convenções
Joelma de Moura Ferreira
12
Divida as páginas em áreas claras e definidas
Joelma de Moura Ferreira
13
Deixe óbvio o que pode ser clicado
•
•
•
•
sublinhado
cores
rollover
setas
Joelma de Moura Ferreira
14
Minimize a confusão
• Poluição visual
Joelma de Moura Ferreira
15
Alguns grandes erros na criação
de Websites
Joelma de Moura Ferreira
16
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”
Joelma de Moura Ferreira
17
Grandes erros na criação de Websites
•
Rolagem de tela na Horizontal
Joelma de Moura Ferreira
18
Grandes erros na criação de Websites
•
Janelas Pop-up
Joelma de Moura Ferreira
19
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.
Joelma de Moura Ferreira
20
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.
Joelma de Moura Ferreira
21
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.
Joelma de Moura Ferreira
22
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.
Joelma de Moura Ferreira
23
Grandes erros na criação de
Websites
Cronologicamente
Joelma de Moura Ferreira
24
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
Joelma de Moura Ferreira
25
Grandes erros na criação de Websites - Cronologicamente
• (1999)
1. Quebra ou modificação do botão Back
2.
3.
4.
5.
6.
7.
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
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
Joelma de Moura Ferreira
26
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
Joelma de Moura Ferreira
27
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.
Joelma de Moura Ferreira
28
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.
Joelma de Moura Ferreira
29
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
Joelma de Moura Ferreira
30
Metodologia de Projetos Web
Joelma de Moura Ferreira
31
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
Joelma de Moura Ferreira
32
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
Joelma de Moura Ferreira
33
Diretrizes
Joelma de Moura Ferreira
34
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
Joelma de Moura Ferreira
clique aqui
clique aqui
clique aqui clique aqui clique aqui clique aqui
35
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.
Joelma de Moura Ferreira
36
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
Joelma de Moura Ferreira
37
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.
Joelma de Moura Ferreira
38
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”
Joelma de Moura Ferreira
39
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.
Joelma de Moura Ferreira
40
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
Joelma de Moura Ferreira
41
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.
Joelma de Moura Ferreira
42
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.
Joelma de Moura Ferreira
43
Diretrizes
• Design gráfico
• Usar contrastes sempre altos entre textos e
panos de fundo.
• Evitar a rolagem horizontal a 800 x 600
Joelma de Moura Ferreira
44
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.
Joelma de Moura Ferreira
45
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
Joelma de Moura Ferreira
46
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.
Joelma de Moura Ferreira
47
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.
•
Joelma de Moura Ferreira
48
Diretrizes
• Boas-vindas
• Não dê boas-vindas aos usuários do site.
Experimente utilizar o espaço das boasvindas para criar um slogan .
Joelma de Moura Ferreira
49
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.
Joelma de Moura Ferreira
50