Gebruikers krijgen apps, vooral platform-apps, doorgaans via appstores of door een pakket te downloaden en te installeren. Tegenwoordig verschuift zelfs de desktopervaring naar het aanbieden van apps in gecentraliseerde winkels.
Voor webapps is het model anders: gebruikers hoeven niet naar een gecentraliseerd app-depot te gaan om een webapp te krijgen, niet alle webervaringen kunnen standaard worden geïnstalleerd, het installeren van een app kan verschillen tussen platforms en browsers, browsers hebben zelfs verschillende menu's en oppervlakken om de app te installeren. Zodra de gebruiker op die installatieoptie klikt, bevat het standaarddialoogvenster geen extra informatie, zoals hieronder weergegeven:
Het maken van web-apps die kunnen worden geïnstalleerd en dezelfde interacties kunnen bieden als platform-apps, vereist technisch werk om dergelijke ervaringen mogelijk te maken, samen met goede begeleiding voor gebruikers om te profiteren van deze andere installatiestroom.
Met de Richer Install UI hebben webontwikkelaars een nieuwe mogelijkheid om hun gebruikers tijdens de installatie specifieke context over hun app te geven. Deze gebruikersinterface is beschikbaar voor mobiel vanaf Chrome 94 en voor desktop vanaf Chrome 108. Hoewel Chrome de eenvoudige installatiedialogen voor installeerbare apps blijft aanbieden, geeft deze grotere gebruikersinterface ontwikkelaars de ruimte om hun webapp onder de aandacht te brengen. Het maakt het installatieproces ook vertrouwder omdat het vergelijkbaar is met de dialoogvensters uit app-winkels.
Rijkere installatie-UI inschakelen
Om het Richer Install UI-dialoogvenster weer te geven, moeten ontwikkelaars ten minste één screenshot toevoegen voor de overeenkomstige vormfactor in de screenshots array. Het description is niet vereist, maar wordt wel aanbevolen. Het inhoudsdialoogvenster is opgebouwd met de inhoud van deze twee velden, waardoor de ervaring meer lijkt op een app-winkelinstallatie. Hierdoor kunnen gebruikers 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 apparaat te houden. Met de screenshots kunnen ze de look en feel van de webapp als standalone presenteren, met alle gemakkelijke toegang die 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 .
De oudere stijl van de installatieprompt leverde weinig informatie en context op. Dit kwam niet overeen met de verwachtingen van gebruikers over wat installatie betekent en kon hen in verwarring brengen over wat er gebeurde. Velen wezen het installatieverzoek volledig af, wat ook slecht was voor de bedrijven die ze bouwden.
Met rijkere installaties kunt u ervaringen creëren die meer lijken op die op besturingssystemen.
Je kunt er zelf een bouwen door het voorbeeld uit het manifestbestand van de Squoosh-app te volgen en je kunt de dialoog live proberen op: https://squoosh.app/ .
Feedback We overwegen andere opties voor rijkere installaties, waaronder categorieën en app-beoordelingen. Om die beslissing te kunnen nemen, hebben we uw feedback nodig. Vertel ons over het ontwerp Is er iets aan de gebruikersinterface van Richer Installs dat niet werkt zoals u had verwacht? Of zijn er specifieke gegevens die je nodig hebt om je idee uit te voeren? Heeft u een vraag of opmerking? Vul dit formulier in
Foto door Kaboompics.com op Pexels