Web applicatie toevoegen: Handleiding voor uitbreiding van native app

Veel bekende startups van de laatste 10 jaar zijn begonnen als native apps. Wanneer deze apps zichzelf bewezen hadden, hebben zij de stap naar web gemaakt. Denk hierbij aan Instagram en Uber. Deze bedrijven hadden geen webapp op het moment toen zij hun app voor het eerst lanceerden. Naarmate deze apps bekender zijn geworden is de stap van native naar webapp gemaakt. Deze web versies bieden services aan die vergelijkbaar zijn met hun native app.

In dit artikel zullen we kijken naar de uitdagingen die onderdeel zijn van het proces om native om te zetten in een webapp.

Waarom uitbreiden van native naar een webapp?

Je hebt een native app die populariteit opdoet. Waarom heb je daarnaast een webapp nodig? Hier zijn vaak twee redenen voor te bedenken. Ten eerste, kan een native app de Android en iOS markt verzadigd hebben, waardoor potentiële gebruikers worden misgelopen. Daarnaast kan hiervoor aanleiding zijn als de ervaring beter wordt op een groter scherm. Je kunt dit pad bewandelen wanneer er feedback komt vanuit gebruikers die de bestaande native app willen gebruiken op hun laptop of computer.

Instagram is een voorbeeld dat op basis van beide genoemde redenen de stap naar een webapp heeft gemaakt. In 2012 heeft Instagram een lichte versie van native naar webapp gelanceerd omdat er veel vraag naar was. Door het web component is het mogelijk geworden voor Instagram gebruikers om hun foto’s online te bekijken in plaats van via de native app. In 2017 heeft Instagram haar webapp verbeterd. Aanleiding hiervoor was dat mensen met langzaam internet op hun mobiel moeilijkheden zouden hebben om de native app te gebruiken en downloaden.

Voorbeeld:

Als je de keuze maakt om naast native een webapp te ontwikkelen moet je goede zaken doen. Hierna volgen een aantal populaire native apps die later webapps hebben toegevoegd:

• 1 Password: Samen met een nieuw abonnement service heeft 1Password een webapp gelanceerd waardoor gebruikers hun wachtwoord informatie kunnen achterhalen op 1password.com
• Telegram: Dit is een beveiligde messenger app. Telegram heeft een webapp uitgebracht, zodat hun gebruikers de meeste functies van de native app kunnen gebruiker via een web browser.
• Uber: Uber zijn lichte webapp versie “m.uber” richt zich op mobiele gebruikers die niet hun native app willen of kunnen downloaden. De app is geoptimaliseerd voor gebruikers die niet de nieuwste mobiele telefoons of internet bereik hebben.
• WhatsApp: WhatsApp Web zorgt ervoor dat alle berichten van jouw ingelogde apparaten worden gesynchroniseerd en dat je berichten kunt sturen via een browser. Het ontwikkelen van een webapp is niet zo simpel als het lijkt. Jouw bestaande native app kopiëren en plakken naar een nieuw platform werkt dus simpel gezegd niet. Bij de omzetting zullen er nieuwe toepassingen van jouw app ontstaan en zullen er uitdagingen ontstaan rondom het ontwerp. Daarnaast zal je moeten bepalen of jouw nieuwe webapp in verbinding staat met jouw native app of niet. De backend architectuur zal waarschijnlijk veranderingen moeten ondergaan en de nieuwe webapp moet grondig worden getest. Denk hierbij aan de vele verschillende: browsers, besturingssystemen en apparaten.

Toepassingen voor webapps

Jouw web en native gebruikers zullen niet altijd dezelfde toepassingen nodig hebben. Het is daarom erg belangrijk dat je de doelen en context voor beide gebruikers weet. Op basis van onderzoek moet je bepalen welke functies van de native app nodig zijn met de webapp. De functies die beschikbaar worden via de webapp zullen een idee geven omtrent: ontwerp, backend architectuur, cross-platform ervaring en keuzes die gemaakt moeten worden in de toekomst.

Als voorbeeld kijken we naar Pocket Prep. De native app gebruikers hebben behoefte om snel een toets of een paar vragen te beantwoorden als ze bijvoorbeeld wachten in een rij om af te kunnen rekenen of tijdens een snelle auto rit. Deze gebruikers zijn mobiel en sneller afgeleid waardoor zij meer waarde hechten aan gemak. Daar en tegen gebruiken web gebruikers de app wanneer zij aan het studeren zijn in de bibliotheek of thuis. Op deze momenten is er minder afleiding en wordt er meer tijd genomen om langere toetsen te maken. Dit is makkelijker wanneer er gebruik wordt gemaakt van een computer, laptop of tablet.

Ontwikkelen van webapps vs. native apps

Ondanks web en mobiel steeds meer op elkaar zijn gaan lijken door de jaren heen zijn er verschillende ontwerp items die bekeken moeten worden tijdens het ontwikkelen van een webapp. Een van de duidelijke verschillen is de hoeveelheid schermruimte waar je over beschikt. Deze extra ruimte op het scherm kan ertoe leiden dat je dieper in kan gaan in bepaalde functies. Daarnaast kan hierdoor een ander navigatie scherm ontwikkeld worden, meer content worden weergeven en gebruik worden gemaakt van meer visuele en grotere elementen. Houdt er wel rekening mee dat je goed moet opletten hoe je gebruik maakt van de hoeveelheid ruimte. Zorg voor goede informatie en dat er een duidelijke oproep tot actie aanwezig is.

Het volgende opvallende verschil is dat webapp gebruikers in de meeste gevallen op items klikken door middel van een muis in plaats van tappen op een scherm. Bij native apps zijn er andere mogelijkheden om te navigeren. Denk hierbij bijvoorbeeld aan het in en uitzoomen op een scherm wat kan door te vergroten/verkleinen met twee vingers. Native apps bieden op deze manier een vloeiende ervaring aan. Gebruikers verwachten direct een reactie zoals een pop-up of nieuw scherm. Het kan erg lastig zijn om een vergelijkbare ervaring aan te bieden via een webapp. Je moet namelijk rekening houden met verschillende browsers, hardware en andere elementen die buiten jouw controle liggen.

Verschillende ervaring

Native apps bieden een grote hoeveelheid ervaring aan. Dit kan verschillen van navigatie tot entertainment. Webapps aan de andere kant, richten zich meer op het voltooien van taken. Deze taken zijn vaak gecompliceerder met langere gebruikerssessies. Door gebruik te maken van verkeerde kleuren of lettertype kan dit stress leveren aan de ogen van de gebruiker. Met name als de webapp wordt gebruikt voor langere periodes achter elkaar.

Kies een geschikt lettertype

Maak gebruik van een lettertype dat geschikt is voor het platform. Apple maakt gebruik van San Francisco voor iOS en Google gebruikt Roboto voor Android. Ideaal gezien wil je een lettertype kiezen dat geschikt is voor het web en jouw webapp. Het is erg belangrijk om jouw webapp te optimaliseren voor webbrowsers. Dit betekent echter niet dat je geen persoonlijke lettertype kunt gebruiken. Zorg ervoor dat je een werkend web lettertype hebt om op terug te kunnen vallen.

Transitie met verschillende platformen

Wanneer is er interactie tussen jouw webapp en native app? Als dit het geval is, doordat je de gebruikers hun laatste activiteiten wil laten synchroniseren met beide apps moet je nadenken hoe deze transactie verloopt.

Om voor een vloeiende ervaring tussen beide apps te zorgen is het belangrijk om de hiërarchie, visuele taal en volgorde van bepaalde functies hetzelfde te houden. Dit geldt ook voor jouw merk indicatoren. Het is verwarrend om van de ene ervaring naar de andere te gaan met een compleet ander logo, toon, berichtgeving en beeldvorming.

Denk na hoe je jouw bestaande gebruikers op de hoogte kunt houden van jouw nieuwe app en zorg dat ze deze uitproberen. Hierbij kan gebruik worden gemaakt van promoties vanuit de native app, zoals: push notificaties, status berichtjes, banners of via een andere marketing website. Daarnaast kan er gebruik worden gemaakt van social media, betaalde advertenties en e-mails om jouw nieuwe webapp bekend te maken. Bestudeer jouw bestaande native app gebruikers voor nog meer mogelijkheden en probeer in contact te komen met eventuele partners met wie je in het verleden hebt gewerkt voor jouw native app.

Welke ervaring biedt je aan?

Denk na over het soort ervaring dat je wil aanbieden voor jouw gebruikers op beide platformen. Wat gebeurt er bijvoorbeeld als een gebruiker de webapp probeert te openen op zijn mobiele toestel? Forceer je de gebruiker om de native app te downloaden of kan de gebruiker de webapp via zijn of haar telefoon gebruiken? Het is zelfs mogelijk om een deel van de ervaring mogelijk te maken via een mobiel toestel waardoor de gebruiker uiteindelijk toch de app zal downloaden.

Een voorbeeld hiervan is My Fitness Pall. Hiermee kun je jouw oefeningen en voedselinname bijhouden via de web of native app. Alhoewel de voorkeur uitgaat naar gebruikers die de app downloaden, kunnen gebruikers dezelfde functies gebruiken zowel via web als native app.

Webapp backend architectuur en veiligheid

Als je al een backend architectuur hebt voor jouw native app moet je analyseren hoe een nieuwe webapp deze architectuur kan beïnvloeden. Het is mogelijk dat je veranderingen moet doorvoeren voor jouw nieuwe webapp naarmate hier meer gebruik van wordt gemaakt. Het toevoegen van een webapp leidt tot unieke uitdagingen voor de backend support. Denk na hoe je omgaat met: nieuwe informatie, de server load en beveiliging.

Daarnaast moet je nadenken over wat je gaat gebruiken om jouw nieuwe webapp te hosten. Hosting kosten kunnen aanzienlijk omhoog gaan naarmate het aantal gebruikers meer wordt.

Veiligheid

Met behulp van SSL certificaten kun je ervoor zorgen dat web verkeer veilig is. Zorg er wel voor gedurende het ontwikkelingsproces dat je alle punten rondom beveiliging in kaart hebt gebracht. Denk er hierbij aan om privileges minimalistisch te houden en zorg voor een redirect bij deep links. Dit is niet alleen nodig voor beveiliging, maar zorgt ook voor de beste gebruikerservaring. Als je financiële transacties verwerkt is het nog belangrijker om er voor te zorgen dat jouw services goed beveiligd zijn. Zorg er voor dat er goede protocollen in plaats zijn voor een betaalactie. Houd er rekening mee dat wanneer iemand een aankoop maakt of zich zelf inschrijft voor een abonnement dat je dan transactiekosten moet betalen.

Testen

Het is belangrijk om ervoor te zorgen dat je potentiële knelpunten van te voren test, door een server load te testen. Dit kun je doen door een simulatie uit te voeren waarbij 10,000 gebruikers jouw webapp gebruiken en dan vervolgens de webapp zelf opent. Het laatste dat je wil is dat nieuwe gebruikers terecht komen bij jouw webapp en dat de server vervolgens crasht. Bepaalde services hebben een autoscaling functie. Dit is een functie waarbij je extra middelen kunt aanwijzen naarmate het gebruik toeneemt op bepaalde momenten gedurende dag. Hiervan kan gebruik worden gemaakt, totdat je de overstap maakt voor groter gebruik. Het is een ander verhaal als je zelf jouw eigen backend onderhoud. Hierbij is het verstandig om klaar te staan voor groei en bekend te zijn met problemen die zich voor kunnen doen als de groei groter is dan verwacht.

Cross-Browser compatibiliteit

In verhouding met native apps moet een webapp beschikbaar zijn voor nog meer verschillende apparaten. Denk hierbij aan: verschillende browsers, schermgrootte, toestellen en besturingssystemen. Met behulp van tools zoals Browser Stackkun je jouw webapp testen voor virtuele apparaten en alle andere verschillende variabelen. CrossBrowserTesting en Sauce Labs zijn vergelijkbare tools. Maak gebruik van bestaande data om voorrang te geven aan browser en besturingssystemen waarvan jouw meeste gebruikers gebruik maken. Jouw marketing website zou kunnen aantonen van welke toestellen, besturingssystemen en browsers het meest gebruik van worden gemaakt.

Bepaalde tools kunnen helpen het aantal browser gerelateerde bugs te verminderen gedurende het ontwikkelingsproces. Babel converteert next-gen javascript in browser compatibele code dat essentieel wanneer je een webapp ontwikkelt met de nieuwste technologie. Webpack is een tool die helpt om bepaalde statische middelen te combineren.

Een van de betere tools die helpen bij het testen en fouten kunnen identificeren is Instabug. Hiermee kun je een overzichtelijk bug report opvragen. Andere tools zijn Airbrake en Rollbar. Honeybadger richt zich meer op error en crash logging opties.

Conclusie

Het is geen makkelijke opgave om een native naar webapp op te stellen. Hierbij moet je niet alleen rekening houden met nieuwe gebruikersdoeleinden, maar heb je een nieuw ontwerp nodig. Denk na hoe je wil dat gebruikers gebruik maken van beide apps en hoe de transitie vlekkeloos kan verlopen. Het toevoegen van een webapp zorgt voor extra druk op de backend architectuur en er zullen nieuwe veiligheid en compatibiliteitseisen naar voren komen. Ondanks deze uitdagingen kunnen er veel nieuwe gebruikers worden bereikt door middel van een webapp en kan je meer doen voor jouw bestaande gebruikers. Uiteindelijk is dit een bewezen manier om jouw bedrijf te laten groeien.

---