Invoering
Begin 2020 stelde het Chrome-team voor mobiel en desktop een plan op om de vindbaarheid en betrokkenheid van geïnstalleerde webapps te verbeteren. Ons werk leidde tot een toename van meer dan 100% in de installatie en betrokkenheid van PWA's. We bereikten dit door bestaande functies te onderzoeken, A/B-testexperimenten uit te voeren en gebruikers te interviewen om inzicht te krijgen in de percepties en verwachtingen van gebruikers. Dit artikel beschrijft hoe we dit hebben bereikt.
Uniforme installatietaal
De call-to-action die een PWA-installatie activeert, was inconsistent op het webplatform. Voor Chrome op Android hadden we gekozen voor 'Toevoegen aan startscherm' , maar op onze desktopplatforms legden we de nadruk op 'Installeren' . De reden voor deze discrepantie kwam voort uit een onderzoek dat het team in 2016 uitvoerde, waarbij verschillende strings werden vergeleken. Het team ontdekte dat 'Toevoegen aan startscherm' beter werkte, zij het slechts marginaal, op mobiele apparaten.
Een verder onderzoek naar taxonomie in 2019 vond geen verschil, en daarom besloot het team dat de PWA-installatie-ervaring wilde verenigen, het label te updaten naar Installeren op Android. Een verder onderzoek in 2021 vergeleek de taal, Installeren , Ophalen en Downloaden , en we ontdekten dat gebruikers Installeren begrepen als het proces dat plaatsvond. Gebruikers hadden het gevoel dat ze door op een knop met het label Ophalen te tikken naar een website werden gestuurd, en bij Downloaden gingen ze ervan uit dat een bestand in hun downloadmap of een equivalent daarvan terecht zou komen.
Met dit alles in gedachten, concludeerden we dat het label 'Install' het beste past bij PWA's. We raden ontwikkelaars op het webplatform aan om in de toekomst 'Install' als voorkeursstring te gebruiken.
Installatiepictogram op bureaublad
Op onze desktopplatforms hanteren we een ontwerppatroon waarbij Chrome, telkens wanneer een website een PWA laadt, een icoontje aan de rechterkant van de omnibox toont met een pictogram en het label Installeren . Wanneer een gebruiker vervolgens een website bezoekt, is alleen het pictogram zichtbaar. Door op dit icoontje te klikken, wordt de installatie van een desktop-PWA geactiveerd.
Het pictogram was aanvankelijk een plusteken, mede vanwege de metafoor van 'Toevoegen aan startscherm' die op mobiele apparaten wordt gebruikt. Zoals gezegd gebruikten we echter de taal 'Installeren' . De feedback die we van de ontwikkelaarscommunity kregen, was dat dit pictogram verwarrend was. Bovendien leek het pictogram voor zoomen, als een gebruiker de zoomfunctie gebruikte om tekst te vergroten, er erg op, wat de gebruiker nog meer in verwarring bracht.
Ik besloot de perceptie van onze gebruikers te onderzoeken, aangezien de meeste feedback anekdotisch was. Samen met onze UX-onderzoekers voerden we een onderzoek uit onder 10.000 gebruikers in de VS en Indonesië om te bepalen hoe gebruikers installatie-iconografie begrepen. We testten vijf verschillende ontwerpen, waaronder het bestaande, en vroegen gebruikers wat "Installeren" betekende. We ontdekten dat het huidige pictogram, het plusteken, het meest verwarrend was voor onze gebruikers. Velen verwarden het symbool met "medicijnen", "eerste hulp" en "batterijen".
We ontdekten ook dat gebruikers voornamelijk afbeeldingen zoals pijlen en apparaten associeerden met de installatie. Op basis van deze conclusies voerden we een A/B/C-test uit in Chrome, waarbij we het bestaande ontwerp vergeleken met twee alternatieven. We kwamen uit bij de pijl die naar beneden wijst, een pijl die naar een monitor wijst. Deze presteerde aanzienlijk beter dan de andere twee. We zagen ook een afname in het aantal afwijzingen van de installatie-UI met dit nieuwe pictogram.
Het resultaat is het ontwerp dat u vandaag ziet, waarmee de installatiesnelheid van PWA's op websites meer dan verdubbeld is. We hebben dit pictogram en een mobiel equivalent toegevoegd aan onze Material Design-iconenset , zodat de community de iconografie kan gebruiken die wij het meest aantrekkelijk vonden.
Natuurlijk verandert één enkel icoontje de wereld niet, wat ons brengt bij het volgende aspect.
Help in het product
De Help in het product is een blauwe bubbeltooltip die gebruikers op de hoogte brengt van nieuwe functies die hen mogelijk interesseren op basis van specifieke criteria. We hebben besloten dit ontwerppatroon te lanceren om gebruikers te informeren over de installatiefuncties en om het nieuwe ontwerp van het pictogram verder te ondersteunen.
Wanneer een gebruiker regelmatig een website bezoekt, gebruikt Chrome een service genaamd Site Engagement . Deze service geeft informatie over hoe betrokken een gebruiker is bij een site. Door naar chrome://site-engagement/ te gaan, kunt u de sites zien waarmee u regelmatig interactie heeft. Met behulp van deze scores kunnen we bepalen of een gebruiker geïnteresseerd is in een website. Als de site een PWA was en de gebruiker betrokken was, zouden we de gebruikersinterface van de in-product Help tonen. Dit betekende dat we ons alleen richtten op betrokken gebruikers en niet op gebruikers die een site slechts één keer bezoeken.
Door de in-product Help op de desktop te gebruiken, zagen we een toename van meer dan 100% in PWA-installaties. Hieruit blijkt dat de focus op betrokken gebruikers de installeerbaarheid van web-apps verbetert.
Rijkere installatie-UI
Het installatieparadigma voor de meeste gebruikers is een winkel. Sinds midden jaren 2000 hebben we gebruikers geleerd dat ze bij het installeren van een app een beschrijving, screenshots en andere metadata zien die hen helpt te bepalen of een app iets voor hen is.
Met PWA's was de gebruikersinterface die we lieten zien nadat een gebruiker had besloten een webapp te installeren, relatief mager. Daarom besloot het team een rijkere installatie-ervaring te verkennen die onze gebruikers context zou geven over de webapp en ontwikkelaars in staat zou stellen PWA's te waarderen die vergelijkbaar waren met native ervaringen.
Eerder dit jaar lanceerden we Richer Install , een uitgebreide installatie-UI voor Chrome op Android waarmee ontwikkelaars screenshots aan hun manifest kunnen toevoegen. Ontwikkelaars kunnen ook een beschrijving toevoegen, wat aanbevolen is, maar niet noodzakelijk. Dankzij deze nieuwere UI zagen we de installatiesnelheid voor sommige PWA's verdubbelen. Dit toont aan dat gebruikers meer vertrouwen hebben in de installatie van webapps wanneer we meer context en rijkere ervaringen bieden. De desktopversie van deze UI is momenteel nog in ontwikkeling.
Conclusie
Het team heeft de afgelopen twee jaar nieuwe functies in Chrome onderzocht en ermee geëxperimenteerd. Deze functies hebben PWA-ontwikkelaars meer mogelijkheden gegeven en gebruikers geholpen bij het informeren over de voordelen van webervaringen. Er is nog veel werk te verzetten, maar gezamenlijk kunnen we het leven van onze gebruikers verbeteren en verrijken en het open web verder ondersteunen.