Não me faça pensar
Aprenda!
Aprenda! 
•O usuário não é BURRO!
Aprenda! 
•O usuário não é BURRO! 
•VOCÊque não sabe dizer o que ele tem que fazer!
Quem é a tal usabilidade ou aquela UX?? 
•Usabilidade: É a facilidade com que se emprega uma ferramenta ou objeto, a fim d...
Um mundo além do código
Conceitos básicos 
•Nada importante deve estar a mais de doiscliques de distância; 
•Fale a língua do usuário; 
•E a princ...
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 ...
Não me faça pensar??
Formato de Leitura de página
Estudos dizem:
Não lemos as páginas
Crie uma arquitetura visual clara
Crie uma arquitetura visual clara
Faça o obvio!
Faça o obvio! (Exemplo)
Estrutura planejada
Deixe claro onde o usuário está!
Deixe claro onde o usuário está!
Migalhas de Pão
Arquitetura de Informação 
•Errado 
•Correto
Teste A/B 
•Como funciona: 
•Resultados:
Usuário prefere não ler, imagens podem falar por você
Não de a chance do usuário desistir
Faça o simples, faça ele agir por impulso
Faça o simples, faça ele agir por impulso
A cada campo você corre o risco de perder uma conversão
Não tire a ação do usuário
E eu desenvolvedor no que preciso pensar?
E eu desenvolvedor no que preciso pensar?
Facilite a vida do usuário
Tempo de resposta
Renderizandona Web e no Mobile
Front-end, dicas rápidas! 
•HTML 
Planeje a estrutura, não sai fazendo divde qualquer jeito; 
Cuidado espaço em branco tam...
Estilos no topo, scripts no rodapé
Usa HTML5? Experimente o async! 
<script src="example.js"></script> 
A página aguarda o script terminar de carregar antes ...
Combine vários arquivos cssem um só 
Outra boa prática para organização e manutenção é separar seu estilo em diversos arqu...
Use csssprites 
Gzip 
•Comprime os dados no servidor antes de enviar via rede para o navegador do usuário, que descomprime...
Referência Front-end
gtmetrix.com / yslow.org
Obrigado!
Próximos SlideShares
Carregando em…5
×

Não me faça pensar

280 visualizações

Publicada em

Introdução básica de usabilidade, visando sistemas Web.

Apresentação realizada na empresa Mobiltec.

Publicada em: Internet
  • Seja o primeiro a comentar

Não me faça pensar

  1. 1. Não me faça pensar
  2. 2. Aprenda!
  3. 3. Aprenda! •O usuário não é BURRO!
  4. 4. Aprenda! •O usuário não é BURRO! •VOCÊque não sabe dizer o que ele tem que fazer!
  5. 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. 6. Um mundo além do código
  7. 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. 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. 9. Não me faça pensar??
  10. 10. Formato de Leitura de página
  11. 11. Estudos dizem:
  12. 12. Não lemos as páginas
  13. 13. Crie uma arquitetura visual clara
  14. 14. Crie uma arquitetura visual clara
  15. 15. Faça o obvio!
  16. 16. Faça o obvio! (Exemplo)
  17. 17. Estrutura planejada
  18. 18. Deixe claro onde o usuário está!
  19. 19. Deixe claro onde o usuário está!
  20. 20. Migalhas de Pão
  21. 21. Arquitetura de Informação •Errado •Correto
  22. 22. Teste A/B •Como funciona: •Resultados:
  23. 23. Usuário prefere não ler, imagens podem falar por você
  24. 24. Não de a chance do usuário desistir
  25. 25. Faça o simples, faça ele agir por impulso
  26. 26. Faça o simples, faça ele agir por impulso
  27. 27. A cada campo você corre o risco de perder uma conversão
  28. 28. Não tire a ação do usuário
  29. 29. E eu desenvolvedor no que preciso pensar?
  30. 30. E eu desenvolvedor no que preciso pensar?
  31. 31. Facilite a vida do usuário
  32. 32. Tempo de resposta
  33. 33. Renderizandona Web e no Mobile
  34. 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. 35. Estilos no topo, scripts no rodapé
  36. 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. 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. 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. 39. Referência Front-end
  40. 40. gtmetrix.com / yslow.org
  41. 41. Obrigado!

×