Introduzione
All'inizio del 2020, il team di Chrome per dispositivi mobili e computer desktop ha elaborato 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 della PWA. Abbiamo raggiunto questo obiettivo cercando le funzionalità esistenti, eseguendo esperimenti di test A/B e interviste con gli utenti per ottenere insight sulle percezioni e sulle aspettative degli utenti. Questo articolo spiega come siamo arrivati a destinazione.
Lingua di installazione unificata
L'invito all'azione che attiva un'installazione PWA non era coerente sulla piattaforma web. Per Chrome su Android, avevamo scelto Aggiungi alla schermata Home, ma per le nostre piattaforme desktop abbiamo messo in risalto l'opzione Installa. La motivazione di questa discrepanza è stata determinata da uno studio condotto dal team nel 2016, che ha confrontato stringhe diverse. Il team ha riscontrato che Aggiungi alla schermata Home funziona meglio, se solo marginalmente, sui dispositivi mobili.
Un ulteriore studio sulla tassonomia nel 2019 non ha riscontrato alcuna differenza, quindi il team, per unificare l'esperienza di installazione delle PWA, ha deciso di aggiornare l'etichetta in Installa su Android. Secondo un ulteriore studio del 2021, che ha confrontato i linguaggi Install, Get e Download, è emerso che gli utenti considerano Installa come processo in atto. Gli utenti pensavano che toccare un pulsante con l'etichetta Ottieni indirizzasse l'utente a un sito web e, con Scarica, pensavano che un file sarebbe finito nella loro cartella dei download o equivalente.
Tenendo conto di tutto questo, abbiamo concluso che l'etichetta Installa si adatta meglio alle PWA. In futuro consigliamo agli sviluppatori della piattaforma web di adottare Installa come stringa preferita.
Icona di installazione su computer
Sulle nostre piattaforme desktop abbiamo un pattern di progettazione che ogni volta che un sito web carica una PWA, Chrome mostrerà una pillola che appare 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 pulsante, viene attivata l'installazione di una PWA desktop.
L'icona era inizialmente un simbolo più, in parte a causa della metafora Aggiungi a schermata Home utilizzata sui dispositivi mobili. Tuttavia, come accennato, la lingua che abbiamo utilizzato era Installa. Abbiamo ricevuto dalla community di sviluppatori il fatto che questa icona fosse poco chiara. Inoltre, se un utente utilizzava la funzione di zoom per ingrandire il testo, l'icona dello zoom sembrava molto simile, confondendo ancora di più l'utente.
Ho deciso di esaminare la percezione dei nostri utenti, perché la maggior parte dei feedback era aneddotica. Lavorando con i nostri ricercatori UX, abbiamo condotto uno studio su 10.000 utenti negli Stati Uniti e in Indonesia per stabilire la comprensione dell'iconografia delle installazioni da parte degli utenti. Abbiamo testato cinque diversi design, incluso quello esistente, e abbiamo chiesto agli utenti cosa significasse "Installa". Abbiamo scoperto che l'icona attuale, ovvero il simbolo più, era quella più confondibile per i nostri utenti. Molti confondono il simbolo con "medicina", "primo soccorso" e "batterie".
Inoltre, abbiamo rilevato che gli utenti associavano principalmente immagini come frecce e dispositivi all'installazione. Sulla base di queste conclusioni, abbiamo eseguito un test A/B/C in Chrome, confrontando il design esistente con due alternative. Siamo atterrati sulla freccia rivolta verso il basso su un monitor, che ha registrato un rendimento notevolmente migliore rispetto agli altri due. Abbiamo anche notato una diminuzione della chiusura dell'interfaccia utente di installazione con questa nuova icona.
Il risultato è stato il design attuale, che ha visto più che raddoppiare la percentuale di installazione delle PWA per i siti web. Abbiamo anche aggiunto 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 forma di bolla blu che inserisce gli utenti in nuove funzionalità che potrebbero essere di loro interesse in base a criteri specifici. Abbiamo deciso di lanciare questo modello di design per informare gli utenti sulle funzionalità di installazione e per supportare ulteriormente il nuovo design delle nuove icone.
Quando un utente visita regolarmente un sito web, Chrome utilizza un servizio noto come Coinvolgimento con il sito.
Fornisce informazioni sul coinvolgimento di un utente con un sito. Visitando chrome://site-engagement/ puoi vedere i siti con cui interagisci regolarmente. Usando questi punteggi, possiamo determinare
se un utente è interessato a un sito web. Se il sito fosse una PWA e l'utente fosse coinvolto, mostreremo l'UI della guida interna al prodotto di installazione.
In altre parole, ci siamo concentrati solo sugli utenti coinvolti e non su quelli che potrebbero visitare un sito una sola volta.
Utilizzando la guida interna al prodotto su computer, abbiamo registrato un aumento di oltre il 100% nell'installazione della PWA, dimostrando 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 detto agli utenti che ogni volta che installano un'app, vedono una descrizione, screenshot e altri metadati che li aiutano a decidere se un'app è qualcosa che vogliono.
Con le PWA, l'interfaccia utente che abbiamo mostrato quando 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, in grado di fornire ai nostri utenti un contesto sull'app web e consentire agli sviluppatori di celebrare 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 su Android che consente agli sviluppatori di aggiungere screenshot al loro file manifest. Gli sviluppatori possono anche aggiungere una descrizione, che è consigliata ma non necessaria. Grazie a questa UI più recente, abbiamo visto raddoppiare la percentuale di installazione di alcune PWA, dimostrando che gli utenti hanno maggiore fiducia 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 esplorando e sperimentando nuove funzionalità di Chrome che hanno consentito agli sviluppatori di PWA e che hanno contribuito a migliorare e hanno contribuito a informare gli utenti dei vantaggi delle esperienze web. C'è ancora molto lavoro da fare, ma collettivamente possiamo migliorare e arricchire la vita dei nostri utenti e sostenere ulteriormente il web aperto.