Als online agency is Brthrs gespecialiseerd in het ontwikkelen van websites en mobiele applicaties. Een app wordt op jouw apparaat zelf geïnstalleerd, terwijl een website vanuit de browser te laden is. Beide oplossingen hebben voor- en nadelen.
In de afgelopen jaren is de grens tussen deze twee soorten software steeds meer vervaagd. Websites zijn steeds meer op apps gaan lijken. Gebruikers verwachten van de websites die ze bezoeken minimalistische interfaces en snelle laadtijden. Maar, hoe bied je bezoekers een optimale online ervaring?
Dat is waar de Progressive Web App (PWA) om de hoek komt kijken. PWA’s lijken voor de gebruiker op een app, maar kunnen in de browser worden gebruikt. Het gaat hier dus om een website die zich gedraagt als een app. Met het uiterlijk en de ervaring van een app speelt een PWA in op het toenemende smartphonegebruik.
In dit artikel gaan we dieper in op de best practices voor het ontwikkelen van een Progressive Web App (PWA). Klik om meer te lezen over de voordelen van Progressive Web Apps of om meer te weten te komen over de keuze tussen een PWA en een native app.
1. Mobile first, desktop second
Een Progressive Web App is een website die zich voordoet als mobiele app. Het is daarom ontzettend belangrijk dat de website goed te gebruiken is op alle mobiele apparaten en schermgroottes. Websites ontwikkelen voor mobiele apparaten wordt ook wel responsive ontwikkelen genoemd.
Het belangrijkste hiervan is dat de gebruikers van je PWA geen onverwachte drempels tegenkomen als ze de website op een tablet of telefoon openen. De PWA is immers ontworpen voor je doelgroep, op deze manier kunnen ze er optimaal gebruik van maken.
Een bijkomend voordeel is Google’s ‘Mobile first’ indexatie van websites. Sinds 2018 verkiest Google de mobiele gebruikerservaring van websites boven de desktop variant. Een responsive PWA komt de online vindbaarheid (SEO) van je website dus ten goede.
2. Vereenvoudig stappen voor gebruikers
Bezoekers verwachten niet alleen dat je website foutloos werkt en snel laadt, maar ze willen ook zo min mogelijk handelingen zelf uitvoeren. Het is daarom belangrijk om het voor hen zo eenvoudig mogelijk te maken om taken uit te voeren.
Veelgebruikte in een PWA zijn bijvoorbeeld het invullen van formulieren, betalingen uitvoeren en inloggen. Al deze taken kunnen makkelijker worden gemaakt voor je bezoekers.
Door het HTML-attribuut ‘autocomplete’ te gebruiken, kunnen bezoekers bijvoorbeeld snel formulieren invullen. Invoervelden worden automatisch ingevuld met gegevens die de browser eerder heeft opgeslagen. Lees hier hoe je het autocomplete attribuut op een toegankelijke manier kunt toepassen in jouw PWA.
Voor het uitvoeren van betalingen kun je verschillende mogelijkheden bieden in je PWA. De ene bezoeker prefereert bijvoorbeeld iDeal, terwijl een andere liever achteraf betaalt. Door meerdere opties aan te bieden, wordt de gebruikerservaring verbeterd.
Een andere handige functionaliteit is het bieden van de mogelijkheid om zonder wachtwoord in te loggen. Er wordt geschat dat de gemiddelde persoon zo’n 100 verschillende accounts heeft, die allemaal een wachtwoord nodig hebben. Bij inloggen zonder wachtwoord wordt een verificatiecode via de mail of SMS naar de gebruiker gestuurd. Zo kan deze veilig en snel inloggen.
3. Keep it simple
In de jaren 60 van de vorige eeuw ontwikkelde de Amerikaanse marine een ontwerpprincipe dat vandaag de dag nog veel gebruikt wordt: het KISS principe. KISS staat voor ‘Keep It Simple, Stupid’. KISS design wil zeggen dat het je PWA zo eenvoudig mogelijk moet ontwerpen, zonder onnodige toeters en bellen.
Biedt bezoekers van je PWA de content die ze nodig hebben, een duidelijke Call to Action (zoals een knop of formulier) en de mogelijkheid om meer informatie op te vragen. Op deze manier kan de bezoeker zelf bepalen welke informatie de bezoeker nodig heeft.
4. Verminder laadtijden met een app shell architectuur
Progressive Web Apps zijn gericht op het zo snel mogelijk aanbieden van websites. Hierbij telt iedere seconde die bespaart kan worden. Een manier om de laadtijd van PWA’s te verminderen is terug te vinden in een app shell architectuur.
Een app shell architectuur is een methode om de gebruikerservaring van PWA’s te optimaliseren. Dit gebeurt door een minimale HTML, CSS en JavaScript code (de app shell) te scheiden van de dynamische inhoud van de app.
De inhoud van pagina’s van de PWA zijn bijvoorbeeld dynamische inhoud. Dynamische content verschilt op iedere pagina van elkaar. Onderdelen van de app shell zijn bijvoorbeeld de header, footer en navigatie elementen. Deze zijn op iedere pagina hetzelfde.
Omdat de footer, header en andere onderdelen van de app shell op iedere pagina hetzelfde zijn, hoeft de PWA deze niet iedere keer opnieuw te laden. Deze elementen worden eenmalig geladen, terwijl de dynamische content bij iedere nieuwe paginaweergave opnieuw geladen worden.
Een app shell architectuur helpt een PWA om een snelle en betrouwbare gebruikerservaring te bieden.
5. Laat de gebruiker een shortcut installeren
Eerder in dit artikel las je al dat Progressive Web Apps zich voordoen als normale app. Als ontwikkelaar van PWA’s kan je deze gevoel versterken door de gebruiker een shortcut te laten installeren op zijn mobiele apparaat.
Deze shortcut ziet er hetzelfde uit en werkt hetzelfde als de andere icoontjes op je mobiele telefoon. Wanneer je erop klikt wordt de (web) app opgestart. Het enige verschil is dat een PWA in een browser wordt geopend, bij een app gebeurt dit niet.
Op de telefoon zijn de shortcuts (iconen) voor apps als YouTube, Snapchat en Chrome te zien
6. Benut alle extra mogelijkheden
De implementatie van Progressive Web Apps heeft enkele voordelen boven het gebruik van standaard websites. Door deze mogelijkheden zo veel mogelijk in te zetten, vergroot je het gebruiksgemak van je PWA.
Wist je dat je met PWA’s bijvoorbeeld push notifications kan instellen? Net als mobiele applicaties kun je de gebruiker van je app via een berichtje op de hoogte stellen van iets. Doe dit bijvoorbeeld wanneer je webshop uitverkoop heeft, een product weer op voorraad is of wanneer een actie dreigt te verlopen.
Daarnaast kan een PWA de camera van een mobiele telefoon gebruiken. De meeste websites hebben deze mogelijkheid niet. Door deze functie te gebruiken, zorg je de PWA weer meer als een app aanvoelt.
7. Testen, testen en nog eens testen
Na het opleveren een website of app kom je achter een bekend gezegde onder ontwikkelaars: een website is nooit af. Als websitebouwer kom je zelf regelmatig nog verbeterpunten tegen. Maar, de echte bron van feedback zijn je gebruikers.
Bezoekers van je PWA bieden een schat aan informatie omtrent verbeteringen van je PWA. Denk bijvoorbeeld aan betere plaatsingen van knoppen of navigatie elementen voor optimaal gebruik op mobiele apparaten.
Er zijn meerdere manieren om een PWA te testen. Je kunt software zoals Google’s Lighthouse of Search Console gebruiken voor technische verbeteringen. Andere voorbeelden die de gebruikservaring kunnen meten zijn Hotjar of Microsoft’s Clarity.
Maar, om sommige problemen van je PWA te achterhalen heb je de input van echte gebruikers nodig. Brthrs test ontwikkelde PWA’s altijd met de doelgroep voordat deze opgeleverd worden. Zo voorkom je dat je PWA na de lancering ontoegankelijkheden of onhandige elementen heeft.
Progressive Web App laten maken
Als ontwikkelaar van websites, apps én Progressive Web Apps weet Brthrs alles over op maat gemaakte online oplossingen. We adviseren je graag over de keuze tussen de vele mogelijkheden. Neem contact op om een vrijblijvende afspraak in te plannen, op kantoor in Utrecht of online, we vertellen je graag meer!
