Introduzione
All'inizio del 2020, il team di Chrome per dispositivi mobili e computer ha ideato un piano per migliorare la rilevabilità e il coinvolgimento delle app web installate. Il nostro lavoro ha portato a un aumento di oltre il 100% nell'installazione e nel coinvolgimento delle PWA. A questo scopo, abbiamo analizzato le funzionalità esistenti, eseguendo esperimenti con test A/B e interviste con gli utenti per ottenere informazioni sulle percezioni e le aspettative degli utenti. Questo articolo spiega come ci siamo arrivati.
Lingua di installazione unificata
L'invito all'azione che attiva un'installazione della PWA non era coerente sulla piattaforma web. Per Chrome su Android, avevamo scelto l'opzione Aggiungi a schermata Home, ma sulle piattaforme desktop abbiamo posto la priorità all'opzione Installa. La motivazione di questa discrepanza deriva da uno studio condotto dal team nel 2016, che ha confrontato diverse stringhe. Il team ha scoperto che l'opzione Aggiungi a schermata Home ha funzionato meglio, se solo marginalmente, sui dispositivi mobili.
Un ulteriore studio sulla tassonomia nel 2019 non ha rilevato alcuna differenza, pertanto il team che intendeva unificare l'esperienza di installazione delle PWA ha deciso di aggiornare l'etichetta impostandola su Installa su Android. Un ulteriore studio nel 2021 ha messo a confronto le lingue Installa, Ottieni e Scarica e abbiamo rilevato che gli utenti comprendevano Installa come la procedura in corso. Gli utenti ritenevano che toccare un pulsante con l'etichetta Ottieni avrebbe indirizzato l'utente a un sito web e, con Scarica, ritenevano che un file finisse nella cartella dei download o equivalente.
Tenendo conto di tutto questo, abbiamo concluso che l'etichetta Installa si adatta meglio alle PWA. Consigliamo agli sviluppatori della piattaforma web di adottare Installa come stringa preferita in futuro.
Icona Installa su desktop
Sulle nostre piattaforme desktop, abbiamo un pattern di progettazione che prevede che ogni volta che un sito web carica una PWA, Chrome mostra una pillola visualizzata sul lato destro della omnibox contenente un'icona e l'etichetta Installa. Dopodiché, quando un utente visita un sito, sarà presente solo l'icona. Facendo clic su questo pillola viene attivata l'installazione di una PWA desktop.
Inizialmente l'icona era un simbolo più, in parte a causa della metafora Aggiungi alla schermata Home utilizzata sui dispositivi mobili. Tuttavia, come accennato, la lingua utilizzata era Installa. La community degli sviluppatori ci ha comunicato che questa icona non era chiara. Inoltre, se un utente utilizzava la funzione zoom per ingrandire il testo, l'icona dello zoom era molto simile, confondendo ulteriormente l'utente.
Ho deciso di esaminare le opinioni dei nostri utenti, poiché i feedback erano aneddoti. In collaborazione con i nostri ricercatori UX, abbiamo condotto uno studio con 10.000 utenti negli Stati Uniti e in Indonesia per determinare la loro comprensione dell'iconografia dell'installazione. Abbiamo testato cinque diversi design, incluso quello esistente, e abbiamo chiesto agli utenti che cosa significasse "Installa". Abbiamo scoperto che l'icona corrente, il simbolo Più, non confondeva gli utenti. Molti hanno confuso il simbolo con "medicina", "primo soccorso" e "batterie".
Inoltre, abbiamo riscontrato che gli utenti associano principalmente immagini, ad esempio frecce e dispositivi, all'installazione. In base a queste conclusioni, abbiamo eseguito un test A/B/C in Chrome, confrontando il design esistente con due alternative. Siamo atterrati sulla freccia che punta in basso in un monitor, che ha registrato un rendimento notevolmente migliore rispetto alle altre due. Inoltre, con questa nuova icona abbiamo notato una diminuzione della UI di installazione.
Il risultato è il design attuale, che ha fatto registrare una percentuale di installazione delle PWA più che raddoppiata per i siti web. Abbiamo aggiunto anche questa icona e un equivalente per dispositivi mobili al nostro set di icone di Material Design, consentendo alla community di utilizzare l'iconografia che abbiamo trovato più coinvolgente.
Naturalmente, una sola icona non cambierà il mondo, il che ci porta alla nostra prossima funzionalità.
Guida interna al prodotto
La guida interna al prodotto è una descrizione comando a fumetto blu che indica agli utenti nuove funzionalità che potrebbero essere di loro interesse in base a criteri specifici. Abbiamo deciso di lanciare questo pattern di progettazione per informare gli utenti delle funzionalità di installazione e supportare ulteriormente il nuovo design dell'icona.
Quando un utente visita regolarmente un sito web, Chrome utilizza un servizio noto come Site Engagement.
Fornisce informazioni sul livello di coinvolgimento di un utente con un sito. Se visiti chrome://site-engagement/, puoi visualizzare i siti con cui interagisci regolarmente. Usando questi punteggi, potremmo
determinare se un utente è interessato a un sito web. Se il sito fosse una PWA e l'utente fosse coinvolto, gli mostreremo l'interfaccia utente della guida interna al prodotto per l'installazione.
In questo modo ci siamo concentrati solo sugli utenti coinvolti e non su quelli che visitano un sito una volta.
Grazie all'utilizzo della guida interna al prodotto su computer, abbiamo riscontrato un aumento di oltre il 100% nell'installazione della PWA, dimostrando che concentrarsi sugli utenti coinvolti ha migliorato l'installabilità delle app web.
UI di installazione più avanzata
Per la maggior parte degli utenti, il paradigma di installazione è uno store. A partire dalla metà degli anni 2000, abbiamo insegnato agli utenti che ogni volta che installano un'app, visualizzano una descrizione, degli screenshot e altri metadati per aiutarli a decidere se un'app è qualcosa di loro interesse.
Con le PWA, l'UI mostrata dopo che un utente aveva deciso di installare un'app web era relativamente scarsa. Il team ha quindi deciso di esplorare un'esperienza di installazione più completa, che potesse fornire un contesto ai nostri utenti in merito all'app web e consentire agli sviluppatori di celebrare le PWA che erano in linea con le esperienze native.
All'inizio di quest'anno abbiamo lanciato Richer Install, una UI di installazione estesa su Chrome su Android che consente agli sviluppatori di aggiungere screenshot al file manifest. Gli sviluppatori possono anche aggiungere una descrizione, che è consigliata, ma non necessaria. Grazie a questa interfaccia utente più recente, il tasso di installazione di alcune PWA è raddoppiato, dimostrando che gli utenti sono più sicuri nell'installare le app web quando forniamo più contesto ed esperienze più complete. La versione desktop di questa UI è attualmente in fase di sviluppo.
Conclusione
Il team ha trascorso gli ultimi due anni a esplorare e sperimentare le nuove funzionalità di Chrome che hanno abilitato e offerto gli sviluppatori di PWA e hanno contribuito a informare gli utenti sui vantaggi delle esperienze web. C'è ancora molto lavoro che possiamo fare, ma collettivamente possiamo migliorare e arricchire la vita dei nostri utenti e supportare ulteriormente il web aperto.