Introdução a usabilidade, boas práticas e princípios para uma boa experiência.

1. WebDesign
Eu uso, Tu usas, Nós usamos..

2. 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.

3. WebDesign | Usabilidade
Porque usabilidade é importante?

4. 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.

5. 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.

6. WebDesign | Usabilidade
"Um erro nos sites e intranets é estruturar
a informação baseado em como a
empresa enxerga sua informação."
Jacob Nielsen (2004)

7. 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.

8. 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.

9. WebDesign | Usabilidade
Heat map do Google

10. WebDesign | Usabilidade
Nossas metas.
O usuário tem que conseguir usar.
O usuário tem que querer voltar a usar.

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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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"

19. 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

20. 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.

21. 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.

22. WebDesign | Usabilidade

23. WebDesign | Usabilidade

24. WebDesign | Usabilidade

25. WebDesign | Usabilidade

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
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).

30. WebDesign | Usabilidade
Usuários felizes =

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

32. WebDesign | Usabilidade
That's all folks!