VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão
-
Upload
rafael-forte -
Category
Internet
-
view
182 -
download
0
description
Transcript of VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão
![Page 1: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/1.jpg)
@RafaelForte
#VTEXDay
Como efetivamente fazer uma
versão mobile que aumente conversão
![Page 2: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/2.jpg)
@RafaelForte
#VTEXDay
![Page 3: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/3.jpg)
@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.
![Page 4: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/4.jpg)
@RafaelForte
#VTEXDay
Mas e que acontecequando os devices entraramcom força nessa equação?
![Page 5: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/5.jpg)
@RafaelForte
#VTEXDay
A resposta é responsividade e a proposta,um único projeto para todo e qualquer dispositivo.
![Page 6: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/6.jpg)
@RafaelForte
#VTEXDay
![Page 7: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/7.jpg)
@RafaelForte
#VTEXDay
“Simplicity is
the ultimate
sophistication.”
![Page 8: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/8.jpg)
1+1=2
@RafaelForte
#VTEXDay
![Page 9: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/9.jpg)
@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.
![Page 10: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/10.jpg)
@RafaelForte
#VTEXDay
Mapeie os recursos compatíveis entre browsers e devices que você quer atingir preferencialmente.
![Page 11: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/11.jpg)
@RafaelForte
#VTEXDay
Responsividade
Menu Off Canvas
Inside Tags
Carrossel Manual
![Page 12: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/12.jpg)
@RafaelForte
#VTEXDay
![Page 13: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/13.jpg)
@RafaelForte
#VTEXDay
![Page 14: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/14.jpg)
@RafaelForte
#VTEXDay
Tudo em uma só rolagem
Toda informação aoalcance dos olhos
Detalhes naponta dos dedos
![Page 15: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/15.jpg)
@RafaelForte
#VTEXDay
Usar o dedo sobre todo o botão funciona bem, mas isso cobre a visibilidade.
Usar a ponta do dedopermite ver o botão, mas frenquentemente o dedotem de ser reposicionado. Pior ocorre quando vários botões
estão muito próximos, sendoacionados acidentalmente e
ocasionando ações não intencionais
Estudo do MIT diz que o dedoindicados possui de 45 a 57 pixels,
em média. Já o polegar, fica em cerca de 72 pixels de largura.
![Page 16: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/16.jpg)
@RafaelForte
#VTEXDay
MinimalismoResponsividade
![Page 17: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/17.jpg)
@RafaelForte
#VTEXDay
![Page 18: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/18.jpg)
@RafaelForte
#VTEXDay
Scroll infinito
Filtros expandidos
Simplicidade noscomandos
![Page 19: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/19.jpg)
@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.
![Page 20: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/20.jpg)
@RafaelForte
#VTEXDay
Manter o foco do usuário depende da simplicidade visual e controle total na palma das suas mãos.
![Page 21: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/21.jpg)
@RafaelForte
#VTEXDay
![Page 22: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/22.jpg)
@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.
![Page 23: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/23.jpg)
@RafaelForte
#VTEXDay
![Page 24: VTEX Day 2014 - Como efetivamente fazer uma versão mobile que aumente conversão](https://reader035.fdocument.pub/reader035/viewer/2022062514/559b35de1a28ab2f638b47d0/html5/thumbnails/24.jpg)
@RafaelForte
#VTEXDay
RAFAEL FORTE
Sócio e Diretor de Serviços e Consultoria na VTEX
@RafaelForte
www.slideshare.net/RafaelForte