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 è assolutamente 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, descritto in Come fornire la tua esperienza di installazione in-app.
Best practice
Esistono alcune best practice che si applicano indipendentemente dai pattern promozionali utilizzati sul tuo sito.
- Mantieni le promozioni al di fuori del flusso dei percorsi degli utenti. Ad esempio, in una pagina di accesso della PWA, posiziona l'invito all'azione sotto il modulo di accesso e il pulsante di invio. L'uso disgregante di pattern promozionali riduce l'usabilità della tua 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 è stato attivato
l'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, Chrome per computer mostra un pulsante di installazione nell'omnibox.
Chrome per Android mostra una mini barra delle informazioni all'utente, anche se questo può essere
impedito chiamando preventDefault() sull'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 appaiono in punti come la navigazione nel 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 suo percorso.
I siti che scelgono con attenzione il momento in cui attivare l'interfaccia utente della promozione 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 "Ottieni app" in una posizione appropriata nei tuoi contenuti web. Assicurati che il pulsante non blocchi altre funzionalità importanti e non interferisca con il percorso dell'utente nella tua applicazione.
Intestazione fissa
Si tratta di un pulsante di installazione che fa parte dell'intestazione del tuo sito. Altri contenuti dell'intestazione spesso includono il branding del sito, ad esempio un logo e il menu a tre linee. Le intestazioni possono essere o meno position:fixed, a seconda della funzionalità del sito e delle esigenze degli utenti.
Se utilizzata correttamente, la promozione dell'installazione della PWA dall'intestazione del sito è un ottimo modo per consentire ai clienti più fedeli di tornare più facilmente 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 i tuoi utenti. Prendi in considerazione il targeting selettivo per presentare la tua promozione solo agli utenti che hanno maggiori probabilità di trarne vantaggio.
- Utilizza in modo efficiente lo spazio prezioso dell'intestazione. Valuta cosa altro potrebbe essere utile offrire all'utente nell'intestazione e valuta la priorità della promozione dell'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.
- Fornisci un breve argomento pertinente sul motivo per cui l'utente dovrebbe installare la tua PWA.
Pagina di destinazione
Lo scopo di una pagina di destinazione è promuovere i tuoi prodotti e servizi, quindi è un punto in cui è opportuno ampliare le dimensioni per promuovere i vantaggi dell'installazione della PWA.
Innanzitutto, spiega la proposta di valore del tuo sito, poi comunica ai visitatori cosa guadagneranno dall'installazione.
Accertati di:
- Fai leva sulle funzionalità più importanti per i tuoi visitatori e metti in evidenza le parole chiave che potrebbero averli indirizzati alla tua pagina di destinazione.
- Rendi accattivanti la promozione di installazione e l'invito all'azione, ma solo dopo aver chiarito la tua proposta di valore. Dopotutto, è 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 visto banner di installazione nelle esperienze mobile ed è familiare con le interazioni offerte da un 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 non attivi un evento di conversione che indichi un livello più elevato di coinvolgimento con i tuoi contenuti, ad esempio un acquisto su un sito di e-commerce o la registrazione a un account.
- Fornisci una breve spiegazione del valore dell'installazione della tua PWA nel banner. Ad esempio, puoi distinguere l'installazione di una PWA da un'app per iOS/Android indicando che non occupa quasi spazio di archiviazione sul dispositivo dell'utente o che si installa immediatamente senza un reindirizzamento allo Store.
Interfaccia utente temporanea
L'interfaccia utente temporanea, come il pattern di design della barra di appunti, avvisa l'utente e gli consente di completare facilmente un'azione, in questo caso l'installazione dell'app. Se utilizzati correttamente, questi tipi di pattern di interfaccia utente non interrompono il flusso dell'utente e in genere vengono chiusi automaticamente se ignorati dall'utente.
Mostra la barra delle app dopo alcune interazioni con la tua app. Se viene visualizzata al caricamento della pagina o fuori contesto, può essere facilmente ignorata o causare un sovraccarico cognitivo. In questo caso, gli utenti chiuderanno semplicemente tutto ciò che vedono. Tieni presente che i nuovi utenti del tuo sito potrebbero non essere pronti a installare la tua PWA. Pertanto, è meglio attendere di avere indicatori di interesse forti da parte dell'utente prima di utilizzare questo modello, ad esempio visite ripetute, un accesso dell'utente o un evento di conversione simile.
Accertati di:
- Mostra la barra delle app per 4-7 secondi per dare agli utenti il tempo sufficiente per vederla e reagire, senza intralciare.
- Evita di mostrarla sopra 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 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 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 renderla più visibile poiché il percorso è stato completato.
Accertati di:
- Includi un invito all'azione pertinente. Quali utenti trarranno vantaggio dall'installazione della tua app e perché? Quanto è pertinente al percorso che sta attualmente seguendo?
- Se il tuo brand offre offerte uniche per gli utenti che hanno installato l'app, menzionale.
- Tieni la promozione lontana dai passaggi successivi del tuo percorso, altrimenti potresti incidere negativamente sui tassi di completamento del percorso. Nell'esempio di e-commerce riportato sopra, noterai che l'invito all'azione principale per il pagamento si trova sopra la promozione per l'installazione dell'app.
Procedura di registrazione, accesso o uscita
Questa promozione è un caso speciale del pattern promozionale percorso in cui la scheda della promozione può essere più in evidenza.
In genere, queste pagine vengono visualizzate solo dagli utenti coinvolti, per i quali la proposta di valore della tua PWA è già stata stabilita. Inoltre, spesso non esistono molti altri contenuti utili da inserire in queste pagine. Di conseguenza, è meno disturbante creare un invito all'azione più grande, purché non sia d'intralcio.
Accertati di:
- Evita di interrompere il percorso dell'utente all'interno del modulo di registrazione. Se si tratta di un procedura in più passaggi, ti consigliamo di attendere che l'utente abbia completato il percorso.
- Promuovi le funzionalità più pertinenti per un utente che ha eseguito la registrazione.
- Valuta la possibilità di aggiungere un'altra promozione di installazione nelle aree di accesso della tua app.
Modelli promozionali incorporati
Le tecniche promozionali in linea intrecciano le promozioni con i contenuti del sito. Spesso è più sottile della promozione nell'interfaccia utente, che presenta dei compromessi. La tua promozione deve essere sufficientemente 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 amano in modo più comodo. Concentrati sulla promozione di 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 la richiesta.