Nos círculos de marketing e otimização para dispositivos móveis, “design responsivo”? é mais do que apenas um chavão. É um padrão que pegou tudo o que você sabe sobre web design e virou de lado – literalmente .
Acontece que 9 em cada 10 usuários de smartphones realizam alguma forma de atividade financeira em seus dispositivos, de acordo com a Prosper Mobile Insights Survey . Isso inclui mais da metade dos usuários que usam seus telefones para fazer compras online. Embora as taxas de conversão em computadores desktop ainda sejam mais altas, os tablets não estão muito atrasados.
O interessante é que, embora as taxas de conversão para smartphones ainda estejam abaixo de 2%, quanto menor a tela, mais dinheiro os usuários gastam em média.
Um ponto a ser lembrado é que a maioria dos sites ainda não está otimizada para lidar com o tráfego móvel. À medida que o design responsivo se torna cada vez mais entrelaçado com as melhores práticas de design da web, os compradores ficam mais confortáveis comprando em uma variedade de dispositivos, e as empresas se acostumam a atender aos clientes por meio de uma variedade de canais dedicados a esses dispositivos.
Um bom exemplo disso é o WebUndies.com . Esse varejista familiar de roupas íntimas, roupas de dormir e roupas de cama informou que suas vendas de comércio móvel somaram US $ 168.000, ou 5,4%, dos seus 3,1 milhões em vendas. Se isso parecer apenas uma fatia de tráfego que vale a pena otimizar, considere que esse é um aumento de mais de 169% para o varejista. O WebUndies usa um design responsivo e um catálogo otimizado para tablet. Dada a quantidade de atenção que os WebUndies estendem aos compradores de celulares, não é surpresa que o tráfego de celulares tenha dobrado ano após ano.
O que é design responsivo?
O design responsivo é um layout flexível e líquido que se adapta a vários tamanhos de tela, resoluções e dispositivos. Em vez de ter elementos de design individuais separados criados para um site móvel, o design responsivo se concentra em um código principal que se alinha e se situa para fluir dentro dos parâmetros do próprio dispositivo.
Considere este exemplo mostrando cabines para alugar:
Como você pode ver, o layout se ajusta para apresentar informações de uma maneira que faça sentido para o dispositivo em que está sendo visualizado.
Mas a verdadeira questão do ponto de vista da conversão é: o que eu mantenho e o que aparo?
Elementos de conversão que vale a pena manter
Mantenha tudo o que facilitar para os clientes móveis encontrar rapidamente o que procuram. Isso significa mapas e direções, horário comercial e funcionalidade de toque para ligar que os coloca em contato com um representante.
O site móvel da Red Cross ™ é um ótimo exemplo de integração de recursos móveis de uma maneira que faz todo o sentido. Em um exemplo, você pode tocar para fazer doações via SMS, por telefone ou por cartão de crédito. Ter esse tipo de flexibilidade permite que os usuários assumam o controle de como agem.
Um design responsivo focado na conversão também utiliza recursos além da tela de toque. Como você está lidando com um espaço de tela muito menor, você quer aproveitar ao máximo as opções de visão, som e mídia disponíveis. Ler texto simples em um telefone celular é cansativo e difícil, mas assistir a um vídeo ou reproduzir um podcast é intuitivo e fácil.
Elementos que vale a pena aparar
A otimização de um design responsivo a dispositivos móveis para otimização de conversão é muito semelhante à criação de uma página de destino. Você precisa cortar a gordura, o que significa descartar qualquer coisa que possa levar o visitante a se afastar ou se distrair de tomar a ação que deseja.
Como você viu no exemplo da cabine acima, o anúncio para alugar a cabine em Flathead Lake foi completamente removido em favor do espaço para mais fotos e texto. Como o texto em branco em um fundo preto é mais difícil de ler, foram implementados melhores padrões de usabilidade para a versão do smartphone, que apresenta um texto em preto mais legível em um fundo branco.
Mas otimizar o design responsivo para dispositivos móveis não é apenas remover anúncios e ajustar layouts. Você também precisa analisar seriamente o que remover para obter uma melhor experiência do usuário. Veja como a empresa de beleza Tria conseguiu otimizar seu site móvel para vender produtos para depilação a laser:
Há várias coisas que podemos aprender com um design como este:
- Menos é mais – observe como a página otimizada para celular apresenta imagens em um formato de apresentação de slides rolável em vez de uma visualização grande e várias miniaturas, para facilitar a navegação por toque.
- Conteúdo expansível – em vez de forçar os usuários móveis a percorrer as ondas de conteúdo, um toque abre uma página cheia de benefícios, que normalmente são expostos aos visualizadores da área de trabalho à esquerda. As guias que aparecem em azul na versão para computador são abertas por meio de sinais de mais no site para celular.
- As avaliações são mais destacadas – observe como as classificações e as análises estão na frente e no centro do site para dispositivos móveis, onde mais itens de compra sofisticados são reforçados com provas sociais.
- As opções de preço e pagamento são maiores – o preço e a opção de pagamento parcelado são consideravelmente maiores, portanto, não é necessário pesquisar por “quanto custa?” ou “como posso pagar por isso?”
- O frete grátis é mais perceptível – os compradores móveis veem a notificação de frete grátis imediatamente, juntamente com um ícone grande e destacado para visualizar seu carrinho de compras.
- Botão grande de apelo à ação – O Tria faz uso total de um botão grande de apelo à ação que ocupa toda a largura da tela, para que não haja beliscar, apertar e aplicar zoom para ver o botão adicionar ao carrinho.
Neste exemplo, o Tria simplificou, simplificou e concentrou-se no que era importante para a melhor experiência possível do usuário, acessibilidade e facilidade de uso.
O que você apararia?
Aqui está outro exemplo de design responsivo móvel, desta vez promovendo a Hora da Terra da World Wildlife Foundation:
A versão para tablet simplesmente muda os elementos do site, mas a versão para smartphone os empilha e elimina os extras que sugam a largura de banda, como a lâmpada fraca e o relógio da contagem regressiva. As últimas notícias também são removidas da área de foco principal, o que ajuda a manter a frase de chamariz breve e direta.
Mas nem todo site elimina o colírio para os olhos. Dê uma olhada no Food Sense . Em um dispositivo em que a aparência de uma refeição pode ser o momento de clicar ou clicar para saber mais, o Food Sense optou por manter suas imagens impressionantes e aparar o texto:
No tablet, a navegação da barra lateral é movida para o topo, para que os navegadores possam apreciar a visualização completa da salada de frutas. Os usuários de smartphones têm os ícones removidos completamente, com navegação simples baseada em texto e maior ênfase em fotos individuais.
Observando esses exemplos, deve ficar claro que a criação de um design responsivo móvel é mais do que apenas um ato de malabarismo de elementos de design.
O aumento de 400% nas taxas de conversão
A empresa de design Electric Pulp redesenhou recentemente o site da varejista de roupas O’neill para ser mais responsivo aos dispositivos móveis. Eles tomaram todas as decisões corretas ao incorporar as práticas recomendadas para o design móvel: um layout fluido, menu dobrável que pode ser aberto com um único toque, tamanho de fonte aumentado, áreas de toque maiores e fotos aprimoradas.
Eles então realizaram vários testes. Eles não fizeram seus testes A / B típicos . Em vez disso, eles analisaram o volume e a receita de pedidos puros, além das conversões de tráfego não móvel. Os resultados foram os seguintes:
Às vezes, o design responsivo móvel acontece por uma questão de praticidade. Como a Shiseido Americas descobriu quando lançou um site móvel para sua marca de beleza de luxo Nars em janeiro, eles simplesmente não conseguiram manter três versões separadas do site existente (desktop, tablet e smartphone). A mudança para um design mais fluido permitiu acompanhar o lançamento de novos dispositivos para os quais não estavam preparados, como o iPad Mini.
Nesse caso, a Shiseido criou gráficos e outros ativos que se encaixariam exclusivamente no design móvel da Nars, em vez de simplesmente reorganizar elementos no site existente. Até agora, os resultados foram recompensados de várias maneiras.
Eles conseguiram aumentar as conversões de checkout de smartphones em 54% e as de tablet em 24%. Além disso, a nova abordagem também aumentou o fluxo de trabalho e a produtividade da equipe, garantindo que todas as abordagens de dispositivos usem os ativos certos para obrigar o cliente a agir.
Práticas recomendadas para formulários móveis no design responsivo
Nos tempos antigos da WAP, os campos de formulário eram impensáveis porque eram uma dor de cabeça para tentar preencher. Felizmente, os padrões mudaram e os designers de interface do usuário forneceram um conjunto completo de instruções para maximizar a eficácia do toque no botão.
O UX Booth possui um artigo fantástico sobre as práticas recomendadas para projetar e otimizar formulários móveis, incluindo o seguinte:
- Usando rótulos de alinhamento vertical (superior) versus rótulos alinhados à esquerda tradicionais.
- Removendo qualquer informação que não seja absolutamente necessária. Muitos usuários podem ter suas conexões perdidas e os dados perdidos, dificultando a conclusão de formulários longos.
- Combinar campos de formulário (como seleção de país / estado / província), onde apropriado, ou fazer as escolhas mais populares aparecerem primeiro na lista e incorporar as seleções padrão quando fizer sentido. Isso, por sua vez, facilita a digitalização rápida dos usuários e a execução de ações sem desperdiçar muito tempo ou largura de banda.
Um bom exemplo de um formulário móvel fácil de usar é o Hertz .
Como criar seu próprio design responsivo
A essa altura, você deve estar se perguntando: “A apresentação de exemplos e resultados está muito bem, mas como você cria seu próprio design responsivo para dispositivos móveis ?” Felizmente, existem várias ferramentas que você pode usar para ajudar a simplificar e simplificar o processo. Um exemplo é o esqueleto . O Skeleton é um kit de desenvolvimento padrão baseado no popular estilo de grade 960. Ele também possui várias extensões para plataformas populares de gerenciamento e compartilhamento de conteúdo, incluindo WordPress, Drupal e Github.
Conclusão
Ao começar com um layout fluido, você minimizará o tempo, o custo e o trabalho de tentar ajustar seu site a diferentes dispositivos. Em vez disso, você poderá se concentrar em códigos sólidos que podem ser facilmente aplicados em dispositivos hoje e no futuro.
A coisa mais importante que você pode fazer para aumentar as conversões por meio de um design responsivo para dispositivos móveis é descobrir quais recursos são mais importantes para seus visitantes. Você pode fazer isso usando um mapa de calor sobreposto para determinar onde suas áreas de foco tendem a cair. Um bom design responsivo para dispositivos móveis, também focado na conversão, eliminará elementos inúteis de navegação e design, enquanto se concentra no design simples e nítido, que carrega rápido e exige ação.
Fonte: https://www.quicksprout.com/optimize-responsive-design-for-conversions/
Para desenvolver o seu site, entre em contato com a Mopi Studio!