Introduzione
All'inizio del 2020, il team di Chrome per dispositivi mobili e computer ha delineato un piano per migliorare la rilevabilità e il coinvolgimento delle app web installate. Il nostro lavoro ha portato a un aumento superiore al 100% delle installazioni e del coinvolgimento delle PWA. Ci siamo riusciti conducendo ricerche sulle funzionalità esistenti, eseguendo esperimenti di test A/B e intervistando gli utenti per ottenere informazioni sulle loro percezioni e aspettative. Questo articolo illustra come abbiamo raggiunto questo risultato.
Lingua di installazione unificata
L'invito all'azione che attiva l'installazione di una PWA non era coerente sulla piattaforma web. Per Chrome su Android, avevamo optato per Aggiungi alla schermata Home, ma sulle nostre piattaforme desktop abbiamo sottolineato Installa. La motivazione di questa discrepanza è stata ricavata da un studio condotto dal team nel 2016 che ha confrontato stringhe diverse. Il team ha scoperto che l'opzione Aggiungi a schermata Home funzionava meglio, anche se solo marginalmente, sui dispositivi mobili.
Un ulteriore studio sulla tassonomia nel 2019 non ha rilevato differenze, pertanto il team, che voleva unificare l'esperienza di installazione delle PWA, ha deciso di aggiornare l'etichetta in Installa su Android. Un ulteriore studio condotto nel 2021 ha confrontato i termini Installa, Ottieni e Scarica e abbiamo scoperto che gli utenti associavano Installa al processo in corso. Gli utenti pensavano che toccare un pulsante con l'etichetta Ricevi li avrebbe indirizzati a un sito web, mentre con Scarica presumevano che un file finisse nella cartella dei download o in una cartella equivalente.
Tenendo presente tutto ciò, abbiamo concluso che l'etichetta Installa è la più adatta per le PWA. Consigliamo agli sviluppatori della piattaforma web di adottare Install come stringa preferita in futuro.
Icona Installa sul computer
Sulle nostre piattaforme desktop, abbiamo un pattern di progettazione che, ogni volta che un sito web carica una PWA, mostra una scheda sul lato destro dell'omnibox contenente un'icona e l'etichetta Installa. Dopodiché, quando un utente visita un sito, sarà presente solo l'icona. Se fai clic su questa pillola, viene attivata l'installazione di una PWA per computer.
Inizialmente l'icona era un simbolo Più, in parte a causa della metafora Aggiungi alla schermata iniziale utilizzata sui dispositivi mobili. Tuttavia, come accennato, il linguaggio che abbiamo utilizzato è Installa. Il feedback che abbiamo ricevuto dalla comunità degli sviluppatori è che questa icona era fuorviante. Inoltre, se un utente utilizzava la funzionalità di zoom per ingrandire il testo, l'icona dello zoom era molto simile, creando ancora più confusione.
Ho deciso di esaminare la percezione dei nostri utenti, poiché la maggior parte dei feedback era aneddotica. Insieme ai nostri ricercatori UX, abbiamo condotto uno studio su 10.000 utenti negli Stati Uniti e in Indonesia per determinare la loro comprensione dell'iconografia di installazione. Abbiamo testato cinque diversi design, incluso quello esistente, e abbiamo chiesto agli utenti cosa significasse "Installa". Abbiamo scoperto che l'icona attuale, il simbolo Più, era quella che causava più confusione tra i nostri utenti. Molti hanno confuso il simbolo con "farmaci", "primo soccorso" e "batterie".
Abbiamo anche scoperto che gli utenti associavano principalmente immagini come 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. Abbiamo scelto la freccia rivolta verso il basso in un monitor, che ha avuto un rendimento significativamente migliore rispetto agli altri due. Abbiamo anche registrato una diminuzione delle chiusure dell'interfaccia utente di installazione con questa nuova icona.
Il risultato è il design che vedi oggi, che ha visto più che raddoppiare la percentuale di installazioni per le PWA rispetto ai siti web. Abbiamo anche aggiunto questa icona e un equivalente per il mobile al nostro set di icone Material Design, consentendo alla community di utilizzare l'iconografia che abbiamo ritenuto più coinvolgente.
Ovviamente, una singola icona non cambierà il mondo, il che ci porta alla nostra prossima funzionalità.
Guida interna al prodotto
La guida in-product è una descrizione comando blu che illustra agli utenti le nuove funzionalità che potrebbero interessarli in base a criteri specifici. Abbiamo deciso di lanciare questo pattern di design per informare gli utenti sulle funzionalità di installazione e supportare ulteriormente il nuovo design delle icone.
Quando un utente visita regolarmente un sito web, Chrome utilizza un servizio noto come Coinvolgimento sul sito.
Fornisce informazioni sul coinvolgimento di un utente con un sito. Se visiti chrome://site-engagement/, puoi vedere i siti con cui interagisci regolarmente. Utilizzando questi punteggi, possiamo 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 in-product per l'installazione.
Ciò significa che ci siamo concentrati solo sugli utenti coinvolti e non su quelli che potrebbero visitare un sito una sola volta.
Grazie all'utilizzo della guida in-product su computer, abbiamo registrato un aumento superiore al 100% delle installazioni di PWA, a dimostrazione del fatto che l'attenzione agli utenti coinvolti ha migliorato l'installabilità delle app web.
UI di installazione più completa
Il paradigma di installazione per la maggior parte degli utenti è uno store. Dalla metà degli anni 2000, abbiamo insegnato agli utenti che ogni volta che installano un'app vedranno una descrizione, screenshot e altri metadati per aiutarli a decidere se l'app è ciò che vogliono.
Con le PWA, l'interfaccia utente che mostriamo dopo che un utente ha deciso di installare un'app web era relativamente scarsa. Per questo motivo, il team ha deciso di esplorare un'esperienza di installazione più completa che fornisse ai nostri utenti il contesto dell'app web e consentisse agli sviluppatori di promuovere le PWA che erano alla pari con le esperienze native.
All'inizio di quest'anno abbiamo lanciato Installazione avanzata, un'interfaccia utente di installazione estesa su Chrome per Android che consente agli sviluppatori di aggiungere screenshot al manifest. Gli sviluppatori possono anche aggiungere una descrizione, che è consigliata, ma non necessaria. Grazie a questa nuova UI, abbiamo registrato il raddoppio del tasso di installazione per alcune PWA, il che dimostra che gli utenti si sentono più sicuri nell'installare app web quando offriamo più contesto ed esperienze più ricche. La versione desktop di questa UI è attualmente in fase di sviluppo.
Conclusione
Negli ultimi due anni il team ha esplorato e sperimentato le funzionalità più recenti di Chrome che hanno consentito e supportato gli sviluppatori di PWA e aiutato a informare gli utenti sui vantaggi delle esperienze web. C'è ancora molto da fare, ma collettivamente possiamo migliorare e arricchire la vita dei nostri utenti e supportare ulteriormente il web aperto.