SlideShare uma empresa Scribd logo
1 de 79
Web design - Usabilidade - IFBA
 Primeira Lei da Usabilidade de Krug (2005).
 Usuário : - Qual a coisa mais importante
que eu devo fazer se quiser me assegurar
que meu website seja fácil de usar?
 Krug: - “Nada importante deve estar a
menos de dois cliques de distância” ou
“Fale a língua do usuário”, ou “Seja
consistênte”, ou…
Não me Faça
Pensar!
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 Seu objetivo é deixar que cada página
seja clara, de forma que apenas
olhando o usuário comun já saiba o que
é e como usá-la.
 Auto-explicativa.
Web design - Usabilidade - IFBA
 Pessoas perdem tempo usando sites que
as frustam.
 A culpa é minha e não do site.
 Site díficil de encontrar, não quero
começar de novo.
 Já esperei dez minutos por esse ônibus,
posso esperar um pouco mais.
 Tornar as coisas mais claras é como ter
boa iluminação.
 Usar um site que nos faça pensar em
coisas sem importância, tende a sugar
energia, esforço e tempo.
Web design - Usabilidade - IFBA
 Usuário passam rapidamente pelas
páginas;
 Buscam o que lhe interessam;
 Existem grandes áreas que eles nem
olham;
Web design - Usabilidade - IFBA
 #Fato1
› Nós não lemos as páginas, damos uma
olhada nelas.
 #Fato2
› Não fazemos escolhas ideias. Fazemos o
que é suficiente.
 #Fato3
› Não descobrimos como as coisas. Nós
apenas atingimos nosso objetivo.
 Por que apenas damos uma olhada nas
páginas:
› Geralmente estamos com pressa.
› Sabemos que não precisamos ler tudo.
› Somos bons nisso.
Web design - Usabilidade - IFBA
 Tendemos a focar as palavras e
expressões que se parecem com:
› A) A tarefa que estamos executando;
› B) Nossos interesses pessoais atuais;
› C)As palavras que tem algum efeito sobre
nosso sistema nervoso como:
“Grátis”,”Vendas”,”Sexo”;
 Não fazemos escolhas ideias. Fazemos o
que é suficiente.
› Geralmente estamos com pressa. E como
Klein destaca, “Otimizar é difícil e demora
muito. Fazer o que for suficiente é mais
eficiente.”
› Não há uma punição grande para
suposições erradas. Basta clicar no botão
voltar e tentar de novo.
› Ponderar as opções pode não melhorar
nossas chances. Em sites mal projetados não
adianta se esforçar para fazer uma boa
escolha.
› Adivinhar é mais divertido. Dá menos
trabalho do que ponderar as opções e se
você adivinhar, é mais rápido.
 Não descobrimos como as coisas
funcionam. Nós apenas atingimos nosso
objetivo.
› Não é importante para nós. Para a maioria
não importa se entendemos como as coisas
funcionam, desde que possamos usá-las.
› Se encontramos alguma coisa que funciona
ficamos com ela. Assim que encontramos
uma coisa que funcione mesmo que mal,
não tendemos a procurar uma forma
melhor.
Web design - Usabilidade - IFBA
 Há uma chance muito maior que eles
encontrem o que procuram, o que é bom
para eles e para você;
 Há uma chance que eles entedam o que o
site tem a oferecer, não apenas partes
dele.
 Você tem a chance de guiá-los até a
parte do site que você quer que eles
vejam;
 Eles se sentirão mais espertos e com mais
controle quando estiverem usando seu site.
Web design - Usabilidade - IFBA
 Crie uma hierárquia visual clara em
cada página.
 Tire proveito das convenções
 Divida as páginas em áreas claramente
definidas
 Deixe óbvio o que pode ser clicado
 Minimize a confusão
 Páginas que tem hierárquia visual clara
possuem 3 características:
› Quanto mais importante algo, mais
proeminente está.
› Coisas que estejam
relacionadas, logicamente também estão
relacionadas visualmente.
› Coisas são aninhadas para mostrar quais
fazem parte de qual.
 Tópicos mais importantes são maiores,
estão em negrito, com mais espaço,
perto do topo.
 Pode-se mostrar que coisa são
semelhantes agrupadas e exebindo-as
de forma visualmente parecidas.
 Um cabeçalho da seção Livros sobre
computadores, apareceria acima do
titúlo de um determinado livro…
Web design - Usabilidade - IFBA
 Elas são muito úteis: As convenções só se
tornam convenções se funcionarem. Por
exemplo ao ver uma lista de links para
seções de um site em um fundo
colorido, no canto esquerdo da página.
Web design - Usabilidade - IFBA
 Porque não usar?
 Por que usar?
 Quando usar?
 Dividir em áreas claras;
Web design - Usabilidade - IFBA
 Todos os links eram coloridos assim como
os textos;
 O usuário não sabia onde clicar;
Web design - Usabilidade - IFBA
 Muito o que fazer, tudo na página
chama a atenção, você não sabe pra
onde seguir, muitas cores brilhantes,
muitas informações…
 Confusão de segundo plano, algumas
páginas são como estar em uma festa,
nenhuma fonte de barulho é alta
suficiente para distraí-lo, mas há muitas
fontes de barulho que nos cansam…
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 Projetistas web e profissionais gastam
muito tempo debatendo quanto vezes
você pode esperar que os usuários
cliquem para obter que querem sem
ficar muito frustrados.
 De modo geral, os usuários não se
incomodam com muitos cliques, desde
que cada um não de trabalho e que
eles não percam a confiança de estar
no caminho certo.
 Qualquer coisa que não seja uma
planta ou animal será um “mineral”.
 Infelizmente as escolhas da web, não
são tão claras assim.
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 “A escrita robusta é concisa. Uma frase
não deve conter palavras
desnecessárias e um parágrafo não
deve ter frases desnecessárias pelo
mesmo motivo pelo qual um desenho
não deve ter linhas desnecessárias e
uma máquina não deve ter peças
desnecessárias” (Allyn e Bacon, 1979).
 III Lei de Krug – Livre-se de metade das
palavras de cada página e depois de
metade das que restaram.
 Reduz o nível de confusão da página;
 Destaca mais o conteúdo útil;
 Deixa as páginas menores, permitindo
aos usuários verem mais de cada
página com um olhar sem precisar rolá-
la.
 Papo bobo é o texto introdutório que
deve nos dar boas vindas ao site e nos
contar o quão maravilhoso ele é…
 Teste infalível para descobrir o que é
papo bobo:
› Enquanto estiver lendo, escutará uma voz
na sua cabeça dizendo: Blá, blá, blá, blá…
 “Papo bobo” é como papo furado –
sem conteúdo, basicamente apenas
uma forma de ser sociável. Porém a
maioria dos usuários web não tem
tempo para papo furado; eles querem ir
direto ao que interessa.
 Elimine tanto “papo bobo”, quanto
possível.
 Outra fonte de palavras desnecessárias
são as instruções.
 Ninguém irá ler as instruções;
 Instruções confusas;
 Elimine as instruções tornando tudo
auto-explicativo, ou tanto quanto
possível.
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 Imagine o seguinte: É sábado à tarde e
você está indo ao shopping comprar
uma serra.
 Enquanto passa pela porta da
Sears, fica pensando “Hm. Onde eles
colocam as serras?” Assim que entra
começa a procurar pelos nomes dos
departamentos no alto das paredes
 “Hm”, você pensa. “Ferramentas? Ou
gramado e jardim”? Dado que a Sears
também é bastante orientada a
ferramentas, você vai na direção das
ferramentas.
 Quando chega no departamento de
Ferramentas, começa a procurar as
placas no final de cada corredor.
 Quando você acha que chegou no
corredor certo, começa a procurar os
produtos individuais.
 Se descobrir que sua suposição estava
incorreta, tenta outro corredor ou pode
ainda voltar e começar de novo no
departamento de Gramados e Jardins.
Quando tiver terminado, o processo se
parece com este:
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 Você geralmente está tentando
encontrar algo. No mundo “real”,
poderia ser a sala de emergência ou
uma lata de feijões. Na web, poderia ser
o dvd, ou o nome de algum ator
famoso.
 Você decide se pergunta ou procura
primeiro. A diferença é que em um web
site não há uma pessoa parada à qual
você possa perguntar onde as coisas
estão. O equivalente na Web a
solicitação de informações é a busca.
Web design - Usabilidade - IFBA
 Usuários dominados pelas pesquisas;
 Usuários dominados por links;
 Se você decidir navegar, ande pela
hierárquia usando os sinais para lhe
guiar.
 Aí você escolherá um item da lista.
 Com alguma sorte, após mais um clique
ou dois você acabará com uma lista do
tipo de coisa que estiver procurando:
 Se você não conseguir encontrar o que
estiver procurando, acabará indo
embora.
Web design - Usabilidade - IFBA

Mais conteúdo relacionado

Semelhante a Web design - Usabilidade - IFBA

Dicas para montar um blog
Dicas para montar um blogDicas para montar um blog
Dicas para montar um blogLuanaPaulinha
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internetJoel Silva
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internetJoel Silva
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internetJoel Silva
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internetJoel Silva
 
Blog de-sucesso
Blog de-sucessoBlog de-sucesso
Blog de-sucessohdhinode
 
Teorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digitalTeorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digitalRoberto Gaspar
 
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...Pedro Cordier
 
Pesquisa na Internet
Pesquisa na InternetPesquisa na Internet
Pesquisa na InternetRosi Vizentim
 
8 dicas para quem quer começar um blog.
8 dicas para quem quer começar um blog.8 dicas para quem quer começar um blog.
8 dicas para quem quer começar um blog.8D Propaganda
 
A arte da nao conformidade chris guillebeau
A arte da nao conformidade   chris guillebeauA arte da nao conformidade   chris guillebeau
A arte da nao conformidade chris guillebeauValber Teixeira
 
Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...
Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...
Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...Bruno Canato
 
Freelancer Lifestyle no WDS 2015
Freelancer Lifestyle no WDS 2015Freelancer Lifestyle no WDS 2015
Freelancer Lifestyle no WDS 2015Henrique Bastos
 
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensarTrabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensarRafael Berto
 
Como escrever bem para blog
Como escrever bem para blogComo escrever bem para blog
Como escrever bem para blogKarlahayde
 
Conteudos memoraveis-e book-titulos-impossiveis-de-serem-ignorados
Conteudos memoraveis-e book-titulos-impossiveis-de-serem-ignoradosConteudos memoraveis-e book-titulos-impossiveis-de-serem-ignorados
Conteudos memoraveis-e book-titulos-impossiveis-de-serem-ignoradosDavid Almeida
 
Como aumentar o tráfego de seu blog
Como aumentar o tráfego de seu blogComo aumentar o tráfego de seu blog
Como aumentar o tráfego de seu blogDucs Amsterdam
 

Semelhante a Web design - Usabilidade - IFBA (20)

Dicas para montar um blog
Dicas para montar um blogDicas para montar um blog
Dicas para montar um blog
 
Como Descobrir Sua Paixão
Como Descobrir Sua PaixãoComo Descobrir Sua Paixão
Como Descobrir Sua Paixão
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internet
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internet
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internet
 
Estudos os perigos da internet
Estudos  os perigos da internetEstudos  os perigos da internet
Estudos os perigos da internet
 
Blog de-sucesso
Blog de-sucessoBlog de-sucesso
Blog de-sucesso
 
Teorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digitalTeorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digital
 
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
 
e-criar
e-criare-criar
e-criar
 
Pesquisa na Internet
Pesquisa na InternetPesquisa na Internet
Pesquisa na Internet
 
659 html
659 html659 html
659 html
 
8 dicas para quem quer começar um blog.
8 dicas para quem quer começar um blog.8 dicas para quem quer começar um blog.
8 dicas para quem quer começar um blog.
 
A arte da nao conformidade chris guillebeau
A arte da nao conformidade   chris guillebeauA arte da nao conformidade   chris guillebeau
A arte da nao conformidade chris guillebeau
 
Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...
Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...
Arquitetura de informação, sistemas de recuperação e pequenos ecossistemas de...
 
Freelancer Lifestyle no WDS 2015
Freelancer Lifestyle no WDS 2015Freelancer Lifestyle no WDS 2015
Freelancer Lifestyle no WDS 2015
 
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensarTrabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
 
Como escrever bem para blog
Como escrever bem para blogComo escrever bem para blog
Como escrever bem para blog
 
Conteudos memoraveis-e book-titulos-impossiveis-de-serem-ignorados
Conteudos memoraveis-e book-titulos-impossiveis-de-serem-ignoradosConteudos memoraveis-e book-titulos-impossiveis-de-serem-ignorados
Conteudos memoraveis-e book-titulos-impossiveis-de-serem-ignorados
 
Como aumentar o tráfego de seu blog
Como aumentar o tráfego de seu blogComo aumentar o tráfego de seu blog
Como aumentar o tráfego de seu blog
 

Web design - Usabilidade - IFBA

  • 2.  Primeira Lei da Usabilidade de Krug (2005).  Usuário : - Qual a coisa mais importante que eu devo fazer se quiser me assegurar que meu website seja fácil de usar?  Krug: - “Nada importante deve estar a menos de dois cliques de distância” ou “Fale a língua do usuário”, ou “Seja consistênte”, ou…
  • 10.  Seu objetivo é deixar que cada página seja clara, de forma que apenas olhando o usuário comun já saiba o que é e como usá-la.  Auto-explicativa.
  • 12.  Pessoas perdem tempo usando sites que as frustam.  A culpa é minha e não do site.  Site díficil de encontrar, não quero começar de novo.  Já esperei dez minutos por esse ônibus, posso esperar um pouco mais.
  • 13.  Tornar as coisas mais claras é como ter boa iluminação.  Usar um site que nos faça pensar em coisas sem importância, tende a sugar energia, esforço e tempo.
  • 15.  Usuário passam rapidamente pelas páginas;  Buscam o que lhe interessam;  Existem grandes áreas que eles nem olham;
  • 17.  #Fato1 › Nós não lemos as páginas, damos uma olhada nelas.  #Fato2 › Não fazemos escolhas ideias. Fazemos o que é suficiente.  #Fato3 › Não descobrimos como as coisas. Nós apenas atingimos nosso objetivo.
  • 18.  Por que apenas damos uma olhada nas páginas: › Geralmente estamos com pressa. › Sabemos que não precisamos ler tudo. › Somos bons nisso.
  • 20.  Tendemos a focar as palavras e expressões que se parecem com: › A) A tarefa que estamos executando; › B) Nossos interesses pessoais atuais; › C)As palavras que tem algum efeito sobre nosso sistema nervoso como: “Grátis”,”Vendas”,”Sexo”;
  • 21.  Não fazemos escolhas ideias. Fazemos o que é suficiente. › Geralmente estamos com pressa. E como Klein destaca, “Otimizar é difícil e demora muito. Fazer o que for suficiente é mais eficiente.” › Não há uma punição grande para suposições erradas. Basta clicar no botão voltar e tentar de novo.
  • 22. › Ponderar as opções pode não melhorar nossas chances. Em sites mal projetados não adianta se esforçar para fazer uma boa escolha. › Adivinhar é mais divertido. Dá menos trabalho do que ponderar as opções e se você adivinhar, é mais rápido.
  • 23.  Não descobrimos como as coisas funcionam. Nós apenas atingimos nosso objetivo. › Não é importante para nós. Para a maioria não importa se entendemos como as coisas funcionam, desde que possamos usá-las. › Se encontramos alguma coisa que funciona ficamos com ela. Assim que encontramos uma coisa que funcione mesmo que mal, não tendemos a procurar uma forma melhor.
  • 25.  Há uma chance muito maior que eles encontrem o que procuram, o que é bom para eles e para você;  Há uma chance que eles entedam o que o site tem a oferecer, não apenas partes dele.  Você tem a chance de guiá-los até a parte do site que você quer que eles vejam;  Eles se sentirão mais espertos e com mais controle quando estiverem usando seu site.
  • 27.  Crie uma hierárquia visual clara em cada página.  Tire proveito das convenções  Divida as páginas em áreas claramente definidas  Deixe óbvio o que pode ser clicado  Minimize a confusão
  • 28.  Páginas que tem hierárquia visual clara possuem 3 características: › Quanto mais importante algo, mais proeminente está. › Coisas que estejam relacionadas, logicamente também estão relacionadas visualmente. › Coisas são aninhadas para mostrar quais fazem parte de qual.
  • 29.  Tópicos mais importantes são maiores, estão em negrito, com mais espaço, perto do topo.
  • 30.  Pode-se mostrar que coisa são semelhantes agrupadas e exebindo-as de forma visualmente parecidas.
  • 31.  Um cabeçalho da seção Livros sobre computadores, apareceria acima do titúlo de um determinado livro…
  • 33.  Elas são muito úteis: As convenções só se tornam convenções se funcionarem. Por exemplo ao ver uma lista de links para seções de um site em um fundo colorido, no canto esquerdo da página.
  • 35.  Porque não usar?  Por que usar?  Quando usar?
  • 36.  Dividir em áreas claras;
  • 38.  Todos os links eram coloridos assim como os textos;  O usuário não sabia onde clicar;
  • 40.  Muito o que fazer, tudo na página chama a atenção, você não sabe pra onde seguir, muitas cores brilhantes, muitas informações…  Confusão de segundo plano, algumas páginas são como estar em uma festa, nenhuma fonte de barulho é alta suficiente para distraí-lo, mas há muitas fontes de barulho que nos cansam…
  • 43.  Projetistas web e profissionais gastam muito tempo debatendo quanto vezes você pode esperar que os usuários cliquem para obter que querem sem ficar muito frustrados.
  • 44.  De modo geral, os usuários não se incomodam com muitos cliques, desde que cada um não de trabalho e que eles não percam a confiança de estar no caminho certo.
  • 45.  Qualquer coisa que não seja uma planta ou animal será um “mineral”.  Infelizmente as escolhas da web, não são tão claras assim.
  • 49.  “A escrita robusta é concisa. Uma frase não deve conter palavras desnecessárias e um parágrafo não deve ter frases desnecessárias pelo mesmo motivo pelo qual um desenho não deve ter linhas desnecessárias e uma máquina não deve ter peças desnecessárias” (Allyn e Bacon, 1979).
  • 50.  III Lei de Krug – Livre-se de metade das palavras de cada página e depois de metade das que restaram.
  • 51.  Reduz o nível de confusão da página;  Destaca mais o conteúdo útil;  Deixa as páginas menores, permitindo aos usuários verem mais de cada página com um olhar sem precisar rolá- la.
  • 52.  Papo bobo é o texto introdutório que deve nos dar boas vindas ao site e nos contar o quão maravilhoso ele é…  Teste infalível para descobrir o que é papo bobo: › Enquanto estiver lendo, escutará uma voz na sua cabeça dizendo: Blá, blá, blá, blá…
  • 53.  “Papo bobo” é como papo furado – sem conteúdo, basicamente apenas uma forma de ser sociável. Porém a maioria dos usuários web não tem tempo para papo furado; eles querem ir direto ao que interessa.  Elimine tanto “papo bobo”, quanto possível.
  • 54.  Outra fonte de palavras desnecessárias são as instruções.  Ninguém irá ler as instruções;  Instruções confusas;
  • 55.  Elimine as instruções tornando tudo auto-explicativo, ou tanto quanto possível.
  • 64.  Imagine o seguinte: É sábado à tarde e você está indo ao shopping comprar uma serra.  Enquanto passa pela porta da Sears, fica pensando “Hm. Onde eles colocam as serras?” Assim que entra começa a procurar pelos nomes dos departamentos no alto das paredes
  • 65.  “Hm”, você pensa. “Ferramentas? Ou gramado e jardim”? Dado que a Sears também é bastante orientada a ferramentas, você vai na direção das ferramentas.
  • 66.  Quando chega no departamento de Ferramentas, começa a procurar as placas no final de cada corredor.
  • 67.  Quando você acha que chegou no corredor certo, começa a procurar os produtos individuais.
  • 68.  Se descobrir que sua suposição estava incorreta, tenta outro corredor ou pode ainda voltar e começar de novo no departamento de Gramados e Jardins. Quando tiver terminado, o processo se parece com este:
  • 71.  Você geralmente está tentando encontrar algo. No mundo “real”, poderia ser a sala de emergência ou uma lata de feijões. Na web, poderia ser o dvd, ou o nome de algum ator famoso.
  • 72.  Você decide se pergunta ou procura primeiro. A diferença é que em um web site não há uma pessoa parada à qual você possa perguntar onde as coisas estão. O equivalente na Web a solicitação de informações é a busca.
  • 74.  Usuários dominados pelas pesquisas;  Usuários dominados por links;
  • 75.  Se você decidir navegar, ande pela hierárquia usando os sinais para lhe guiar.
  • 76.  Aí você escolherá um item da lista.
  • 77.  Com alguma sorte, após mais um clique ou dois você acabará com uma lista do tipo de coisa que estiver procurando:
  • 78.  Se você não conseguir encontrar o que estiver procurando, acabará indo embora.