@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 suas diferenças
e prever suas particularidades na programação.
@RafaelForte
#VTEXDay
Mas e que acontecequando os devices entraramcom 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 devices e, principalmente, crie um layout que tire o máximo possível do CSS, deixando as imagens preferencialmente para banners e produtos.
@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 aoalcance dos olhos
Detalhes naponta dos dedos
@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.
@RafaelForte
#VTEXDay
MinimalismoResponsividade
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
Scroll infinito
Filtros expandidos
Simplicidade noscomandos
@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.
@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 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.
@RafaelForte
#VTEXDay
@RafaelForte
#VTEXDay
RAFAEL FORTE
Sócio e Diretor de Serviços e Consultoria na VTEX
@RafaelForte
www.slideshare.net/RafaelForte