Design & UX

20 jun, 2013

Três lições sobre design responsivo

Publicidade

Mobile é um modo de vida e quer você faça negócios online ou offline precisa assumir essa tendência, ou estará perdendo dinheiro.

Se você quer ver quanto está perdendo por mês ou por semana, aqui está uma boa ferramenta para isso. Recentemente, o Google lançou uma calculadora chamada “O Valor do Mobile”. Realmente, é uma ferramenta muito útil: simples, com uma fórmula clara e ajustável para os seus dados. Você pode ver claramente todas as possibilidades de receita se estiver na “brincadeira” do mobile, seja dentro da loja, em apps, em múltiplas plataformas ou em experiência do cliente no site mobile.

01
in-store value of mobile
02
Fórmula simples

A calculadora de valor do mobile do Google também mostra o que o mobile significa para o seu negócio, com base em suas informações, e pode te despertar para que você tenha um site responsivo ou invista em algum tipo de desenvolvimento móvel. Aja agora, mas ajuste suas expectativas enquanto você passa por estes três cenários:

1. Você vai aumentar o tráfego e as vendas online

Tendo como base toneladas de estimativas de diversas empresas de mídia e analytics, a experiência mobile é bastante produtiva e acabará por aumentar suas vendas. Este infográfico da Compete ilustra muito bem as variações das estatísticas sobre a experiência do consumidor no mobile.

03

A indústria do comércio eletrônico já tem diversos casos de estudo mostrando ROI positivo para investimentos em mobile ou sites responsivos entre empresas TOP 500 e varejistas virtuais emergentes. Walgreens, GNC, Orbitz e ShopNBC investiram em seus aplicativos mobile, sites mobile e experiências em tablets pelos últimos três anos e têm desfrutado dos benefícios no aumento das vendas online, tanto de novos clientes como dos antigos já fidelizados. Por outro lado, as ideias de “mobile first” podem reduzir as taxas de bounce em cerca de 17% e aumentar o tempo gasto no site – em até 3 minutos e a partir de 40 segundos, de acordo com os resultados obtidos pela Smashing Magazine ao testar um site responsivo. E você também pode atingir novos mercados utilizando tendências mobile como parte de sua estratégia de marketing.

Sendo responsivo

A BakerShoes.com se utilizou de um design responsivo para otimizar a experiência total no site, com base em um layout de desempenho melhorado para tablets, e em um ano desde o lançamento tive o tráfego dobrado. Mais especificamente, a Baker Shoes triplicou a receita proveniente de tablets, indo de 3% em 2011 para 9% em 2012; duplicou a receita de smartphones, de 7% para 15%. Veja o aumento da receita em relação aos picos de visita:

Receita x tráfego na Baker Shoes
Receita x tráfego na Baker Shoes

JackThreads.com, loja online de artigos masculinos lançada no início de 2012, já contava com design responsivo e alcançou, de imediato, 20% de tráfego de compradores via dispositivos móveis, em um nicho que pode parecer super povoado. A loja agora tira proveito de compras cross-channel, personalização bem focada em desktop e mobile, e deve ser vista com uma marca que conversa bem com seus clientes-chave com estilo, simplicidade e emoção.

05
Site mobile da JackThreads

06
Site desktop da JackThreads

Investindo em sites mobile

O site de lingeries Leonisa.com, da Colômbia, lançou uma versão mobile que tem a maior parte dos seus negócios com compradores dos EUA. Ao fazer isso, tem obtido uma conversão de 2,68% no site e de 0,7% no mobile, com busca paga sendo sua principal fonte de tráfego desde outubro de 2012.

Site mobile da Leonisa para consumidores dos EUA
Site mobile da Leonisa para consumidores dos EUA

2. Você ainda terá que otimizar para SEO e reconsiderar o design

A “brincadeira” no mobile não é só trabalhar com sites responsivos ou trocar templates. Isso não vai resolver seus outros desafios de marketing. Na verdade, você ainda precisa desenvolver aspectos de SEO, design e experiência do usuário (UX). Mesmo se o design responsivo habilita uma experiência contínua de marca ou de compra online, apenas ser responsivo não é otimização para SEO ou design ou UX, todos combinados ou separadamente.

  • Ao lançar o site do CommerceBrain.com, mesmo usando um tema responsivo do WordPress, ainda estou para fazer um trabalho de SEO pós-lançamento para imagens, títulos, velocidade e botões sociais. E se você é um site maior e com vendas, não pode se dar ao luxo de deixar o SEO de lado. Isso é um erro muito grande.
  • Se você também decidir manter o seu design antigo e apenas mudar o código, seu site ficará feio, por falta de uma palavra melhor. Os elementos de design do site antigo não podem ser simplesmente copiados e colados. É como aquela roupa antiga, dos anos 70/80, que está encostada no seu armário porque você tem vergonha de vestir. Eu gostaria de mostrar alguns exemplos, mas, em respeito aos proprietários dos sites, peço que você acredite na minha palavra. No meu caso, eu não tive problemas porque 1) comecei com um novo design, como foi no CommerceBrain.com ou 2) mudei o antigo layout completamente, no caso do Memesponge.com. Assim, meus dois sites apresentam hoje design e responsividade em perfeita harmonia em diversas plataformas, como mostrado pela ferramenta responsinator.
08
Samsung Galaxy
09
Android, Memesponge.com

3. Você vai querer planejar seu jogo no mobile na medida que a UX se torna complexa, se você tem muitas categorias ou um site complexo

Se você está vendendo online, se tornar responsivo vai ser uma jornada mais complexa e planejada, com vários ajustes na experiência do usuário. Você pode seguir um caminho parecido com o da Baker Shoes – alavancando a UX no site a partir da versão para tablets, enquanto trabalha a conversão através de testes AB tanto em tablets como em computadores.

Tablet vs. desktop, Bakers Shoes
Tablet vs. desktop, Bakers Shoes

 

Ou decidir em uma variedade de estratégias de UX, de acordo com o canal, como a Etsy fez, ao mesmo tempo em que tem experiências responsivas e aplicativos que trabalham de maneira conjunta, mas que diferem em características.

11
App para iOS da Etsy

Site responsive da Etsy no iPhone 5
Site responsive da Etsy no iPhone 5

Então, o que você está esperando? Comece logo a trabalhar no mobile, antes que essa “festa” esteja muito cheia. Se torne responsivo. Vale muito a pena.