A instalação do Progressive Web App (PWA) pode facilitar 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 possa ser usada para promover e ativar 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. Seja qual for o padrão ou padrões usados, todos eles levam ao mesmo código que aciona o fluxo de instalação, documentado em Como fornecer 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 usados no seu site.
- Mantenha promoções fora do fluxo das jornadas 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 o botão de envio. O uso disruptivo de padrões promocionais reduz a usabilidade do PWA e afeta negativamente suas métricas de engajamento.
- Inclua a possibilidade de dispensar ou recusar a promoção. Lembre-se da preferência do usuário se ele fizer isso e só pergunte se houver uma mudança na relação do usuário 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 irritar o usuário com a promoção de instalação.
- Mostre a promoção somente depois que o
evento
beforeinstallpromptfor disparado.
Promoção automática do navegador
Quando determinados critérios são atendidos, a maioria dos navegadores indica automaticamente ao usuário que seu Progressive Web App pode ser instalado. Por exemplo, o Chrome para computador mostra um botão de instalação na omnibox.
O Chrome para Android mostra uma minibarra de informações para o usuário, embora isso possa ser evitado chamando preventDefault() no evento beforeinstallprompt.
Se você não chamar preventDefault(), o banner vai ser exibido na primeira vez
que um usuário acessar seu site e atender aos critérios de instalação no Android
e, depois, 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 e banners do site. 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 preocupam com o momento em que acionam 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 "Instalar o app" em um local apropriado no seu conteúdo da Web. Verifique se o botão não bloqueia outras funcionalidades importantes e se está fora do caminho do usuário pelo aplicativo.
Cabeçalho corrigido
Este é 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 logotipo e 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 corretamente, a promoção da instalação do PWA do cabeçalho do seu site é uma ótima maneira de facilitar o retorno dos seus clientes mais fiéis à sua experiência. Os pixels no cabeçalho do PWA são preciosos. 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.
Você deve:
- Não mostre o botão de instalação, a menos que o
beforeinstallprompttenha sido disparado. - Avalie o valor do caso de uso instalado para os usuários. Use a segmentação seletiva para apresentar a promoção apenas aos usuários que podem se beneficiar dela.
- Use o espaço valioso do cabeçalho de forma eficiente. Considere o que mais seria útil para oferecer ao 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 app, já que os usuários que abrem o menu sinalizam engajamento com a experiência.
Você deve:
- Evite interromper conteúdo de navegação importante. 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 da instalação do PWA.
Página de destino
O objetivo de uma página de destino é promover seus produtos e serviços. Portanto, é apropriado exibir um tamanho grande ao 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 a instalação oferece.
Você deve:
- Atraia os recursos mais importantes para seus visitantes e enfatize as palavras-chave que podem tê-los levado à sua página de destino.
- Deixe sua promoção de instalação e call-to-action atraentes, mas só depois de deixar sua proposta de valor clara. 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 encontrou banners de instalação em experiências para dispositivos móveis e conhece as interações oferecidas por um banner. 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 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 uma 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 da loja.
interface temporária
A interface temporária, como o padrão de design Snackbar, notifica o usuário e permite que ele conclua uma ação com facilidade, nesse 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 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, ela pode ser facilmente perdida ou levar a uma sobrecarga cognitiva. Quando isso acontece, os usuários simplesmente dispensam tudo o que veem. Lembre-se de que novos usuários do site podem não estar prontos para instalar o PWA. Portanto, é melhor esperar até que você tenha 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.
Você deve:
- Mostre a snackbar por 4 e 7 segundos para dar aos usuários tempo suficiente para ver e reagir a ela, sem atrapalhar.
- Evite mostrá-lo sobre outra interface temporária, como banners etc.
- Aguarde até que você tenha 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 engajado com seu conteúdo, e uma conversão geralmente indica que o usuário 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 os fluxos de reserva ou finalização da compra. Se você exibir a promoção depois que o usuário concluir a jornada, poderá dar mais destaque a ela, já que ela foi concluída.
Você deve:
- Inclua uma call-to-action relevante. Quais usuários vão se beneficiar com a instalação do app e por quê? Como isso é relevante para a jornada do cliente?
- Se a sua marca tiver ofertas exclusivas para usuários de apps instalados, mencione essas pessoas.
- Não atrapalhe a promoção nas próximas etapas da sua jornada, porque isso pode afetar negativamente as taxas de conclusão. No exemplo de e-commerce acima, observe como a principal call-to-action para finalização de compra está acima da promoção de instalação do app.
Fluxo de inscrição, login ou saída
Essa promoção é um caso especial do padrão promocional da jornada, em que o card de promoção pode ter mais destaque.
Essas páginas geralmente são visualizadas apenas por usuários engajados, em que a proposta de valor do PWA já foi estabelecida. Muitas vezes, 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 esteja no caminho.
Você deve:
- Evite interromper a jornada do usuário no formulário de inscrição. Se for um processo de várias etapas, espere 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 conectadas do seu app.
Padrões promocionais inline
Técnicas promocionais em linha intercalam promoções com conteúdo do site. Isso geralmente é mais sutil do que a promoção na interface do usuário, que tem vantagens e desvantagens. Sua promoção precisa se destacar o suficiente para que usuários interessados a notem, mas não tanto a ponto de prejudicar 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 PWA.
Seu objetivo é mostrar aos usuários como acessar o conteúdo que eles estão apreciando de forma mais conveniente. Concentre-se em promover recursos e funcionalidades que serão úteis para seus usuários.
Você deve:
- Limitar a frequência das promoções para não incomodar os usuários.
- Permita que os usuários dispensem as promoções.
- Lembre-se da escolha do usuário de dispensar.