Programação e Designer
para WEB
Usabilidade
Prof. Rodrigo Rocha
[email protected]
Porque se preocupar com a web
 público extremamente grande
• cada dia cresce mais
 gerador de negócios
 ferramenta de marketing
 maior
i “f
“ferramenta”
t ” de
d muitas
it pessoas
 essencial para o desempenho do trabalho de muitas
pessoas
1
Sucesso
 Três elementos principais em um website
• nome da empresa, logo
 canto esquerdo superior
• um
um-click
click para te levar novamente a homepage principal
• pesquisa
 canto direito superior (preferencialmente)
 Muito a dizer em pouco tempo
• tempo gasto lendo informações no site (primeira visita)
 usuários experientes com web
 usuários inexperientes
25s
35s
• 30 segundos para dar o recado ??
 que site ele está visitando
 benefícios que a empresa oferece
 algo sobre a organização, novidades/lançamentos e novos serviços
 suas opções (escolhas) e como obter mais informações sobre elas
• adulto lê em média de 200 a 300 palavras por minuto
Scrolling
 utilização do scroll para visualizar a página principal
2
Páginas internas
 usuário gasta mais tempo lendo as páginas internas do site do que a
primeira página
 Cerca de um minuto na página interna
• gasta mais tempo no conteúdo do que na navegação
• colocar os links no conteúdo
Encontrando seu site
 88% das pessoas chegam a sites através de buscadores
 links em buscadores
• organicos: “naturalmente” indexados
• patrocinados: aparecem primeiro na busca
 93% d
dos usuários
á i entram
t
no 1º lilink
kd
do resultado
lt d d
da pesquisa
i
 53% olham somente os resultados da pesquisa que aparecem visíveis em
sua tela
3
razões para melhorar
 Se você não “refinar” os termos do site
(usados para achá-lo em pesquisa), o tráfego
irá diminuir
 Melhores chances de encontrar seu site –
vantagem competitiva
 Melhora a percepção do status da empresa
pelo usuário
Scrolling
 maioria dos usuários tem
“aversão” ao scroll
 estudo
• 3992 páginas
4
Design e usabilidade
 Padrões
• > 80% websites seguem um padrão
• usuário espera seguir um padrão
• não se dá ao trabalho de aprender um outro método de navegação
quando já está no site
 Convenção
• 50% à 79% esperam convenções padrões
 ex: botão de pag.inicial, contato, sobre a empresa, etc.
 Confusão
• o usuário não sabe o que esperar
 Razões para padronizar
•
•
•
•
•
•
•
o usuário sabe quais características o espera
sabe como aparecerão na tela
sabe onde estas características estão na tela
sabe o que está característica fará
não precisa ficar em dúvida quanto ao elemento “novo/estranho”
não se perde
não tem surpresas desagradáveis
Melhorando as informações
 muito texto
• assusta o usuário
• não será lido totalmente
 3 dicas para melhorar a comunicação
• Garantir que a descrição dos links e categorias
descrevem realmente o que o usuário irá
encontrar
• Não usar apelidos ou nomes derivados do
slogan
 Ex: RodrigoHome, RodrigoMail, RodrigoLink
• Dê feedback aos usuários de onde eles se
encontram no site, e como se movimentar
5
Arrumando a cozinha....
 Problemas comuns que deverão ser arrumados
• links não mudam de cor quando são visitados
 exceção quando design é orientado a comandos
• falta de funcionalidade voltar
 botão / link voltar
 “sumir” com o voltar do browse
• abertura de novas janelas do browse
 interrompe o padrão de navegação
 polui a tela do usuário
 restringe o usuário a voltar em páginas visitadas
 “desaparece” a tela que o usuário estava interagindo
 faz “parecer” que o link não está funcionando (e na verdade a
página abriu em outro browse)
 exceção
– outros tipos de arquivos ex: pdf
» melhora até para o usuário salvar o documento
– quando avisa o usuário que outra janela irá se abrir
Arrumando a cozinha....
 pop-up
• ofensa ao usuário
• é tipo como um grande vilão
 exemplo: anti-popup
6
 elementos do design não “parecem sérios”
• transparece “confusão” da empresa
 violações no padrão www
• regras básicas
 conteúdos vazios e link falhos
• “buracos”
• links errados
 conteúdo denso e texto cansativo
Impactos da tecnologia
 velocidade baixa
 frames
• problemas de bookmark
• impressão difícil
• interfere nos “spiders”
p
de busca
 flash
• encoraja animação
• barra o usuário de escolher seu “caminho”
• muitos controles personalizados (barras, scroll, etc...)
 busca com pouca relevância
• busca com muitos resultados “inúteis”
 Multimídia e vídeos
• impressão
p
de congelamento
g
 layouts fixos
• usuário não gosta de das scroll na horizontal
• técnica “pergunte a um adolescente”
 um método de testar tendências e layouts
 incompatibilidade
• diversos browser, celulares, pda´s, blackberry, geladeira, etc.
7
Problemas do webdesigner
 plug-ins e tecnologias de terceiros
• usuário se nega a instalar plug-ins
• não forçar o usuário a usar a tecnologia
 interface 3d
• tela é 2d
• mouse é controlado em 2d
 design “enfeitado”
• movimento, luzes piscando, botões animados
 splash screen
• não trazem informações
• atrasam os usuários
 scroll automático de texto
• controle horrível para o usuário
 não saber quem está por trás
• processo de registro no site sem saber quem é a empresa
• forçar o usuário a se registrar
problemas do webdesigner
 palavras modificadas
• exemplo: 4gu4, macmenu, maclink, macinformações
 conteúdo desatualizado
• impressão de página velha
• informações ultrapassadas
 entrar no website inconscientemente
• deverá ser natural o usuário entrar no site
• exemplo: extranet, intranet
 pedir informações pessoais em “hora errada”
• Quando você conhece alguém na balada, você pergunta cpf, rg, nome
d avô,
da
ô renda
d ffamiliar
ili ????
 múltiplos sites
• empresas lançam vários sites com nomes diferentes (devido ao
serviço prestado). Confunde o usuário.
 páginas órfãs
• página não leva a lugar nenhum, nem tem como sair dela
8
Arrumando pelas falhas
 pesquisar os pontos falhos no seu website
 priorizar
 5 maiores problemas
•
•
•
•
•
pesquisa
arquitetura
conteúdo
informação do produto
workflow
Pesquisa
 algumas soluções
• adquirir software de busca
• criá-lo baseado nos mais
conhecidos e funcionais
• melhorar as páginas de seu
site para trabalhar melhor
com os mecanismos de busca
 o que o usuário espera
• caixa para digitar
• botão escrito “buscar”
• lista de resultados ordenada e
priorizada
9
Referência
10