Design responsivo para e-commerce

Design responsivo para e-
commerce:
otimização do comércio eletrônico para
compras em diferentes dispositivos
(por FitforCommerce)

Dentro da loja, em casa ou no caminho, consumidores
usam cada vez mais diferentes dispositivos para
descobrir, pesquisar e comprar produtos. Ao acessar um
site de e-commerce pelo computador, pelo smartphone
ou pelo tablet, eles esperam que a experiência seja
simples e conveniente. Para obter sucesso, varejistas e
marcas devem priorizar a otimização da compra em
diferentes dispositivos. Através desse material, iremos
explorar os desafios de satisfazer as expectativas dos
consumidores e examinar como o design responsivo e
outras estratégias podem auxiliar eficientemente na
entrega de uma experiência de compra otimizada em
todos os dispositivos

Introdução
Nós já ouvimos isso antes – a internet, as mídias sociais
e as tecnologias móveis estão mudando o
comportamento do consumidor e impactando
significativamente na maneira como compramos. Mas,
enquanto consumidores abraçam essa nova realidade
das compras, surpreendentemente, muitos varejistas e
fabricantes ainda estão se adaptando (bem devagar)

De acordo com as taxas de crescimento atuais,
as visitas em sites de e-commerce através de
tablets e smartphones deverão representar
50% de todas as visitas de comércio eletrônico
até o final de 2014 (Fonte: MarketLive)

Introdução
• Migrando de forma intercambiável entre canais digitais e
físicos, os consumidores de hoje consultam uma variedade de
dispositivos em diferentes fases do caminho para a compra.
Usando uma combinação de desktops, tablets e smartphones
para descobrir, pesquisar e comprar produtos - tanto no
interior da loja, em casa e em movimento -, os consumidores
esperam que a experiência seja contínua e consistente em
cada ponto de contato
• Isso significa que, em cada ponto de interação, não importa
qual dispositivo seja utilizado, a experiência deve ser
otimizada para o tamanho da tela, display, desempenho e
contexto. Em um ambiente competitivo, não existem muitas
chances para impressionar os consumidores e os varejistas e
as marcas devem, portanto, garantir que a experiência dê
certo na primeira vez, em cada ponto de interação

Introdução
• Alguns varejistas optam por atender a essa nova realidade comercial
operando várias plataformas para entregar experiências consistentes em
desktops, celulares e tablets. Esta abordagem, no entanto, é intensiva em
recursos e consumidora de tempo. Em vez disso, na FitforCommerce,
estamos começando a ver um número crescente de varejistas investir no
design responsivo como uma solução escalável para garantir uma ótima
experiência de compra em todos os pontos de contato do cliente
• Design responsivo, em termos simples, significa que o site foi criado
usando um layout dinâmico, que é automaticamente otimizado para o
dispositivo que o consumidor está usando. O projeto responsivo permite
que os varejistas adequem um site para o desktop e os dispositivos
móveis, preparando-se para o que vem a seguir. Como resultado, em vez
de operar múltiplas plataformas, os lojistas podem usar uma única
plataforma para negociar, personalizar e configurar todos os dispositivos

Introdução
No entanto, as estratégias responsivas bem-sucedidas
são mais do que apenas um design. Uma verdadeira
estratégia de comércio responsivo envolve um
profundo entendimento de como e quando os
consumidores usam diferentes dispositivos durante o
processo da compra e também de como usar essa
informação para responder às expectativas dos clientes
em termos de design, desempenho e contexto

Introdução
Nesse material, iremos explorar os novos
comportamentos de compra dos consumidores e os
desafios encontrados por varejistas e marcas para
atender às novas expectativas dos consumidores.
Examinaremos como remover as barreiras na compra
de forma eficiente através de uma abordagem de
design e comércio responsivo. Fornecendo uma visão
geral do conceito da abordagem responsiva,
avaliaremos os prós e contras do design responsivo e as
estratégias para garantir experiências otimizadas
através do celular, desktop e das interações no interior
da loja

A interrupção do processo de compra
87% dos usuários de smartphones e tablets
usam seu dispositivo móvel para atividades
relacionadas à compra (Fonte: Nielsen)

1. Mudando o comportamento dos
consumidores
• Não há maneira de contornar isso - a nossa forma de fazer compras
hoje é muito diferente da maneira pela qual comprávamos há
apenas alguns anos e provavelmente vai continuar a evoluir nos
próximos anos
• Os avanços tecnológicos mudaram nossos comportamentos em
quase tudo o que fazemos em nossas rotinas, incluindo compras. O
que era um processo linear, hoje pode ser iniciado, pausado e
reiniciado em qualquer ponto de contato, usando uma variedade de
dispositivos e interações de canal

• Enquanto compram, os consumidores utilizam uma combinação de
interações no desktop, nos dispositivos móveis e nas relações
pessoais. Eles usam diferentes dispositivos para buscar inspirações,
procurar produtos, abrir e-mails promocionais, acessar contas
sociais e muito mais. Como eles se movem entre a descoberta e a
fase de pesquisa, eles geralmente viajam alternadamente entre
canais, incluindo lojas físicas e sites de comércio eletrônico, que
eles acessam tanto a partir de computadores, tablets e
smarpthones
• Eles também estão usando, a cada vez mais, múltiplos canais
simultaneamente: por exemplo, no interior da loja, acessando um
site de comércio eletrônico para procurar informações adicionais
através de um dispositivo móvel. Enquanto a compra em lojas
físicas – aliadas a pesquisas em dispositivos móveis – ainda são
mais frequentes, as transações via dispositivos móveis estão em
ascensão e provavelmente se tornarão mais comuns

• Neste mundo multicanal e de muitos dispositivos, os clientes
esperam ser capazes de explorar, pesquisar e comprar
produtos em qualquer lugar, usando os dispositivos que são
mais convenientes para eles a qualquer momento. Mais
importante, eles esperam que a experiência seja contínua e
consistente em todos os pontos de interação, não importa
qual dispositivo esteja sendo usado

Expectativas do consumidor “multi-
dispositivo”/multicanal
• Múltiplos canais de pesquisa antes de comprar
• Opções convenientes de onde e como comprar
• Experiência consistente, independente do canal usado
• Funções específicas de cada dispositivo que realmente
funcionam

2. Remoção de barreiras para a compra
em todos os pontos de contato do
cliente
• Líderes de comércio eletrônico têm focado há anos na
otimização da experiência de compra on-line através de
técnicas de design mais desenvolvidas, layout e conteúdo
fluidos e a implementação de novas funcionalidades, como
comentários de clientes e diversos recursos midiáticos -
todos destinados à remoção de barreiras para a compra,
aumentando as taxas de conversão e criando a fidelização
de clientes em longo prazo
• A crescente influência de diferentes dispositivos durante o
processo de compra resulta em mais oportunidades para
alcançar e engajar consumidores, mas também adiciona
novas complexidades para a otimização geral da
experiência de compra

• Não estamos sugerindo que as organizações devam ignorar o que
eles têm feito, mas isso não significa que eles precisem ampliar seu
foco para entregar uma experiência de compra ideal em todos os
dispositivos. Isso requer um entendimento completo de como os
consumidores usam dispositivos diferentes durante o processo de
compras e no contexto global. Por exemplo, que conteúdo e
características os visitantes estão normalmente consumindo ao
acessar o site a partir de um desktop? E de um smartphone?
• O que funciona em um desktop pode não ser apropriado em um
smartphone e o que funciona em um smartphone pode não
proporcionar uma experiência ideal em um tablet. Os varejistas
precisam examinar suas análises para entender de onde o tráfego é
proveniente e como os clientes estão usando diferentes dispositivos
para interagir com o site

A otimização da experiência de compra em diferentes
dispositivos não deveria ser encarada sem
preocupação. Ela envolve o entendimento de
diferenças específicas, assim como um entendimento
complexo sobre como os consumidores utilizam
diferentes dispositivos durante o caminho de compra
(Fonte: Bernardine Wu, CEO/Founder da
FitForCommerce)

• De acordo com estudos recentes, em média, 23% do
tráfego do site é originado de um dispositivo móvel. Isso
significa que, potencialmente, quase um quarto do público
do e-commerce de varejo deve está em um dispositivo
móvel. Geralmente, a taxa de conversão é muito mais baixa
no mobile: no entanto, outros estudos indicam que 19% ou
mais de todas as compras contam com algum tipo de
influência dos dispositivos móveis
• Mesmo que as conversões de smartphones ainda sejam
mais baixas do que a de outros dispositivos, a taxa de
conversão aumentou 24% no 4º trimestre de 2013, quatro
vezes mais do que o aumento da conversão de desktops
para o mesmo período. Esses percentuais normalmente
aumentam significativamente para varejistas e marcas com
um público mais jovem

A previsão é que esses números cresçam e não é
mais possível ignorá-los. Varejistas e marcas
precisam se adaptar a essa nova realidade do
varejo e considerar o impacto de todos os
dispositivos durante os diferentes estágios do
caminho de compra para assegurar a
otimização geral da experiência de compra

Respondendo ao desafio dos
múltiplos dispositivos
1. Entendendo diferentes dispositivos
Antes de começar uma nova estratégia de otimização entre os
dispositivos, é importante entender as características e
diferenças de cada um. Hoje, os dispositivos mais comuns
usados para compras são desktops, laptops, tablets e
smartphones. Nós já estamos começando a ver phablets (algo
entre telefones e tablets) ganhando mais usuários e existem
muitos murmúrios sobre smart TVs e acessórios, como Google
Glasses e smart watches. Modismos ou feitos para ficar,
varejistas precisam considerar a possibilidade de que novos tipos
de dispositivos continuarão impactando o ambiente das compras

Os diferentes tamanhos de tela e a variedade de
dispositivos disponíveis podem ser opressivos, mas
esse é um desafio que as marcas precisam vencer, mais
cedo ou mais tarde, a fim de se prepararem para os
novos dispositivos que entrarão no processo de compra

Considerações a respeito dos dispositivos
• Tamanho de tela: os tamanhos de tela variam dos maiores monitores
até os menores laptops, tablets e smarthones. Layout e conteúdo
devem estar escalados para se encaixar em dispositivos específicos
• Possibilidade de toque: computadores e laptops geralmente não
possibilitam o toque, porém tablets e smartphones sim. O design e a
fluidez do conteúdo precisam ser planejados com base nesses modelos
opostos
• Portabilidade: o aspecto da portabilidade influenciará principalmente
na maneira com que os consumidores utilizam o dispositivo durante o
processo de compra. Ela deve guiar o conteúdo e as funcionalidades
desenvolvidas para cada dispositivo
Para entender completamente as diferenças em termos da otimização em
dispositivos, é interessante dar uma olhada nas diferenças entre as
versões de um website no desktop e em dispositivos móveis

Priorização de conteúdo
Como os dispositivos móveis são menores que desktops,
as páginas contam com um espaço menor para fornecer
informações em tablets e smartphones, o que significa
que o conteúdo deve ser ajustado para o consumo mais
fácil. Isso requer uma consideração a respeito do caminho
de compras do consumidor e a priorização de conteúdo
de acordo com suas necessidades potenciais. Muitas
vezes, é mais fácil e eficaz adicionar conteúdos e
funcionalidades progressivamente para telas maiores do
que esconder e cortar conteúdo para desatravancar telas
menores (iremos explorar o conceito de "mobile
primeiro" mais tarde)

Layout horizontal x vertical
Páginas em telas de monitores são geralmente
orientadas na horizontal, enquanto smartphones e
tablets podem ser utilizados em posição horizontal ou
vertical. As diferentes opções de orientação precisam
ser consideradas quando se desenvolve a experiência
de compra

Links e botões
Quando designados para múltiplos dispositivos, o
tamanho dos links e botões precisa ser considerado.
Como dispositivos móveis são menores e sensíveis ao
toque, os botões e os links precisam ser maiores e
“amigáveis ao dedo”

Gráficos
A falta de espaço das páginas em dispositivos menores
faz com que, às vezes, gráficos desenvolvidos para sites
no desktop não servirão em sites móveis. Isso ocorre
muitas vezes devido à falta de clareza quando uma
imagem é reduzida e por causa da quantidade de
espaço que ocupa

Hierarquia
Em geral, sites da área de trabalho oferecem várias
opções de navegação, menus hierárquicos e elementos
de página. Para dispositivos móveis, a navegação se
torna mais difícil por causa das limitações de espaço.
Como resultado, um novo desenho do aspecto de
navegação provavelmente será necessário,
assegurando que os usuários possam encontrar
facilmente o que estão procurando

Capacidades dos dispositivos
Smartphones e tablets oferecem funcionalidades
adicionais como localização geográfica, capacitação
para o toque, QR code e outras ferramentas que
podem ser utilizadas para melhorar a experiência
móvel

Opções para sites em múltiplos
dispositivos
Os varejistas e fabricantes abordam o desafio dos múltiplos
dispositivos de maneiras diferentes. Alguns, embora não
muitos, optam por escalar completamente seus sites para
garantir que o conteúdo se encaixe na maioria dos
aparelhos, outros desenvolvem completamente novos sites
dedicados a cada tipo de dispositivo e alguns outros
abraçam o cenário “multi-dispositivo” com ajustes
abrangentes a todo o processo.
Abaixo vamos delinear cada abordagem em mais detalhes:

Tamanho que serve a todos: esse é a mais simples, mas também
a opção menos apropriada para sites de e-commerce.
Basicamente, é criado um site que funciona em computadores e
dispositivos móveis. Normalmente, isso será realizado por
ajustes e dimensionamento do conteúdo e das funcionalidades
de um website existente para torná-lo visível em um dispositivo
móvel. Essa opção só é apropriada para sites extremamente
simples e não é recomendada para sites que incluem quaisquer
capacidades de comércio eletrônico, pois toda a experiência de
compra iria sofrer

Site dedicado aos dispositivos móveis: em resposta ao aumento
da audiência móvel, muitas organizações desenvolveram sites
dedicados aos dispositivos móveis. Essencialmente, isso significa
que existem várias versões do site e os usuários são direcionados
para a versão correta com base no dispositivo que estão usando.
A vantagem dessa abordagem é a capacidade de personalizar
completamente sites para experiências específicas do
dispositivo: no entanto, requer a gestão e manutenção de vários
sites, o que aumenta a carga de trabalho das equipes de
comércio eletrônico, marketing e desenvolvimento

Design responsivo: a última abordagem, e também mais
progressista, é o design responsivo. Com design responsivo, um
único site exibirá automaticamente de forma adequada para
cada dispositivo em que ele é visto. Com design responsivo, um
site pode parecer completamente diferente em cada dispositivo
e o layout é otimizado para cada ambiente. A vantagem do
design responsivo é que o site é gerenciado a partir de uma
plataforma e a flexibilidade da estrutura de tecnologia permite a
fácil adição de novas opções de otimização do dispositivo. Entre
as desvantagens, está o fato de que ele pode ser mais lento no
carregamento da página e também a incapacidade de
personalizar completamente a experiência móvel

O design responsivo é a
abordagem correta?
• Varejistas devem considerar a abordagem certa para suas
organizações. Eles devem pesar os prós e contras das
diferentes soluções técnicas disponíveis e selecionar a
abordagem correta, com base em comportamentos de
clientes, recursos, metas de longo prazo e orçamento
• Eles devem ter cuidado para não serem dirigidos pelas
limitações de sua plataforma de comércio eletrônico atual,
uma vez que irá dificultar a sua capacidade de oferecer uma
experiência de compra que melhor atenda as expectativas dos
clientes

• Enquanto o design responsivo tem sido usado principalmente
por sites de conteúdo que não incluem recursos de e-
commerce, nós, da FitForCommerce, recomendamos que os
varejistas considerem essa abordagem
• A estratégia de design responsivo é atraente porque oferece
flexibilidade para suportar o cenário do varejo em rápida
mudança com facilidade para responder aos requisitos de
otimização de novos dispositivos
• Além disso, oferece a capacidade de gerenciar e manter um
site otimizado para todos os dispositivos a partir de uma
plataforma de comércio centralizado, o que poupa tempo e
recursos valiosos

A dor de cabeça da “multiplataforma”
e dos múltiplos dispositivos
• O gerenciamento e a manutenção de várias versões de um
site em diferentes plataformas não são apenas demorados,
mas também de grande custo. Muitas vezes, envolve extensa
personalização e configuração de cada plataforma para
alcançar a consistência em cada dispositivo
• Isso exige que publicitários dupliquem seu trabalho em vários
sistemas para assegurar o produto e a consistência do
marketing e da otimização através de plataformas. Além disso,
assegurar que a marca e as características são consistentes
nos dispositivos pode se tornar caro em longo prazo

• Adotar uma abordagem de design responsivo pode parecer
intimidador, uma vez que implica na reformulação de sites
existentes que já poderiam satisfazer os requisitos do negócio
do ponto de vista do dispositivo único
• Além disso, uma abordagem de design responsivo bem
sucedida exige uma nova mentalidade que coloca os métodos
tradicionais de projeto de lado e se concentra em otimizar a
experiência em todos os canais e dispositivos, tanto em
termos de design, contexto e conteúdo
• No entanto, é nossa experiência que os varejistas e marcas
que decidem "ir responsivo" acham que vale a pena como um
investimento no longo prazo

Obstáculos do design responsivo
• Timing: uma reformulação recente ou lançamento de um site
móvel mantidos separadamente podem “impedir” as
empresas de desenvolver uma estratégia de design
responsivo. Embora reconhecendo os benefícios, eles
investiram substancialmente apenas em novo design e
desenvolvimento e não podem se dar ao luxo de assumir um
novo projeto neste momento

• Custos: realizar um redesign completo e interromper
processos atuais pode ser demorado, além de consumir
muitos recursos e exigir investimento de capital, o que pode
tornar alguns varejistas relutantes a respeito de iniciar esse
empreendimento caro. A boa notícia é que, à medida que
mais e mais plataformas de comércio eletrônico começam a
oferecer design responsivo, os custos não podem mudar, e o
processo de transferência de sites existentes para a
plataforma atualizada é menos trabalhoso e demorado

• Risco: enquanto ganha importância no mundo do comércio
rapidamente, o design responsivo para sites de e-commerce
ainda é um conceito relativamente novo. Melhores práticas
são estabelecidas e, enquanto as empresas que adotaram o
conceito de experiência não obtiverem excelentes resultado,
o ROI ainda precisa ser plenamente comprovado. Esse fato,
juntamente com a preocupação de que o design responsivo
pode diminuir o desempenho do carregamento da página, fez
com que algumas marcas adiassem a transação até souberem
com certeza que o design responsivo será benéfico para seus
negócios.

• Rompimento: o design responsivo requer uma nova
abordagem do desenvolvimento e design, que irá interromper
os processos atuais. Isso pode impactar nos requisitos de mão
de obra inicialmente e os varejistas podem estar relutantes
em adotar essas mudanças, já que se sentem confortáveis
com o padrão atual

Nas próximas seções, vamos discutir o conceito
de design responsivo com mais detalhes e dar
dicas de como oferecer uma experiência ágil e
otimizada por completo em todos os pontos de
contato do cliente

Tudo considerado no responsivo
O que é design responsivo, afinal?

Em termos simples, o design responsivo é uma
estratégia de design e desenvolvimento que conta com
uma série de tecnologias e técnicas de design para
otimizar a experiência do usuário baseadas no tamanho
da tela e na orientação do dispositivo utilizado para
acessar um website. Em outras palavras, essa
aproximação adapta o layout, o conteúdo e as
ferramentas de um site aproveitando a capacidade de
cada dispositivo

• Do ponto de vista da tecnologia, o quadro de design
responsivo é composto por uma combinação de redes
flexíveis, layouts flexíveis, imagens e uso inteligente de
consultas de mídia CSS
• Como o usuário muda de um dispositivo para outro, o site se
adapta automaticamente para se acomodar a resolução, ao
tamanho e às funcionalidades da imagem. Isso elimina a
necessidade de redimensionamento e rolagem pelo usuário,
a fim de visualizar o site no novo dispositivo

• Essencialmente, um site responsivo determina
automaticamente que um layout dinâmico e conteúdo ou
funcionalidade caiba na tela e no contexto de visitantes com
base em regras de layout que são aplicados no tamanho da
tela e resolução de ponto de interrupção, o que faz com que
seja possível adaptar um site para se adequar ao monitor
convencional, ao tablet e aos smartphones
• Sites responsivos usam consultas de mídia CSS3 para
determinar o tamanho da tela e, em seguida, utilizam-se de
regras diferentes para alterar o layout, a fim de otimizá-lo
para cada tamanho de tela

Prós e contras do design
responsivo
Assim como todas as soluções tecnológicas, o design
responsivo tem vantagens e desvantagens que os
lojistas precisam avaliar

PRÓS
• Código de base comum: um conjunto de códigos para todos
os dispositivos, o que significa que há apenas um site para
manter
• Versão futura do dispositivo: torna mais fácil o ajuste de
layouts para futuros dispositivos e resoluções de tela. Em vez
de desenvolver novos locais, regras de layout novas ou já
existentes podem ser aplicadas para otimizar o conteúdo
• Navegação na janela parcial: capacidade de otimizar o
conteúdo para qualquer tamanho de janela
• Estrutura de URL unificada: o uso de apenas uma URL elimina
a necessidade de redirecionamentos complicados e elimina a
possibilidade de usuários móveis acidentalmente sendo
enviados para a “versão desktop” do site

CONTRAS
• Custos de desenvolvimento: requer novo design e
desenvolvimento do site, bem como testes para cada
tamanho de dispositivo
• Largura de banda móvel: projetos que escondem conteúdo e
redimensionam imagens grandes para exibição em telas
pequenas podem exigir mais largura de banda
• Compatibilidade do navegador: os navegadores mais antigos,
incluindo o IE 8 e versões anteriores, não suportam consultas
de mídia
• Redimensionamento da imagem: a marcação HTML atual não
é capaz de redimensionar imagens com base na resolução do
dispositivo. Muitos navegadores modernos buscam imagens
antes de carregar as páginas, então não é possível adaptá-las
com base no tamanho da janela do navegador

Por que usar o responsivo?
• Talvez o aspecto mais atraente do design responsivo
para varejistas e marcas que vendem diretamente
para consumidores é a capacidade de adaptar um
site dinamicamente para diferentes tamanhos de
tela, usando um conjunto de códigos. Isso significa
que o núcleo de conteúdo, merchandising e
recursos de suporte podem ser gerenciados a partir
de uma única plataforma, eliminando a necessidade
de sites separados para diferentes dispositivos

• Embora uma abordagem de design responsivo exija um
redesign inicial, uma vez implementado, ele capacita equipes
técnicas a simplificar seus processos de desenvolvimento e
remove a carga de comerciantes e marqueteiros de duplicar
os esforços em múltiplas plataformas
• Uma vez que a camada de apresentação se adapta
dinamicamente para as capacidades do dispositivo e os
requisitos de otimização, tais como o tamanho do texto, os
botões, a capacitação para o toque e as estruturas de grade
individual, o resultado é uma experiência de compra
totalmente compatível

• O design responsivo também oferece certas
vantagens quando se trata de SEO. O Google
recomenda que as empresas o utilizem por sua
capacidade de se adaptar a qualquer dispositivo
usando apenas uma estrutura de URL, que auxilia os
algoritmos do Google a indexar e classificar o site

• Marc Jacobs Beauty (www.marcjacobsbeauty.com) é um belo
exemplo de site de e-commerce responsivo, administrado a
partir de uma plataforma de comércio centralizado,
sustentada pela MarketLive, e ainda é totalmente otimizado
para o aumento de conversões através dos dispositivos. O
site, que é altamente visual, adapta o conteúdo e o layout
baseado em cada dispositivo sem perder a estética da marca.
A versão móvel do site incorpora as melhores práticas para
conversões, trazendo todas as informações e características
importantes acima da página móvel e o conteúdo adicional
abaixo da página. O carrinho de compras é bem visível e fácil
de usar, removendo todas as barreiras para comprar

Satisfazendo as expectativas dos
clientes
• Experiência do consumidor e otimização para
diversos dispositivos
Na FitForCommerce, quando falamos sobre estratégias
responsivas, enfatizamos a necessidade de adotar uma
abordagem de otimização total que inclui mais do que os
componentes do projeto de otimização do dispositivo. A
estratégia responsiva completa sempre significa colocar o cliente
em primeiro lugar, o que requer uma compreensão de 360° a
respeito do comportamento de compra dos clientes e de como
diferentes dispositivos podem influenciar no caminho-de-
compra

Essas percepções devem formar uma estratégia que atenda às
expectativas do cliente para a experiência total de compras. Isso
significa que não devemos pensar em termos de otimização para
um único dispositivo, mas sim na experiência do cliente e na
otimização para todos os dispositivos. O principal objetivo de
qualquer estratégia de comércio digital é conduzir a
conversões, e simplesmente replicar o mesmo conteúdo e
apresentação através de diferentes dispositivos não se
traduzem, na maioria dos casos, em uma experiência de
compra otimizada

A otimização de compra em diversos dispositivos implica em
certificar que o site seja acessível à conveniência do consumidor,
usando o dispositivo que escolher, e que esteja otimizado para
as suas ações. Isso inclui a ampliação para melhor visualização,
botões, texto e outras ferramentas redimensionadas para o
tamanho do dispositivo, mas, tão importante quanto o conteúdo
do site, o layout e as funcionalidades são feitos sob medida para
o típico comportamento que os consumidores apresentam
quando se utiliza cada dispositivo para atividades comerciais

Uma estratégia completa de otimização para dispositivos
diferentes também inclui marketing e promoções. O e-mail
marketing ainda é uma das táticas promocionais mais eficazes
para direcionar o tráfego para sites de comércio eletrônico e
uma porcentagem crescente de e-mails são abertos e lidos em
um dispositivo móvel. Portanto, é fundamental para garantir que
os e-mails funcionem apropriadamente em todos os dispositivos

65% dos e-mails marketing foram abertos em
dispositivos móveis durante o último trimestre
de 2013 (Source: US Consumer)

3 passos para a otimização em
diferentes dispositivos
1. Transição entre dispositivos: os consumidores esperam uma
transição suave e consistente entre os dispositivos. O caminho
de compras pode, por exemplo, começar em um desktop e parar
em um tablet, ou vice-versa, e os varejistas devem garantir que
os consumidores tenham acesso ao mesmo conteúdo em ambos
os dispositivos. Por exemplo, a disponibilidade de produtos,
pesquisa, ofertas/promoções, atendimento ao cliente e preços
deve ser consistentes em todos os dispositivos. As implantações
mais bem sucedidas garantem que, se um cliente adiciona um
produto a um carrinho em um dispositivo e, em seguida, retoma
o processo de compra em outro dispositivo, ele está disponível
em ambos os carros

2. Capacidades específicas de cada dispositivo: cada tipo de
dispositivo tem diferentes capacidades que devem ser levadas
em consideração. Não é suficiente simplesmente duplicar o
conteúdo e garantir que ele seja visível; o site deve tirar
vantagem das capacidades de cada dispositivo. Por exemplo,
usuários de desktop esperam ser capazes de pairar com o mouse
e clicar, usuários de tablet esperam conseguir deslizar com os
dedos e usuários de smarpthones desejam que a sua localização
seja reconhecida e que os dados de formulário seja pré-
preenchido com o máximo possível de dados

3. Contexto: para complicar ainda mais, os varejistas precisam
levar o contexto de quando e como os consumidores usam cada
dispositivo em consideração. Por exemplo, a pesquisa mostra
que os consumidores estão mais propensos a usar um
smartphone para acessar informações sobre o produto,
enquanto eles usam tablets e desktops para fazer a compra. E o
“showrooming” está ganhando cada vez mais popularidade
entre os usuários de smartphones. Como resultado, os varejistas
e marcas poderiam priorizar a descoberta de produtos e
comentários no smartphone, enfatizando os processos de check-
out fácil no tablet

Mobile primeiro
Um conceito que está recebendo muita atenção e é muitas vezes
combinado com o design responsivo é o conceito de "mobile
primeiro". Impulsionada pelo crescimento explosivo da adoção
de dispositivos móveis, combinado com a influência significativa
do celular sobre a experiência total do cliente, uma abordagem
que prioriza o mobile significa essencialmente começar com o
processo de concepção e desenvolvimento, pensando sobre o
contexto móvel pela primeira vez

Mobile primeiro
• Em vez de priorizar o design de desktop, antes de diminuir ou
esconder o conteúdo para caber nos dispositivos móveis,
quando se utiliza uma primeira abordagem móvel, os
designers primeiro consideram a experiência móvel, e então,
gradualmente, adicionam conteúdos e funcionalidades para
telas maiores e resoluções de tela mais altas
• Como os dispositivos móveis têm um impacto significativo
sobre a experiência de compra, a primeira abordagem móvel
é um processo verdadeiramente centrado no cliente que
funciona muito bem no desenvolvimento de estratégias de
otimização para diferentes dispositivos

Mobile primeiro
Na FitForCommerce, sempre recomendamos que os varejistas
foquem nas demandas e expectativas de seus clientes antes de
qualquer outra coisa. A abordagem “mobile primeiro” obriga as
marcas a entender e medir como os clientes estão usando
diferentes dispositivos (não só móveis) durante o processo de
compra e como usar essa compreensão para elaborar estratégias
centradas no cliente

Plataformas de e-commerce com
design responsivo
• Alguns críticos do projeto responsivo afirmam que sites responsivos de e-
commerce não são tão convincentes como sites projetados para um
tamanho específico de tela, porque eles não suportam capacidades de
comércio eletrônico completas
• É possível conseguir uma experiência otimizada para o e-commerce, mas
isso depende de como a plataforma é implementada e exige que a
plataforma utilizada seja totalmente sensível. Isso inclui não apenas as
capacidades de design responsivo em termos de redes e layouts flexíveis,
mas também a capacidade de personalizar experiências para cada
dispositivo com base nas melhores práticas para conversões ideais, bem
como aproveitar os benefícios dos recursos de merchandising, de
configuração e de promoção compartilhados entre dispositivos

• Merchandising: categorização de produtos, conteúdo,
ofertas/promoções e outros, aplicada automaticamente em
todos os dispositivos
• Configuração: ajuste de configurações e lógica de negócios
em um só lugar, uma só vez, aplicado a todos os dispositivos
• Customização: recursos personalizados ou de regras de
negócios para todos os dispositivos, bem como regras
personalizadas para cada dispositivo

• É importante que os varejistas avaliem sua
plataforma de comércio atual para determinar se
ela oferece os recursos necessários para a
otimização completa em diferentes dispositivos,
tanto em termos de adaptação para exibir tamanho
e pelo conteúdo, navegação e layout
• Por sorte, nós estamos começando a ver mais e mais
fornecedores de plataformas de e-commerce
atendendo a essa mudança na dinâmica de varejo ao
entregar versões atualizadas da plataforma, que
oferecem habilidades de design responsivo
completas

Abaixo estão algumas considerações para se ter em
mente quando avaliamos as plataformas com
capacidade para o design responsivo:
• A plataforma de e-commerce suporta um quadro de design responsivo?
• A plataforma oferece experiências customizadas para os consumidores, a
fim de otimizar as taxas de conversão?
• A plataforma oferece melhores práticas para as características e funções
do desktop e dos dispositivos móveis?
• A plataforma suporta as capacidades específicas de cada dispositivo?
• A solução inclui a possibilidade de divulgar e promover em todos os
dispositivos ao mesmo tempo?
• A plataforma inclui regras de negócio e lógica que se apliquem aos
diversos dispositivos?

As respostas para as perguntas acima vão
ajudar a determinar se as habilidades casuais
das plataformas de e-commerce suportam uma
experiência responsiva completa ou se é tempo
de considerar uma nova estratégia

Conclusão
• A rápida adoção aos dispositivos móveis está mudando dramaticamente o
comportamento dos consumidores e aumentando suas expectativas em
relação a uma experiência de compra simples e consistente em todos os
pontos de contato
• Embora seja impossível prever o que o futuro trará, é certo que vamos
continuar a ver a proliferação de novos tipos de dispositivos e tamanhos
de tela que terão efeitos variados sobre a experiência de compra do
consumidor
• A única experiência sem brilho em qualquer dispositivo pode ter
consequências prejudiciais. Os varejistas e as marcas só têm uma chance
de acertar. Portanto, é fundamental atender as expectativas dos clientes
para uma experiência de compra perfeita em qualquer ponto durante o
caminho de compra, independente do dispositivo utilizado

Conclusão
• O design responsivo tem o potencial de tornar a experiência
de compra em todos os dispositivos simples e sem
complicações, já que se adapta dinamicamente um único site
de comércio eletrônico para o dispositivo que o consumidor
está usando
• A estrutura de princípios de design responsivo permite a fácil
configuração de encaixar futuros dispositivos sem precisar de
um redesign ou desenvolvimento completo

Conclusão
• Uma estratégia responsiva bem sucedida para todos os dispositivos, no
entanto, envolve mais do que simplesmente adaptar um site para uma
exposição específica. Os varejistas que perseguem uma abordagem de
design responsivo precisam entender que o processo de design real é
apenas um aspecto da estratégia de toda a estratégia
• O design responsivo requer uma abordagem sensível completa, tanto na
concepção e otimização, com base no comportamento do consumidor
durante as diferentes fases do processo de compra
• Por isso, queremos dizer que, apesar do design responsivo se adaptar
dinamicamente ao dispositivo, uma profunda compreensão do
comportamento dos usuários garante a entrega do conteúdo adequado
para cada dispositivo a qualquer momento

Doutore-commerce Consultor, Professor, Palestrante, Investidor Anjo e
Empresário. Especialista em E-commerce e Internet,
Thiago Sarraf é formado em Marketing e possui
especialização em Negociação, Certificado em Google
Adwords e Analytics.
Líder do Comitê de e-commerce da ABRADi
(Associação Brasileira das Agências Digitais) e do
Guia de E-commerce, esta a frente da consultoria
Dr. E-commerce (consultoria em e-commerce).
Palestrante de E-commerce e Marketing Digital, esteve presente nos principais eventos
da área. Professor na área, dando aula na ESPM, Universidade Buscapé, Internet
Innovation e no MBA de e-commerce da FIT (Impacta), FMU e Senac.
Sarraf já desenvolveu mais de 150 lojas virtuais e já trabalhou na Compaq, HP, Microsoft,
Locaweb, iG, UOL e Agência Pukis. É colunista e articulista dos portais iMasters e E-
commerce Brasil.

Thiago Sarraf
Consultoria Doutor e-commerce
• O conteúdo desta apresentação também está disponível em texto:
http://goo.gl/GGnoKR
• Conheça nosso site e descubra tudo que podemos fazer pela sua loja
virtual!
http://www.doutorecommerce.com.br/
• Temos outros artigos com tudo sobre e-commerce em nosso blog. Confira!
http://www.doutorecommerce.com.br/blog-dr-ecommerce

Design responsivo para e-commerce

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Design responsivo para e-commerce

Mais de Thiago Sarraf - Especialista em E-commerce

Design responsivo para e-commerce