Invoering
Begin 2020 heeft het Chrome-team voor mobiel en desktop een plan opgesteld om de vindbaarheid en betrokkenheid van geïnstalleerde webapps te verbeteren. Ons werk heeft geleid tot een toename van meer dan 100% in het aantal PWA-installaties en -betrokkenheid. We hebben dit bereikt door bestaande functies te onderzoeken, A/B-testexperimenten uit te voeren en gebruikersinterviews te houden om inzicht te krijgen in de percepties en verwachtingen van gebruikers. In dit artikel wordt beschreven hoe we daar zijn gekomen.
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 uit een onderzoek dat het team in 2016 uitvoerde, waarbij verschillende snaren werden vergeleken. Het team ontdekte dat Toevoegen aan startscherm beter, zij het marginaal, werkte op mobiel.
Uit verder onderzoek naar taxonomie in 2019 bleek geen verschil, en daarom besloot het team dat de PWA-installatie-ervaring wilde verenigen, het label bij te werken naar Installeren op Android. Een verder onderzoek in 2021 vergeleek de taal Install , Get en Download , en we ontdekten dat gebruikers Install begrepen als het proces dat plaatsvond. Gebruikers hadden het gevoel dat het tikken op een knop met het label Get de gebruiker naar een website zou sturen, en met Download gingen ze ervan uit dat een bestand in hun downloadmap of iets dergelijks terecht zou komen.
Met dit alles in het achterhoofd zijn we tot de conclusie gekomen dat het label Install het beste past bij PWA’s. We raden ontwikkelaars op het webplatform aan om in de toekomst Install als voorkeursreeks te gebruiken.
Installeer pictogram op bureaublad
Op onze desktopplatforms hebben we een ontwerppatroon dat telkens wanneer een website een PWA laadt, Chrome een pil laat zien die aan de rechterkant van de omnibox verschijnt met een pictogram en het label Installeren . Daarna, wanneer een gebruiker een site bezoekt, is alleen het pictogram aanwezig. Als u op deze pil klikt, wordt de installatie van een desktop-PWA geactiveerd.
Het pictogram was aanvankelijk een plusteken, deels vanwege de metafoor Toevoegen aan startscherm die op mobiel wordt gebruikt. Zoals gezegd was de taal die we gebruikten echter Install . De feedback die we ontvingen van de ontwikkelaarsgemeenschap was dat dit pictogram verwarrend was. Bovendien, als een gebruiker de zoomfunctie gebruikte om tekst te vergroten, leek het pictogram voor zoom erg op elkaar, wat de gebruiker nog meer in verwarring bracht.
Ik besloot de perceptie van onze gebruikers te onderzoeken, omdat de meeste feedback anekdotisch was. In samenwerking met onze UX-onderzoekers hebben we een onderzoek uitgevoerd onder 10.000 gebruikers in de VS en Indonesië om het begrip van gebruikers van installatie-iconografie te bepalen. We hebben vijf verschillende ontwerpen getest, waaronder het bestaande, en gebruikers gevraagd 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 vooral afbeeldingen zoals pijlen en apparaten associeerden met de installatie. Op basis van deze conclusies hebben we een A/B/C-test uitgevoerd in Chrome, waarbij we het bestaande ontwerp met twee alternatieven vergeleken. We landden op de pijl die naar beneden wees in een monitor, die aanzienlijk beter presteerde dan de andere twee. We zagen ook een afname van het aantal ontslagen van de installatie-UI met dit nieuwe pictogram.
Het resultaat is het ontwerp dat je vandaag de dag ziet, waarbij het installatiepercentage voor PWA's voor websites meer dan verdubbeld is. We hebben dit pictogram en een mobiel equivalent ook toegevoegd aan onze Material Design-pictogramset , waardoor de community de iconografie kan gebruiken die wij het meest aantrekkelijk vonden.
Natuurlijk zal één enkel pictogram de wereld niet veranderen, wat ons naar onze volgende functie leidt.
Hulp in het product
In-Product Help is een tooltip met blauwe bellen die gebruikers op basis van specifieke criteria informeert over nieuwe functies die hen mogelijk interesseren. We hebben besloten dit ontwerppatroon te lanceren om gebruikers te informeren over de installatiefuncties en om het nieuwe pictogramherontwerp verder te ondersteunen.
Wanneer een gebruiker regelmatig een website bezoekt, gebruikt Chrome een dienst die bekend staat als Site Engagement . Dit 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, lieten we hen de gebruikersinterface voor de installatie van In-Product Help zien. Dit betekende dat we ons alleen richtten op betrokken gebruikers en geen gebruikers lastigvielen die een site één keer bezoeken.
Door gebruik te maken van de hulp in het product op de desktop zagen we een toename van meer dan 100% in het aantal PWA-installaties, wat aantoont dat de focus op betrokken gebruikers de installeerbaarheid van webapps verbeterde.
Rijkere installatie-UI
Het installatieparadigma voor de meeste gebruikers is een winkel. Sinds het midden van de jaren 2000 hebben we gebruikers geleerd dat wanneer ze een app installeren, ze een beschrijving, schermafbeeldingen en andere metagegevens te zien krijgen om hen te helpen beslissen of een app iets is wat ze willen.
Bij 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 web-app en ontwikkelaars in staat zou stellen de PWA's te vieren die vergelijkbaar waren met native ervaringen.
Eerder dit jaar lanceerden we Richer Install , een uitgebreide installatie-UI in Chrome op Android waarmee ontwikkelaars schermafbeeldingen aan hun manifest kunnen toevoegen. Ontwikkelaars kunnen ook een beschrijving toevoegen, wat wordt aanbevolen maar niet noodzakelijk is. Dankzij deze nieuwere gebruikersinterface zagen we het installatiepercentage voor sommige PWA's verdubbelen, wat aantoont dat gebruikers meer vertrouwen hebben in het installeren van webapps als we meer context en rijkere ervaringen bieden. Aan de desktopversie van deze gebruikersinterface wordt momenteel gewerkt.
Conclusie
Het team heeft de afgelopen twee jaar nieuwere functies in Chrome onderzocht en geëxperimenteerd die PWA-ontwikkelaars mogelijk hebben gemaakt en mogelijkheden hebben geboden, en waarmee gebruikers zijn geïnformeerd over de voordelen van webervaringen. Er is nog veel werk dat we kunnen doen, maar gezamenlijk kunnen we de levens van onze gebruikers verbeteren en verrijken en het open web verder ondersteunen.