O Google define Progressive Web Apps (PWA ou aplicativos progressivos para web, em uma tradução livre), como “experiências que combinam o melhor da web com o melhor dos aplicativos”. É uma tecnologia que vem crescendo ultimamente e disputando espaço com os apps nativos.

A melhora na usabilidade é uma das premissas dessa tecnologia. Sendo assim, no artigo de hoje, trago alguns pontos para se levar em consideração durante a concepção de seu PWA, a fim de te ajudar a oferecer uma experiência excelente ao seu usuário.

Antes de mais nada: o que é um Progressive Web App?

Já chegamos a falar sobre os Progressive Web Apps aqui no blog, mas o que de fato são eles? São basicamente uma aplicação que roda em navegadores mobile que, conforme o usuário interage com ela, se torna cada vez mais parecida com um aplicativo. Nesse processo, a aplicação passa, ao longo do tempo, a oferecer funcionalidades que anteriormente só eram disponibilizadas por apps nativos, como notificações push, funcionamento offline e um ícone da tela inicial.

Veja na prática o exemplo da Magnetis, fintech brasileira do ramo de investimentos:

Mas quais resultados essa tecnologia é capaz de trazer para a sua empresa? O Flipkart, maior e-commerce da Índia, aumentou sua conversão em 70%. Já o Twitter viu o número de tweets enviados crescer em 75% após o lançamento do seu PWA, o Twitter Lite.

Esses dois cases mostram que o uso de um Progressive Web App pode realmente trazer benefícios, contudo ainda assim é necessário ter cuidado para de fato cumprir o que esse método prega e oferecer uma boa experiência ao seu usuário.

Abaixo listo algumas questões básicas para se levar em conta na hora de desenvolver seu web app.

Considere a experiência offline e a performance do seu web app

Se o objetivo de um PWA é oferecer uma experiência ao seu usuário que se compare ao uso de um app nativo, funcionar offline ou quando o usuário está em uma conexão instável de internet é essencial. Mas como é possível oferecer uma boa experiência mesmo neste tipo de cenário? Utilizando o Service Worker!

Service Worker é um script que roda no background da sua aplicação sem a necessidade da interação do usuário ou do funcionamento de uma página da web. Ele permite o armazenamento de dados em cache os entregando quando um usuário estiver offline ou em uma conexão de baixa qualidade, culminando num rápido carregamento das páginas em um cenário no qual o usuário enfrentaria certa demora em acessar seu conteúdo.

Além de oferecer uma boa experiência offline, você estará cuidando para que seu usuário não abandone sua aplicação caso seu carregamento demore. Isso é importante, já que o Google diz que 53% dos usuários mobile abandonam um site que demora mais de 3 segundos para carregar.

Abaixo, um exemplo de como uma aplicação pode ser mais rápida com a utilização da tecnologia Service Worker.

Caso queira saber mais sobre como configurar um Service Worker em sua aplicação, sugiro que leia esse artigo do Google. Também já escrevi aqui no blog sobre como oferecer uma boa experiência offline ao seu usuário.

Engaje seu usuário

Uma das grandes vantagens do PWA é que ele é altamente engajável. Como as notificações push, antes exclusivas dos apps nativos, também podem fazer parte do seu PWA (com ajuda dos Service Workers!), as oportunidades de você trazer seu usuário de volta para a sua aplicação de maneira personalizada são cada vez maiores.

Mas seja consciente: existem algumas boas práticas na hora de enviar push notifications. Por exemplo, não mande notificações ao seu usuário se ele não der permissão e muito menos encha o smartphone dele com mensagens demasiadas e irrelevantes, o que pode ser considerado invasivo. Busque saber quais os melhores horários para enviar notificações, assim você pode oferecê-las de forma relevante e na hora certa. Um PWA com catálogos de restaurantes poderia mandar notificações push antes do almoço ou do jantar, aumentando a probabilidade de ganhar a atenção de seus usuários.

PWA

Considere também criar nichos específicos dentro de sua base de usuários. Você pode dividir sua base entre aqueles que utilizam sua aplicação regularmente, aqueles que usam com menos frequência e aqueles que não usam há algum tempo, por exemplo. Deste modo é possível oferecer um conteúdo mais personalizado para cada tipo de perfil.

Por fim, crie calls to action chamativos, afinal o texto da sua notificação contribui bastante para levar o usuário para dentro de sua aplicação. Certifique-se de que a chamada esteja condizente com cada grupo do seu público alvo para aumentar suas chances de levar fluxo para seu web app.

Ao criar push notifications que realmente agreguem ao seu usuário, as chances de fortificar sua relação com ele aumenta bastante. Para você ter uma ideia, utilizar essa prática aumenta em 88% o engajamento do usuário com seu app, além de dobrar as taxas de retenção.

Faça seu PWA ser “instalável”

Como comentei acima, é possível dar aos seus usuários a possibilidade de instalar um PWA na homescreen de seus celulares. Isso é permitido por meio do web app manifest, que contém informações da sua aplicação, como nome, ícone e descrição, condensadas em um arquivo JSON (JavaScript Object Notation). Assim, é possível ter o controle de como sua aplicação será exibida enquanto estiver em um ambiente no qual geralmente um usuário encontraria um app nativo – como a tela inicial do celular.

Seu usuário poderia facilmente adicionar seu PWA à homescreen do celular ao entrar no menu do navegador mobile e tocar na opção “adicionar à tela inicial”. Essa opção, contudo, não é tão intuitiva e não podemos esperar que todos os usuários tenham tal comportamento. Sendo assim, é possível gerar um pop-up para o visitante após ele visitar seu site mobile algumas vezes, o convidando para adicioná-lo à página inicial.

Qual o benefício disso? Imagine o seguinte: quando você vai instalar um aplicativo você tem que percorrer vários passos, como ir até a loja de aplicativos, buscar pelo app, baixá-lo (o que, dependendo da sua conexão, pode demorar), instalá-lo e em vários casos realizar um cadastro e/ou login antes de começar a usá-lo de fato. Permitir instalar um ícone do seu site na tela inicial do usuário elimina várias dessas etapas, dinamizando o processo de instalação e uso. O que você acharia de não perder 20% dos seus usuários a cada etapa de instalação de um app?

Seu usuário vai te agradecer: além da sua aplicação agora finalmente funcionar como um app, provendo uma experiência muito melhor, ele terá rápido acesso ao seu site, sem precisar digitá-lo no navegador ou baixar um aplicativo na loja de apps de seu celular.

Teste seu PWA

Para entender se você deve optar por um Progressive Web App para seu negócio, sugiro que leia um artigo que já postamos aqui no blog no qual comparamos os web apps com apps nativos. Caso escolha por desenvolver um PWA, não deixe de levar em conta as dicas de usabilidade que escrevi acima para ter uma aplicação que ofereça a melhor experiência possível para seu usuário.

Submeter sua aplicação a testes que validam se o seu PWA está pronto para oferecer uma boa usabilidade é uma boa aposta. Checar como está o funcionamento offline da aplicação, sua performance e a qualidade das suas push notifications (tanto técnica, quanto contextual) pode te ajudar a ter certeza de que você está no caminho certo. E, claro, nós da One Day Testing podemos te ajudar nesse processo! Me mande um e-mail em bruno.abreu@sofist.com.br ou ligue em (19) 3291-5321 para conversamos sobre isso.