UI di installazione PWA più completa

Introduzione

I dispositivi mobili e l'introduzione degli store dei fornitori di dispositivi hanno cambiato il modello mentale degli utenti relativo a come scoprire, valutare e installare software. Gli utenti hanno ora tanta familiarità con gli store e con le informazioni aggiuntive fornite tramite gli store, come il contesto dell'app, i feedback sui social, le valutazioni e così via, che la metafora dello store emerge 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 poche informazioni. Se gli utenti continuano a eseguire l'installazione, la procedura termina troppo rapidamente senza fornire contesto all'utente. Ciò va contro le loro aspettative in merito all'installazione di app e può creare un po' di confusione su quanto è successo.

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

Per consentire agli sviluppatori di offrire esperienze installate in linea con le esperienze native Chrome sta introducendo una nuova piattaforma di installazione, Richer Install, che consente agli sviluppatori di aggiungere una descrizione e screenshot al file manifest e di visualizzarli in una finestra di dialogo del foglio inferiore all'interno di Chrome per Android.

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

Ciò offre agli sviluppatori l'opportunità di creare un processo di installazione più allettante che si allinea meglio alle aspettative degli utenti e che imita 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ù avanzata 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 dell'utilizzo della community di sviluppatori e della reazione degli utenti.

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 all'installazione di uno 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, 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 vorremmo ricevere un vostro feedback. Contattaci compilando questo modulo