Hugo Melis
|
Laatste update 31-01-2023
|
Nederlands
Wanneer je je idee hebt geformuleerd, onderzoek hebt gedaan en een beknopt concept hebt opgesteld kun je beginnen met het ontwerp van je app. Maar, wat komt daar eigenlijk allemaal bij kijken?
Dit proces kan worden opgesplitst twee onderdelen, namelijk: functioneel ontwerp en grafisch ontwerp. Het functioneel ontwerp is in principe de blauwdruk van je app; het geeft een overzichtelijk beeld van de functionaliteiten van de app. Het grafisch ontwerp is gebaseerd op het functioneel ontwerp en richt zich op de vormgeving. Het is belangrijk om in je achterhoofd te houden dat dit een iteratief proces is. Dat betekent dat het ontwerp continu wordt aangepast op basis van verschillende testen en validaties.
Dit is hoofdstuk 3 in de
Beginners handleiding voor App Ontwikkeling
Voordat je je functioneel en grafisch ontwerp kan opstellen, zul je al een deel van je STACK moeten kiezen. Later, bij de ontwikkelingsfase van je app kun je deze aanvullen en uitbreiden. Hierover is meer te lezen in hoofdstuk 4 (ontwikkeling).
Een tech stack is een verzameling van software en technologieën die je gebruikt om je app te bouwen. Ofwel, je kiest de bouwstenen voor de fundering van je app. Een tech stack omvat over het algemeen:
In deze fase hoef je nog niet je volledige tech stack te kiezen, maar het is wel handig als je hier al een beetje een beeld van hebt. Lees verder om meer te weten te komen over handige keuzes die je nu al kunt maken.
Het is verstandig om in deze fase na te denken over het gebruik van besturingssystemen. De keuze van het besturingssysteem bepaalt namelijk op welke apparaten de app te gebruiken zal zijn. De twee grootste besturingssystemen die momenteel worden gebruikt zijn:
Vaak wordt gekozen om eerst de app te ontwikkelen voor het grootste besturingssysteem, waarna op basis van resultaten kan worden besloten om de app door te ontwikkelen voor overige besturingssystemen. Omdat IOS en Android samen een marktaandeel hebben van 98%, worden overige besturingssystemen in deze guide buiten wegen gelaten.
Er zijn een aantal vormen waarin een app kan worden ontwikkeld. Er wordt onderscheid gemaakt tussen de volgende technieken:
Heads up: In dit hoofdstuk worden zowel native, web als hybride toegelicht, maar wordt gefocust op native apps. Wij adviseren namelijk om altijd te kiezen voor een native app, wat zorgt voor premium kwaliteit.
Wanneer je op het punt staat om je app (functioneel) te ontwerpen, is het belangrijk om stil te staan bij relevante bestaande API’s die je kunt gebruiken voor jouw app. Het is immers niet nodig om het wiel compleet opnieuw uit te vinden, als er al wielen in alle maten en kleuren verkrijgbaar zijn! Zorg er daarom voor dat je hier goed onderzoek naar doet. Houd hierbij rekening met de effectiviteit en betrouwbaarheid van deze API’s.
Een API staat voor ‘Application Programming Interface’, en is een manier waarop verschillende software-systemen met elkaar communiceren. Zoals te zien in hoofdstuk 4 (ontwikkeling), is een API een onderdeel van de middleware. Een API transporteert en verwerkt data en zorgt dat deze op de juiste manier wordt weergegeven in de interface van de front-end.
Er kan worden gesteld dat een verschil bestaat tussen een interne en externe API.
Een interne API zorgt voornamelijk voor dat data uit de database wordt opgehaald en verwerkt, en op de juiste manier wordt getoond in de front-end.
Een externe API maakt het mogelijk om gebruik te maken van externe services en functionaliteiten, die al zijn ontwikkeld door andere ontwikkelaars. Zo kun je bijvoorbeeld gebruik maken van de google maps API, weerbericht API of Apple Health API.
Een functioneel ontwerp is eigenlijk de basis van de functionele werking van jouw app. Deze wordt voornamelijk opgesteld door de product owner en/of projectmanager, samen met de klant. Een functioneel ontwerp is weergegeven in tekst, maar ook in mindmaps en visuele weergaven.
Een goed functioneel ontwerp zorgt ervoor dat alle stakeholders een goed beeld hebben van de app en dat zij weten wat ze ermee moeten doen. Denk aan front- en back end developers, designers, maar ook aan het marketing team, copywriters, de opdracht gever(s). Op basis van het functioneel ontwerp kunnen onder andere de UX- & UI-designers aan de slag. Een functioneel ontwerp biedt dus input voor grafisch ontwerp (GO) en voor technisch ontwerp (TO)
Het is nu duidelijk waar je een functioneel ontwerp voor nodig hebt, maar hoe kom je daar nu eigenlijk? Het is belangrijk dat de basis aansluit op de doelen/doelgroep van de app. Het functioneel ontwerp wordt daarom gebaseerd op:
Wanneer je klaar bent om het functioneel ontwerp op te stellen, is het handig als je een ‘kapstokje’ hebt van wat er nou eigenlijk allemaal in moet. Hieronder staan de onderdelen toegelicht die je kan vinden in een functioneel ontwerp:
Om een overzichtelijk beeld te schetsen van het functioneel ontwerp kun je tekst overzetten naar visuele ‘middelen’. Deze kunnen helpen ter verduidelijking van de informatie naar stakeholders, maar ook voor jezelf! Handige middelen die je kunt toevoegen aan je functioneel ontwerp, zijn:
User flows beschrijven de stappen die een gebruiker doorloopt tijdens het gebruik van de app. Het zijn visuele diagrammen die de paden van de gebruiker weergeven door verschillende schermen en interacties met de app. Het opstellen van user flows zorgt ervoor dat de app logisch en makkelijk te gebruiken is voor de doelgroep.
Wireframes zijn een schematische weergave van de basisstructuur en lay-out van de app, waarbij niet wordt gefocust op het esthetische aspect. Ze geven de algehele opbouw van de app weer, inclusief de (voorlopige) plaatsing van elementen zoals tekst, afbeeldingen, knoppen en navigatie. Wireframes kunnen worden gemaakt in verschillende programma’s – zoals Figma – en zijn te vergelijken met lo-fi prototypes.
Wanneer je je Functioneel Ontwerp opstelt, zijn er een aantal concrete tips die je kunt toepassen, namelijk:
Meer tips, die vooral te maken hebben met de User Experience (UX) zijn later in deze paragraaf te vinden.
Wanneer de onderdelen van het functioneel ontwerp zijn uitgewerkt, kan de UX-designer hiermee aan de slag. Maar wat houdt User Experience (UX) in? In principe komt dit neer op: Het gevoel wat gebruikers krijgen bij het uitvoeren van bepaalde taken in een app. De UX bestaat uit 5 onderdelen, namelijk:
Veel apps bevatten fouten op het gebied van UX. Daarom zijn er een aantal punten waarmee je als goede app ontwikkelaar rekening mee kunt houden, wanneer je aan de slag gaat met UX. Dus: hoe ziet een goede UX eruit?
Wanneer het functioneel ontwerp is opgesteld wordt deze gevalideerd bij de stakeholders. Het functioneel ontwerp is zo opgesteld dat deze gemakkelijk te begrijpen is, waardoor het overzichtelijk kan worden gepresenteerd. Op basis van deze validatie kan het functioneel ontwerp worden aangepast en het grafisch ontwerp worden opgesteld.
Het grafisch ontwerp van de app komt voornamelijk neer op de vormgeving van de app. Het grafisch ontwerp wordt over het algemeen gedaan door een grafisch ontwerper, waarna een front-end designer het ontwerp omzet in een daadwerkelijke app. In de praktijk zijn deze functies vaak verweven en worden deze uitgevoerd door dezelfde persoon.
Het is belangrijk dat je grafisch ontwerp goed aansluit op de doelen en de doelgroep van de app. Daarnaast zorgt een goed grafisch ontwerp voor een geoptimaliseerd User Interface (UI). Een goed grafisch ontwerp is gebaseerd op:
Het grafisch ontwerp van de app kan worden weergegeven door het doorontwikkelen van bestaande wireframes. Na de validatie van het functioneel ontwerp, kunnen de (interactieve) schermen als het ware worden ‘ingevuld/ingekleurd’. Op deze manier worden mock-ups (grafische weergaven van de schermen) en wireframes gecombineerd. Deze manier van weergave kan worden gezien als een hi-fi prototype.
User Interfase (UI) is de brug waarmee gebruikers en technologie met elkaar kunnen samenwerken. Het doel voor de gebruiker is om taken uit te voeren en het doel voor de app is om informatie te bieden. Wanner het gaat om een app (in plaats van een fysiek technologisch product) spreken we meestal van Grafical User Interface (GUI). Grafische vormgeving hangt daarom nauw samen met UI; zoals eerder beschreven kunnen ook de taken en functies van grafische vormgevers en UI designers met elkaar verweven zijn. Een goede UI-designer houdt rekening met de volgende aspecten:
Naast bovenstaande onderwerpen waar je rekening mee kunt houden, geven we je ook een aantal concrete tips die je kunt integreren in je UI:
IOS en Android hebben guidelines opgesteld waar een UI-designer zijn design op kan baseren. Deze guidelines zijn bedoeld om de gebruiksvriendelijkheid voor gebruikers te verhogen. Gebruikers hebben op deze manier een gemakkelijke en efficiënte ervaring bij het gebruik van de app en ontwikkelaars kunnen makkelijker voldoen aan de verwachtingen van de gebruiker.
De guidelines van IOS heten Apple Human Interface Guidelines (HIG) en de guidelines van Android worden Material Design Guidelines genoemd. Deze zijn te vinden op de platforms van Apple en Android.
Wanneer het grafisch ontwerp is opgesteld en lo-fi prototypes zijn ontwikkeld, kan dit opnieuw worden gevalideerd (voordat de definitieve versie (front- en back- end) wordt gerealiseerd/ontwikkeld). Deze validatie kan worden gedaan door het presenteren aan stakeholders, maar dit kan worden uitgebreid door aanvullend onderzoek. In sommige gevallen, voornamelijk bij complexe apps, kunnen testen worden gedaan op basis van hi-fi prototypes. Denk hierbij aan:
Meer over deze (en meer) vormen van testen is te vinden in hoofdstuk 4 (realisatie/ontwikkeling & testen).
Hugo Melis
App Strateeg @ Glamorous Goat (of, in gewoon Nederlands, ik ga met klanten in gesprek over hun app idee en kom met strategieën om er samen de beste app van te maken).
Deel Artikel
Artikel geschreven door
Hugo Melis
App Strateeg @ Glamorous Goat (of, in gewoon Nederlands, ik ga met klanten in gesprek over hun app idee en kom met strategieën om er samen de beste app van te maken).
Vind je dit goede content? Kom voor ons schrijven…