Usabilidade na Web

Fabrcio de Sousa

Internet
Hoje faz parte da rotina das pessoas Ferramenta Projeto falho -> Negcios perdidos Nunca a usabilidade foi to importante
2

W3C
World Wide Web Consortium
Especificaes Diretrizes Software Ferramentas

Padres
HTTP, CSS, XML, Acessibilidade, etc.

Diretrizes
Uso de tagline
Frase explicativa ou slogan da empresa Indica o propsito do site

Evoluo - Uol

Atual

Perfil Usurio
Gasta em mdia 27 segundos em cada pgina Por que essa pressa?
H excesso de coisas inteis na Internet Se fosse analisar tudo no conseguiria desconectar e viver sua vida
9

Diretrizes
Informe aos usurios onde eles esto Como prosseguir para outras partes do texto Logotipo ou link no canto superior da pgina Link de clique simples para retornar a pgina principal Busca (preferencialmente no canto superior direito)
10

H mais cpias ou padronizaes?

11

Suponha que voc vai montar uma livraria virtual

12

Voc copia a estrutura e muda o logotipo? Voc muda radicalmente a apresentao das sees?

13

Qual dos sites abaixo tem mais equilbrio?

14

http://www.uesb.br/vestibular/default.asp?site=resultado/index.html

15

16

Tempo Mdio de Gasto na Homepage

40 35 30 25 20 15 10 5 0 35 25

Tempo (s)

Baixa Experincia Web

Alta

17

Quatro Objetivos em 30 s
O site que eles chegaram Os benefcios que a empresa oferece Algo sobre a empresa e seus produtos mais recentes As opes para o usurio e como chegar a seo mais relevante

18

Tempo na Homepage
35 30 25 20 15 10 5 0 1 2 Visitas 3 4 Tempo (s) 31 25 22 19

19

Visualizaes de pgina por tela cheia

Usurios que rolaram a tela 25 20 15 10 5 0 1 2 Visitas 3 4 23 16 16

14

20

Tempo de acesso da Homepage x Pgina Interna

70 60 Tempo (s) 50 40 30 20 10 0 Homepage Pgina Interna 35 25 60 45 Baixa Alta

21

22

Cliques do Usurio
Estudos de monitoramento da fixao ocular

23

Crescimento dos Mecanismos de respostas

Usurios buscam respostas especficas Mecanismo de busca
Objetivo
Responder a perguntas

24

Links Orgnicos x Links Patrocinados

25

Comrcio Eletrnico
Fechamento da 1 venda muito importante
Cliente satisfeito conta para 5 pessoas Cliente insatisfeito conta para 9 pessoas

Aumentar o mindshare
Probabilidade do site vir a mente do usurio

26

Resultado do Sistema de Busca

SERP
Search Engine Resuts Page

Pginas Visitadas na busca

92% - 1 Pgina 7% - 2 Pgina -1% - 3 Pgina

27

Anncios em sites de pesquisa

Melhor maneira de promover um Website Nielsen Normam Group
Paga 31 centavos por usurio que pesquisou usability training quando esse usurio clica no anncio a partir do site
28

Nielsen Norman Group

29

Rolagem
Visitam acima da 1 dobra - 53% Rolaram 47% Google
4 a 5 resultados

Usurios preguiosos

30

www.apple.com

31

32

Em Construo
Pgina funciona ou no funciona Aviso por e-mail
Atualizaes

33

 2 Recurso mais usado 1 Links para novas pginas Boto salva-vidas

Independente do que acontea ele te salvar

34

Oito Problemas que no mudaram

35

Links que no mudam de cor

Diretriz de usabilidade mais antiga
Ajudar a entender os usurios onde eles estavam, onde esto e aonde eles podem ir
Presente, passado e futuro

Ausncia
Revisitar sites Confuso Navegacional

36

http://www.acessibilidadelegal.com/10-artigos.php

37

Alterar a funo do boto Voltar

Benefcios
Sempre disponvel e mesma localidade O usurio j sabe onde ir No fora a memria do usurio Mais rpido do que o link do browser (deslocamento)

Equivalente ao desfazer

38

Abrir novas janelas do navegador

Os designer argumentam que para no perde o visitante da pgina principal
Manter preso no adianta, se eles quiserem sair vo sair. Boto Voltar

Proliferao de Janelas
Poluem o espao Erros de memria Usurio obrigado a elimin-las

Se o usurio quiser ele abre

Boto Direito Tecla Shift
39

Abrir novas janelas do navegador

Interrompe a experincia esperada pelo usurio Cobre a janela que o usurio est trabalhando

40

Excees: Arquivos PDF e Similares

Word, Excel, Power Point, etc.
Usurios terminar de visualizar documentos e fecham ao invs de clicar no boto fechar

Alertar ao usurio Remover o boto voltar do navegador Oferecer a opo do usurio salvar ou abrir no programa nativo

41

Janelas pop-up
Irrita o usurio

42

Janelas pop-up
Uso de bloqueadores M reputao
Sites de jogos de azar Pornogrficos

Prejudica deficientes fsicos Carga cognitiva adicional

43

Janelas pop-up
Bons pop-up
Helps Glossrios
Reputao machada devido a reputao dos malignos

Prejuzo em sites de comrcio eletrnico

44

Por que detestamos tantos de Pop-up ?

45

Por que o usurios o detestam tanto?

Carrega Lentamente Tenta lev-lo a clicar nele No tem um boto fechar Cobre o que voc est tentando ver No informa seu propsito Move o contedo Ocupa a maior parte da tela Pisca intermitentemente Flutua sobre a tela Reproduz som automaticamente
46

Elementos de design que parecem anncios

Cegueira a banners

47

48

http://www.allmusicals.com/

49

Violao das convenes da Web

Os usurios gastam a maior parte do tempo em outros sites O site deve seguir padres que o usurio tem de outros sites

50

Livro interessante

51

Contedo Vago e modismo vazio

Vender os benefcios no os recursos Tempo escassos e impacientes Quanto mais rebuscada a informao mais o usurio descartam e desistem Contedo intil irrita o usurio
Perca de vendas

52

Contedo Vago e modismo vazio

Sistemas de busca
Website mais visveis Search Engine Optimization (SEO) Quanto mais concreto o texto, melhor a classificao no sistema de busca

53

Contedo denso e texto noescalonvel

Repulso dos usurios Idia de rduo trabalho para extrair a informao

x
54

Contedo denso e texto noescalonvel

Usar metade das palavras que utilizaria para mdia impressa

55

Excesso de Texto

www.uesb.br

56

http://www.brasil.gov.br/

57

Mudana Tecnolgica
Impacto sobre a usabilidade Mosaic 1 browser

58

Novas tecnologias

59

Amenizaes
Tempo lento de download Frame Flash Listagem de pesquisa de baixa relevncia Multimdia e vdeos Layout congelados Incompatibilidade entre vrias plataformas
60

Tempo lento de download

61

Frames

62

Flash

63

www.cocacola.com.br

Listagem de pesquisa de baixa relevncia

64

Multimdia e vdeos longos

Utilize vdeos curtos Precisa melhorar muito ainda

65

http://www.victoriassecret.com/

66

Layout Congelado
Informaes tem tamanho fixo, independente do tamanho da janela Usurios odeiam rolagem horizontal

67

Incompatibilidade entre vrias plataformas

68

Clicabilidade Incerta
Os usurios no sabem onde clicar na tela, culpa do mal projeto Convenes
Clicar em texto colorido e sublinhado Imagens grficas com aparncia 3D

69

http://www.zincbistroaz.com/

70

Cor do link
O usurio est acostumado com qualquer cor hoje em dia, no mais obrigatrio ser azul.

71

S no podemos abusar!
Amarelo Azul Verde Preto Cinza

72

Registro (Cadastro)

73

URL Complexas
Simples 20 a 50 caracteres
http://br.geocities.com/fabbricio7
No recomendado

www.fabriciosousa.com

74

Menu Suspensos

75

reas Problemticas com melhorias

76

Plug-in e tecnologia de ponta

Recusa de downloads
Atualizao de software Instalao de plug-in

Firefox possui uma interface inteligente para manter os plug-in atualizados No devemos forar o usurio a fazer atualizaes para que ele possa acessar nosso site
77

Interface 3D com o usurio

78

Design poludo

79

Pginas Splash

80

Problemas em Sites
Alta Gravidade
Perca de negcios Impede o uso do site ou Espantam ativamente

Mdia gravidade
Confuso e frustao Algumas perca de negcio

Baixa relevncia
Desprezveis ou irritantes No prejudica os negcios A combinao de vrios prejudica
81

O que torna um problema grave?

Freqncia
Quantos usurios encontraro o problema?
Se for um nmero pequeno problema de gravidade mais baixa

Impacto
Quantas dificuldades o problema causa ao usurio?
Varia de irritaes a perca de horas de trabalho ou mesmo a deciso de sair do site
82

O que torna um problema grave?

Persistncia
Impedimento de uma nica vez ou dificuldades contnuas?

83

Maiores dificuldades
Pesquisar Arquitetura da Informao Legibilidade Contedo Informaes sobre produtos Nomes da categorias Layout Fluxo de trabalho Navegao Links
84

1 Lei do Comrcio Eletrnico

Se o usurio no puder localizar o produto ele no vai comprar A busca responsvel pelo 1/3 dos problemas

85

Busca Web x Busca Interna

86

Por que a busca interna deve ser melhor...

Conjunto menor de pginas Percepo do usurio
Ex. jaguar
Carro, time de futebol ou banda de rock-roll

Atribuio de prioridade aos arquivos Maior acesso ao metadados Controle sobre o vocabulrio No precisa lutar contra spammers
87

Trs passos simples para uma melhor busca interna

Compre um software de pesquisa melhor Projete a interface de busca e pgina de resultados de acordo com as diretrizes de usabilidade Aprimore as pginas do site para que funcionem melhor com o software de busca
Ttulos fceis Otimizao de pesquisa Resumos
88

Trs coisas que um usurio espera de um sistema de busca

Uma caixa para digitao Boto rotulado Pesquisa Lista dos principais resultados que seja linear e aparea numa nova pgina

89

No tente ser um sistema de busca

90

Tamanho da caixa
Mdia 18 caracteres Recomendado
Mximo 27

91

Busca Avanada
Evite Usurios no sabem utilizar
Pesquisa booleana

Colocar em um pgina especial

92

Pesquisa Restrita

93

Pginas do Resultado de busca

Lista linear Mais recomendo na parte superior No h necessidade de destacar No h necessidade de numerar
Comeamos a ler do topo

94

Menu de vrios niveis: menos mais

95

Posso Clicar?

96

Acesso direto a Home page

97

Quatro diretrizes fundamentais sobre Texto

Tamanho de fonte com 10 ou mais pontos Evite fundos visualmente poludos Utilize texto preto sobre fundo branco Mantenha o mnimo de texto grfico
Letras em maisculas Texto em movimento

98

Corpo do Texto: a regra dos 10 pontos

Pblico geral
10-12

Idosos e pessoas com deficincias visuais

12-14

Crianas e outros leitores iniciantes

12-14

Adolescentes/adultos
10-12
99

Textos
Fonte pequena no soluo para caber mais contedo Mais texto significa menos leitura Texto denso afasta as pessoas

100

Resolues comuns
Maioria 800 x 600 Tendncia
1024 x 768

101

Tipo da fonte
Recomendado sem serifa Contrrio da mdia impressa Use fontes pr-instaladas
Arial Comic Scans MS Courier New Verdana

102

Na duvida, use Verdana

103

Limite o nmero de estilos de fonte e cores no site

Nvel de leitura alto
Texto preto com fundo branco Texto azul com fundo branco

Nvel de leitura mdio

Texto preto com fundo cinza

Nvel de leitura baixo

Texto branco com fundo azul Texto cinza com fundo azul Texto branco com fundo cinza

Nvel de leitura muito baixo

Texto vermelho com fundo azul Texto vermelho com fundo preto
104

Cegueira comum para cores

Daltonismo
Homens 8% Mulheres 0,5%

105

Imagens de texto
Resulta em grandes arquivos No passvel de busca No selecionvel No redimensionvel Programas leitores de texto no podem ler

106

Texto em Movimento
Irrita as pessoas No temos controle na velocidade

107

Redao Web
Evite jarges Evite acrnimos No utilize sarcasmos, trocadilhos sutis ou clichs Linguagem simples Resuma pontos-chaves e remova os excessos
108

Redao Web
Destaque palavras-chaves Ttulos concisos e descritivos Lista com marcadores e passos numerveis Pargrafos curtos

109

Outras diretrizes
Agrupe itens semelhantes Formate bem os formulrios Utilize espaos em branco de forma conveniente Evite excesso de multimdia Abaixe o volume , caso tenha som

110

Dvidas?

111