@RafaelForte
#VTEXDay
Como efetivamente fazer uma
versão mobile que aumente conversão
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
Quando a única variável da equação eram os browsers,
era mais fácil aceitar que bastava identificar ...
@RafaelForte
#VTEXDay
Mas e que acontece
quando os devices entraram
com força nessa equação?
@RafaelForte
#VTEXDay
A resposta é responsividade e a proposta,
um único projeto para todo e qualquer dispositivo.
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
“Simplicity is
the ultimate
sophistication.”
1+1=2
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
Planeje e comece simples. Incorpore funcionalidades que sejam compatíveis em todos
os browser e devi...
@RafaelForte
#VTEXDay
Mapeie os recursos compatíveis entre browsers e
devices que você quer atingir preferencialmente.
@RafaelForte
#VTEXDay
Responsividade
Menu Off Canvas
Inside Tags
Carrossel Manual
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
Tudo em uma só rolagem
Toda informação ao
alcance dos olhos
Detalhes na
ponta dos dedos
@RafaelForte
#VTEXDay
Usar o dedo sobre todo o
botão funciona bem, mas
isso cobre a visibilidade.
Usar a ponta do dedo
per...
@RafaelForte
#VTEXDay
Minimalismo
Responsividade
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
Scroll infinito
Filtros expandidos
Simplicidade nos
comandos
@RafaelForte
#VTEXDay
Simplicidade
Call to Action
Info adicional ao alcance
Manter o foco do usuário depende da simplicida...
@RafaelForte
#VTEXDay
Manter o foco do usuário depende da simplicidade
visual e controle total na palma das suas mãos.
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
Lembre-se…
1. Call to action nunca menor 47 pixels.
2. Focar nas informações essenciais para fechame...
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
RAFAEL FORTE
Sócio e Diretor de Serviços e Consultoria na VTEX
@RafaelForte
www.slideshare.net/Rafae...
Próximos SlideShares
Carregando em…5
×

VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão

432 visualizações

Publicada em

x

Publicada em: Internet
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
432
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
7
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão

  1. 1. @RafaelForte #VTEXDay Como efetivamente fazer uma versão mobile que aumente conversão
  2. 2. @RafaelForte #VTEXDay
  3. 3. @RafaelForte #VTEXDay Quando a única variável da equação eram os browsers, era mais fácil aceitar que bastava identificar suas diferenças e prever suas particularidades na programação.
  4. 4. @RafaelForte #VTEXDay Mas e que acontece quando os devices entraram com força nessa equação?
  5. 5. @RafaelForte #VTEXDay A resposta é responsividade e a proposta, um único projeto para todo e qualquer dispositivo.
  6. 6. @RafaelForte #VTEXDay
  7. 7. @RafaelForte #VTEXDay “Simplicity is the ultimate sophistication.”
  8. 8. 1+1=2 @RafaelForte #VTEXDay
  9. 9. @RafaelForte #VTEXDay Planeje e comece simples. Incorpore funcionalidades que sejam compatíveis em todos os browser e devices e, principalmente, crie um layout que tire o máximo possível do CSS, deixando as imagens preferencialmente para banners e produtos.
  10. 10. @RafaelForte #VTEXDay Mapeie os recursos compatíveis entre browsers e devices que você quer atingir preferencialmente.
  11. 11. @RafaelForte #VTEXDay Responsividade Menu Off Canvas Inside Tags Carrossel Manual
  12. 12. @RafaelForte #VTEXDay
  13. 13. @RafaelForte #VTEXDay
  14. 14. @RafaelForte #VTEXDay Tudo em uma só rolagem Toda informação ao alcance dos olhos Detalhes na ponta dos dedos
  15. 15. @RafaelForte #VTEXDay Usar o dedo sobre todo o botão funciona bem, mas isso cobre a visibilidade. Usar a ponta do dedo permite ver o botão, mas frenquentemente o dedo tem de ser reposicionado. Pior ocorre quando vários botões estão muito próximos, sendo acionados acidentalmente e ocasionando ações não intencionais Estudo do MIT diz que o dedo indicados possui de 45 a 57 pixels, em média. Já o polegar, fica em cerca de 72 pixels de largura.
  16. 16. @RafaelForte #VTEXDay Minimalismo Responsividade
  17. 17. @RafaelForte #VTEXDay
  18. 18. @RafaelForte #VTEXDay Scroll infinito Filtros expandidos Simplicidade nos comandos
  19. 19. @RafaelForte #VTEXDay Simplicidade Call to Action Info adicional ao alcance Manter o foco do usuário depende da simplicidade visuale controle total na palma das suas mãos.
  20. 20. @RafaelForte #VTEXDay Manter o foco do usuário depende da simplicidade visual e controle total na palma das suas mãos.
  21. 21. @RafaelForte #VTEXDay
  22. 22. @RafaelForte #VTEXDay Lembre-se… 1. Call to action nunca menor 47 pixels. 2. Focar nas informações essenciais para fechamento de compra. Ocultar as demais. 3. Localizador de lojas físicas. 4. Atenção redobrada ao tamanho das fontes. 5. Atenção a qualidade das imagens. Hoje muitos devices possuem tela de retina. 6. Sempre que houver formulário, atentar para área utilizada pelo teclado. 7. Performance de código. Seu cliente também navega em 3G.
  23. 23. @RafaelForte #VTEXDay
  24. 24. @RafaelForte #VTEXDay RAFAEL FORTE Sócio e Diretor de Serviços e Consultoria na VTEX @RafaelForte www.slideshare.net/RafaelForte

×