Invoering
Mobiele apparaten en de introductie van appstores van apparaatleveranciers hebben het mentale model van gebruikers veranderd over hoe ze software moeten ontdekken, evalueren en installeren. Gebruikers zijn nu zo bekend met appstores en de aanvullende informatie die via appstores wordt verstrekt, zoals context over de app, sociale feedback, beoordelingen enz., dat je de appstore-metafoor ziet opkomen in desktopbesturingssystemen, waaronder ChromeOS, Mac en Windows.
Uitdaging met de hedendaagse installatieoppervlakken
Als een gebruiker tegenwoordig een PWA wil installeren, verschijnt er een infobalk en modale overlay met minimale informatie. Als ze doorgaan met installeren, is het proces te snel voorbij zonder context aan de gebruiker te geven. Dit druist in tegen hun verwachtingen bij het installeren van apps en kan ervoor zorgen dat ze enigszins in de war raken over wat er is gebeurd.
Om ontwikkelaars in staat te stellen geïnstalleerde ervaringen te bieden die vergelijkbaar zijn met native ervaringen, introduceert Chrome een nieuw installatieoppervlak, Richer Install, waarmee ontwikkelaars een beschrijving en schermafbeeldingen aan hun manifestbestand kunnen toevoegen en deze kunnen laten verschijnen in een onderste dialoogvenster in Chrome voor Android.
Dit geeft ontwikkelaars de mogelijkheid om een aantrekkelijker installatieproces te creëren dat beter aansluit bij de verwachtingen van de gebruiker en dat hun bestaande mentale model van geïnstalleerde ervaringen nabootst.
Achterwaartse compatibiliteit
Websites die niet ten minste één screenshot aan hun manifestbestand toevoegen, blijven de bestaande aanwijzingen ontvangen. Dit kan in de toekomst veranderen, afhankelijk van de acceptatie door de ontwikkelaarsgemeenschap en de reactie van gebruikers.
Een voorbeeld van de gebruikersinterface bekijken
Deze gebruikersinterface werkt vanuit Chrome 94 op Android en Chrome 108 op desktop .
Deze functie is ingeschakeld op squoosh.app en kan daar worden bekeken.
Implementatie
Om de rijkere installatie-UI-dialoog weer te geven, moeten ontwikkelaars ten minste één screenshot toevoegen voor de overeenkomstige vormfactor in de screenshots array. Het description is niet verplicht, maar wordt wel aanbevolen. Het inhoudsdialoogvenster is opgebouwd met behulp van de inhoud van de screenshots en description om de ervaring meer vergelijkbaar te maken met een app store-installatie. Deze gebruikersinterface helpt gebruikers te identificeren dat ze een app aan hun apparaat toevoegen, en met meer beschikbare ruimte kunnen ontwikkelaars tijdens de installatie specifieke context aan hun gebruikers bieden.
Ontwikkelaars kunnen het description bijvoorbeeld gebruiken om de functies van de app te benadrukken die de gebruiker ertoe aanzetten de app op zijn apparaten te houden, en met de screenshots kunnen ze het uiterlijk van de webapp als een op zichzelf staande app presenteren, met alle gemakkelijke toegang tot dat platform. apps hebben.
Voor een gedetailleerde specificatie en een handleiding om ze aan uw app toe te voegen, gaat u naar het Richer Install UI-patroon .
Feedback
In de toekomst zullen we overwegen om andere gegevens toe te voegen, zoals categorieën en app-beoordelingen, maar dit zal gebaseerd zijn op feedback van ontwikkelaars en gebruikers.
De komende maanden willen we graag zien hoe ontwikkelaars dit nieuwe UI-patroon verkennen en willen we graag feedback van u krijgen. Neem contact met ons op door dit formulier in te vullen
,
Invoering
Mobiele apparaten en de introductie van appstores van apparaatleveranciers hebben het mentale model van gebruikers veranderd over hoe ze software moeten ontdekken, evalueren en installeren. Gebruikers zijn nu zo bekend met appstores en de aanvullende informatie die via appstores wordt verstrekt, zoals context over de app, sociale feedback, beoordelingen enz., dat je de appstore-metafoor ziet opkomen in desktopbesturingssystemen, waaronder ChromeOS, Mac en Windows.
Uitdaging met de hedendaagse installatieoppervlakken
Als een gebruiker tegenwoordig een PWA wil installeren, verschijnt er een infobalk en modale overlay met minimale informatie. Als ze doorgaan met installeren, is het proces te snel voorbij zonder context aan de gebruiker te geven. Dit druist in tegen hun verwachtingen bij het installeren van apps en kan ervoor zorgen dat ze enigszins in de war raken over wat er is gebeurd.
Om ontwikkelaars in staat te stellen geïnstalleerde ervaringen te bieden die vergelijkbaar zijn met native ervaringen, introduceert Chrome een nieuw installatieoppervlak, Richer Install, waarmee ontwikkelaars een beschrijving en schermafbeeldingen aan hun manifestbestand kunnen toevoegen en deze kunnen laten verschijnen in een onderste dialoogvenster in Chrome voor Android.
Dit geeft ontwikkelaars de mogelijkheid om een aantrekkelijker installatieproces te creëren dat beter aansluit bij de verwachtingen van de gebruiker en dat hun bestaande mentale model van geïnstalleerde ervaringen nabootst.
Achterwaartse compatibiliteit
Websites die niet ten minste één screenshot aan hun manifestbestand toevoegen, blijven de bestaande aanwijzingen ontvangen. Dit kan in de toekomst veranderen, afhankelijk van de acceptatie door de ontwikkelaarsgemeenschap en de reactie van gebruikers.
Een voorbeeld van de gebruikersinterface bekijken
Deze gebruikersinterface werkt vanuit Chrome 94 op Android en Chrome 108 op desktop .
Deze functie is ingeschakeld op squoosh.app en kan daar worden bekeken.
Implementatie
Om de rijkere installatie-UI-dialoog weer te geven, moeten ontwikkelaars ten minste één screenshot toevoegen voor de overeenkomstige vormfactor in de screenshots array. Het description is niet verplicht, maar wordt wel aanbevolen. Het inhoudsdialoogvenster is opgebouwd met behulp van de inhoud van de screenshots en description om de ervaring meer vergelijkbaar te maken met een app store-installatie. Deze gebruikersinterface helpt gebruikers te identificeren dat ze een app aan hun apparaat toevoegen, en met meer beschikbare ruimte kunnen ontwikkelaars tijdens de installatie specifieke context aan hun gebruikers bieden.
Ontwikkelaars kunnen het description bijvoorbeeld gebruiken om de functies van de app te benadrukken die de gebruiker ertoe aanzetten de app op zijn apparaten te houden, en met de screenshots kunnen ze het uiterlijk van de webapp als een op zichzelf staande app presenteren, met alle gemakkelijke toegang tot dat platform. apps hebben.
Voor een gedetailleerde specificatie en een handleiding om ze aan uw app toe te voegen, gaat u naar het Richer Install UI-patroon .
Feedback
In de toekomst zullen we overwegen om andere gegevens toe te voegen, zoals categorieën en app-beoordelingen, maar dit zal gebaseerd zijn op feedback van ontwikkelaars en gebruikers.
De komende maanden willen we graag zien hoe ontwikkelaars dit nieuwe UI-patroon verkennen en willen we graag feedback van u krijgen. Neem contact met ons op door dit formulier in te vullen