Você está lendo:

As vantagens e os desafios na implementação do Mobile First

Sobre:
As vantagens e os desafios na implementação do Mobile First

Considerações importantes para a adoção do conceito em seus projetos.

Leandro Vieira
Audio

Você provavelmente está lendo este post no seu celular.

Ou não, se estiver lendo em sua estação de trabalho, que provavelmente é um desktop.

Mas a leitura pode continuar em um dispositivo, e terminar em outro.

Bem como ser compartilhada para a leitura de outro, que não sabemos ao certo como será feito a leitura.

Mapear com precisão a jornada, e comportamento, dos usuários é extremamente desafiante.

Mas os números crescentes do uso mobile no Brasil nos faz ter certeza que precisamos considerar os dispositivos móveis em nossos projetos.

Além disso, me faz te perguntar: por que você ainda não adotou o Mobile First?

Dados esses significativos resultados estatísticos, precisamos considerar as vantagens em adotar o conceito.

E claro, precisamos conhecer e vencer os desafios para sua implementação.

O conceito Mobile First

Ilustração de mobile first

Mobile First é um conceito aplicado em projetos web onde o foco inicial da arquitetura e desenvolvimento é direcionado aos dispositivos móveis.

Simples assim.

Com esse pensamento, toda a execução do processo é invertida, ou seja, ao contrário de iniciar a arquitetura da informação para o desktop, é feito inicialmente para o mobile.

Isso nos faz repensar toda a execução de um projeto digital. Isto é: UX, design, conteúdo, imagens, programação. Tudo!

As vantagens do Mobile First

Talvez os sinais de crescimento do mercado mobile no Brasil seja pouco para você perceber as vantagens.

Também, talvez, seja pouco que é algo promissor, e uma realidade imediata, a ser explorada pelos profissionais de tecnologia e marketing.

Então vamos resumir e focar numa plataforma responsável por quase todo o tráfego gerado para sua presença digital. O Google.

Sim! O Google já é Mobile First.

A indexação do seu site é realizado pelo bot mobile do buscador.

Isso significa dizer que tendo um projeto bem estruturado para os dispositivos móveis você terá mais relevância e por conseguinte melhor posicionamento.

Considerando os crescentes números, as inúmeras oportunidades postas na mesa, a indexação prioritária do maior e mais usado buscador da internet e o significativo uso de redes sociais na palma de nossas mãos.

Dentre essas e inúmeras outras vantagens, lhe pergunto: o seu negócio é Mobile First?

Os desafios da implementação

O maior deles é a mudança de mentalidade sobre o assunto.

É preciso deixar de lado o processo validado, consolidado e aquele fluxo de trabalho que sempre funcionou.

Pensar diferente, agir diferente, sair da zona de conforto para encarar o novo.

Minha percepção na prática sobre a mudança de mindset

Em 2016, visitei 130 agências em 15 capitais brasileira.

Foi um tour imensamente satisfatório que tive a oportunidade de realizar em todas as regiões do Brasil.

Em campo, constatei que a mudança cultural é um grande desafio.

Além disso, ficou evidente dois outros grandes percalços: o prazo e o conhecimento técnico sobre o assunto.

Além da mudança de mindset, prazo e conhecimento, há cinco tópicos que requer que tenhamos uma visão diferente:

  1. Usuários
  2. Negócios
  3. Design
  4. Conteúdo
  5. Presença Digital

Sobre Usuários

Precisamos observar os padrões e comportamentos daqueles que fazem uso diário das nossas soluções.

O desafio pode ser resumido na tríade horário-dia-lugar.

Com base no horário da navegação, o dispositivo em uso para navegar é um, outrora outro.

Um exemplo: você acorda e usa o celular. No trabalho, o desktop. Nos intervalos, volta ao celular. À noite continua com ele.

O dia da semana também impacta. O uso de dispositivos móveis, considerando o mercado B2B, é muito maior aos finais de semana.

Os lugares em que estamos também influencia. Em casa, no trabalho, em viagem. O uso de dispositivos é alternado.

Tudo isso significa dizer que temos padrões diferentes e reflexos no dispositivo em uso, no local em que estamos e na necessidade.

Para lidar com isso, tecnologicamente, é preciso fazer uso das Media Queries e delimitar os breakpoints para adequar a interface e a experiência de acordo com o dispositivo em uso pelo usuário.

Sobre Negócios

Seu negócio, num mundo em que estamos cada vez mais nas palmas da mãos dos usuários, requer um olhar mais atencioso.

Os negócios precisam ser pensados estrategicamente para a realidade dos consumidores.

Para facilitar sua análise, e por conseguinte a adequação da sua estratégia, pense sobre os micro-momentos.

Os micro-momentos são quatro, e organizam as ações que usuários realizam em determinados momentos do nosso cotidiano.

Os momentos são os seguintes:

  1. Eu quero SABER;
  2. Eu quero IR;
  3. Eu quero FAZER;
  4. Eu quero COMPRAR.

E para acompanharmos nossos potenciais consumidores, precisamos que nossos negócios estejam em suas mãos.

Precisamos conhecer e considerar o tipo de website para dispositivo móvel mais adequado.

O Web design Responsivo é um tipo de website para dispositivo móvel e é a recomendação do Google.

Há outras duas opções que exigem maior esforço para ser bem otimizado para os mecanismos de busca.

Os tipos de website para dispositivos móveis são:

  1. Web design Responsivo;
  2. Exibição dinâmica;
  3. URLs separados.

Sobre Design

Embora o Web design Responsivo deva ser considerado, precisamos ir além.

Há poderosos, e pouco utilizados, recursos que deixam a interface e experiência do usuário mais poderosa.

Os arquitetos de soluções, assim como os designers, precisam ter ciência do potencial tecnológico e assim agregar valor a experiência.

Abaixo, cito alguns exemplos relevantes de potenciais recursos a serem usados através de APIs do HTML 5.

Client-Side Storage

Utilizado para armazenar dados locais nos dispositivos em uso, ou para realizar o uso de aplicações offline.

Um exemplo é WhatsApp para Desktop.

Você consegue ler e visualizar o histórico das mensagens, inclusive mídias, mesmo quando não está conectado à internet.

Battery Status API

Utilizado para saber se a bateria está por acabar ou sendo carregada.

Ainda no exemplo do WhatsApp para Desktop, a interface exibe um alerta vermelho quando a bateria do celular está acabando.

O recurso pode ser inteligentemente usado, por exemplo, para alertar o usuário no processo de compra (leia-se preenchimento de formulário) que o dispositivo precisa ser conectado a tomada.

Vibration API

Através desse recurso é possível vibrar o aparelho do usuário.

A funcionalidade pode ser muito útil para interfaces de games, alertas e notificações ao usuário.

Proximity API

Utilizado para detectar a proximidade de objetos à interface.

Um exemplo é quando aproximamos a tela do celular ao ouvido, ela “apaga” para reduzir o consumo de bateria.

Device Orientation API

Utilizado para saber a orientação do dispositivo, ou seja, se ele está em uso no modo retrato (portrait) ou panorama (landscape).

O aplicativo do YouTube ilustra o uso dessa API. A interface é travada para ser utilizada somente no modo retrato.

O modo panorama é aceito somente para a visualização de vídeos.

Web Notifications API

Utilizado para notificar e interagir com o usuário.

Com esse recurso é possível personalizar e tornar a experiência de uso das notificações mais estratégicas e elegantes.

Redes sociais como Facebook e LinkedIn, por exemplo, usam bem o recurso.

Ao contrário de vários blogs que através de serviços externos não tem se preocupado com esse tipo de experiência.

Page Visibility API

Utilizado para saber se a aba em questão está ativa. Ou seja, o usuário realmente está interagindo com a sua interface?

É um recurso incrível para controlar a execução de sliders, players de música e vídeo.

Por exemplo, se o usuário for para outra aba podemos pausar a execução. Com o seu retorno, voltamos à programação normal.

Sobre Conteúdo

Com o advento dos dispositivos móveis, a forma de consumir conteúdo mudou drasticamente.

São muitos conteúdos e plataformas.

As pessoas estão impacientes, querem tudo rápido, só lêem títulos.

Precisamos reconhecer as mudanças causadas nos comportamentos dos usuários com o advento da era Mobile First.

Para facilitar o consumo, e leitura, através das telas menores, considere aplicar a técnica de Readbility.

O que é Readbility?

É um conceito que analisa a facilidade de leitura dos textos.

Para isso é considerado uma fórmula. O termo técnico para o assunto é Flesch Reading Score.

Em sua fórmula, quanto maior a pontuação indica que o texto é de fácil leitura. Por outro lado, uma baixa pontuação indica dificuldades de leitura.

É importante compreender como o funciona o cálculo de legibilidade dos textos. 

Você precisará ter ferramentas ao seu lado que lhe apoiem nessa análise enquanto escreve e que lhe ajude a revisar antes da publicação.

Em resumo o cálculo de readability funciona analisando o tamanho das palavras, sentenças e parágrafos. Além disso há pesos diferentes em variadas situações.

Por exemplo, é recomendado ter menos que 25% das sentenças do texto com menos de 20 palavras em uso.

Para facilitar o consumo dos conteúdos de uma forma mais rápida aos usuários nas plataformas digitais, considere adotar o AMP e FBIA.

O que é AMP?

O AMP (Accelerated Mobile Pages) é a tecnologia para deixar suas páginas carregamento extremamente rápidas no mobile.

Como a grande questão do formato é garantir o carregamento instantâneo da página, há considerações e regras em seu funcionamento.

Basicamente é necessário uma marcação HTML que é interpretada pelo robô do Google e outras plataformas que suportam o padrão.

A marcação HTML trará mudanças ao Doctype, inclusão de um estilo CSS incorporado à página e inclusão do arquivo JavaScript do AMP de forma assíncrona.

Com essas implementações a página é cacheada nos servidores do Google que a entregam de forma surpreendentemente rápida com uma CDN global e o uso do HTTP 2.0.

O que é FBIA?

Enquanto o AMP é suportado por diversas plataformas, o Instant Article é um formato proprietário do Facebook.

O formato também é conhecido como FBIA (Facebook Instant Article).

Segundo a rede social artigos compartilhados no Newsfeed com o FBIA implementado é 10x mais rápido do que sites mobile padrão; conquista 20% mais leitura e tem uma taxa de abandono 70% inferior.

Sobre Presença Digital

Sua presença em diferentes canais, precisa considerar a conversão desse público para a sua plataforma.

As empresas tem perfis em diferentes redes sociais, por exemplo.

É estratégico utilizá-las para engajamento; mas é ainda mais estratégico faze uso dessas redes para trazer o usuário para o seu domínio.

Seu projeto digital, precisa garantir simultaneamente uma boa performance e a sensação de segurança.

A importância da segurança

O mínimo que você precisa fazer para passar uma imagem de segurança, é fazer uso do certificado de segurança SSL.

Através da Let’s Encrypt é possível ter o protocolo HTTPS sem custo. Além disso a instalação é rápida e simples.

Navegadores de internet, quando detectam páginas sem o uso desse protocolo, alertam o usuário que a página em questão é insegura.

Isso gera desconfiança e sua marca perde credibilidade com o potencial cliente.

A importância da performance

A performance é importante, por que os usuários, como já dito, estão mais impacientes e querem tudo imediatamente.

Além disso, temos uma realidade brasileira de conexões lentas à internet.

O desafio, e considerado o tempo ideal, é alcançar um tempo de carregamento de 2 a 3 segundos.

  • 1 segundo a mais significa reduzir a taxa de conversão em 7x;
  • 1 segundo a mais custa 1.6 bilhão de dólares para a Amazon por ano.

O que você pode fazer de imediato para melhorar sua performance:

  • Fazer uso do protocolo IPv6;
  • Fazer uso do protocolo HTTP/2;
  • Reduzir o tempo do TTFB.

Conclusão

Elaborar um projeto Mobile First é desafiador.

Seja no nascimento de um projeto ou na aplicação do conceito em projetos existentes.

No primeiro cenário é mais fácil, uma vez que permitirá o envolvimento e aprendizado de todos.

A implementação em projetos existentes pode ser faseada, e talvez não seja possível aplicar em sua totalidade.

Mas toda implementação, para termos uma melhor convergência para o Mobile First, será válida para seus usuários e seu negócio.

Você está implementando, ou já concluiu, um projeto Mobile First? Compartilhe sua experiência conosco.

Se você gostou desse artigo sobre WordPress Mobile, provavelmente vai gostar de:
Mais posts como este