UI di installazione PWA più completa

Mustafa Kurtuldu
Mustafa Kurtuldu
Adriana Jara
Adriana Jara

Introduzione

I dispositivi mobili e l'introduzione degli store dei fornitori di dispositivi hanno cambiato il modello mentale degli utenti su come scoprire, valutare e installare il software. Ora gli utenti hanno talmente familiarità con gli store e con le informazioni aggiuntive fornite attraverso questi store, come contesto sull'app, feedback social, valutazioni ecc., che la metafora dello store si sta diffondendo nei sistemi operativi desktop, tra cui ChromeOS, Mac e Windows.

Sfida con le piattaforme di installazione odierne

Oggi, se un utente vuole installare una PWA, vengono visualizzate una barra di informazioni e un overlay modale con informazioni minime. Se continuano l'installazione, il processo termina troppo rapidamente senza fornire contesto all'utente. Ciò va contro le loro aspettative in merito all'installazione di app e può lasciarli un po' confusi su ciò che è accaduto.

Esempio di UI di installazione PWA.
Un esempio dell'UI di installazione di PWA.

Per consentire agli sviluppatori di fornire esperienze installate in linea con quelle 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 nel riquadro inferiore di Chrome per Android.

Esempio di interfaccia utente nel riquadro inferiore in Chrome.
Esempio di interfaccia utente nel riquadro inferiore in Chrome.

Questo offre agli sviluppatori l'opportunità di creare una procedura 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ù completa 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 le richieste esistenti. La situazione potrebbe cambiare in futuro a seconda dell'interazione della community di sviluppatori e delle reazioni degli utenti.

Anteprima dell'interfaccia utente

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

Questa funzionalità è abilitata su squoosh.app e qui può essere visualizzata l'anteprima.

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 è realizzata utilizzando i contenuti dei campi screenshots e description per rendere l'esperienza più simile a quella di un'installazione di uno store. Questa UI aiuta gli utenti a identificare che stanno aggiungendo un'app al proprio dispositivo e, con più spazio disponibile, gli sviluppatori possono fornire un contesto specifico agli utenti al momento dell'installazione.

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

Per una specifica dettagliata e una guida per aggiungerli alla tua app, visita la pagina Pattern UI di installazione avanzata.

Feedback

In futuro prenderemo in considerazione l'aggiunta di altri dati, ad esempio categorie e valutazioni delle app, ma ci baseremo sul feedback di sviluppatori e utenti.

Nei prossimi mesi ci piacerebbe vedere in che modo gli sviluppatori esplorano questo nuovo pattern dell'interfaccia utente e vorremmo ricevere un tuo feedback. Contattaci compilando questo modulo