Design responsivo: o que é e por que você precisa saber

03 fevereiro, 2016

Em 2014, 9,4% de todas as compras online foram realizadas em dispositivos móveis, segundo o relatório WebShoppers divulgado pela E-bit no começo deste ano. O crescimento do m-commerce (o e-commerce mobile) entre 2013 e 2014 chegou a 84%, e a tendência é de que esses indicadores continuem aumentando nos próximos anos.

Por isso é que vender na internet, hoje, inclui necessariamente uma preocupação com os usuários de tablets e smartphones. Afinal, em países como os EUA, já são feitas mais buscas online nesse tipo de dispositivos do que em computadores desktops, criando um novo conceito de desenvolvimento: mobile first!

Esse conceito inverte a metodologia clássica de desenvolvimento web, considerando que quando vamos começar a desenvolver e planejar projetos virtuais, desde um pequeno site até um grande sistema, primeiramente devemos pensar no comportamento em dispositivos móveis e somente depois em desktops ou notebooks.

Mas como vender de maneira eficiente para todos os públicos? Como estar presente com boa usabilidade e comunicabilidade, independentemente do formato e do tamanho da tela? As respostas estão ambas no design responsivo para e-commerce! Mas não se assuste, pois vamos detalhar aqui o que exatamente é o design responsivo e por que você precisa entendê-lo para garantir o sucesso do seu e-commerce diante das tendências atuais na web. Acompanhe:

O que é design responsivo

Há algum tempo, a maioria dos computadores utilizava um monitor de resolução 800×600 ou 1024×768 pixels. Para os sites, a dimensão das telas não representava muito no que se referia à usabilidade e à navegação de suas interfaces. Mas hoje em dia temos não só uma infinidade de resoluções e proporções de telas de computadores, mas também dispositivos móveis, como Smart TVs, tablets e smartphones com tamanhos e resoluções diversas. E essa variedade gera um grande impacto na qualidade da experiência do usuário.

Nesse contexto, um site é considerado responsivo quando possui a capacidade de ajustar a disposição de seus componentes visuais, adaptando-se à resolução de tela na qual é exibido — alterando posição, altura, largura e até mesmo a formatação dos elementos gráficos —, a fim de garantir a melhor experiência do usuário ao navegar por suas páginas.

A adaptação de sites para smartphones e tablets é pensada principalmente em relação à ergonomia. Sendo assim, os textos e botões, por exemplo, ajustam-se de maneira a ficarem um abaixo do outro, permitindo uma navegação confortável e intuitiva por meio de toques. Esses ajustes têm como base o princípio de que, para manusear esses dispositivos, é mais fácil usar a rolagem de maneira vertical do que de horizontal. Os menus também sofrem alterações, geralmente se transformando em botões posicionados no canto superior (direito ou esquerdo) da tela, para que fiquem próximos à posição natural do dedão, facilitando a interação entre o menu e o usuário.

Design responsivo e mecanismos de buscas

Uma das principais vantagens de se optar por sites responsivos está ligada ao impacto nos mecanismos de buscas, principalmente depois do recente anúncio de mudanças no algoritmo de buscas da Google, que privilegiarão aqueles realmente preparados para a navegação em dispositivos móveis. E para auxiliar desenvolvedores e designers de sites, a Google disponibilizou uma ferramenta para testar a compatibilidade de qualquer página com dispositivos móveis, além de um conjunto de documentos com várias dicas e conceitos sobre sites responsivos.

O novo algoritmo da Google, chamado de PageLayout, tem a função de avaliar, por meio de critérios matemáticos, a navegabilidade dentro de um site — como os conteúdos estão dispostos e o quão fácil é encontrar determinadas informações dentro de uma página ou do site como um todo. Essa mudança reforça a preocupação da empresa com a experiência do usuário ao interagir com sites.

Para os e-commerces, o tráfego orgânico — aqueles usuários que vêm de resultados não pagos de buscas — representa a maior fatia dos visitantes na maioria dos casos. Perder representatividade nos mecanismos de buscas é, portanto, sinônimo de perda de vendas. E além de trazer um melhor posicionamento no ranking de pesquisas da Google por conta dessa alteração no algoritmo, possuir um e-commerce responsivo ainda ajuda a diminuir da taxa de rejeição do site, aumentando ainda mais as chances de posicionamento no topo das pesquisas.

Tudo isso se explica porque, como a experiência de navegação do usuário será amigável, sem a necessidade de dar zoom na página ou contando com botões pequenos demais para serem clicados com a ponta dos dedos, os visitantes provavelmente permanecerão mais tempo no site. E, de fato, quanto mais tempo os visitantes passam em seu e-commerce, maior é a chance de comprarem um de seus produtos!

Pagamentos e segurança mobile

E-commerces responsivos devem ter muito bem resolvida a questão dos pagamentos e da segurança para o usuário. Assim, contar com uma solução que contemple designs responsivos para múltiplas formas de pagamento é vital para vender bem em dispositivos móveis.

Nesse cenário, um site que se adapta a cada situação (ou seja, um site responsivo) representa a melhor solução para vender bem para usuários em qualquer plataforma. Para uma loja virtual, isso significa, por exemplo, que os consumidores poderão fazer suas compras independentemente de estarem usando o celular ou o computador. Assim, toda hora é hora de comprar!

Pense bem: em um momento de convergências de mídias, com a TV pautando o assunto das redes sociais e vice-versa, é indispensável estar acessível para pesquisas de oportunidade, que acontecem majoritariamente em dispositivos móveis.

A experiência do usuário e o m-commerce

Cada dispositivo tem características próprias que determinam, em grande parte, a maneira como as pessoas fazem uso delas. Dessa forma, para se adaptar aos dispositivos móveis, é preciso, na verdade, adaptar-se à maneira como as pessoas navegam por eles.

Smartphones são usados com as pontas dos dedos em vez de mouses e teclados físicos. Por isso, toda informação em cada tela deve ter sua posição bem calculada para ser facilmente consumida, levando em consideração as mais diversas variáveis. Já nos tablets, com telas um pouco maiores que os smartphones, é possível trabalhar de forma eficiente e agradável com um número maior de informações, mas ainda assim tomando o cuidado de adequar o tamanho de botões e textos aos dispositivos.

Agora que você já sabe o que é o design responsivo, veja também 5 motivos para ser mobile e entenda melhor como funciona o comportamento dos consumidores na web móvel. Até a próxima!

guia de UX para aumentar a conversão do seu e-commerce

O post Design responsivo: o que é e por que você precisa saber apareceu primeiro em Wirecard.