Introdução básica de usabilidade, visando sistemas Web. Apresentação realizada na empresa Mobiltec.

1. Não me faça pensar

2. Aprenda!

3. Aprenda!
•O usuário não é BURRO!

4. Aprenda!
•O usuário não é BURRO!
•VOCÊque não sabe dizer o que ele tem que fazer!

5. Quem é a tal usabilidade ou aquela UX??
•Usabilidade: É a facilidade com que se emprega uma ferramenta ou objeto, a fim de realizar uma tarefa específica e importante.
•UserExperience: Envolve os sentimentos de uma pessoa em relação à utilização de um determinado produto, sistema ou serviço.

6. Um mundo além do código

7. Conceitos básicos
•Nada importante deve estar a mais de doiscliques de distância;
•Fale a língua do usuário;
•E a principal lei: NÃO ME FAÇA PENSAR.

8. Não me faça pensar??
•O usuário não pode perder nenhum segundo pensando na ação que ele deve fazer.
•O usuário deve ser capaz de entender o que é e como usar sem desprender esforço.

9. Não me faça pensar??

10. Formato de Leitura de página

11. Estudos dizem:

12. Não lemos as páginas

13. Crie uma arquitetura visual clara

14. Crie uma arquitetura visual clara

15. Faça o obvio!

16. Faça o obvio! (Exemplo)

17. Estrutura planejada

18. Deixe claro onde o usuário está!

19. Deixe claro onde o usuário está!

20. Migalhas de Pão

21. Arquitetura de Informação
•Errado
•Correto

22. Teste A/B
•Como funciona:
•Resultados:

23. Usuário prefere não ler, imagens podem falar por você

24. Não de a chance do usuário desistir

25. Faça o simples, faça ele agir por impulso

26. Faça o simples, faça ele agir por impulso

27. A cada campo você corre o risco de perder uma conversão

28. Não tire a ação do usuário

29. E eu desenvolvedor no que preciso pensar?

30. E eu desenvolvedor no que preciso pensar?

31. Facilite a vida do usuário

32. Tempo de resposta

33. Renderizandona Web e no Mobile

34. Front-end, dicas rápidas!
•HTML
Planeje a estrutura, não sai fazendo divde qualquer jeito;
Cuidado espaço em branco também aumenta o KB.
•JavaScript
Carregue no final da página;
Minifique.
•CSS
Simplifique coletores;
Minifique.

35. Estilos no topo, scripts no rodapé

36. Usa HTML5? Experimente o async!
<script src="example.js"></script>
A página aguarda o script terminar de carregar antes de continuar sua renderizaçãoe sua execução é feita imediatamente após
<script asyncsrc="example.js"></script>
O download do script é feito de forma assíncrona enquanto o processo de renderizaçãoda página continua a ser feito.

37. Combine vários arquivos cssem um só
Outra boa prática para organização e manutenção é separar seu estilo em diversos arquivos.
<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">
Porém, é preciso realizar uma requisição HTTP para cada um dos arquivos e sabemos que o navegador não consegue lidar com muitos downloads paralelos.
<link rel="stylesheet" href="main.css" media="all">

38. Use csssprites
Gzip
•Comprime os dados no servidor antes de enviar via rede para o navegador do usuário, que descomprime na hora que recebe. É como zipar um arquivo antes de mandar pra alguém, o tamanho final fica bem menor.

39. Referência Front-end

40. gtmetrix.com / yslow.org

41. Obrigado!