@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