WebDesign



Eu uso, Tu usas, Nós usamos..
WebDesign | Usabilidade
Conceito de usabilidade

É a facilidade de uso que as pessoas podem
empregar uma ferramenta ou objeto a fim de
realizar uma tarefa específica.
WebDesign | Usabilidade
Porque usabilidade é importante?
WebDesign | Usabilidade
Porque usabilidade é importante?

Se um site for dificil de usar, o usuário sai.

Se a homepage não for clara o suficiente
para mostrar o que a empresa oferece e o
que é possível fazer, o usuário também sai.

Se o usuário perder, ele sai.

Se demorar pra carregar, e definitivamente sai.
WebDesign | Usabilidade
O que devemos considerar?

1.   Objetivos do website.
2.   Estudar o inimigo: visitar os sites concorrentes.
3.   Estudar os usuários através de seu comportamento.
WebDesign | Usabilidade

"Um erro nos sites e intranets é estruturar
a informação baseado em como a
empresa enxerga sua informação."

                        Jacob Nielsen (2004)
WebDesign | Usabilidade
Mas como o usuário pensa?

Os hábitos dos usuários não são muito diferentes dos
hábitos de um consumidor numa loja ou supermercado.

Dão uma olhada geral em cada página e clicam no
primeiro link ou imagem que capture seu interesse ou que
se pareça com o que está procurando.
WebDesign | Usabilidade
Mas como o usuário pensa? (cont.)

De fato, boa parte da página não é nem vista.

A maioria dos usuários procura algo interessante ou útil
para clicar. Assim que encontra algo promissor, ele clica.

Se o resultado não supere sua expectativa, ele volta e
continua procurando e sai.
WebDesign | Usabilidade




                Heat map do Google
WebDesign | Usabilidade
Nossas metas.

O usuário tem que conseguir usar.
O usuário tem que querer voltar a usar.
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
4.   Destaque os recursos e benefícios
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
4.   Destaque os recursos e benefícios
5.   Faça uso de texto objetivo
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
4.   Destaque os recursos e benefícios
5.   Faça uso de texto objetivo
6.   Valorize e priorize a simplicidade
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
4.   Destaque os recursos e benefícios
5.   Faça uso de texto objetivo
6.   Valorize e priorize a simplicidade
7.   Não tenha medo de espaços brancos
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
4.   Destaque os recursos e benefícios
5.   Faça uso de texto objetivo
6.   Valorize e priorize a simplicidade
7.   Não tenha medo de espaços brancos
8.   Comunique-se com "linguagem visual"
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

1.   Não faça o usuário pensar
2.   Não abuse da paciência do usuário
3.   Mantenha o foco de atenção do usuário
4.   Destaque os recursos e benefícios
5.   Faça uso de texto objetivo
6.   Valorize e priorize a simplicidade
7.   Não tenha medo de espaços brancos
8.   Comunique-se com "linguagem visual"
9.   Convenções são nossas amigas
WebDesign | Usabilidade
Os 10 princípios básicos de usabilidade:

 1.   Não faça o usuário pensar
 2.   Não abuse da paciência do usuário
 3.   Mantenha o foco de atenção do usuário
 4.   Destaque os recursos e benefícios
 5.   Faça uso de texto objetivo
 6.   Valorize e priorize a simplicidade
 7.   Não tenha medo de espaços brancos
 8.   Comunique-se com "linguagem visual"
 9.   Convenções são nossas amigas
10.   Teste sempre. Antes, durante e depois.
WebDesign | Usabilidade
Sobre convenções...

Diante da pesquisa com os sites de objetivos/conteúdos
similares é bom identificar as convenções de interação a
fim de aproveitar o modelo mental criado por elas para
beneficiar a curva de aprendizado do usuário.
WebDesign | Usabilidade
WebDesign | Usabilidade
WebDesign | Usabilidade
WebDesign | Usabilidade
WebDesign | Usabilidade
Você sabia que...

A maioria das pessoas só pode memorizar de 4 a 7
pequenos fragmentos diferentes de informação na
memória a curto prazo.
WebDesign | Usabilidade
Você sabia que...

A maioria das pessoas só pode memorizar de 4 a 7
pequenos fragmentos diferentes de informação na
memória a curto prazo.

Tá. Há espécies de peixes que sua
memória só dura 5 segundos. E daí?
WebDesign | Usabilidade
Você sabia que...

A maioria das pessoas só pode memorizar de 4 a 7
pequenos fragmentos diferentes de informação na
memória a curto prazo.

Sendo assim, organização é fundamental.
Converse com as pessoas que formam seu público alvo e
coloque os itens de serviço que elas mais desejam nos
lugares de maior destaque da sua tela.
WebDesign | Usabilidade
Boas práticas que você deve ter em mente

1.   Não use janelas popup ou frames
2.   Não mude o tamanho da janela do usuário
3.   Garanta legibilidade e não use fontes muito pequenas
4.   Use links curtos, claros, objetivos e URL amigáveis
5.   Não tenha links mortos ou sem saída
6.   Procure ter apenas uma animação por página (ou não ter)
7.   Empregue imagens para apoio ao conteúdo e não para
     decoração apenas
8.   Evite a necessidade de plugins principalmente para navegar
9.   Evite links abrindo novas janelas (quando estiver transitando
     em um contexto semântico).
WebDesign | Usabilidade

            Usuários felizes =
WebDesign | Usabilidade

 Usuários felizes = Websites de sucesso.
WebDesign | Usabilidade




                 That's all folks!

Web Design > Usabilidade

  • 1.
    WebDesign Eu uso, Tuusas, Nós usamos..
  • 2.
    WebDesign | Usabilidade Conceitode usabilidade É a facilidade de uso que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica.
  • 3.
    WebDesign | Usabilidade Porqueusabilidade é importante?
  • 4.
    WebDesign | Usabilidade Porqueusabilidade é importante? Se um site for dificil de usar, o usuário sai. Se a homepage não for clara o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário também sai. Se o usuário perder, ele sai. Se demorar pra carregar, e definitivamente sai.
  • 5.
    WebDesign | Usabilidade Oque devemos considerar? 1. Objetivos do website. 2. Estudar o inimigo: visitar os sites concorrentes. 3. Estudar os usuários através de seu comportamento.
  • 6.
    WebDesign | Usabilidade "Umerro nos sites e intranets é estruturar a informação baseado em como a empresa enxerga sua informação." Jacob Nielsen (2004)
  • 7.
    WebDesign | Usabilidade Mascomo o usuário pensa? Os hábitos dos usuários não são muito diferentes dos hábitos de um consumidor numa loja ou supermercado. Dão uma olhada geral em cada página e clicam no primeiro link ou imagem que capture seu interesse ou que se pareça com o que está procurando.
  • 8.
    WebDesign | Usabilidade Mascomo o usuário pensa? (cont.) De fato, boa parte da página não é nem vista. A maioria dos usuários procura algo interessante ou útil para clicar. Assim que encontra algo promissor, ele clica. Se o resultado não supere sua expectativa, ele volta e continua procurando e sai.
  • 9.
    WebDesign | Usabilidade Heat map do Google
  • 10.
    WebDesign | Usabilidade Nossasmetas. O usuário tem que conseguir usar. O usuário tem que querer voltar a usar.
  • 11.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar
  • 12.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário
  • 13.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário
  • 14.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios
  • 15.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios 5. Faça uso de texto objetivo
  • 16.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios 5. Faça uso de texto objetivo 6. Valorize e priorize a simplicidade
  • 17.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios 5. Faça uso de texto objetivo 6. Valorize e priorize a simplicidade 7. Não tenha medo de espaços brancos
  • 18.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios 5. Faça uso de texto objetivo 6. Valorize e priorize a simplicidade 7. Não tenha medo de espaços brancos 8. Comunique-se com "linguagem visual"
  • 19.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios 5. Faça uso de texto objetivo 6. Valorize e priorize a simplicidade 7. Não tenha medo de espaços brancos 8. Comunique-se com "linguagem visual" 9. Convenções são nossas amigas
  • 20.
    WebDesign | Usabilidade Os10 princípios básicos de usabilidade: 1. Não faça o usuário pensar 2. Não abuse da paciência do usuário 3. Mantenha o foco de atenção do usuário 4. Destaque os recursos e benefícios 5. Faça uso de texto objetivo 6. Valorize e priorize a simplicidade 7. Não tenha medo de espaços brancos 8. Comunique-se com "linguagem visual" 9. Convenções são nossas amigas 10. Teste sempre. Antes, durante e depois.
  • 21.
    WebDesign | Usabilidade Sobreconvenções... Diante da pesquisa com os sites de objetivos/conteúdos similares é bom identificar as convenções de interação a fim de aproveitar o modelo mental criado por elas para beneficiar a curva de aprendizado do usuário.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
    WebDesign | Usabilidade Vocêsabia que... A maioria das pessoas só pode memorizar de 4 a 7 pequenos fragmentos diferentes de informação na memória a curto prazo.
  • 27.
    WebDesign | Usabilidade Vocêsabia que... A maioria das pessoas só pode memorizar de 4 a 7 pequenos fragmentos diferentes de informação na memória a curto prazo. Tá. Há espécies de peixes que sua memória só dura 5 segundos. E daí?
  • 28.
    WebDesign | Usabilidade Vocêsabia que... A maioria das pessoas só pode memorizar de 4 a 7 pequenos fragmentos diferentes de informação na memória a curto prazo. Sendo assim, organização é fundamental. Converse com as pessoas que formam seu público alvo e coloque os itens de serviço que elas mais desejam nos lugares de maior destaque da sua tela.
  • 29.
    WebDesign | Usabilidade Boaspráticas que você deve ter em mente 1. Não use janelas popup ou frames 2. Não mude o tamanho da janela do usuário 3. Garanta legibilidade e não use fontes muito pequenas 4. Use links curtos, claros, objetivos e URL amigáveis 5. Não tenha links mortos ou sem saída 6. Procure ter apenas uma animação por página (ou não ter) 7. Empregue imagens para apoio ao conteúdo e não para decoração apenas 8. Evite a necessidade de plugins principalmente para navegar 9. Evite links abrindo novas janelas (quando estiver transitando em um contexto semântico).
  • 30.
    WebDesign | Usabilidade Usuários felizes =
  • 31.
    WebDesign | Usabilidade Usuários felizes = Websites de sucesso.
  • 32.
    WebDesign | Usabilidade That's all folks!