Se installi la tua app web progressiva (PWA), gli utenti possono trovarla e utilizzarla più facilmente. Anche con la promozione del browser, alcuni utenti non si rendono conto di poter installare una PWA, quindi può essere utile fornire un'esperienza in-app da utilizzare per promuovere e consentire l'installazione 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 dai pattern che utilizzi, tutti portano allo stesso codice che attiva il flusso di installazione, documentato in Come offrire la tua esperienza di installazione in-app.
Best practice
Esistono alcune best practice che si applicano indipendentemente dai pattern promozionali utilizzati sul tuo sito.
- Non includere le promozioni nel flusso dei percorsi degli utenti. Ad esempio, in una pagina di accesso PWA, inserisci l'invito all'azione sotto il modulo di accesso e il pulsante Invia. L'uso invasivo di pattern promozionali riduce l'usabilità della PWA e influisce negativamente sulle metriche sul coinvolgimento.
- Includi la possibilità di ignorare o rifiutare la promozione. Tieni presente la preferenza dell'utente in questo caso e lo riprometti solo in caso di modifica nel rapporto dell'utente con i tuoi contenuti, ad esempio se ha eseguito l'accesso o completato un acquisto.
- Combina tecniche in diverse parti della PWA, ma fai attenzione a non sovraccaricare o infastidire l'utente con la promozione di installazione.
- Mostra la promozione solo dopo che l'evento
beforeinstallpromptè stato attivato.
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, Chrome per desktop mostra un pulsante Installa nella omnibox.
Chrome per Android mostra all'utente una mini barra delle informazioni, anche se ciò può essere
impedibile chiamando preventDefault() all'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 poi 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 compaiono in posizioni come la navigazione del sito e i banner. Come per qualsiasi altro tipo di pattern promozionale, è importante conoscere il contesto dell'utente per ridurre al minimo l'interruzione del suo percorso.
I siti che prestano molta attenzione quando attivano l'UI promozionale ottengono un numero maggiore di installazioni ed evitano di interferire con i percorsi degli utenti che non sono interessati all'installazione.
Pulsante 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 ostacoli il percorso dell'utente all'interno dell'applicazione.
Intestazione corretta
Questo è un pulsante di installazione che fa parte dell'intestazione del tuo sito. Altri contenuti di intestazione spesso includono il branding del sito, ad esempio un logo e un menu a tre linee. Le intestazioni possono essere position:fixed o meno, a seconda della funzionalità
del tuo sito e delle esigenze degli utenti.
Se utilizzata in modo appropriato, promuovere l'installazione della PWA dall'intestazione del tuo sito è un ottimo modo per aiutare i tuoi clienti più fedeli a tornare alla tua esperienza. I pixel nell'intestazione della PWA sono preziosi, pertanto assicurati che l'invito all'azione di installazione sia di dimensioni appropriate, di maggiore importanza rispetto ad altri possibili contenuti dell'intestazione e non invasivi.
Accertati di:
- Non mostrare il pulsante di installazione a meno che non sia stato attivato
beforeinstallprompt. - Valuta il valore del caso d'uso installato per gli utenti. Prendi in considerazione il targeting selettivo per presentare la tua promozione solo agli utenti che hanno maggiori probabilità di trarne vantaggio.
- Utilizza spazio di intestazione prezioso in modo efficiente. Valuta cos'altro sarebbe utile offrire all'utente nell'intestazione e valuta la priorità della promozione di installazione rispetto ad altre opzioni.
Menu di navigazione
Il menu di navigazione è un ottimo modo per promuovere l'installazione della tua app, dato che gli utenti che aprono il menu indicano il loro coinvolgimento con la tua esperienza.
Accertati di:
- Evita di interferire con importanti contenuti di navigazione. Inserisci la promozione per l'installazione della PWA sotto le altre voci di menu.
- Offri una breve presentazione pertinente sul motivo per cui l'utente potrebbe trarre vantaggio dall'installazione della PWA.
Pagina di destinazione
Lo scopo di una pagina di destinazione è promuovere i tuoi prodotti e servizi, quindi è un luogo in cui è opportuno ampliare le dimensioni per promuovere i vantaggi dell'installazione della PWA.
Innanzitutto, spiega la proposta di valore del tuo sito, poi fai sapere ai visitatori cosa otterranno con l'installazione.
Accertati di:
- Fai presa sulle funzionalità più importanti per i tuoi visitatori e metti in evidenza le parole chiave che potrebbero averli indirizzati alla tua pagina di destinazione.
- Fai in modo che la promozione per le installazioni e l'invito all'azione siano accattivanti, ma solo dopo avere chiarito la tua proposta di valore. Dopotutto, questa è la tua pagina di destinazione.
- Valuta la possibilità di aggiungere una promozione per l'installazione nella parte della tua app in cui gli utenti trascorrono la maggior parte del loro tempo.
Installa banner
La maggior parte degli utenti ha riscontrato banner di installazione nelle esperienze sui dispositivi mobili e conosce le interazioni offerte da questi banner. I banner devono essere usati con attenzione perché possono disturbare l'utente.
Accertati di:
- Prima di mostrare un banner, attendi che l'utente abbia dimostrato interesse per il tuo sito. Se l'utente chiude il banner, non mostrarlo di nuovo a meno che l'utente non attivi un evento di conversione che indica 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 differenziare l'installazione di una PWA da un'app per iOS/Android dicendo che non utilizza quasi nessuno spazio di archiviazione sul dispositivo dell'utente o che verrà installata immediatamente senza un reindirizzamento allo store.
UI temporanea
L'interfaccia utente temporanea, come il pattern di progettazione dello Snackbar, invia una notifica all'utente e gli consente di completare facilmente un'azione, in questo caso l'installazione dell'app. Se utilizzati correttamente, questi tipi di pattern di UI non interrompono il flusso dell'utente e in genere vengono ignorati automaticamente se ignorati dall'utente.
Mostra la snackbar dopo alcune interazioni con la tua app. Se appare durante il caricamento della pagina o è fuori contesto, può essere facilmente persa 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 PWA. Pertanto, è meglio attendere di ricevere forti indicatori di interesse da parte dell'utente prima di utilizzare questo pattern, ad esempio visite ripetute, accesso di un utente o evento di conversione simile.
Accertati di:
- Mostra la snackbar per un periodo compreso tra 4 e 7 secondi per dare agli utenti abbastanza tempo per vederla e reagire al problema, senza essere d'intralcio.
- Evita di mostrarlo su altre UI temporanee come banner e così via.
- Prima di utilizzare questo pattern, attendi di ricevere indicatori di interesse forti da parte dell'utente, ad esempio visite ripetute, accesso di un utente o evento di conversione simile.
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 indica spesso che l'utente interagirà di nuovo con i tuoi servizi.
Percorso di prenotazione o di pagamento
Mostra una promozione per l'installazione durante o dopo un percorso sequenziale, ad esempio dopo una prenotazione o un flusso di pagamento. Se mostri la promozione dopo che l'utente ha completato il percorso, spesso puoi renderlo più visibile al termine del viaggio.
Accertati di:
- Includi un invito all'azione pertinente. Quali utenti trarranno vantaggio dall'installazione della tua app e perché? Quanto è pertinente per il percorso che sta seguendo attualmente?
- Se il tuo brand ha offerte esclusive per gli utenti di app installate, menzionale.
- Evita di ostacolare i passaggi successivi del tuo percorso, altrimenti puoi incidere negativamente sulle percentuali di completamento del percorso. Nell'esempio di e-commerce riportato sopra, puoi notare come l'invito all'azione principale per il pagamento si trovi sopra la promozione per l'installazione di app.
Procedura di registrazione, accesso o uscita
Questa promozione è un caso speciale del modello promozionale del viaggio in cui la scheda della promozione può essere più in evidenza.
Queste pagine vengono solitamente visualizzate solo da utenti coinvolti, laddove la proposta di valore della PWA è già stata stabilita. Spesso, inoltre, non ci sono molti altri contenuti utili da inserire in queste pagine. Di conseguenza, è meno invasivo creare un invito all'azione più ampio, a patto che non 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, potrebbe essere utile attendere che l'utente completi l'itinerario.
- Promuovere le funzionalità più pertinenti per un utente che ha effettuato la registrazione.
- Valuta la possibilità di aggiungere un'ulteriore promozione per l'installazione nelle aree dell'app in cui hai eseguito l'accesso.
Modelli promozionali incorporati
Le tecniche di promozione in linea mescolano le promozioni con i contenuti del sito. Si tratta spesso di un approccio più discreto rispetto alla promozione nell'interfaccia utente, che comporta dei compromessi. La tua promozione deve essere ben visibile agli utenti interessati, ma non così tanto da distogliere la qualità dell'esperienza utente.
Annuncio in-feed
Viene visualizzata una promozione di installazione in-feed tra articoli di notizie o altri elenchi di schede informative nella PWA.
Il tuo obiettivo è mostrare agli utenti come accedere ai contenuti che guardano in modo più pratico. Concentrati sulla promozione di caratteristiche e funzionalità che siano 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 la richiesta.