Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e

864 visualizações

Publicada em

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
864
No SlideShare
0
A partir de incorporações
0
Número de incorporações
22
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e

  1. 1. Sua web app não precisa ser necessariamente mais rápida, mas tem que parecer que é! Alexandre Magno Front in Fortaleza
  2. 2. Quem sou eu Alexandre Magno WebDev Autor - Mobile Web - Bootstrap
 - UX - SVG e Animação + Música + Arduino + Fotografia
  3. 3. Projeto open source github.com/alexanmtz Letrilizar
  4. 4. O que fazemos para otimizar? 02 01 Minificar arquivos — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Gzip dos componentes JSlint e Minifying 02 Ser um Grade A — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Yslow
 Page speed 03 Minimizar 
 requests — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Utilizar recursos mínimos Carregar em paralelo CDN 04 StyleSheet on Top Scripts in the bottom — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Evitar o bloqueamento do carregamento da página JS é bloqueante CSS não https://developer.yahoo.com/performance/rules.html
  5. 5. Otimizar imagens 06 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ Imagens representam no tráfego da internet60% payload
  6. 6. Carregamento progressivo, bom ou mal? 05 http://velocityconf.com/velocityny2014/public/schedule/detail/35658 Mostra algo imediato Frustração
  7. 7. techniques that DON’T physically increase the ability of your app to respond (since device’s connection speed is out of your control) but instead can help to make your app feel faster. How is this possible? Well, the answer is simple: you give your users the illusion of speed and responsiveness — even under a slow connection. — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 13 http://www.sitepoint.com/3-tips-make-application-feel-faster/
  8. 8. 03 http://www.sitepoint.com/3-tips-make-application-feel-faster/ Studies have shown that human beings have a “mental barrier” that means that we perceive events that take more than 100ms as slow. while events under 100ms is felt essentially instantaneous to the user.
  9. 9. 03 E para o usuário? — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Rápido Disponível Responsivo
  10. 10. Fluidez na interação — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Antecipar erros 10 Pontos de falha Tempo de resposta
  11. 11. Sensação de rapidez 15 Pré carregar componentes Menos elementos no DOM Dê uma sensação de página carregada com fluidez Feedback instantâneo Dicas Componentes sob demanda Organização simples Reduzir verificações DNS
  12. 12. Você carregou mesmo Instagram? 04 http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/ ex.
  13. 13. Escalas de tempo da experiência do usuário 08 http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/ tempo - aspectos da usabilidade em diferentes tempos de espera do usuário 10min ————————————————————————————— Visita longa a um site Tempo de um download 1m ————————————————————————————— Espera por vídeos transações bancárias 10s ————————————————————Impaciente Atenção dispersa 1s———————————————————————————-— Navegação Livre O usuário está no controle 0.1s ———————————————————— Percepção
  14. 14. Percepção de uso do usuário no tempo 18 http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/ 10 anos1 ano1 mês1 semana Geralmente verificações semanais como LinkedIn 1 dia Esperar 1 dia assume que há alguma intervenção humana para aprovação Sites de colaboração e B2B podem ter transações que levam um maior tempo Sites que requerem campanhas ou engajamento social Conhecimento profundo de sistemas complexos
 ex: Unix
  15. 15. Quando a Interface é muito rápida — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Tempo de resposta rápido nem sempre é o mais eficiente 17 http://www.nngroup.com/articles/too-fast-ux/ Mudanças muito rápidas na interface podem ser imperceptíveis Mais rápido pode ser também mais difícil
  16. 16. Elementos que mudam automaticamente 04 Exemplo de como mudanças rápidas na interface podem dificultar o entendimento do usuário
 Se um usuário precisa responder a seguinte pergunta: http://www.nngroup.com/articles/auto-forwarding/ teste: A siemens tem ofertas especiais de máquinas de lavar? R: Não vi Resultado: elementos que se auto rotacionam podem irritar o usuário e comprometer a visibilidade ex. Neste caso um accordion que se rotaciona automaticamente. exibindo ofertas, esconde uma informação que poderia ser importante. Não importa o quão rápido ele carregar, ele pode não estar atendendo com uma informação quando o usuário precisa e pode distrair tua atenção
  17. 17. Páginas que carregam muito rápido 04 Exemplo de como um carregamento rápido nem sempre é o mais eficiente e pode frustar o usuário twitter.com Se tentar utilizar a função de Tweet no momento que a página aparece e está carregando não consigo ex.
  18. 18. Como ser eficiente na interface? 12 Elementos Pensar estrategicamente em cada elemento + Botões grandes o suficiente para interagir facilmente + Projetar elementos de interface de acordo com a função que ele desempenha + Atalhos para os usuários mais avançados executarem as tarefas mais rápido + Elementos cada vez mais interativos + Consistência entre ícones + Consistência entre duração de tarefas + Sugerir alternativas de forma inteligente ? $ otimizar carregamento de 8s para 5s aumenta 18% do faturamento
  19. 19. Interações mais eficientes 14 http://www.mobify.com/blog/beginners-guide-to-perceived-performance/ Interações mais eficientes também dão a sensação ao usuário de rapidez Estados definidos de um botão Botões precisam responder imediatamente ao toque e dar a indicação de que algo está acontecendo Animações performáticas Animações não são firulas São elas causadoras do "Wow!" Dialogue com o usuário É necessário também passar uma linguagem acessível ao usuário e que o faça se sentir confortável
  20. 20. Don’t Prioritize Efficiency Over Expectations http://www.nngroup.com/articles/efficiency-vs-expectations/ — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 13 Expectations Are Based on Past Experiences Practice Makes Perfect Respect Mental Models — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Help Users Become Masters — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
  21. 21. In mobile Design there are no intuitive interfaces. There are only interfaces that are familiar, and once familiar they become intuitive. This brings us to the conclusion that the concept of obvious is arbitrary and relative. — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 13 http://www.sitepoint.com/obvious-design-always-wins/ So obvious… — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
  22. 22. Interfaces intuitivas? 06 © Company Name 2015. All Rights Reserved
  23. 23. Uso de app vs mobile web 06 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  24. 24. Uso dos celulares 06 © Company Name 2015. All Rights Reserved Número de usuários Que utilizam o Facebook1,32 bilhões Usam o Facebook somente no celular30% usuários
  25. 25. Fatores indiretos que afetam a perfomance(desktop) 06
  26. 26. Fatores indiretos que afetam a perfomance(mobile) 06 pouco tempo Ocupado menos foco conexão lenta
  27. 27. O que devemos evitar 07 © Company Name 2015. All Rights Reserved Algumas soluções de carregamento, apesar de serem úteis, podem não ser as soluções ideais Spinners Animaçòes demoradas e que travam a interface Barra de progresso não indicada para o contexto Susceptível a falha devido a uma situação adversa
  28. 28. Tripé da Perfomance da interface 16 Feedback instantâneo Conteúdo temporário Não deixe o usuário pensar!
  29. 29. When time is saved—or appears to have been— the complex feels simpler. (The laws of simplicity) — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 13
  30. 30. Obrigado alexandremagno.net alexandremagno.net @alexanmtz

×