Escolar Documentos
Profissional Documentos
Cultura Documentos
No me faa pensar!
Uma abordagem do bom senso navegabilidade da Web
Steve Krug. SP: Market Books, 2001.
INTRODUO
Anlise do perito sobre a navegabilidade: Descobrir, pessoalmente, se o site fcil de usar.
Teste da navegabilidade: Pagar para pessoas tentarem usar o site, enquanto assiste.
Documento escrito: Descrio dos problemas encontrados e propostas de solues.
Trabalhar com a equipe de webdesign do cliente para ajud-la a descobrir solues.
Design de interao: o que acontece depois que o usurio clica.
Arquitetura da informao: como tudo organizado.
No to difcil quanto parece: use o bom senso.
CAPTULO 1 No me faa pensar! Primeira lei de navegabilidade de Krug.
Quando se olha uma pgina web, ela deve ser auto-explicativa.
Identificao imediata de cada campo e sua categoria.
COISAS QUE NOS FAZEM PENSAR
D nomes bvios s coisas: Empregos no Emp, nem Oportunidade de Emprego.
Faa algo clicvel parecer obviamente clicvel.
A MAIORIA DOS SITES DE LIVRARIAS
Buscar deve ser Buscar, e no Busca Rpida.
VOC NO PODE TORNAR TUDO EVIDENTE
Se no puder tornar tudo evidente na pgina, faa com que ela seja auto-explicativa.
POR QUE ISSO TO IMPORTANTE?
As pessoas toleram sites frustrantes. Porm culpam a si, e no ao site. Seu site pode ter sido
difcil de encontrar e o usurio no conhece uma alternativa, assim, h certa pacincia.
ENTO, POR QU?
Pginas evidentes fazem as coisas aparecerem mais. As pessoas gastam menos tempo
olhando as pginas do que gostaramos. A mgica deve ser feita rapidamente.
CAPTULO 2 Como realmente usamos a Web
FATO 1 - NO LEMOS PGINAS DA WEB, NS A EXPLORAMOS.
Normalmente estamos com pressa. Sabemos que no precisamos ler tudo. Somos bons
nisso. Lembremos da dinmica em jornais, revistas e livros. H palavras-chave gravadas
em nosso sistema nervoso: Grtis, Venda, Sexo, e o prprio nome.
FATO 2 NO FAZEMOS AS MELHORES ESCOLHAS. USAMOS A TCNICA DO
SATISFICNCIA.
O usurio no escolhe a melhor opo, mas a primeira opo razovel. Motivos:
Normalmente tm pressa; No h grandes problemas em tentar e errar; Comparar as opes
pode no melhorar as chances; Adivinhar mais divertido.
FATO 3 NO ADIVINHAMOS COMO AS COISAS FUNCIONAM. FAZEMOS DE
QUALQUER JEITO.
Frente nova tecnologia, no se d tempo de ler as instrues, mas cria-se uma tcnica
prpria e pessoal. Cria-se certa eficincia, mesmo com mtodos diferentes dos planejados
pelos designers. Exemplo: digitar o endereo na caixa de busca de motores web. Motivos:
No importante; Se descobrirmos que funciona, prende-se a isso.
Faa testes de usabilidade e perceba as respostas dos usurios. No se preocupe se no
fazem como esperado. Use essa informao. Se usurios pegam a manha do site: H maior
chance de encontrarem o que procuram; H maior chance de que percebam o amplo alcance
do seu site. H maior chance de lav-los a partes do site que voc quer; eles se sentiro
mais espertos e no controle do seu site.
CAPTULO 3 Design para anncios
1. Crie uma hierarquia visual clara em cada pgina;
a. Quanto mais importante for alguma coisa, mais destacada;
b. As coisas relacionadas logicamente tambm esto relacionadas visualmente;
c. As coisas so aninhadas visualmente para mostrar o que faz parte do que.
2. Tire vantagem das convenes;
a. Elas so muito teis;
b. Designers costumam relutar em tirar vantagem delas.
3. Divida as pginas em reas bem definidas;
a. Permite aos usurios decidir em quais reas da pgina se concentrar e quais
ignorar.
4. Deixe bvio o que clicvel;
a. Na web, o intuito principal procurar pela prxima coisa a clicar;
b. Faa um link parecer um link;
c. Faa um boto parecer um boto.
5. Diminua a poluio visual. Considere que tudo poluio.
a. Negcio-a-co: Querer chamar muito ateno pode ser opressivo.
b. Poluio de fundo: Diminua a quantidade de elementos e seu contraste.
CAPTULO 4 Animal, vegetal ou mineral? Porque usurios gostam das escolhas
instantneas
O importante no a quantidade de clicks para se chegar a certo contedo. Mas, sim, o grau
de dificuldade de cada click a quantidade de pensamentos e incertezas em fazer a escolha
certa.
Os usurios no se importam em dar vrios clicks, desde que cada click seja sem esforo e
tenham confiana de estarem no caminho certo; Desde que as pginas sejam leves e no se
passe pelas mesmas partes de uma pgina!
Facilite as opes de escolha seguindo o conhecimento do usurio e categorize de maneira
clara.
CAPTULO 5 Omita palavras desnecessrias
A escrita eficaz concisa. Uma frase no deve conter palavras sem utilidade, assim como
o pargrafo no deve ter frases desnecessrias, pela mesma razo que um desenho no
precisa de linhas desnecessrias e uma mquina no precisa de partes sem utilidade
William Strunk, 1979.
A CONVERSA FIADA DEVE MORRER.
Por exemplo, os textos introdutrios de boas-vindas, quando se ouve uma voz mental
dizendo bl, bl, bl, textos autopromocionais, sem nenhuma informao til, dizendo
como so timos, em vez de especificar o que os fazem timos. O usurio no tem tempo
ou pacincia para isso. V direto ao ponto.
AS INSTRUES DEVEM MORRER.
Ningum ir l-las. O objetivo tornar tudo auto-explicativo. Quando instrues forem
necessrias, reduza-as para o menor nmero possvel.
CAPTULO 6 Placas de rua e migalhas de po
As pessoas no usaro seu site se no encontrarem um caminho, se no encontrarem o que
procuram ou no descobrirem como o site organizado: seu Sistema de Navegao.
CENA EM UMA LOJA DE DEPARTAMENTOS.
Exemplos de sistemas de navegao numa loja de departamentos, procura de uma
ferramenta.
NAVEGAO NA WEB.
Processos comuns:
1. Voc est tentando achar algo;
a. Um produto que quer comprar ou uma informao necessria.
2. Voc decide se vai perguntar ou procurar primeiro;
a. Na web, perguntar significa ir ao campo de busca;
Web designers usam o termo navegao persistente ou navegao global para o grupo de
elementos de navegao que aparecem em cada pgina de um site.
Quando bem feita, a navegao persistente deve dizer: A navegao acaba aqui. Algumas
partes iro mudar um pouco, dependendo de onde voc est, mas sempre estar aqui, e
sempre funcionar da mesma forma.
A navegao persistente deve incluir cinco elementos:
1. Identificao do site;
2. Um caminho para a pgina principal (Home-page);
3. Um meio de busca;
4. Sees e
5. Utilidades.
EU DISSE TODAS AS PGINAS?
H duas excees para esta regra:
1. A pgina principal (Home-page)
a. No como as outras pginas ela tem fardos diferentes para carregar e
promessas diferentes a cumprir. s vezes isso significa no haver navegao
persistente nela.
2. Formulrios
a. A navegao persistente aqui pode ser uma distrao desnecessria, uma vez
que espera-se que o usurio termine tal tarefa. Pode ser til haver uma
verso minimizada da navegao persistente.
AGORA EU SEI QUE NO ESTAMOS NO KANSAS.
A identificao do site imprescindvel em todas as pginas. o ponto mais alto na
hierarquia do site.
Pode-se usar a identificao como maior destaque na pgina, ou servindo como moldura
para o contedo.
AS SEES
Tambm chamadas de navegao primria, so os links para as sees principais do site.
Na maioria dos casos, a navegao persistente ir incluir espao para a navegao
secundria, as subsees da seo atual.
AS UTILIDADES
So os links para elementos importantes que no fazem parte da hierarquia do contedo.
Exemplos so: Ajuda; Mapa do site; Carrinho de compras; Sobre ns; Contate-nos.
Variando conforme o tipo de site.
A navegao persistente deve acomodar apenas quatro ou cinco utilidades. O restante deve
ficar na Home-page.
CLIQUE NOS SEUS CALCANHARES TRS VEZES E DIGA NO H LUGAR
COMO A NOSSA CASA.
muito importante ter, na navegao persistente e sempre visvel, um boto ou link para a
Home-page. Faz-lo na identificao do site deve tornar-se uma conveno, mas poucos
usurios ainda esto cientes disso.
Por enquanto, interessante utilizar um link na rea de sees ou na rea de utilidades; ou
adicionar a palavra Home discretamente identificao do site, exceto na prpria home.
UMA FORMA DE BUSCA.
A menos que o site seja pequeno e bem organizado, toda pgina deve ter um aplicativo de
busca. Grande parte dos usurios tem como ato oficial num novo site, buscar algo que se
parea como um campo de busca, ao invs de explor-lo.
A frmula simples: Um campo, um boto e a palavra Busca. Evite palavras diferentes,
instrues e opes.
SECUNDRIO, TERCIRIO E TUDO QUE VIER APS O TERCIRIO.
difcil manter a navegao de boa qualidade depois do segundo nvel do site pela
quantidade de informaes que cada pgina deve apresentar. Porm, usurios tendem a
permanecer mais tempo nos nveis inferiores do site. Adicionar novos contedos e nveis
bastante complicado, a no ser que o site tenha sido construdo do nvel mais baixo para
cima.
vital ter pginas de exemplos que mostrem a navegao de todos os potenciais nveis do
site antes de comear a discusso sobre o esquema de cores da Home-page.
NOMES DE PGINA, OU POR QUE ADORO DIRIGIR EM LOS ANGELES.
As placas so grandes e ficam no lugar certo!
1. Toda pgina precisa de um nome;
2. Todo nome precisa estar no lugar certo;
3. O nome precisa estar estacado;
4. O nome precisa combinar com aquilo que foi clicado.
VOC EST AQUI.
A indicao de onde o usurio est muito importante. A falha mais comum ter uma
indicao muito sutil, perdendo seu valor como pista visual, tornando-se somente poluio.
Uma forma de garantir sua apario aplicar mais que uma distino visual: cor diferente e
texto em negrito, por exemplo.
MIGALHAS DE PO.
Demonstram a trilha seguida dentro da hierarquia do site. Geralmente no so suficientes se
utilizadas sem um sistema de navegao.
Se bem feitas, so auto-explicativas, no ocupam muito espao e proporcionam uma forma
coerente e conveniente de voltar um nvel ou ir Home-page.
Boas prticas so: coloc-las no alto e usar o sinal de maior (>) entre os nveis.
Alm de tudo, voc trabalha sob condies adversas. Dificuldades freqentes so:
1. Todo mundo quer tomar parte: todos querem ter um link atrativo na HP;
2. Palpiteiros demais: todos na empresa tm opinio sobre a HP;
3. Um tamanho que sirva para todos: deve atrair todas as pessoas que visitarem o site.
A PRIMEIRA BAIXA DA GUERRA.
Na desordem causada por tudo isso, h alguns itens que voc no pode se perder.
1. O que o site;
2. O que h no site;
3. O que se pode fazer no site;
4. Porque devo estar aqui e no em outro lugar?
E no se esquea: tudo importante!
As cinco desculpas plausveis para no explicar o quadro geral na Home-page:
1. No precisamos. Isso bvio;
2. Depois que as pessoas virem a explicao pela primeira vez, passaro a ach-la
incmoda;
3. Qualquer pessoa que realmente precise do nosso site saber o que ele ;
4. para isso que serve nosso anncio;
5. Simplesmente adicionaremos um link de Sua primeira Visita?.
COMO PASSAR A MENSAGEM.
Dois locais importantes onde se espera encontrar explicaes explcitas sobre do que se
trata o site so no slogan e no texto de boas-vindas.
Diretrizes de sucesso:
1. Use tanto espao quanto for necessrio;
2. No use mais espao do que o necessrio;
3. No use uma lista de funes como texto de boas-vindas;
4. Mostre o site para pessoas da empresa para descobrir as falhas.
NADA SUPERA UM BOM SLOGAN.
1. O slogan deve aparecer logo abaixo ou ao lado da identificao do site.
2. Bons slogans so claros e informativos;
3. Slogans ruins so vagos;
4. Bons slogans tm de seis a oito palavras.
5. Bons slogans demonstram a diferenciao e um benefcio claro;
6. Slogans ruins parecem genricos;
7. Bons slogans so pessoais, animados e, s vezes, inteligentes.
SLOGAN? NO PRECISAMOS DESTA PORCARIA.
Alguns sites no precisam de slogans: os sites que j atingiram realmente o status de
palavra conhecida; e sites que so bem conhecidos a partir de suas origens fora da web. De
qualquer forma, haveria benefcios se usassem slogans. Porque perder uma oportunidade de
dizer s pessoas por que elas se sentiro melhor no seu site?
A QUINTA QUESTO.
Quando num novo site, aps uma breve olhada na HP, deve-se poder dizer, com segurana:
1. por aqui que comeo se quiser procurar;
2. por aqui que comeo se quiser navegar;
3. por aqui que comeo se quiser uma amostra do que eles tm de melhor.
A NAVEGAO DA HP PODE SER NICA.
A navegao da home pode ser diferente. Mas no muito! As diferenas entre a HP e as
demais pginas de um site incluem:
1. Descrio das sees;
2. * Diferente quantidade de contedo navegao global diferente*;
3. Mais espao para a identidade.
No faa nenhuma mudana desnecessria. Mantenha os nomes das sees exatamente os
mesmos, na mesma ordem, as mesmas palavras e o mesmo agrupamento.
A PREOCUPAO COM OS ROLLOVERS.
Apresentam um grfico explicativo quando se coloca o cursor sobre cada nome de seo. A
explicao contm uma breve descrio da seo ou uma lista de subsees contidas nela.
Problemas no uso de rollovers:
1. preciso procur-los;
2. S se pode ver um de cada vez;
3. So muito instveis;
4. So ineficazes, a no ser que a explicao aparea perto de onde est o cursor.
A PREOCUPAO COM MENUS SUPENSOS (pulldown ou drop-down menus)
Apesar de poupar espao, os menus suspensos apresentam os mesmos problemas dos
rollovers. So eficientes para listas em ordem alfabtica de itens conhecidos.
REVEZE SUA MATRIA-PRIMA
Para ganhar espao no layout, utilizando todo o espao para pequenos anncios, use
banners maiores com anncios giratrios.
POR QUE A GALINHA DOS OVOS DE OURO CRIA ALVOS TO TENTADORES
Como matar a galinha dos ovos de ouro: a Home-page:
1. Colocar um banner desnecessrio: restries no peso (kb) da imagem;
2. Promover tudo: aumenta-se a comercializao, porm perde-se em efetividade;
3. Deixar que os negcios conduzam o design da Home-page: efeito macaco de
piloto de Frmula 1;
4. Ter ganncia pelos dados do usurio: tentar obter todos de uma vez s, normalmente
na primeira visita.
SEJA VOC O JUIZ.
Testes do porta-malas.
TRADICIONAL
Oito ou mais.
Esforo para
recrutamento
Onde testar
Quem faz o teste
Plano de avano
Preparao
O que e quando voc testa
Selecionar cuidadosamente
para selecionar o pblico
alvo.
Laboratrio de
navegabilidade com sala de
observao.
Experiente profissional de
navegabilidade.
Testes marcados com
semanas de antecedncia
para reservar um laboratrio
e tempo de recrutar.
Esboar, discutir e revisar
um protocolo de teste.
Reunir todas as dvidas e
testar no final do projeto.
Custo
Cinco a quinze mil dlares.
O que acontece depois
ESBOOS
DESIGN
PROTTIPO
PRIMEIRA
VERSO
UTILIZVEL
Sites
concorrentes.
Esboo da
HP e nomes
das
categorias
principais e
recursos.
Design da
HP. Padro
das pginas
de segundo
nvel. Padro
de contedo.
Tudo aquilo
em que
estiver
trabalhando.
Tudo aquilo
em que
estiver
trabalhando.
Cada pgina
separadamente.
Site ao vivo.
Papel.
Site ao vivo.
Pgina HTML.
O que
testar
Formato
Como
testar
Entendi e
tarefas-chave.
Prottipo
HTML.
Entendi e
Entendi e
Entendi e
nomes das
navegao
tarefascoisas.
bsica.
chave.
Entendimento Entendimento Ainda
do ponto
do ponto
entendem?
principal do
principal do
Podem
site. o que
site e da
realizar
precisam?
navegao.
tarefasPodem
chave?
descobrir
Papel.
Entendi e
tarefaschave.
Ainda
entendem?
Podem
realizar
tarefaschave?
CUBCULO
Tarefas-chave.
Podem realizar
tarefas-chave?
tarefas-chave.
Durao
1 hora.
15 a 20
minutos.
outras coisas?
15 a 20
45 minutos
minutos.
a 1 hora.
1 hora.
Nmero de
1.
1 a 3.
1 a 3.
1 a 3.
1 a 3.
testes
ORAMENTO: (13 testes X 3 usurios por teste) X $100 por usurio = $3900
5 minutos por
pgina.
1 por pgina.
TESTE ENTENDI.
Mostrar o site e verificar se entendem seu propsito, proposta de valor, organizao,
funcionamento, etc.
TESTE TAREFAS-CHAVE.
Pede-se ao usurio que execute uma tarefa e observa-se como ele se sai nela. Obtm-se
melhores resultados quando o usurio participa da escolha. Por exemplo, Encontre um
livro que voc queira comprar, ou um livro que voc comprou recentemente.
TESTE DO CUBCULO
Sempre que desenvolver uma nova pgina, imprima-a e mostre pessoa que trabalha no
cubculo ao lado e veja se ela pode interpret-la.
CAPTULO 10 testes de navegabilidade: o filme
Como conduzir um teste.
O QUE FAZER SE FOR O ORIENTADOR
1. primeiro, faa voc mesmo o teste;
2. Ajude os participantes;
3. Tenha empatia;
4. tente ver os bales de pensamento se formando sobre suas cabeas;
5. No d dicas sobre o que eles devem fazer;
6. Mantenha suas instrues simples;
7. Pesquise, pesquise, pesquise;
8. No tenha medo de improvisar;
9. No fique desapontado se um usurio se mostrar inexperiente ou totalmente
confuso;
10. Faa anotaes ao final de cada sesso.
O QUE FAZER SE ESTIVER OBSERVANDO
Oua, olhe com ateno, mantenha a mente aberta e faa anotaes. O que voc procura :
1. Eles entendem?
2. Conseguem encontrar o caminho?
3. Tapas na testa;
4. Colapsos;
5. Inspirao;
6. Paixo.
Mantenha em mente:
1. Contenha-se;
2. No entre em pnico;
3. Fique quieto;
4. Lembre-se que voc est se baseando em um grfico;
5. Lembre-se que voc est vendo o melhor comportamento deles;
6. Preste mais ateno s aes e explicaes do que s opinies.
RELATANDO O QUE VIU
Escreva, o mais rpido possvel, uma lista dos principais problemas verificados e possveis
solues. melhor que no passe de duas pginas, para que os outros membros da equipe
possam ler rapidamente.
CAPTULO 11 Em time que est ganhando no se mexe
EXAMINE OS RESULTADOS IMEDIATAMENTE
Aps os testes, mantenha uma reunio para o exame dos relatrios e decises. Distribua
cpias das telas ou esboos apresentados, e dos relatrios. Classifique os problemas e
defina quais devem ser resolvidos. Descubra como resolv-los.
As coisas importantes descobertas nos testes fazem sentido. E tendem a ser bvias para
todos que assistem s reunies.
A equipe no precisa chegar uma soluo perfeita, pois este um processo cclico.
ESTE CASAMENTO PODE SER SALVO?
1. Considere primeiros os ajustes;
2. Evidencie pontos especficos;
3. Ajuste, mas verifique.
Por outro lado:
1. Se o problema for grave, encare-o com unhas e dentes;
2. Lembre-se: nem sempre tarde demais para opor-se a pretenses iniciais.
PROBLEMAS TPICOS.
1. Os usurios esto confusos;
2. As palavras que eles procuram no esto l;
3. H muita coisa ao mesmo tempo.
ALGUMAS DIRETRIZES NA CLASSIFICAO.
1. Ignore problemas tipo caiaque;
2. Resista ao impulso de adicionar coisas;
3. Encare os pedidos de novos recursos cuidadosamente;
4. Colha a fruta mais baixa: