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