WEB
Usabilidade
WEB
 em janeiro de 2000 - 10 milhões de sites
 1,6 bilhão de páginas
 72 milhões de servidores
 275 milhões de usuários navegando
 a cada 24hs
 3,3 milhões de novas páginas
 123 000 novos usuários
 dezembro de 2000 - 25 milhões de sites
 previsão para fim de 2002 - 100 milhões de
sites
Por que estudar IHC ?
WEB
 em 1998 cerca de 3 bilhões de dólares
deixaram de ser ganhos na WEB norteamericana por causa de designs mal feitos
 com a enorme oferta de alternativas usuários
tem uma notável impaciência e insistência
em gratificação imediata
Por que estudar IHC ?
WEB
 usabilidade assume uma importância
ímpar na economia da Internet
 no
design de produtos e de software
tradicionais, usuários pagam antes e
experimentam a usabilidade depois
 na WEB experimentam a usabilidade
antes e pagam depois
Por que estudar IHC ?
Usabilidade na WEB- Ex.: IBM
Por que estudar IHC ?
O caso IBM
 recurso mais popular em seu site

função de busca
 as pessoas não conseguiam descobrir como navegar
 segundo recurso mais popular
botão de ajuda.
 solução



amplo processo de redesign, envolvendo
centenas de pessoas e milhões de dólares.
Resultado na primeira semana depois do
redesign em fevereiro de 1999
 o uso do botão de ajuda caiu 84%
 as vendas aumentaram 400%.
Por que estudar IHC ?
Usabilidade na WEB
 Clareza na arquitetura da informação

essencial que o usuário consiga discernir o
que é prioritário e o que é secundário no site.


Um bom arranjo da informação
usuários sempre terão
encontrar o que procuram

dificuldades
em
devem ser ajudados
 prover um senso de como a informação está
estruturada e localizada.
 uma das alternativas adotadas em alguns sites,
é prover um mapa do site
Por que estudar IHC ?
Usabilidade na WEB
 Facilidade de navegação

Uma máxima é que o usuário deveria
conseguir acessar a informação desejada no
máximo em três cliques
 Simplicidade

Quem navega quer encontrar o mais
rapidamente possível o objetivo da busca.

a pirotecnia deve ser evitada, dando ao usuário
paz e tranquilidade para que possa analisar a
informação
Por que estudar IHC ?
Simplicidade
Onde estou ?
O que este site faz ?
Por que estudar IHC ?
Simplicidade
Por que estudar IHC ?
Usabilidade na WEB
 A relevância do conteúdo


Sempre que questionados sobre sites,
usuários se referem a qualidade e relevância
do conteúdo
Um bom texto para essa mídia



o mais conciso e objetivo possível
não promocional ou publicitário
leitores online imprimem textos
 necessitam páginas bem curtas
 informação secundária deixada para páginas de
suporte
Por que estudar IHC ?
Usabilidade na WEB
 Manter a consistência


Quando as coisas acontecem sempre do
mesmo jeito, os usuários não precisam se
preocupar a respeito do que irá acontecer
um Website deve ser gerenciado como um
projeto único de interface com o usuário
Por que estudar IHC ?
Usabilidade na WEB
 Tempo suportável
 tempo de carga das páginas deve ser curto
 10 segundos é o máximo de tempo antes que as
pessoas percam o interesse
 na Web os usuários já têm uma baixa expectativa
 limite pode aumentar para 15 segundos
 Foco nos usuários
 'sair do caminho'
 para que o usuário possa fazer o que quer da maneira
mais rápida possível.
Por que estudar IHC ?
Usabilidade na WEB - resumo
 Clareza na arquitetura da informação
 Facilidade de navegação
 Simplicidade
 A relevância do conteúdo
 Manter a consistência
 Tempo suportável
 Foco nos usuários
Por que estudar IHC ?
Amazon (1995)
Por que estudar IHC ?
Amazon (2000)
Por que estudar IHC ?
UOL 1995
A Folha Web, site
da Folha de S.
Paulo, no ar em
1995, trazia
reportagens
selecionadas do
jornal impresso e a
charge do dia
Por que estudar IHC ?
UOL Futuro
Barra
superior de
ajuste do
navegador
Barra de
navegação
principal
verticalizada
à esquerda
Nomes das
estações
no miolo da
página
Um dos estudos para a homepage do futuro
Universo Online, ainda com o nome de trabalho
para preservar o sigilo
Por que estudar IHC ?
Por que estudar IHC ?
UOL – 28.04.1996
Por que estudar IHC ?
UOL - agosto de 1996
Por que estudar IHC ?
UOL ( junção com Abril)
Em dezembro de 1996, a home page ficou
mais quente: foi aberto espaço para imagens
Por que estudar IHC ?
UOL – 04.1999
No aniversário de 3 anos do
UOL, em abril de 1999,
a home page do UOL mudou
para espelhar o
crescimento do site. Os
assinantes votaram e
ajudaram a escolher a nova
cara do UOL
Por que estudar IHC ?
UOL - 1999
Em outubro de 1999, entra no
ar a nova home
com a cor escolhida pelo
público.
Por que estudar IHC ?
UOL 2002
Por que estudar IHC ?
USP 2002
Por que estudar IHC ?
UNICAMP - 2002
Por que estudar IHC ?
WEB
Projeto de Navegação
Navigation Design
 Mais que botões e barras de índice
 Estudo
do movimento no espaço
 Interação entre objetivos do usuário e
meios de como facilita-los
Como remover barreiras?
 Como construir estradas?

Por que estudar IHC ?
Navegação (site de venda de livros)
 Questões gerais:
 Onde
estou?
 Para onde posso ir?
 Como eu cheguei aqui?
 Como posso voltar para o lugar de onde
sai?
Por que estudar IHC ?
Navegação (site de venda de livros)
 Questões “purpose-oriented”
 Como eu sei que minhas informações financeiras
estão seguras?
 Como posso proteger minha privacidade?
 Como posso encontrar o item que procuro?
 E se eu não estiver seguro do que exatamente quero?
 Como posso fazer um preview de produtos para ver se
me servem?
 E se eu tiver problemas posso devolver?
Por que estudar IHC ?
Navegação (site de venda de livros)
 Questões “product or audience-oriented”
 Como posso encontrar livros de um
determinado autor?
 Como posso encontrar livros que sejam
similares aos que eu gosto?
 Como posso saber o nível de leitura de um
livro?
 Como conseguir críticas ou recomendações?
 Onde posso encontrar informações sobre
novas edições ou prêmios?
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
1. Poder ser facilmente aprendida
2. Ser consistente
3. Prover feedback
4. Aparecer dentro do contexto
5. Oferecer alternativas
6. Economizar ação e tempo
7. Prover mensagens visuais claras
8. Usar rótulos claros e compreensíveis
9. Ser apropriada para os propósitos do site
10. Atender a comportamentos e objetivos do usuário
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
1. Poder ser facilmente aprendida



Conteúdo pode ser misterioso, mas chegar a
ele não
Sem curva de aprendizagem
Tornar o site transparente e óbvio
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
2. Consistência



Elementos navegacionais sempre presentes,
no mesmo lugar e com a mesma aparência
Erro comum – desaparecer com elementos
navegacionais do menu quando o usuário
está na página correspondente
Se necessária a quebra por exigência de
conteúdo – criar subsites
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
3. Prover feedback





Somos condicionados a esperar reações de
coisas com as quais interagimos
Toda nossa interação com o ambiente é
baseada na avaliação de feedbacks
Criar controles reativos e prover informação
sobre localização
Rollovers or mouseovers
Usar flechas ou apontadores para mostrar a
posição corrente
 http://www.nied.unicamp.br
Por que estudar IHC ?
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
4. Aparecer dentro do contexto




O usuário precisa ver possíveis caminhos para tomar
decisões sobre movimento
Navegação deve estar sempre presente quando
necessária
 não deixar para botões do browser
Backlinks e forwardlinks and startlinks
 back to / go to / start
 ser descritivo
Entender onde as pessoas estarão quando
terminarem de fazer alguma coisa (p. ex.: leitura de
um grande artigo)
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
5. Oferecer alternativas


Usuários são diferentes tanto em equipamentos
computacionais que usam como em preferências
 Mapas de sites, busca, sites de menor performance,
etc.
Acessibilidade
 Importante tentar atender as necessidades de uma
pessoa cega bem como de um usuário que não tem
um determinado plug-in
 Criar alternativa simplificada do site
 Ex.: o site da Amazon tem versão somente textual.
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
6. Economizar ação e tempo

Nós ainda estamos aqui?!



sindrome a ser evitada
Enorme número de passos ou enormes
formulários são sérias barreiras navegacionais
Prover atalhos de navegação


Mapa do site, index, lista de conteúdo, menus,
etc. são essenciais para sites complexos
Estruturas recursivas
 http://www.computers.com
Por que estudar IHC ?
Por que estudar IHC ?
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
7. Prover mensagens visuais claras

Estabelecer hierarquias visuais


Movimento, cor, posição etc.
Estabelecer um vocabulário visual
 Padrões de WEB?!
Por que estudar IHC ?
http://www.dynamicdiagrams.com/
Por que estudar IHC ?
Por que estudar IHC ?
Por que estudar IHC ?
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
8. Usar rótulos claros e compreensíveis





Boa rotulagem é mais uma arte que uma ciência
Baseado no senso comum e na sensibilidade do
usuário e no contexto
 Ex.: em um site de restaurante o rótulo map site é
associado com o quê?
Links como parte de uma história
Diferença sutil entre mistério e frustração
Economizar sempre que possível (departamento de
administração de vendas X vendas)
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
9. Ser apropriada para os propósitos do site

Um site de vendas não necessariamente tem
que ter as mesmas soluções de navegação de
um site de informação

Comprar um livro é bem diferente de conseguir
uma informação sobre um virus!
Por que estudar IHC ?
Dez qualidades para uma
navegação de sucesso
10. Suportar objetivos e comportamento dos
usuários


Chave do sucesso de qualquer design
Como conhecer de que forma os usuários vão
agir, pensar e o que realmente querem?



Cenários, observação etnográfica, entrevistas,
etc.
Teste de usuário
Ex.: recommendation center da Amazon

http;//www.amazon.com
Por que estudar IHC ?
Por que estudar IHC ?
Sites exemplo
 Educação

DigitalThink


National Geographic: Kids


http://www.digitalthink.com/
http://www.nationalgeographic.com/kids/
Bibl. Virtual do estudante brasileiro

http://www.bibvirt.futuro.usp.br
Por que estudar IHC ?
Sites Exemplo
 Informação

MSNBC


Lycos


http://www.lycos.com
Computers.com


http://www.msnbc.com
http://www.computers.com
UOl

http://www.uol.com.br
Por que estudar IHC ?
Sites exemplo
 Comunidade

SceneServer


FireFly


http://www.dkaweb.com/sceneServer/
http://www.firefly.com
Café Utne

http://www.utne.com
Por que estudar IHC ?
WEB
Futuro
Próximos 5 anos
 Crescimento dos sites em fator de 20
 10 milhões de sites em 1999
 200 milhoes de sites em 2005
 Páginas
 1 bilhão em 1999
 50 bilhões em 2005
 Usuários
 200 milhões em 2000
No Brasil : 10.870.896
500 milhões em 2005
1 bilhão em 2010



Por que estudar IHC ?
Information Appliances
 Acesso móvel

“Anyone,anywhere, anytime:connected”
 Pequenos dispositivos de acesso


Páginas Web terão que funcionar em
diferentes tamanhos de displays
Desafio atual: celulares
Por que estudar IHC ?
Futuro
 WebTV
 Desde 1996 – um grande fracasso
Qualidade dos monitores
 Design inadequado para TV
 Morte dos Web browsers
 Nenhum grande progresso desde 1993
 Navegação como mecanismo universal de suporte
 Hard disk, intranets, internet,…
 Mecanismo universal de busca !?
 Dado local e dado da Internet

Por que estudar IHC ?
Futuro
 Crescimento lendo da largura de banda
 Nos últimos 15 anos cresceu somente 50%
 Empresas de telecomunicacões são conservadoras
 Usuários são relutantes em investir dinheiro em uma
banda mais larga
 Grande crescimento de novos usuários que não adotam
banda larga de inicio
 Design minimalista
 Metáforas para Web
 TV
Web – user driven
 TV – broadcasting mass medium
TV + Internet = adiciona valor aos telespectadores
sem realizar o verdadeiro potencial da Web


Por que estudar IHC ?
Futuro
 Metáfora para Web

Telefone

é um meio 1-to-1
 Por isso marketing tipo TV não funciona



Telemarketing X spam
A ação é iniciada pelo usuário
Todo mundo pode publicar
Por que estudar IHC ?
Futuro
 Reestruturação do espaço de midia
 Adeus aos jornais!
 Por que a midia tradicional é tão separada

Por que temos que escolher entre:
 Ver cenas de um evento na TV
 Ler a história completa nos jornais
 Ler uma análise mais profunda nas revistas

Limitações da Web para integrar:
 Largura de banda torna vídeo impossivel e limita gráficos,
animações e outros formatos não textuais
 Baixa resolução dos monitores de computador
 Browsers e mecanismos de busca mal projetados
 Problemas que estarão resolvidos nos próximos 5 a
10 anos
 2003 a 2008
Por que estudar IHC ?
Usabilidade, uma necessidade
 Invenção de uma nova economia
 Negócios e modos de vida
 Nós somos os construtores
 Usabilidade cresceu de importância
 Usuários leais é o único valor verdadeiro da Internet
 Usabilidade é a competência central para a
sobrevivência na nova economia


Não mais aceitar a opressão da tecnologia da
informação
Defesa da humanidade na era das máquinas
Por que estudar IHC ?