UX vs UI: wat is het verschil en waarom maakt het uit?

UX staat voor user experience: hoe makkelijk en prettig het is om je website te gebruiken. UI staat voor user interface: hoe de knoppen, kleuren, teksten en schermen eruitzien. UX design gaat dus over de werking en de route van de bezoeker, UI design over de vormgeving van wat hij ziet. Hieronder lees je wat het verschil is, waarom je beide nodig hebt en hoe je je eigen website op allebei checkt.

Wat is UX design?

UX design is het ontwerpen van de ervaring van een gebruiker. De vraag is steeds: kan de bezoeker doen waarvoor hij kwam, zonder te zoeken of te twijfelen? Denk aan een logische menustructuur, een offerteformulier dat niet te lang is en een checkout die geen onverwachte stappen heeft.

Een UX designer kijkt naar de route die iemand aflegt. Waar komt de bezoeker binnen, wat wil hij weten, waar haakt hij af? Dat sluit aan bij de customer journey, maar dan specifiek op je website of app.

Wat hoort er bij UX?

• Onderzoek naar wie je bezoekers zijn en wat ze willen
• De structuur van je website en de navigatie
• Wireframes: simpele schetsen van een pagina zonder kleuren of foto’s
• Testen met echte gebruikers
• Toegankelijkheid, bijvoorbeeld voor mensen die slecht zien
• Snelheid: een trage website is altijd een slechte ervaring

Wat is UI design?

UI design is het ontwerpen van de interface, alles waar de gebruiker naar kijkt en op klikt. Kleuren, lettertypes, knoppen, iconen, witruimte en de opmaak van formulieren vallen hieronder.

Goed UI design zorgt dat je website herkenbaar is als jouw merk en dat de bezoeker direct ziet wat belangrijk is. Een opvallende knop “Offerte aanvragen” in je huisstijlkleur is een UI-keuze. Dat die knop op elke dienstpagina staat en naar een kort formulier leidt, is een UX-keuze.

Wat hoort er bij UI?

• Kleurgebruik en contrast
• Typografie: lettertype, grootte en regelafstand
• Vormgeving van knoppen, menu’s en formulieren
• Consistentie: overal dezelfde stijl
• Responsive design: een opmaak die werkt op telefoon, tablet en laptop

UI vs UX: het verschil op een rij

	UX (user experience)	UI (user interface)
Hoofdvraag	Werkt het en is het logisch?	Ziet het er goed en duidelijk uit?
Focus	Route, structuur, gebruiksgemak	Vormgeving, stijl, visuele elementen
Resultaat	Sitemap, wireframes, testresultaten	Uitgewerkt ontwerp, stijlgids
Meetbaar aan	Conversie, afhakers, tijd tot doel	Herkenbaarheid, leesbaarheid, klikgedrag op elementen
Vergelijking	De plattegrond van een winkel	De inrichting en de bordjes

De vergelijking met een winkel maakt het concreet. UX bepaalt dat de kassa bij de uitgang staat en dat de populairste producten makkelijk te vinden zijn. UI bepaalt hoe de schappen, bordjes en kleuren eruitzien. Een mooie winkel waar je de kassa niet kunt vinden, verkoopt niet. Een logische winkel die er rommelig uitziet, wekt geen vertrouwen.

Waarom maakt het uit voor jouw website?

Voor een kleine ondernemer is je website vaak je belangrijkste verkoper. UX en UI bepalen samen of een bezoeker contact opneemt of wegklikt.

• Meer aanvragen en verkopen. Een duidelijke route naar contact of afrekenen verhoogt je conversie.
• Vertrouwen. Een verzorgde, consistente vormgeving laat zien dat je een professioneel bedrijf bent.
• Beter in Google. Google meet onder andere snelheid en stabiliteit van je pagina’s. Lees meer over de Core Web Vitals.
• Minder vragen. Als informatie goed te vinden is, hoef je minder te mailen en te bellen over basisvragen.

Zo check je je eigen website op UX en UI

1. Doe de vijfsecondentest. Laat iemand die je bedrijf niet kent vijf seconden naar je homepage kijken. Weet diegene daarna wat je doet en voor wie?
2. Probeer je eigen doel te halen op je telefoon. Vraag een offerte aan of bestel iets. Tel de stappen en noteer waar je twijfelt.
3. Kijk naar je menu. Staan er meer dan zeven hoofdonderdelen in, of termen die alleen jij begrijpt? Vereenvoudig.
4. Controleer contrast en leesbaarheid. Lichtgrijze tekst op een witte achtergrond is moeilijk leesbaar, zeker buiten op een telefoon.
5. Check of knoppen opvallen. Je belangrijkste actie moet de meest opvallende knop op de pagina zijn.
6. Bekijk je data. Pagina’s waar veel bezoekers direct vertrekken, of formulieren die vaak half ingevuld blijven, wijzen op een UX-probleem.

Twijfel je tussen twee varianten, bijvoorbeeld twee knopteksten of twee versies van een formulier? Dan kun je ze tegen elkaar testen met A/B-testing.

Praktijkvoorbeeld: een fysiotherapiepraktijk

Een fysiotherapiepraktijk heeft een website die er modern uitziet, met grote foto’s en een strak lettertype. Toch komen er weinig online afspraken binnen. Bij een test op de telefoon blijkt waarom: de knop “Afspraak maken” staat alleen in het menu, en het formulier vraagt om veertien velden, waaronder het BSN en de verzekeraar.

Het UI was dus prima, de UX niet. De oplossing ligt in een vaste afspraakknop op elke pagina, een formulier met alleen naam, telefoonnummer en klacht, en een bevestiging dat de praktijk binnen een werkdag terugbelt. De rest kan aan de telefoon of in de praktijk.

Het omgekeerde komt ook voor: een logisch opgebouwde site die er gedateerd uitziet. Dan wekt de vormgeving onbewust minder vertrouwen, ook al werkt alles.

Zelf doen of uitbesteden?

Kleine UX-verbeteringen kun je zelf doen. Een formulier inkorten, een knop beter zichtbaar maken, een onduidelijke menunaam aanpassen of een landingspagina maken voor je belangrijkste dienst lukt met de meeste websitebouwers zonder technische kennis. Laat ook vrienden of klanten eens hardop denkend door je site klikken: dat is de goedkoopste gebruikerstest die er is.

Voor een nieuwe website, een webshop of een flinke verbouwing loont het om met een professional te werken. Die combineert UX, UI, techniek en vindbaarheid en voorkomt dat je een mooie site krijgt die niet verkoopt.

Wil je dit liever uitbesteden? Bekijk dan onze pagina over een website laten maken.

Veelgestelde vragen