![Page 1: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/1.jpg)
Sua web app não precisa ser necessariamente mais rápida, mas tem que parecer que é!Alexandre MagnoFront in Fortaleza
![Page 2: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/2.jpg)
Quem sou euAlexandre MagnoWebDev Autor
- Mobile Web - Bootstrap
- UX
- SVG e Animação
+ Música + Arduino + Fotografia
![Page 3: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/3.jpg)
Projeto open source github.com/alexanmtz Letrilizar
![Page 4: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/4.jpg)
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
![Page 5: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/5.jpg)
Otimizar imagens
06
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Imagens representam
no tráfego da internet60%
payload
![Page 6: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/6.jpg)
Carregamento progressivo, bom ou mal?
05
http://velocityconf.com/velocityny2014/public/schedule/detail/35658
Mostra algo imediato
Frustração
![Page 7: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/7.jpg)
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/
![Page 8: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/8.jpg)
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.
![Page 9: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/9.jpg)
03
E para o usuário?—————————————————————————————————————————————————————————————————————————————
Rápido
Disponível
Responsivo
![Page 10: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/10.jpg)
Fluidez na interação—————————————————————————————————————————————————————————————————————————————
Antecipar erros
10
Pontos de falha
Tempo de resposta
![Page 11: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/11.jpg)
Sensação de rapidez15
Pré carregarcomponentes
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çõesDNS
![Page 12: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/12.jpg)
Você carregou mesmo Instagram?04
http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/
ex.
![Page 13: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/13.jpg)
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
![Page 14: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/14.jpg)
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
1 dia
Esperar 1 dia assume que há
alguma intervenção
humanapara 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
![Page 15: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/15.jpg)
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
![Page 16: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/16.jpg)
Elementos que mudam automaticamente04
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
![Page 17: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/17.jpg)
Páginas que carregam muito rápido04
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.
![Page 18: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/18.jpg)
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
![Page 19: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/19.jpg)
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çõesperformáticasAnimaçõ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
![Page 20: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/20.jpg)
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—————————————————————————————————————————————————————————————————————————————
![Page 21: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/21.jpg)
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…
—————————————————————————————————————————————————————————————————————————————
![Page 22: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/22.jpg)
Interfaces intuitivas?
06
© Company Name 2015. All Rights Reserved
![Page 23: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/23.jpg)
Uso de app vs mobile web
06
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
![Page 24: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/24.jpg)
Uso dos celulares
06
© Company Name 2015. All Rights Reserved
Número de usuáriosQue utilizam o Facebook1,32
bilhões
Usam o Facebook somente no celular30%
usuários
![Page 25: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/25.jpg)
Fatores indiretos que afetam a perfomance(desktop)
06
![Page 26: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/26.jpg)
Fatores indiretos que afetam a perfomance(mobile)
06
pouco tempo
Ocupado
menos foco
conexão lenta
![Page 27: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/27.jpg)
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
![Page 28: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/28.jpg)
Tripé da Perfomance da interface
16
Feedback instantâneo
Conteúdo temporário
Não deixe o usuário pensar!
![Page 29: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/29.jpg)
When time is saved—or appears to have been— the complex feels simpler. (The laws of simplicity)
—————————————————————————————————————————————————————————————————————————————
13
![Page 30: Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e](https://reader031.vdocuments.pub/reader031/viewer/2022020218/55bedfa3bb61eb663e8b47a9/html5/thumbnails/30.jpg)
Obrigado
alexandremagno.net
alexandremagno.net @alexanmtz