Mobile First: o método das grandes empresas

Saiba porque priorizar o contexto móvel ao projetar a experiência do usuário

5 min readJul 29, 2014

A web está para os dispositivos móveis assim como a banana para o macaco. Você aí, que nos lê na telinha do celular ou do tablet, é o exemplo real de como as novas formas de acesso à internet têm mudado a maneira como nos relacionamos com o mundo.

Tente se lembrar da última vez que precisou ir até o computador para checar sua caixa de emails. Não vale dizer que foi quando o celular estava sem bateria, viu?

Agora, nos diga: quantas vezes o Google Maps ou o Waze te ajudaram a chegar a um destino desconhecido? Ou ainda: quantas vezes você trocou um post-it por um lembrete no calendário do celular ou por um app de notas? Onde você faz a lista de mercado?

Se as suas respostas te induziram a pensar em algum dispositivo móvel, é sinal que você está convencido de que a web é cada vez mais mobile. Mas, se ainda restou alguma dúvida, saiba que a venda de smartphones e tablets já ultrapassa a de PCs — só em 2013, o Brasil comercializou 35,6 milhões de smartphones e 8,4 milhões de tablets. Sem contar que mais de 60% dos usuários brasileiros acessam a internet pelo celular.

Como contra fatos não há argumentos e para profissionais da tecnologia não existe zona de conforto, a indústria mobile chegou para virar o mundo dos web designers e desenvolvedores do avesso. E o assunto da vez é um conceito que, desde 2011, vem dando o que falar.

É o chamado Mobile First, que ganhou ainda mais popularidade depois que empresas como Facebook, Twitter, Linkedin e Microsoft passaram a utilizá-lo. Todos os novos projetos do Google, por exemplo, são baseados nesse conceito.

Quebrando paradigmas

Com o crescimento das vendas de dispositivos móveis, o conceito de Mobile First vem ganhando força e mudando a tradição do processo de construção de um site.

O precursor e principal defensor dessa metodologia se chama Luke Wroblewski, autor de um livro homônimo que caiu no gosto de web designers e desenvolvedores. Se você ainda não leu, fique tranquilo, colocaremos o link para o ebook ao final do texto.

Para o autor, a facilidade de adicionar conteúdos na versão desktop é a principal responsável pelo excesso de informação na maioria dos sites.

A ideia é simples: desenhe sua solução primeiro para mobile, depois para desktop. Desta forma, você exercitará o seu poder de síntese e conseguirá transmitir as informações necessárias em um espaço reduzido, deixando a navegação mais rápida para o seu usuário.

E, ao transportar para a versão desktop, ficará muito mais fácil, afinal não haverá excesso de conteúdo. Não parece mais lógico do que a ordem oposta?

Olhe para a imagem acima e repare na quantidade de conteúdo do site projetado para desktop. Quanto tempo poderia ter sido poupado se o projeto tivesse iniciado pela versão mobile?

Bem melhor, né? Nem dá para acreditar que é o mesmo site.

Luke costuma usar este exemplo para mostrar como o excesso de informação, em grande parte dos sites, se dá pela facilidade de adicionar conteúdo na versão desktop.

Mais argumentos

Depois de aprender que, quando se trata de Mobile First, síntese é caridade, que tal conhecer outros argumentos que te ajudarão a avaliar o melhor momento para aplicar a metodologia?

Por que começar pelo mobile?

Primeiro porque a tecnologia mobile permite ao desenvolvedor tirar proveito de funções como geolocalização, notificações e truques de usabilidade e; segundo porque, se o seu site suporta um dispositivo mobile, ele pode suportar (quase) qualquer coisa.

Além disso, a atenção para áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada. Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto um HTML bem feito.

Contexto móvel vai além do tamanho da tela

Uma das premissas do Mobile First é acomodar o contexto mais difícil primeiro. Todos nós sabemos que as redes móveis podem ser muito lentas, certo? E que nada chateia mais o usuário do que esperar muito tempo para uma página ser carregada.

Por isso, a velocidade de carregamento e o tamanho de download do site são itens fundamentais para que ele tenha um bom desempenho tanto na versão desktop quanto na mobile. Mesmo porque, os planos de internet móvel no Brasil oferecem pacotes de dados limitados que reduzem a velocidade de navegação de acordo com o uso. Portanto, fazer um site com uma experiência cara e lenta para o usuário está fora de cogitação!

Já que não temos o super poder de acelerar a rede, podemos despertar no usuário a sensação de que o tempo de resposta é mais rápido do que realmente é. Como?

A abordagem do Instagram é um bom exemplo. Quando as pessoas curtem ou comentam uma foto, o app mostra o feedback dessas ações imediatamente. Enquanto o usuário comemora o sucesso da ação, o pedido ainda está sendo processado, em segundo plano, pelo sistema.

Mas tenha muita calma nessa hora. Ao projetar este tipo de interação, se coloque no lugar do usuário. Avalie bem se fazer desta forma é oferecer uma solução ou acumular mais um problema para a navegação.

Conclusão

Informações diretas e acessíveis, facilidade, intuição e velocidade de uso são os ingredientes básicos para uma boa experiência do usuário.

A ascensão do mobile expandiu as formas de interação e nos convidou a repensar a criação de produtos digitais. O Mobile First é uma das técnicas existentes, assim como o Design Responsivo. Há quem se adapte a apenas um desses modelos e há quem prefira unir os dois.

Se você está entrando agora no mundo dos sites adaptáveis a múltiplos dispositivos, não deixe de ler as referências que listamos abaixo.

Se você já trabalha com Design Responsivo e tem opinião formada ou depoimento sobre o Mobile First e outras técnicas, conta pra gente!

Leitura recomendada

Gostou do texto? Compartilhe com os amigos e siga a gente no Facebook e no Twitter. (: