Não me faça pensar
1 gostou•336 visualizações
O documento discute a importância da usabilidade e da experiência do usuário na criação de produtos e serviços, enfatizando que o usuário deve ser capaz de agir rapidamente e sem confusão. Sugere boas práticas para o desenvolvimento web, como otimização de carga e estrutura de arquivos, para facilitar a vida do usuário e aumentar a conversão. Os princípios centrais incluem manter a simplicidade, evitar a perda de foco e melhorar a eficiência através de design claro e responsivo.
Não me faça pensar
- 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)
- 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
- 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.
- 41. Obrigado!