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

Obstáculos do design responsivo

• 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

Obstáculos do design responsivo

• 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.

Obstáculos do design responsivo

• 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

Por que usar o responsivo?

• 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

Por que usar o responsivo?

• 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

Por que usar o responsivo?

• 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

3 passos para a otimização em diferentes dispositivos

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 passos para a otimização em diferentes dispositivos

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

Do

uto

r e

-co

mm

erc

e

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