Modelli per promuovere l'installazione di PWA

Kurtuldu di Mustafa
Mustafa Kurtuldu
Penny McLachlan
Penny McLachlan

Se installi l'app web progressiva (PWA) puoi facilitare l'individuazione e l'utilizzo da parte degli utenti. Anche con la promozione del browser, alcuni utenti non si rendono conto di poter installare una PWA, quindi può essere utile offrire un'esperienza in-app da utilizzare per promuovere e consentire l'installazione della PWA.

Screenshot del pulsante di installazione semplice in PWA.
Un semplice pulsante di installazione fornito all'interno della PWA.

Questo articolo non è esaustivo, ma offre un punto di partenza per diversi modi per promuovere l'installazione della tua PWA. Indipendentemente dal pattern o o dai pattern utilizzati, tutti rimandano allo stesso codice che attiva il flusso di installazione, come descritto nella sezione Come fornire la tua esperienza di installazione in-app.

Best practice

Esistono alcune best practice che si applicano a prescindere dai modelli promozionali utilizzati sul tuo sito.

  • Mantieni le promozioni al di fuori del flusso dei percorsi degli utenti. Ad esempio, in una pagina di accesso di PWA, inserisci l'invito all'azione sotto il modulo di accesso e il pulsante Invia. L'uso dirompente dei pattern promozionali riduce l'usabilità della PWA e ha un impatto negativo sulle metriche sul coinvolgimento.
  • Includere la possibilità di ignorare o rifiutare la promozione. Ricorda la preferenza dell'utente se lo fa e riproponila solo in caso di un cambiamento nel rapporto dell'utente con i tuoi contenuti, ad esempio se ha eseguito l'accesso o completato un acquisto.
  • Combina le tecniche in diverse parti della PWA, ma fai attenzione a non sovraccaricare o infastidire l'utente con la promozione dell'installazione.
  • Mostra la promozione solo dopo l'attivazione dell'evento beforeinstallprompt.

Promozione automatica del browser

Quando vengono soddisfatti determinati criteri, la maggior parte dei browser indica automaticamente all'utente che la tua app web progressiva è installabile. Ad esempio, nella omnibox viene visualizzato un pulsante di installazione nella omnibox.

Screenshot della omnibox con un indicatore di installazione visibile.
Promozione dell'installazione fornita dal browser (computer).
Screenshot della promozione di installazione fornita dal browser.
Promozione di installazione fornita da browser (dispositivi mobili).

Chrome per Android mostra all'utente una barra delle informazioni mini, che però può essere impedita chiamando preventDefault() nell'evento beforeinstallprompt. Se non chiami preventDefault(), il banner verrà mostrato la prima volta che un utente visita il tuo sito e soddisfa i criteri di installabilità su Android, e di nuovo dopo circa 90 giorni.

Pattern promozionali dell'interfaccia utente

I pattern promozionali dell'interfaccia utente possono essere utilizzati per quasi tutti i tipi di PWA e vengono mostrati in sezioni quali la navigazione del sito e i banner. Come per qualsiasi altro tipo di modello promozionale, è importante conoscere il contesto dell'utente per ridurre al minimo le interruzioni del percorso dell'utente.

I siti che fanno attenzione quando attivano l'interfaccia utente della promozione ottengono un numero maggiore di installazioni ed evitano di interferire con il percorso degli utenti non interessati all'installazione.

Pulsante di installazione semplice

L'esperienza utente più semplice possibile è includere un pulsante "Installa" o "Scarica app" in una posizione appropriata nei tuoi contenuti web. Assicurati che il pulsante non blocchi altre funzionalità importanti e non ostacola il percorso dell'utente nell'applicazione.

Pulsante di installazione personalizzato...
Pulsante di installazione semplice.

Si tratta di un pulsante di installazione che fa parte dell'intestazione del tuo sito. Altri contenuti di intestazione includono spesso il branding del sito, ad esempio un logo e il menu a tre linee. Le intestazioni possono essere position:fixed o meno, a seconda delle funzionalità del tuo sito e delle esigenze degli utenti.

Pulsante di installazione personalizzato nell'intestazione.
Pulsante Installa personalizzata nell'intestazione.

Se utilizzata in modo appropriato, promuovere l'installazione di PWA dall'intestazione del tuo sito è un ottimo modo per consentire ai tuoi clienti più fedeli di tornare più facilmente alla tua esperienza. I pixel nell'intestazione PWA sono preziosi, quindi assicurati che l'invito all'azione per l'installazione abbia dimensioni appropriate, maggiore importanza rispetto ad altri possibili contenuti dell'intestazione e non invadente.

Pulsante di installazione personalizzato nell'intestazione
Pulsante di installazione personalizzato nell'intestazione

Accertati di:

  • Mostra il pulsante di installazione solo se beforeinstallprompt è stato attivato.
  • Valuta il valore del caso d'uso installato per i tuoi utenti. Considera il targeting selettivo per presentare la tua promozione solo agli utenti che hanno probabilità di beneficiarne.
  • Utilizza preziosi spazi di intestazione in modo efficiente. Valuta cos'altro sarebbe utile offrire all'utente nell'intestazione e pondera la priorità della promozione di installazione rispetto ad altre opzioni.
Pulsante di installazione personalizzato nel menu di navigazione
Aggiungi una promozione o un pulsante di installazione in un menu di navigazione a scorrimento.

Il menu di navigazione è un ottimo modo per promuovere l'installazione della tua app, poiché gli utenti che aprono il menu stanno segnalando il coinvolgimento con la tua esperienza.

Accertati di:

  • Evita di interrompere importanti contenuti di navigazione. Inserisci la promozione di installazione PWA sotto le altre voci di menu.
  • Offri una breve presentazione pertinente sui motivi per cui l'utente potrebbe trarre vantaggio dall'installazione della tua PWA.

Pagina di destinazione

Lo scopo di una pagina di destinazione è promuovere i tuoi prodotti e servizi, quindi è una pagina in cui è opportuno raggiungere dimensioni importanti per promuovere i vantaggi dell'installazione della tua PWA.

Richiesta di installazione personalizzata su una pagina di destinazione.
Richiesta di installazione personalizzata su una pagina di destinazione.

Prima di tutto, spiega la proposta di valore del tuo sito, poi fai sapere ai visitatori cosa otterranno dall'installazione.

Accertati di:

  • Fai appello alle funzionalità più importanti per i visitatori e metti in risalto le parole chiave che potrebbero averli portati alla tua pagina di destinazione.
  • Crea una promozione delle installazioni e un invito all'azione accattivanti, ma solo dopo aver chiarito la proposta di valore. Dopotutto, questa è la tua pagina di destinazione.
  • Valuta la possibilità di aggiungere una promozione di installazione nella parte dell'app in cui gli utenti trascorrono la maggior parte del loro tempo.

La maggior parte degli utenti ha riscontrato banner di installazione nelle esperienze su dispositivi mobili e conosce già le interazioni offerte da un banner. I banner devono essere usati con cautela perché possono interrompere l'utente.

Banner di installazione personalizzato nella parte superiore della pagina.
Un banner ignorabile nella parte superiore della pagina.

Accertati di:

  • Attendi che l'utente abbia dimostrato interesse per il tuo sito prima di mostrare un banner. Se l'utente ignora il banner, non mostrarlo più a meno che non attivi un evento di conversione che indichi un livello più elevato di coinvolgimento con i tuoi contenuti, come un acquisto su un sito di e-commerce o la registrazione di un account.
  • Fornisci una breve spiegazione del valore dell'installazione della PWA nel banner. Ad esempio, puoi distinguere l'installazione di una PWA da un'app per iOS/Android indicando che non utilizza quasi spazio di archiviazione sul dispositivo dell'utente o che verrà installata immediatamente senza il reindirizzamento dello store.

UI temporanea

Una UI temporanea, come il pattern di progettazione Snackbar, notifica all'utente e consente di completare facilmente un'azione, in questo caso l'installazione dell'app. Se utilizzati correttamente, questi tipi di pattern UI non interrompono il flusso utente e in genere vengono chiusi automaticamente se vengono ignorati dall'utente.

Banner di installazione personalizzato come snackbar.
Una snackbar ignorabile che indica che la PWA è installabile.

Mostra la snackbar dopo alcune interazioni con la tua app. Se appare al caricamento della pagina o fuori contesto, può facilmente sfuggire o portare a un sovraccarico cognitivo. In questo caso, gli utenti ignorano tutto ciò che vedono. Ricorda che i nuovi utenti del tuo sito potrebbero non essere pronti a installare la tua PWA. Di conseguenza, ti consigliamo di attendere di ottenere indicatori di interesse forti dell'utente prima di utilizzare questo pattern, ad esempio visite ripetute, un accesso di un utente o un evento di conversione simile.

Banner di installazione personalizzato come snackbar.
Una snackbar ignorabile che indica che la PWA è installabile.

Accertati di:

  • Mostrare la snackbar per 4-7 secondi per dare agli utenti abbastanza tempo per vederla e reagire, senza ostacolarla.
  • Evita di mostrarla su altre UI temporanee come banner e così via.
  • Prima di utilizzare questo pattern, ad esempio visite ripetute, accesso di un utente o eventi di conversione simili, attendi di ottenere indicatori di interesse forti dell'utente.

Dopo la conversione

Subito dopo un evento di conversione dell'utente, ad esempio dopo un acquisto su un sito di e-commerce, è un'ottima opportunità per promuovere l'installazione della tua PWA. L'utente interagisce chiaramente con i tuoi contenuti e una conversione spesso indica che l'utente interagirà di nuovo con i tuoi servizi.

Una promozione di installazione dopo la conversione.
Una promozione di installazione dopo che un utente ha completato un acquisto.

Percorso di prenotazione o pagamento

Mostra una promozione di installazione durante o dopo un percorso sequenziale, ad esempio i flussi di pagamento o di prenotazione. Se mostri la promozione dopo che l'utente ha completato il percorso, spesso puoi renderla più in evidenza poiché il percorso è stato completato.

Una promozione di installazione dopo il percorso di un utente.
Una promozione di installazione dopo il percorso di un utente.

Accertati di:

  • Includi un invito all'azione pertinente. Quali utenti traggono vantaggio dall'installazione della tua app e perché? Quanto è attinente al percorso che stanno seguendo?
  • Se il tuo brand propone offerte esclusive per gli utenti di app installate, menzionale.
  • Evita di incorrere nella promozione dei passaggi successivi o può influenzare negativamente le percentuali di completamento del percorso. Nell'esempio di e-commerce riportato sopra, nota come l'invito all'azione principale al pagamento si trova sopra la promozione per l'installazione di app.

Flusso di registrazione, accesso o uscita

Questa promozione è un caso speciale del modello promozionale di percorso in cui la scheda promozionale può essere più in evidenza.

Un pulsante di installazione personalizzato nella pagina di registrazione.
Un pulsante di installazione personalizzato nella pagina di registrazione.

Queste pagine di solito vengono visualizzate solo da utenti coinvolti, dove la proposta di valore della tua PWA è già stata stabilita. Spesso non ci sono molti altri contenuti utili da inserire in queste pagine. Di conseguenza, inserire un invito all'azione più ampio è meno invasivo, purché non ne sia d'intralcio.

Accertati di:

  • Evita di interrompere il percorso dell'utente all'interno del modulo di registrazione. Se si tratta di un processo in più passaggi, potresti voler attendere che l'utente abbia completato il percorso.
  • Promuovere le funzionalità più pertinenti per un utente che si è registrato.
  • Valuta la possibilità di aggiungere un'ulteriore promozione di installazione nelle aree della tua app in cui hai eseguito l'accesso.

Pattern promozionali in linea

Le tecniche promozionali in linea intrecciano le promozioni ai contenuti del sito. Spesso questo è più discreto della promozione nell'interfaccia utente, che presenta dei compromessi. La tua promozione deve spiccare in modo tale da essere notata dagli utenti interessati, ma non tanto da pregiudicare la qualità della tua esperienza utente.

Annuncio in-feed

Una promozione di installazione in-feed viene visualizzata tra gli articoli o altri elenchi di schede informative nella PWA.

Una promozione di installazione all'interno di un feed di contenuti.
Una promozione di installazione all'interno di un feed di contenuti.

Il tuo obiettivo è mostrare agli utenti come accedere ai contenuti che stanno guardando in modo più agevole. Promuovi le caratteristiche e le funzionalità utili per i tuoi utenti.

Accertati di:

  • Limita la frequenza delle promozioni per evitare di infastidire gli utenti.
  • Offri agli utenti la possibilità di ignorare le promozioni.
  • Ricorda la scelta dell'utente di ignorare.