Sua web app não precisa ser necessariamente mais rápida, mas tem que parecer que é!Alexandre MagnoFront in Fortaleza

Quem sou euAlexandre MagnoWebDev Autor

- Mobile Web - Bootstrap

- UX

- SVG e Animação

+ Música + Arduino + Fotografia

Projeto open source github.com/alexanmtz Letrilizar

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

Otimizar imagens

06

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

Imagens representam

no tráfego da internet60%

payload

Carregamento progressivo, bom ou mal?

05

http://velocityconf.com/velocityny2014/public/schedule/detail/35658

Mostra algo imediato

Frustração

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/

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.

03

E para o usuário?—————————————————————————————————————————————————————————————————————————————

Rápido

Disponível

Responsivo

Fluidez na interação—————————————————————————————————————————————————————————————————————————————

Antecipar erros

10

Pontos de falha

Tempo de resposta

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

Você carregou mesmo Instagram?04

http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/

ex.

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

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

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

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

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

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.

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

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

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—————————————————————————————————————————————————————————————————————————————

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…

—————————————————————————————————————————————————————————————————————————————

Interfaces intuitivas?

06

© Company Name 2015. All Rights Reserved

Uso de app vs mobile web

06

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

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

Fatores indiretos que afetam a perfomance(desktop)

06

Fatores indiretos que afetam a perfomance(mobile)

06

pouco tempo

Ocupado

menos foco

conexão lenta

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

Tripé da Perfomance da interface

16

Feedback instantâneo

Conteúdo temporário

Não deixe o usuário pensar!

When time is saved—or appears to have been— the complex feels simpler. (The laws of simplicity)

—————————————————————————————————————————————————————————————————————————————

13

Obrigado

alexandremagno.net

alexandremagno.net @alexanmtz