Mobile first: o que é, como fazer, prós e contras

Mobile first: a experiência de compra centrada nos dispositivos móveis

Mobile first não é moda, não é passageiro, não é uma tendência que nunca se realiza: é o webdesign que trabalha com a realidade da tecnologia. Em dezembro de 2015, os dispositivos móveis atingiram uma participação de 15% de todas as vendas realizadas no e-commerce brasileiro, de acordo com o Relatório Webshoppers, da Ebit. Em 2014, passamos a ter mais dispositivos com acesso à internet do que humanos habitando no mundo.

O que é mobile first

 

Os números não mentem. Quem pensar em investir no digital deve pensar “mobile first”. A tradução do termo é literal, mas a concretização de sua proposta é desafiadora: para qualquer planejamento de repaginação do e-commerce ou lançamento de uma loja virtual, o gestor deve, primeiro, fazer um plano para as menores telas possíveis para, então, adaptá-lo à web – e não o contrário, como costumava ocorrer até agora.

A dificuldade de colocar essa estratégia em prática, no entanto, afasta as aspirações dos proprietários de e-commerce: enquanto planejar um site para a web proporciona uma visão do todo, com múltiplas possibilidades, projetar um site com usabilidade para mobile requer minimalismo e funções que preservem a responsividade do site. Por isso, poucos se arriscam a começar por esse caminho. Mas há recompensas significativas – o propósito desse artigo é quebrar alguns paradigmas.

Mobile first: por que você deve pensar assim

 

Mais do que nunca, algo que carregamos em nossos bolsos já não é mais um objeto que temos no trabalho ou em casa. É uma tendência global que vai continuar a ter crescimento nos próximos anos. Existem duas estratégias que operam de maneiras diferentes no que diz respeito às melhorias de uma página.

Duas estratégias: “Graceful degradation” vs. “Melhorias progressivas”

 

Alguns termos que se tornaram populares nos últimos anos podem trazer alguns insights sobre a noção de mobile first e por que é importante considerar esse conceito.

Graceful degradation é a estratégia que parte da web para o mobile, contrária à abordagem mobile first

“Graceful degradation” é uma metodologia que programa atualizações no site web e mobile a partir de mudanças externas. Dessa forma, ainda que as alterações sejam constantes, o objetivo é garantir a usabilidade do site para manter a experiência. O fluxo das mudanças ocorre como na imagem cima: da web para o mobile.

Em termos de web design para mobile, isso significa que um site comum constantemente teria que voltar atrás e excluir funcionalidades e conteúdos à medida que a tela se torna menor e o sistema mais simples (não suportar mais flash pode ser um exemplo disso).

melhorias-progressivas: estratégia mais indicada para aplicar a abordagem mobile first

Mas além dessa metodologia de pensar o site, existe outra ideia poderosa: as melhorias progressivas. O workflow é parecido com a figura acima. Todos os esforços são concentrados na plataforma mobile, com foco em providenciar a melhor experiência na menor tela – considerando, inclusive – a velocidade dos processadores de smartphones. À medida que surgem necessidades, o site pode ser gradualmente melhorado e até completamente reformulado de maneira que o comprador seja impactado o menos possível.

Qual das duas metodologias é melhor?

 

À primeira vista, essas duas metodologias parecem iguais. O que importa por onde você começa essas atualizações se o objetivo é sempre melhorar a experiência do usuário, certo?

A realidade dessa situação é um pouquinho mais complexa. Quando a reforma do site começa em plataformas desktop ou laptop, é natural querer inserir todos os diferenciais que a web tem a oferecer.

Ao elaborar um site focado em web com as melhores funcionalidades, corre-se o risco de perceber, ao fim de tudo, que essas opções não são suportadas pelo mobile. Como resultado, a tendência é uma versão mobile que parece uma edição inacabada da versão web. Mas isso não acontece com todos os projetos. Talvez não, mas essa história é muito mais comum do que você imagina.

Se examinarmos o workflow do modelo de melhorias progressivas, no entanto, os resultados tendem a contar uma história diferente. Toda a energia é colocada no desenvolvimento de um site cujo visual e as funções tenham um bom funcionamento, mesmo considerando todas as restrições que o mobile first pode impor.

E mais importante: começando pela versão mobile, você já reduziu o seu conteúdo ao essencial. No momento de encaixar o design para a versão web, depois de ter a versão móvel pronta, ao invés de enfrentar a decisão do que cortar e do que manter, você consegue decidir como tornar o site ainda mais robusto e otimizar seu tempo de carregamento.

Conteúdo web no mobile first

 

Como posicionamos na definição acima, o resultado final de uma abordagem mobile first tende a ser melhor do que web first. Se você precisa de um argumento mais fundamentado, conheça um pouco mais sobre o conteúdo em ambas as plataformas.

Se nós enxergarmos do ponto de vista da metodologia “graceful degradation”, todo o conteúdo (texto, imagens, vídeos, áudios) é planejado para se adaptar à plataforma que tem mais rapidez de processamento e carregamento – ou seja, a web. A partir desse ponto, as versões mobile simplesmente ignoram ou removem muito do conteúdo do site web das páginas.

O problema é que esse conteúdo já foi carregado em todas as plataformas, seja ele necessário ou não. Nessa abordagem, a tendência é alimentar mais conteúdo do que o necessário em plataformas que têm processamento mais lento. Consegue ver algo de errado nisso?

Com a abordagem mobile first, desde o começo os elementos essenciais são incluídos até nas plataformas menores. Isso conduz a uma experiência mais agradável, uma vez que os tempos de download são reduzidos. Os recursos adicionais são carregados apenas nas plataformas que os suportam bem.

Prós e contras do mobile first

 

O único contra a respeito do mobile first é a dificuldade – requer paciência, tempo e experiência. É como um quebra-cabeça: algo que se encaixa no mobile não cabe no site e vice-versa. No fim, o objetivo é transformar essas duas plataformas em uma, indistintamente.

Não é fácil encarar uma tela menor, com menos recursos e muito mais dor de cabeça. Além disso, também não é um território confortável. Em relação ao web design, é muito mais difícil começar pelo mobile e fazer o caminho no sentido web. Por outro lado, se começar pelo mobile parece muito difícil, é porque há nesse tema alguns assuntos que você precisa saber.

Já os prós são muitos. O primeiro deles é o favorecimento da responsividade do site. Eric Schmidt, CEO do Google, disse em 2010 “Acho que o nosso maior projeto é tornar o mobile a resposta para praticamente tudo”. O tempo de carregamento também é reduzido, o que favorece o ranqueamento da página. Isso sem contar a experiência de compra dos usuários na sua loja virtual.

Conclusão

 

Embora não seja fácil e talvez não seja tão divertido quanto você imagina, pensar mobile first é pensar no futuro. A cada ano, mais e mais consumidores recorrem aos seus smartphones para fazer compras. Nos Estados Unidos, 25% da população só usa a internet em dispositivos móveis. Gerações mais novas estão dando preferência à simplicidade e usabilidade. Pensar mobile first, então, é estar na vanguarda do webdesign e cultivar um negócio pronto para as mudanças que estão por vir.

 

Que tal começar já? Conte-nos a sua experiência!

 

Leia também:

12 ferramentas úteis para e-commerce
Customer experience é fundamental para reter mais clientes
9 melhores exemplos de e-mail marketing e quando usar

6 comentários em “Mobile first: o que é, como fazer, prós e contras

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

  1. Gabriela, que conteúdo sensacional vocês estão produzindo neste blog, parabéns!!

    Trabalho em uma agência focada em e-commerce e poucas vezes encontrei um conteúdo tão simples, mas também completo.

    1. Oi, Eduardo!

      Ah, obrigada pelo elogio! Ficamos felizes em saber que podemos ajudar com o nosso conteúdo. Missão cumprida!
      Que bacana! Já que você também trabalha com e-commerce, fique à vontade para sugerir assuntos para o blog, será sempre bem-vindo.

    2. Oi, Eduardo!
      Ah, obrigada pelo elogio! Ficamos felizes em saber que podemos ajudar com o nosso conteúdo. Missão cumprida!
      Que bacana! Já que você também trabalha com e-commerce, fique à vontade para sugerir assuntos para o blog, será sempre bem-vindo.