usabilidade web
TRANSCRIPT
Usabilidade na WebFabrcio de Sousa
Internet Hoje faz parte da rotina das pessoas Ferramenta Projeto falho -> Negcios perdidos Nunca a usabilidade foi to importante2
W3C World Wide Web Consortium Especificaes Diretrizes Software Ferramentas
Padres HTTP, CSS, XML, Acessibilidade, etc.
3
Diretrizes Uso de tagline Frase explicativa ou slogan da empresa Indica o propsito do site
4
Evoluo - Uol
5
6
7
Atual
8
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 vida9
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 Homepage40 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 Homepage35 30 25 20 15 10 5 0 1 2 Visitas 3 4 Tempo (s) 31 25 22 19
19
Visualizaes de pgina por tela cheiaUsurios 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 Interna70 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 site28
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 Shift39
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 eletrnico44
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 automaticamente46
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
x54
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 plataformas60
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 site77
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 prejudica81
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 site82
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 Links84
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 spammers87
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 Resumos88
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-1299
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 preto104
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 excessos108
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