UI di installazione PWA più completa

Introduzione

I dispositivi mobili e l'introduzione degli store dei fornitori di dispositivi hanno cambiato il loro comportamento modello mentale di come scoprire, valutare e installare software. Gli utenti ora conoscono molto bene gli store e le informazioni aggiuntive fornite tramite gli store, ad esempio il contesto dell'app, feedback dai social, valutazioni ecc. che emergono dalla metafora dello store nei sistemi operativi desktop come ChromeOS, Mac e Windows.

La sfida delle piattaforme di installazione odierne

Oggi, se un utente vuole installare una PWA, vengono visualizzati una barra delle informazioni e un overlay modale con informazioni. Se gli utenti continuano a effettuare l'installazione, la procedura si conclude troppo rapidamente e non viene contesto per l'utente. Ciò va contro le loro aspettative in merito all'installazione di app e può quindi abbandonarle un po' confusa su quanto è successo.

Un esempio di UI per l'installazione di PWA.
Esempio di UI per l'installazione di PWA.

Per consentire agli sviluppatori di offrire esperienze installate in linea con quelle native. Chrome sta introducendo una nuova piattaforma di installazione, Richer Install, che consente agli sviluppatori di aggiungere descrizione e screenshot nel file manifest e mostrarlo in una finestra di dialogo nel foglio inferiore in Chrome per Android.

Esempio di UI del riquadro inferiore in Chrome.
Esempio di UI del riquadro inferiore in Chrome.

Questo offre agli sviluppatori l'opportunità di creare un processo di installazione più accattivante che si allinei meglio alle aspettative degli utenti e che imitano il loro modello mentale esistente di esperienze installate.

UI di installazione più completa espansa.
UI di installazione più completa espansa.
UI di installazione più avanzata compressa.
UI di installazione più completa compressa.

Compatibilità con le versioni precedenti

I siti web che non includono almeno uno screenshot nel file manifest continueranno a ricevere i prompt esistenti. Questo potrebbe cambiare in futuro a seconda della diffusione della community degli sviluppatori e l'account degli utenti reazione.

Anteprima della UI

Questa UI funziona da Chrome 94 su Android e Chrome 108 su computer.

Questa funzionalità è attiva su squoosh.app e può essere visualizzata in anteprima lì.

Implementazione

Per visualizzare la finestra di dialogo dell'interfaccia utente di installazione più completa, gli sviluppatori devono aggiungere almeno uno screenshot per il fattore di forma corrispondente nell'array screenshots. Il campo description non è obbligatorio, ma è consigliato. La finestra di dialogo dei contenuti è stata creata utilizzando i contenuti dei campi screenshots e description per rendere l'esperienza più simile a quella di un'installazione nello store. Questa UI consente agli utenti di capire che stanno aggiungendo un'app al proprio dispositivo e, con più spazio a disposizione, gli sviluppatori possono fornire un contesto specifico agli utenti al momento dell'installazione.

Ad esempio, gli sviluppatori possono utilizzare il campo description per evidenziare le funzionalità dell'app che incentivano l'utente a mantenerla nei propri dispositivi e con screenshots possono presentare l'aspetto e il design dell'app web come app autonoma, con tutto il facile accesso delle app della piattaforma.

Per specifiche dettagliate e una guida per aggiungerle alla tua app, visita la pagina Pattern UI di installazione avanzata.

Feedback

In futuro prenderemo in considerazione l'aggiunta di altri dati, come le categorie e la valutazione delle app, ma in base al feedback di sviluppatori e utenti.

Nei prossimi mesi vorremmo vedere in che modo gli sviluppatori esplorano questo nuovo pattern di UI e vorrebbe ricevere un feedback da parte tua. Contattaci compilando questo modulo