Padrões para promover a instalação do PWA

Mustafa Kurtuldu

Penny McLachlan

Instalar o Progressive Web App (PWA) pode facilitar a busca e o uso do app pelos usuários. Mesmo com a promoção no navegador, alguns usuários não sabem que podem instalar um PWA. Por isso, pode ser útil oferecer uma experiência no app que você pode usar para promover e permitir a instalação do PWA.

Este artigo não é exaustivo, mas oferece um ponto de partida para diferentes maneiras de promover a instalação da sua PWA. Independentemente do padrão ou padrões usados, todos eles levam ao mesmo código que aciona o fluxo de instalação, documentado em Como oferecer sua própria experiência de instalação no app.

Práticas recomendadas

Há algumas práticas recomendadas que se aplicam independentemente dos padrões promocionais que você usa no site.

• Mantenha as promoções fora do fluxo das jornadas do usuário. Por exemplo, em uma página de login de PWA, coloque a call-to-action abaixo do formulário de login e do botão de envio. O uso disruptivo de padrões promocionais reduz a usabilidade da PWA e afeta negativamente as métricas de engajamento.
• Inclua a capacidade de dispensar ou recusar a promoção. Lembre-se da preferência do usuário se ele fizer isso e só peça novamente se houver uma mudança no relacionamento do usuário com seu conteúdo, como se ele tiver feito login ou concluir uma compra.
• Combine técnicas em diferentes partes do PWA, mas tenha cuidado para não sobrecarregar ou incomodar o usuário com a promoção de instalação.
• Mostre a promoção somente depois que o evento beforeinstallprompt for acionado.

Promoção automática do navegador

Quando alguns critérios são atendidos, a maioria dos navegadores indica automaticamente ao usuário que o Progressive Web App pode ser instalado. Por exemplo, o Chrome para computadores mostra um botão de instalação na omnibox.

O Chrome para Android mostra uma miniinfobar ao usuário, mas isso pode ser evitado chamando preventDefault() no evento beforeinstallprompt. Se você não chamar preventDefault(), o banner será exibido na primeira vez que um usuário acessar seu site e atender aos critérios de instalação no Android e novamente após aproximadamente 90 dias.

Padrões promocionais da interface do usuário

Os padrões promocionais da interface do usuário podem ser usados para quase todos os tipos de PWA e aparecem em lugares como navegação em sites e banners. Assim como em qualquer outro tipo de padrão promocional, é importante conhecer o contexto do usuário para minimizar a interrupção da jornada dele.

Os sites que pensam bem quando acionar a interface de promoção alcançam um número maior de instalações e evitam interferir nas jornadas de usuários que não têm interesse na instalação.

Botão de instalação simples

A UX mais simples possível é incluir um botão "Instalar" ou "Obter app" em um local adequado no conteúdo da Web. Verifique se o botão não bloqueia outras funcionalidades importantes e se não atrapalha a jornada do usuário pelo aplicativo.

Cabeçalho fixo

É um botão de instalação que faz parte do cabeçalho do seu site. Outros conteúdos de cabeçalho geralmente incluem branding do site, como um logotipo e o menu de hambúrguer. Os cabeçalhos podem ser position:fixed ou não, dependendo da funcionalidade do site e das necessidades do usuário.

Quando usada de forma adequada, a promoção da instalação de PWA no cabeçalho do site é uma ótima maneira de facilitar a volta dos clientes mais fiéis à sua experiência. Os pixels no cabeçalho do seu PWA são valiosos. Portanto, verifique se a call-to-action de instalação tem o tamanho adequado, é mais importante do que outros conteúdos de cabeçalho possíveis e não é intrusiva.

Não se esqueça de:

• Não mostre o botão de instalação a menos que o beforeinstallprompt tenha sido acionado.
• Avalie o valor do caso de uso instalado para os usuários. Considere a segmentação seletiva para apresentar sua promoção apenas para usuários que provavelmente vão se beneficiar dela.
• Use o precioso espaço do cabeçalho de forma eficiente. Pense em outras opções úteis para oferecer ao usuário no cabeçalho e avalie a prioridade da promoção de instalação em relação a outras opções.

Menu de navegação

O menu de navegação é um ótimo lugar para promover a instalação do app, já que os usuários que abrem o menu estão demonstrando engajamento com sua experiência.

Não se esqueça de:

• Evite interromper o conteúdo de navegação importante. Coloque a promoção de instalação do PWA abaixo de outros itens do menu.
• Ofereça um argumento breve e relevante sobre por que o usuário se beneficiaria com a instalação do PWA.

Página de destino

O objetivo de uma página de destino é promover seus produtos e serviços. Portanto, esse é um lugar em que é apropriado expandir seus negócios para promover os benefícios da instalação do PWA.

Primeiro, explique a proposta de valor do seu site e depois informe aos visitantes o que eles vão receber com a instalação.

Não se esqueça de:

• Apresente os recursos mais importantes para seus visitantes e destaque as palavras-chave que podem ter levado eles à sua página de destino.
• Crie uma promoção de instalação e uma call-to-action chamativas, mas somente depois de deixar sua proposta de valor clara. Afinal, essa é sua página de destino.
• Considere adicionar uma promoção de instalação na parte do app em que os usuários passam a maior parte do tempo.

Banner de instalação

A maioria dos usuários já encontrou banners de instalação em experiências para dispositivos móveis e conhecem as interações oferecidas por um banner. Os banners precisam ser usados com cuidado, porque podem atrapalhar o usuário.

Não se esqueça de:

• Aguarde até que o usuário demonstre interesse no seu site antes de mostrar um banner. Se o usuário dispensar seu banner, não o mostre novamente, a menos que ele acione um evento de conversão que indique um nível mais alto de engajamento com seu conteúdo, como uma compra em um site de e-commerce ou a inscrição em uma conta.
• Forneça uma breve explicação do valor de instalar o PWA no banner. Por exemplo, você pode diferenciar a instalação de uma PWA de um app iOS/Android mencionando que ela quase não usa armazenamento no dispositivo do usuário ou que ela será instalada instantaneamente sem um redirecionamento da app store.

Interface temporária

A interface temporária, como o padrão de design Snackbar, notifica o usuário e permite que ele conclua facilmente uma ação, neste caso, instalar o app. Quando usados corretamente, esses tipos de padrões de interface não interrompem o fluxo do usuário e são dispensados automaticamente se ignorados pelo usuário.

Mostre a barra de informações depois de algumas interações com o app. Se ela aparecer no carregamento da página ou fora do contexto, ela pode ser facilmente ignorada ou levar a sobrecarga cognitiva. Quando isso acontece, os usuários simplesmente dispensam tudo o que veem. Lembre-se de que os novos usuários do seu site podem não estar prontos para instalar a PWA. Portanto, é melhor esperar até ter indicadores de interesse fortes do usuário antes de usar esse padrão, por exemplo, visitas repetidas, um login do usuário ou um evento de conversão semelhante.

Não se esqueça de:

• Mostre a barra de informações por 4 a 7 segundos para que os usuários tenham tempo suficiente para conferir e reagir a ela, sem atrapalhar.
• Evite mostrá-lo sobre outra interface de usuário temporária, como banners etc.
• Aguarde até ter indicadores de interesse fortes do usuário antes de usar esse padrão, por exemplo, visitas repetidas, um login do usuário ou um evento de conversão semelhante.

Após a conversão

Imediatamente após um evento de conversão do usuário, por exemplo, após uma compra em um site de e-commerce, é uma excelente oportunidade para promover a instalação da sua PWA. O usuário está claramente envolvido com seu conteúdo, e uma conversão geralmente indica que ele vai interagir com seus serviços novamente.

Jornada de reserva ou finalização da compra

Mostre uma promoção de instalação durante ou após uma jornada sequencial, como após fluxos de reserva ou de finalização da compra. Se você estiver mostrando a promoção depois que o usuário concluiu a jornada, é possível torná-la mais proeminente, já que a jornada foi concluída.

Não se esqueça de:

• Inclua uma call-to-action relevante. Quais usuários vão se beneficiar da instalação do app e por quê? Como ele é relevante para a jornada em que está?
• Se a sua marca tiver ofertas exclusivas para usuários que instalaram o app, mencione-as.
• Não deixe a promoção atrapalhar as próximas etapas da jornada, ou você poderá afetar negativamente as taxas de conclusão da jornada. No exemplo de e-commerce acima, observe como o call-to-action principal para a finalização da compra está acima da promoção de instalação do app.

Fluxo de inscrição, login ou logout

Essa promoção é um caso especial do padrão promocional de jornada, em que o card de promoção pode ser mais proeminente.

Essas páginas geralmente são visualizadas apenas por usuários engajados, em que a proposta de valor da sua PWA já foi estabelecida. Muitas vezes, não há muito conteúdo útil para colocar nessas páginas. Como resultado, é menos inconveniente criar um call-to-action maior, desde que ele não atrapalhe.

Não se esqueça de:

• Evite interromper a jornada do usuário no formulário de inscrição. Se for um processo com várias etapas, aguarde até que o usuário conclua a jornada.
• Promova os recursos mais relevantes para um usuário registrado.
• Considere adicionar outra promoção de instalação nas áreas de login do seu app.

Padrões de promoção inline

As técnicas de promoção inline misturam promoções com o conteúdo do site. Isso geralmente é mais sutil do que a promoção na interface do usuário, que tem vantagens e desvantagens. Você quer que a promoção se destaque o suficiente para que os usuários interessados a notem, mas não tanto que prejudique a qualidade da experiência do usuário.

In-feed

Uma promoção de instalação no feed aparece entre artigos de notícias ou outras listas de cards de informações na sua PWA.

Seu objetivo é mostrar aos usuários como acessar o conteúdo de que estão gostando com mais conveniência. Concentre-se em promover recursos e funcionalidades que sejam úteis para os usuários.

Não se esqueça de:

• Limite a frequência das promoções para evitar incomodar os usuários.
• Permita que os usuários dispensem as promoções.
• Lembre-se da opção do usuário de dispensar.