L'installazione dell'app web progressiva (PWA) può semplificarne la ricerca e l'utilizzo da parte degli utenti. Anche con la promozione del browser, alcuni utenti non sanno che possono installare una PWA, quindi può essere utile offrire un'esperienza in-app che puoi utilizzare per promuovere e abilitare l'installazione della tua 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 alla PWA, posiziona l'invito all'azione sotto il modulo di accesso e il pulsante di invio. L'utilizzo di pattern promozionali che interrompono l'esperienza riduce l'usabilità della tua PWA e influisce negativamente sulle metriche sul coinvolgimento.
- Includi la possibilità di ignorare o rifiutare la promozione. Ricorda la preferenza dell'utente se sceglie questa opzione e rivolgiti di nuovo all'utente solo se si verifica una variazione nel rapporto dell'utente con i tuoi contenuti, ad esempio se ha eseguito l'accesso o completato un acquisto.
- Combina le tecniche in parti diverse della tua PWA, ma fai attenzione a non sopraffare o infastidire l'utente con la promozione dell'installazione.
- Mostra la promozione solo dopo 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, quindi 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 di 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 della sezione intestazione spesso includono il branding del sito, ad esempio un logo e il menu a tre linee. Le intestazioni possono essere position:fixed o meno 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, quindi assicurati che l'invito all'azione per l'installazione abbia dimensioni adeguate, sia di maggiore importanza rispetto ad altri possibili contenuti dell'intestazione e non sia invadente.
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. Valuta la possibilità di scegliere come target solo gli utenti che hanno maggiori probabilità di trarre vantaggio dalla promozione.
- 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 posto per promuovere l'installazione della tua app, poiché gli utenti che aprono il menu indicano il coinvolgimento con la tua esperienza.
Accertati di:
- Evita di interrompere contenuti di navigazione importanti. 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 luogo in cui è opportuno fare di tutto per promuovere i vantaggi dell'installazione della tua 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 ed evidenzia 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 di installazione nella parte dell'app in cui gli utenti trascorrono gran parte del loro tempo.
Installa il 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 utilizzati con cautela perché possono distrarre 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 modello, attendi di avere indicatori di interesse forti da parte dell'utente, ad esempio visite ripetute, un accesso utente o un 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 spesso indica che l'utente interagirà di nuovo con i tuoi servizi.
Percorso di prenotazione o pagamento
Mostra una promozione di installazione durante o dopo un percorso sequenziale, ad esempio dopo i flussi di prenotazione o 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 ha 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.
Pattern promozionali in linea
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 promozione deve essere abbastanza evidente da attirare l'attenzione degli utenti interessati, ma non così tanto da compromettere la qualità dell'esperienza utente.
In-feed
Una promozione di installazione in-feed viene visualizzata tra gli articoli di notizie o altri elenchi di schede informative nella tua 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.
- Dai agli utenti la possibilità di ignorare le promozioni.
- Ricorda la scelta dell'utente di ignorare la richiesta.