I can’t believe it’s not ‘Native’
UX with Progressive Web Apps
@wmitrut
Wellington Mitrut
Slide 3
Slide 3 text
Wellington Mitrut
UI Engineer
Co-Organizador @ GDG Cascavel
Instrutor @
Blogueiro e Podcaster
Figurante na série Vikings
Open Culture
Cerveja
Gatos
Slide 4
Slide 4 text
Princípios gerais de UX
Nosso foco hoje
UX para web &
mobile
Slide 5
Slide 5 text
+5B Dispositivos conectados
The Verge - http://bit.ly/2y7zbiA
Slide 6
Slide 6 text
+2B
Dispositivos conectados
The Verge - http://bit.ly/2y7zbiA
Slide 7
Slide 7 text
Por que a web ainda não tem
uma experiência legal no
mobile?
Slide 8
Slide 8 text
90’s and
early 00’s
web dev
Slide 9
Slide 9 text
90’s and
early 00’s
web dev
Millenials,
esse é o
McGyver
Slide 10
Slide 10 text
3 Pontos críticos
que causam essa
sensação.
Slide 11
Slide 11 text
Sites não são
reativos
Slide 12
Slide 12 text
Sites não tem
comportamento
previsível
Slide 13
Slide 13 text
O usuário não
está no
controle da
situação
Slide 14
Slide 14 text
O que então pode ser
feito para melhorar a
experiência da web no
mobile?
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Progressive Web Apps
Experiências na web de alta performance.
Slide 18
Slide 18 text
Os PWAs são um conjunto de
técnicas para desenvolver
aplicações web, adicionando
progressivamente funcionalidades
que antes só eram possíveis em
apps nativos.
Slide 19
Slide 19 text
3 Princípios
críticos para uma
boa UX com PWAs.
Slide 20
Slide 20 text
REATIVIDADE
PREVISIBILDADE
USUÁRIO NO CONTROLE
Slide 21
Slide 21 text
REATIVIDADE
PREVISIBILDADE
USUÁRIO NO CONTROLE
Slide 22
Slide 22 text
REATIVIDADE
A percepção humana de tempo é
fluida, e pode ser manipulada
de maneira proposital e
produtiva.
Chris Harrison, Zhiquan Yeo, Scott E.
Hudson
Slide 23
Slide 23 text
Transição
bloqueada
aguardando
pela request
REATIVIDADE
Slide 24
Slide 24 text
Skeleton
screen /
placeholder
REATIVIDADE
Slide 25
Slide 25 text
REATIVIDADE
Slide 26
Slide 26 text
Sem feedback
de toque
REATIVIDADE
Slide 27
Slide 27 text
REATIVIDADE
Slide 28
Slide 28 text
Com feedback
de toque
REATIVIDADE
Slide 29
Slide 29 text
Com feedback
de toque
REATIVIDADE
Slide 30
Slide 30 text
REATIVIDADE
Slide 31
Slide 31 text
REATIVIDADE
Scroll bugado.
Slide 32
Slide 32 text
REATIVIDADE
Use listas
virtualizadas para
melhor performance
Slide 33
Slide 33 text
REATIVIDADE
Use UIs nativas na Web
Slide 34
Slide 34 text
Polymer Ionic
Material Components
React Material UI
REATIVIDADE
Slide 35
Slide 35 text
DEVO diferenciar a minha UI/UX de
acordo com o OS?
REATIVIDADE
Slide 36
Slide 36 text
DEVE
REATIVIDADE
Slide 37
Slide 37 text
DEVE
...É indicado
REATIVIDADE
Slide 38
Slide 38 text
CARGA
COGNITIVA
REATIVIDADE
Slide 39
Slide 39 text
webapp.barcelona.cat
REATIVIDADE
Slide 40
Slide 40 text
IONIC 3+ muda a UI/UX de acordo
com o OS sem precisar de qualquer
outra implementação
REATIVIDADE
Slide 41
Slide 41 text
Performance de Carregamento
Antes Depois
Sessões abandonadas
Site da OLX
REATIVIDADE
PRPL pattern
Service worker
caching
Server side rendering
Gestures
previsíveis
não acontecem
PREVISIBILIDADE
Slide 50
Slide 50 text
Gestures
previsíveis
PREVISIBILIDADE
Slide 51
Slide 51 text
Gestures
confusos (não
ta trocando
de tab)
PREVISIBILIDADE
Slide 52
Slide 52 text
Gestures
claros
PREVISIBILIDADE
Slide 53
Slide 53 text
Navegação
simplificada
PREVISIBILIDADE
Slide 54
Slide 54 text
Blue Flash
PREVISIBILIDADE
Slide 55
Slide 55 text
Sem Blue
Flash
PREVISIBILIDADE
Slide 56
Slide 56 text
REATIVIDADE
PREDITIBILIDADE
USUÁRIO NO CONTROLE
Slide 57
Slide 57 text
Conteúdo ‘pulando’
na tela,
carregamento
instável
USUÁRIO NO CONTROLE
Slide 58
Slide 58 text
Carregamento
estável
Tamanho de
imagens e
elementos
pré-especificados
USUÁRIO NO CONTROLE
Slide 59
Slide 59 text
USUÁRIO NO CONTROLE
Permissão na hora
que carrega a
página
Slide 60
Slide 60 text
Permissões com
contexto
USUÁRIO NO CONTROLE
Slide 61
Slide 61 text
As conversões aumentaram em 76%
alibaba.com
As sessões tiveram um aumento de 100%
forbes.com
Os pageviews cresceram 170%
twitter.com
PWA Stats - http://bit.ly/2w3LxKM