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

Mustafa Kurtuldu

Penny McLachlan

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

Este artigo não é completo, mas oferece um ponto de partida para diferentes maneiras de promover a instalação do PWA. Independentemente do 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

Algumas práticas recomendadas se aplicam independentemente dos padrões promocionais usados no seu site.

• Mantenha as promoções fora do fluxo da jornada do usuário. Por exemplo, em uma página de login do 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 do PWA e impacta negativamente suas métricas de engajamento.
• incluir a possibilidade de dispensar ou recusar a promoção. Lembre-se da preferência do usuário se ele fizer isso e só solicite uma nova solicitação se houver uma mudança na relação dele com seu conteúdo, por exemplo, se ele fez login ou concluiu 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.
• Só mostre a promoção após o evento beforeinstallprompt ser disparado.

Promoção automática do navegador

Quando determinados critérios são atendidos, a maioria dos navegadores vai indicar 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 minibarra de informações ao usuário, embora isso possa 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 se atentam ao acionamento da 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 "Instalar app" em um local adequado no conteúdo da Web. Verifique se o botão não bloqueia outras funcionalidades importantes e não atrapalha a jornada do usuário pelo app.

Cabeçalho fixo

Esse é 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 usado corretamente, promover a instalação do PWA no cabeçalho do site é uma ótima maneira de facilitar o retorno 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 está no tamanho adequado, tem maior importância do que outros conteúdos de cabeçalho possíveis e não é intrusiva.

Você deve:

• 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. Use a segmentação seletiva para apresentar sua promoção apenas aos usuários que provavelmente se beneficiarão dela.
• Use o precioso espaço do cabeçalho de forma eficiente. Considere o que mais seria útil para oferecer ao seu usuário no cabeçalho e pondere 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 seu app, já que os usuários que o abrem estão sinalizando engajamento com a experiência.

Você deve:

• Evite interromper conteúdos importantes da navegação. Coloque a promoção de instalação de PWA abaixo dos outros itens de 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, em seguida, informe aos visitantes o que eles receberão da instalação.

Você deve:

• Atraia os recursos mais importantes para seus visitantes e enfatize palavras-chave que podem tê-los levado até sua página de destino.
• A promoção de instalação e a call-to-action precisam ser atraentes, mas somente depois de deixar clara a proposta de valor. Afinal, esta é 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.

Instalar banner

A maioria dos usuários já encontrou banners de instalação em dispositivos móveis e está familiarizada com as interações que eles oferecem. Os banners devem ser usados com cuidado, porque podem atrapalhar o usuário.

Você deve:

• 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 exiba 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 sobre a importância de instalar o PWA no banner. Por exemplo, é possível diferenciar a instalação de um PWA de um app iOS/Android mencionando que ele quase não usa armazenamento no dispositivo do usuário ou que será instalado instantaneamente sem um redirecionamento para a loja.

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 normalmente são dispensados automaticamente se forem ignorados pelo usuário.

Mostre a snackbar após algumas interações com o app. Se ela aparecer no carregamento da página ou fora de contexto, pode ser facilmente esquecida ou levar a uma sobrecarga cognitiva. Quando isso acontece, os usuários simplesmente ignoram tudo o que veem. Lembre-se de que os novos usuários do seu site podem não estar prontos para instalar o PWA. Portanto, é recomendável esperar até que você tenha fortes indicadores de interesse do usuário antes de usar esse padrão, por exemplo, visitas repetidas, login do usuário ou evento de conversão semelhante.

Você deve:

• Mostre a snackbar por 4 a 7 segundos para que os usuários tenham tempo suficiente para ver e reagir a ela, sem atrapalhar.
• Evite mostrá-lo sobre outra interface de usuário temporária, como banners etc.
• Aguarde até ter fortes indicadores de interesse do usuário antes de usar esse padrão, por exemplo, visitas repetidas, login de um usuário ou 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 do seu 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 de compra

Mostre uma promoção de instalação durante ou após uma jornada sequencial, como após os fluxos de reserva ou finalização de compra. Se você exibir a promoção depois que o usuário concluir a jornada, poderá dar mais destaque a ela, já que a jornada foi concluída.

Você deve:

• Inclua uma call-to-action relevante. Quais usuários vão se beneficiar da instalação do app e por quê? Qual é a relevância disso para a jornada da pessoa?
• Mencione sua marca caso ela tenha ofertas exclusivas para usuários de apps instalados.
• Evite que a promoção atrapalhe as próximas etapas da sua jornada ou você poderá afetar negativamente as taxas de conclusão da jornada. No exemplo de e-commerce acima, a principal call-to-action 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 journey, em que o cartão promocional pode ter mais destaque.

Essas páginas geralmente são visualizadas apenas por usuários engajados, com a proposta de valor do PWA já estabelecida. Muitas vezes, também não há muito outro conteúdo útil para colocar nessas páginas. Como resultado, é menos disruptivo fazer uma call-to-action maior, desde que não atrapalhe.

Você deve:

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

Padrões promocionais inline

As técnicas promocionais in-line interligam as 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 sua 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 In-feed aparece entre artigos de notícias ou outras listas de cards de informações no seu 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 serão úteis para seus usuários.

Você deve:

• 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.