Wat is het verschil tussen UI en UX design?

Het korte antwoord

UX-design gaat over hoe een app werkt en voelt: de flows, de structuur en het gebruiksgemak, dus of de app het probleem echt oplost en makkelijk te gebruiken is. UI-design gaat over hoe de app eruitziet: de kleuren, knoppen en typografie, de zichtbare laag. UX is het skelet en het plan, UI is de huid en de stijl. Ze werken samen, volgen allebei de richtlijnen van Apple, en een goede app heeft ze allebei nodig.

UX: hoe de app werkt

UX staat voor user experience, oftewel de gebruikerservaring, en gaat over hoe een app werkt en aanvoelt in gebruik. Het is het onzichtbare denkwerk achter de app: uitzoeken wat gebruikers nodig hebben, de stappen bedenken die ze doorlopen om hun doel te bereiken, de schermen logisch op elkaar laten aansluiten, en zorgen dat alles duidelijk en makkelijk is. UX beantwoordt de vraag: lost deze app het probleem op, en kan iemand er zonder moeite mee overweg?

Je merkt goede UX vaak juist doordat je hem niet merkt. Als een app vanzelfsprekend voelt, als je moeiteloos vindt wat je zoekt en je doel snel bereikt, is dat het resultaat van doordachte UX, ook al valt er niets bijzonders op. Slechte UX valt daarentegen wel op: je raakt verdwaald, weet niet welke knop je moet indrukken, of moet te veel stappen doen. Omdat UX bepaalt of mensen je app blijven gebruiken of gefrustreerd afhaken, is het de basis waarop de rest rust. Het is het plan en het skelet van de app, nog los van hoe hij eruitziet. UX-werk gebeurt vaak met eenvoudige middelen, zoals schetsen en wireframes, kale bloktekeningen van elk scherm zonder kleur of stijl, juist om de aandacht op de werking te houden en niet op het uiterlijk. Op dat moment gaat het puur om de vraag of de volgorde van schermen klopt en of een gebruiker zonder uitleg zijn doel bereikt. Pas als dat skelet staat, heeft het zin om er een mooi uiterlijk overheen te leggen.

UI: hoe de app eruitziet

UI staat voor user interface, de gebruikersinterface, en gaat over hoe de app er visueel uitziet en aanvoelt om aan te raken. Dit is de zichtbare laag: de kleuren, de vormgeving van knoppen, de typografie, de pictogrammen, de afstanden tussen elementen en de algehele stijl. Waar UX het plan is, is UI de uitwerking die je letterlijk op het scherm ziet. Goede UI maakt een app aantrekkelijk, verzorgd en herkenbaar, en laat hem passen bij de vertrouwde look van iOS.

UI is meer dan versiering, want het uiterlijk stuurt ook hoe makkelijk iets te gebruiken is. Een duidelijke knop die eruitziet als een knop, tekst die goed leesbaar is, en genoeg ruimte tussen elementen maken de app niet alleen mooier maar ook prettiger in gebruik. Toch werkt UI alleen echt goed als er een sterke UX onder zit: de mooiste schermen helpen niet als de onderliggende stappen onlogisch zijn. UI is de huid over het skelet, en hoe fraai die huid ook is, ze heeft een goed skelet nodig om op te staan. Goede UI leunt bovendien sterk op de vaste conventies van iOS: knoppen, menu’s en gebaren die iPhone-gebruikers al kennen. Door die te volgen voelt een app meteen vertrouwd, terwijl een eigenzinnig ontwerp dat de conventies negeert mensen juist in de war brengt, ook al ziet het er op zichzelf mooi uit. De beste UI valt daarom niet op als kunstwerk, maar maakt het gebruik moeiteloos en herkenbaar.

UI en UX naast elkaar

Om het verschil scherp te krijgen helpt het om beide naast elkaar te zetten. De tabel doet dat op de punten die er het meest toe doen.

	UX-design	UI-design
Gaat over	Hoe de app werkt en voelt	Hoe de app eruitziet
Bevat	Flows, structuur, gebruiksgemak	Kleuren, knoppen, typografie
Kernvraag	Is het makkelijk en logisch?	Ziet het er goed en verzorgd uit?
Beeldspraak	Het skelet en het plan	De huid en de stijl

De tabel maakt duidelijk dat UX en UI verschillende vragen beantwoorden, maar over hetzelfde product gaan. UX zorgt dat de app het juiste doet op een logische manier; UI zorgt dat dat er goed uitziet en fijn aanvoelt. Ze zijn geen concurrenten maar twee lagen van hetzelfde ontwerp, en de beste apps zijn juist die waar beide lagen kloppen en naadloos op elkaar aansluiten. Als je naar de tabel kijkt, zie je waarom het kiezen tussen de twee geen zin heeft: ze vullen elkaar aan.

Waarom je allebei nodig hebt

Het belangrijkste inzicht is dat UX en UI elkaar nodig hebben, en dat een app pas goed is als beide kloppen. Denk aan de twee manieren waarop het misgaat. Een app met sterke UX maar zwakke UI werkt prima, maar ziet er onaf of amateuristisch uit, waardoor gebruikers hem minder vertrouwen. Een app met prachtige UI maar slechte UX ziet er geweldig uit, maar frustreert zodra je hem gebruikt, omdat de stappen onlogisch zijn. In beide gevallen haken mensen af, ondanks dat de ene helft goed was.

Een voorbeeld maakt dit concreet. Stel je een winkel-app voor met prachtige productfoto’s en een strak, mooi ontwerp, dus sterke UI. Maar om iets te kopen moet je door zeven verwarrende stappen, en het is onduidelijk waar je moet tikken om af te rekenen. Dat is zwakke UX, en hoe mooi de app ook is, mensen haken af bij het afrekenen. Andersom kan een app met een kraakhelder, logisch koopproces toch afstoten als hij er goedkoop en rommelig uitziet, omdat gebruikers hem dan minder vertrouwen met hun geld. Pas als het mooie uiterlijk en het logische proces samenkomen, koopt iemand met een gerust gevoel.

Dat verklaart waarom je niet voor een van de twee kunt kiezen bij een serieuze app. Gebruikers ervaren de app als een geheel, niet als losse lagen, en één zwakke laag verpest de indruk van het geheel. Onze uitleg over wat een MVP van een app is laat zien dat je zelfs bij een eerste, kleine versie beide moet meenemen: ook een MVP moet zowel werken als er acceptabel uitzien. Goede UX en goede UI samen zijn wat een app van een aardig idee tot iets maken dat mensen graag blijven gebruiken.

Wie doet UI en UX

Een praktische vraag is wie dit werk doet, en het antwoord hangt af van de grootte van je project. De tabel koppelt situaties aan wat je nodig hebt.

Jouw situatie	Wat je nodig hebt
App moet vooral makkelijk werken	Sterke UX
App moet er vooral goed uitzien	Sterke UI
Serieuze, complete app	Allebei, goed op elkaar afgestemd
Klein en simpel project	Een ontwerper die beide doet
Twijfel over de flow	Eerst UX, dan UI

De rode draad is dat je bijna altijd beide nodig hebt, en dat het minder uitmaakt of één persoon of een team het levert, zolang beide goed gebeuren en op elkaar aansluiten. Bij kleinere apps beheerst vaak dezelfde ontwerper zowel de flows als de vormgeving, wat handig is omdat de twee nauw samenhangen; bij grote projecten kunnen het aparte specialisten zijn. Belangrijk bij het inhuren is dat je niet alleen naar mooie schermen vraagt, maar ook naar hoe de app werkt, zodat je niet per ongeluk alleen UI zonder UX koopt. Een handige controle is om te vragen naar het denkwerk achter een ontwerp: waarom staan de schermen in deze volgorde, en hoe weet de ontwerper dat dit voor gebruikers logisch is? Wie daar een goed antwoord op heeft, levert vrijwel zeker meer dan alleen een mooi plaatje.

Wat het voor jouw app betekent

Voor jouw app komt het hierop neer: je hebt zowel doordachte UX als verzorgde UI nodig, want samen bepalen ze of mensen je app fijn vinden en blijven gebruiken. Begin bij de UX, de vraag of de app het probleem logisch oplost, en laat de UI die goede basis vervolgens mooi en duidelijk zichtbaar maken. Een app die de App Store-beoordeling doorstaat en gebruikers overtuigt, heeft beide lagen op orde.

Houd er bij het plannen en budgetteren rekening mee dat design een echt onderdeel van het bouwen is, geen bijzaak, iets wat onze uitleg over de kosten van een app laten maken meeneemt. Zorg dat je eigenaar bent van de ontwerpbestanden en de code, en dat de app onder je eigen Apple-account verschijnt, zodat alles echt van jou is. Kortom, UI en UX zijn verschillend maar onafscheidelijk: de een zonder de ander levert een halve app op. Wil je een team dat UX en UI samen met de ontwikkeling verzorgt, plan dan een gratis gesprek.