Wat is een gebruikersinterface (UI)?

De gebruikersinterface, afgekort UI, is alles waarmee iemand een programma of website bedient. Knoppen, menu's, formulieren, tekst, pictogrammen en de indeling van het scherm.

Het is het deel dat je ziet en aanraakt. Alles wat daarachter gebeurt is techniek waar de gebruiker niets van hoort te merken. Gaat de interface mis, dan haakt iemand af zonder ooit te weten hoe goed de rest was.

Sinds 28 juni 2025 is een deel hiervan bovendien geen smaakkwestie meer. Voor webshops en een aantal andere diensten gelden Europese toegankelijkheidseisen, en daar hoort een norm bij. Verderop staat wat dat betekent en voor wie.

Waaruit een interface bestaat

Indeling. Waar staat wat, en wat valt als eerste op. Dit doet het meeste werk en krijgt de minste aandacht.

Bedieningselementen. Knoppen, invoervelden, keuzelijsten, schuifjes. Ze horen eruit te zien als wat ze zijn: een knop moet klikbaar lijken en een tekst niet.

Tekst. Labels, knopteksten, foutmeldingen, tussenkopjes. De onderschatte helft van elke interface.

Terugkoppeling. Wat er gebeurt als je iets doet. Zonder reactie klikt iemand nog een keer, en dan gaat je formulier twee keer de deur uit.

Vormgeving. Kleur, typografie, ruimte. Bepaalt de sfeer en, belangrijker, wat opvalt en wat niet.

Die laatste twee worden vaak als één ding gezien, en dat is precies waar het misgaat. Vormgeving die alles even mooi maakt haalt het verschil weg tussen wat belangrijk is en wat niet.

UI en UX zijn niet hetzelfde

Deze twee worden constant door elkaar gehaald, ook in vacatures.

UI is wat er op het scherm staat. UX is hoe het is om het te gebruiken, van begin tot eind. Een prachtige interface waarin je niet kunt vinden wat je zoekt heeft een goede UI en een slechte UX.

UX gaat bovendien verder dan het scherm. Hoe snel iemand antwoord krijgt op zijn mail, hoe de bezorging verloopt en hoe makkelijk je iets kunt opzeggen horen er ook bij. Meer daarover staat in het artikel over gebruikerservaring.

De praktische kant: je kunt een interface mooier maken zonder dat er iemand meer koopt. Je kunt ook een lelijk formulier van vijf velden naar drie brengen en meteen resultaat zien. De tweede ingreep is bijna altijd de goedkoopste.

Wat een interface goed maakt

• Voorspelbaarheid. Dezelfde dingen zien er overal hetzelfde uit en doen overal hetzelfde. Verreweg het belangrijkste en het minst spannende.
• Duidelijke rangorde. Eén ding op het scherm is het belangrijkst en dat zie je meteen. Als alles opvalt, valt niets op.
• Weinig stappen. Elk extra scherm en elk extra veld kost je mensen.
• Fouten opvangen. Vertel wat er mis is en hoe het goed moet, bij het veld zelf en niet bovenaan de pagina.
• Bekende patronen. Een logo linksboven dat naar de startpagina gaat, een winkelmandje rechtsboven. Mensen brengen hun tijd door op andere websites en nemen die gewoonten mee naar de jouwe. Origineel zijn kost hier alleen bezoekers.
• Toegankelijk. Genoeg contrast, bedienbaar met een toetsenbord, labels die een schermlezer kan voorlezen. Dat is geen extraatje.

Er staat geen enkele smaakregel in dat lijstje, en dat is geen toeval. Wat een interface werkelijk goed maakt is saai werk waar je op een borrel niet over opschept.

Tekst is de helft van je interface

De snelste verbetering aan de meeste schermen zit in de woorden, niet in de vormgeving.

Een knop moet zeggen wat er gebeurt als je erop drukt. "Versturen" is zwak, "Afspraak aanvragen" is duidelijk. Wat je op zo'n knop zet is meteen het onderwerp van de call-to-action, en het is het element dat het vaakst te vaag blijft.

Foutmeldingen zijn de tweede plek waar het misgaat. Met "Er is iets misgegaan" kan niemand verder, terwijl "Je e-mailadres mist een apenstaart" het probleem meteen oplost. Noem wat er mis is, waar het zit en wat de gebruiker eraan kan doen.

Voor een webshop zit hier ook een wettelijke kant aan. Bij een bestelling waar een betaling aan vastzit moet op de knop ondubbelzinnig staan dat je een betalingsverplichting aangaat. Die eis staat sinds 13 juni 2014 in het Burgerlijk Wetboek en komt uit Europese consumentenregels. Een knop met alleen "Bevestigen" of "Doorgaan" voldoet daar niet aan, en als je het niet goed doet is de consument niet aan de overeenkomst gebonden.

Schrijf verder in de taal van je bezoeker en niet in die van je systeem. Woorden als "entiteit", "validatie" of "record" horen in je database en niet op het scherm.

Laten zien dat er iets gebeurt

Elke actie hoort binnen een fractie van een seconde een zichtbaar antwoord te krijgen. Anders vult de gebruiker het gat zelf in, en meestal met nog een klik.

Bij een knop die iets verstuurt betekent dat: de knop wordt tijdelijk uitgeschakeld, de tekst verandert naar iets als "Bezig met versturen", en daarna komt er een bevestiging. Zonder die drie stappen krijg je dubbele aanmeldingen en dubbele bestellingen, en dat is een van de meest voorkomende problemen die ik in formulieren tegenkom.

Duurt iets langer dan een paar seconden, laat dan zien hoeveel er nog moet gebeuren in plaats van een rondjesdraaiend pictogram. Wachten zonder zicht op het einde voelt twee keer zo lang.

En laat na afloop zien wat er is gebeurd. Een pagina die na het versturen precies hetzelfde blijft is voor de bezoeker niet te onderscheiden van een pagina waar niets werkte.

Formulieren

Het formulier is meestal het enige punt waar geld wordt verdiend, en het is het slechtst verzorgde onderdeel van de gemiddelde site.

Zet het label boven het veld en niet als grijze tekst erin. Zo'n tekst in het veld verdwijnt zodra iemand begint te typen, en dan weet niemand meer wat er stond. Wie halverwege wordt gestoord is kwijt waar hij was.

Vraag alleen wat je nodig hebt. Elk veld dat je toevoegt kost je invullers, en velden die je vraagt maar nooit gebruikt kosten je twee keer: bij het invullen en bij de AVG, die vraagt om niet meer gegevens te verzamelen dan nodig.

Markeer duidelijk wat verplicht is, controleer meteen bij het veld zelf en zet de foutmelding eronder in plaats van bovenaan. Zorg dat velden herkenbaar zijn voor de automatische invulfunctie van de browser, want dat scheelt op een telefoon de helft van het typewerk.

Hoe je zo'n formulier verder opbouwt en wat je met de inzendingen doet staat in het artikel over een goed contactformulier.

Op een telefoon

Op het scherm waar het meeste verkeer binnenkomt gaat het ook het vaakst mis.

Maak aanraakvlakken groot genoeg en zet er ruimte tussen, want een vinger is geen muis. De toegankelijkheidsrichtlijn houdt sinds 2023 een ondergrens van 24 bij 24 beeldpunten aan. Apple adviseert in zijn eigen richtlijnen 44 bij 44 en Google 48 bij 48, en dat is in de praktijk een prettiger maat.

Gebruik in formuliervelden tekst van minstens 16 beeldpunten. Bij kleinere tekst zoomt iOS automatisch in zodra iemand het veld aantikt, en dan staat je halve pagina buiten beeld.

Zet belangrijke knoppen binnen duimbereik, dus onderaan het scherm en niet bovenaan. En vermijd alles wat afhangt van eroverheen bewegen met de muis, want op een aanraakscherm bestaat dat niet. Meer hierover staat in het artikel over je website optimaliseren voor mobiel.

Toegankelijkheid is sinds 28 juni 2025 deels verplicht

Aan deze verandering is in Nederland opvallend weinig ruchtbaarheid gegeven, en veel ondernemers weten er niets van.

De Europese toegankelijkheidsrichtlijn geldt sinds 28 juni 2025. In Nederland is die ingevoerd met een implementatiewet. De richtlijn stelt eisen aan producten en diensten die veel mensen gebruiken, en daar vallen onder meer webwinkels onder, bankdiensten voor consumenten, e-boeken, telecomdiensten, personenvervoer en toegang tot audiovisuele media.

Er zit een belangrijke uitzondering in. Micro-ondernemingen die diensten leveren vallen er niet onder: bedrijven met minder dan tien werkzame personen en een jaaromzet of balanstotaal van hoogstens twee miljoen euro. Heb je een webshop met vijf man, dan geldt de dienstenverplichting dus niet voor jou. Maak je zelf producten die eronder vallen, dan geldt die uitzondering niet.

De norm waarnaar wordt verwezen is de Europese standaard EN 301 549, en die leunt op WCAG, de internationale richtlijnen voor toegankelijke websites, op niveau AA.

Voor overheidssites is dit trouwens al veel langer geregeld. Sinds 1 juli 2018 geldt daarvoor een apart besluit, websites moesten per 23 september 2020 voldoen en apps per 23 juni 2021, en er hoort een openbare toegankelijkheidsverklaring bij.

Mijn mening: ook als je onder de uitzondering valt is dit werk dat zichzelf terugbetaalt. Contrast, toetsenbordbediening en duidelijke labels maken een site voor iedereen prettiger, en het is een fractie van het werk als je het vanaf het begin meeneemt in plaats van achteraf.

Wat WCAG concreet van je scherm vraagt

WCAG staat op vier uitgangspunten: waarneembaar, bedienbaar, begrijpelijk, en gemaakt op een manier waar hulpmiddelen mee overweg kunnen. Dat klinkt abstract. In de praktijk komt het op niveau AA neer op een overzichtelijke lijst.

• Contrast. Gewone tekst heeft een verhouding van minstens 4,5 tegen 1 met de achtergrond nodig. Voor grote tekst en voor de randen van bedieningselementen is 3 tegen 1 genoeg.
• Toetsenbord. Alles wat met de muis kan moet ook met de tab-toets en enter kunnen. Menu's, schuifjes, filters, sluitknoppen van vensters.
• Zichtbare focus. Wie met een toetsenbord navigeert moet kunnen zien waar hij is. Dat randje dat ontwerpers vaak weghalen zit er met een reden.
• Labels. Elk invoerveld heeft een label dat er programmatisch aan vastzit, zodat een schermlezer het kan voorlezen.
• Alternatieve tekst. Elke afbeelding die iets betekent heeft een beschrijving. Decoratieve afbeeldingen krijgen juist een lege beschrijving.
• Niet alleen kleur. Een verplicht veld dat alleen rood wordt zegt niets tegen wie dat verschil niet ziet. Zet er tekst bij.
• Koppen in volgorde. Een logische opbouw van koppen is hoe iemand met een schermlezer door je pagina navigeert.
• Vergroten. Je pagina moet bruikbaar blijven als iemand tot 200 procent inzoomt.

Bijna al deze punten zijn een kwestie van CSS en van hoe je pagina is opgebouwd. Ze kosten weinig als je ze vanaf het begin meeneemt en veel als je ze er achteraf in moet timmeren.

Hoe je het zelf test

Je hebt geen bureau nodig om de meeste problemen te vinden. Vier controles doen het meeste werk.

Leg je muis weg en doorloop je belangrijkste route met alleen het toetsenbord. Kom je bij elke knop, zie je steeds waar je bent, en kun je een venster sluiten. Bij de meeste sites strandt dit binnen een minuut.

Zoom in tot 200 procent en kijk of er niets over elkaar heen valt of buiten beeld verdwijnt.

Haal je kleuren door een contrastcontrole. Er zijn gratis hulpmiddelen waarin je twee kleurcodes invult en meteen ziet of ze de norm halen. Lichtgrijze tekst op wit oogt rustig en zakt bijna altijd onder de grens.

Draai tot slot een geautomatiseerde controle. In Chrome zit daar een ingebouwd hulpmiddel voor en er bestaan gratis uitbreidingen. Houd er wel rekening mee dat zo'n controle maar een deel van de problemen kan vinden. Of een knoptekst begrijpelijk is beoordeelt geen enkel programma.

Wil je verder kijken dan techniek, dan is opnemen wat bezoekers werkelijk doen leerzamer dan elke checklist. Hoe je dat aanpakt staat in het artikel over gebruikersgedragsanalyse.

Misleidend ontwerp mag niet meer

Er is een categorie ontwerpkeuzes die bedoeld is om mensen iets te laten doen wat ze niet wilden. Een afmeldknop die je moet zoeken, een vinkje dat al aanstaat, een klok die aftelt terwijl er niets afloopt.

Dat heet misleidend ontwerp en het is niet langer alleen een smaakkwestie. De Europese digitaledienstenverordening verbiedt online platforms om hun interface zo in te richten dat gebruikers worden misleid of gestuurd, en die regels gelden sinds 17 februari 2024 volledig. Daarnaast let de ACM in Nederland op misleidende opzet in webwinkels, met een leidraad waarin staat wat wel en niet kan.

Het bekendste voorbeeld staat op vrijwel elke site: de cookiemelding. De Autoriteit Persoonsgegevens is er duidelijk over dat weigeren net zo makkelijk moet zijn als accepteren. Een grote groene knop "Alles accepteren" naast een grijs tekstlinkje "Instellingen" voldoet daar niet aan.

Los van de regels: dit soort trucs werkt één keer. Wie zich bekocht voelt komt niet terug en zegt het tegen anderen.

Trends en waarom je voorzichtig moet zijn

Er komen elk jaar nieuwe stijlen langs. Donkere modus, minimalisme, kleine animaties, glaseffecten, grote typografie.

Sommige zijn een verbetering, andere kosten je bruikbaarheid. Het vlakke ontwerp dat rond 2013 doorbrak heeft veel knoppen opgeleverd die er niet meer uitzien als knoppen. De Nielsen Norman Group heeft daar onderzoek naar gedaan en zag dat mensen langer nodig hebben om te vinden waar ze moeten klikken als een knop geen rand of vlak meer heeft.

Donkere modus is het waard om wel te doen, want die keuze zit in het systeem van de bezoeker en je site kan hem gewoon volgen. Let er dan op dat je grijstinten in het donker anders werken: pure witte tekst op zwart is voor veel mensen te fel.

De regel die overeind blijft: als een keuze mooier is maar je bezoeker twijfelt, is het geen goede keuze. Twijfel je zelf, dan is dat waar A/B-testen voor bestaat, mits je genoeg bezoekers hebt om iets te kunnen meten.

Consistentie en een ontwerpsysteem

Bij een site van vijf pagina's houd je consistentie in je hoofd. Daarboven niet meer, en dan zie je vanzelf drie soorten knoppen en vier tinten blauw ontstaan.

Een ontwerpsysteem lost dat op. Dat is niets ingewikkelds: een vastgelegde set kleuren, tekstgroottes, afstanden en onderdelen, met de afspraak wanneer je wat gebruikt. Het scheelt tijd bij elke nieuwe pagina en het houdt de zaak heel als er meerdere mensen aan werken.

Je hoeft dat niet zelf te bedenken. De Nederlandse overheid heeft er een openbaar systeem voor gemaakt dat je kunt bekijken, met onderdelen die aan de toegankelijkheidseisen voldoen. Ook als je het niet gebruikt is het leerzaam om te zien hoe zo'n set is opgebouwd.

Voor een klein bedrijf is een document van twee pagina's al genoeg: je kleuren met hun codes, je lettertypes met hun groottes, en hoe een knop eruitziet. Meer heb je niet nodig, en het voorkomt dat elke nieuwe pagina er net iets anders uitziet.

Veelgemaakte fouten

Te veel op één scherm. Als alles even belangrijk lijkt, kiest niemand. Dit is de meest voorkomende fout op homepages, en hij komt bijna altijd voort uit interne discussies waarin niemand iets wilde inleveren.

Te weinig contrast. Lichtgrijze tekst op wit oogt rustig en is voor een deel van je bezoekers onleesbaar.

Tekst in het veld in plaats van een label erboven. Verdwijnt zodra iemand begint te typen.

Geen zichtbare focus. Weggehaald omdat het randje lelijk was, waarna niemand met een toetsenbord nog kan zien waar hij is.

Pictogrammen zonder tekst. Alleen een hamburger, een tandwiel of een hartje. Een handjevol pictogrammen kent iedereen, de rest is een raadspelletje.

Zelf testen. Jij weet waar alles staat en bent daarmee de slechtst mogelijke tester. Zet iemand anders achter je scherm, geef een opdracht en zeg vervolgens niets meer. Dat laatste is het moeilijkste deel. Wat je zo vindt levert meer op dan het meeste werk aan conversie-optimalisatie dat erna komt.

Veelgestelde vragen over gebruikersinterfaces

Wat is een gebruikersinterface?

De gebruikersinterface is alles waarmee iemand een programma, app of website bedient: knoppen, menu's, formulieren, tekst, pictogrammen en de indeling van het scherm. De afkorting UI komt van het Engelse user interface.

Wat is het verschil tussen UI en UX?

UI is wat er op het scherm staat. UX is hoe het is om het geheel te gebruiken, inclusief dingen die buiten het scherm gebeuren, zoals hoe snel je antwoord krijgt of hoe makkelijk iets is op te zeggen.

Een mooi vormgegeven scherm waarin je niet kunt vinden wat je zoekt heeft een goede UI en een slechte UX.

Wat maakt een gebruikersinterface goed?

Dat hij voorspelbaar is, dat duidelijk is wat het belangrijkste is, dat er weinig stappen nodig zijn en dat fouten worden opgevangen bij het veld waar ze ontstaan. Daarbovenop dat hij bruikbaar is voor mensen die niet met een muis werken of slecht zien.

Wat er niet in staat is smaak. Het meeste van wat een interface goed maakt is saai en onzichtbaar.

Moet mijn website voldoen aan toegankelijkheidseisen?

Dat hangt af van wat je doet en hoe groot je bent. Sinds 28 juni 2025 gelden Europese toegankelijkheidseisen voor onder meer webwinkels, consumentenbankdiensten, e-boeken, telecom en personenvervoer.

Lever je diensten en heb je minder dan tien werkzame personen en een jaaromzet of balanstotaal van hoogstens twee miljoen euro, dan val je onder de uitzondering voor micro-ondernemingen. Voor overheidsorganisaties geldt al sinds 2018 een eigen regeling met een verplichte toegankelijkheidsverklaring.

Wat is WCAG?

WCAG is de internationale richtlijn voor toegankelijke websites, opgesteld door het consortium dat de webstandaarden beheert. Er zijn drie niveaus: A, AA en AAA. In wetgeving wordt vrijwel altijd naar niveau AA verwezen, via de Europese norm EN 301 549.

Welk contrast moet tekst hebben?

Gewone tekst heeft op niveau AA een contrastverhouding van minstens 4,5 tegen 1 met zijn achtergrond nodig. Voor grote tekst en voor de randen van bedieningselementen is 3 tegen 1 voldoende.

Je controleert dat met een gratis contrastcontrole waarin je de twee kleurcodes invult. Lichtgrijs op wit haalt het bijna nooit.

Hoe groot moet een knop zijn op een telefoon?

De toegankelijkheidsrichtlijn houdt een ondergrens van 24 bij 24 beeldpunten aan. Apple adviseert 44 bij 44 en Google 48 bij 48, en dat werkt in de praktijk prettiger.

Even belangrijk is de ruimte ertussen. Twee grote knoppen die tegen elkaar aan liggen leveren nog steeds misklikken op.

Waarom is een label boven het veld beter dan tekst in het veld?

Omdat die tekst verdwijnt zodra iemand begint te typen. Wie halverwege wordt gestoord weet dan niet meer wat er gevraagd werd, en bij het nakijken van een ingevuld formulier ziet niemand meer waar wat hoort.

Daar komt bij dat zulke tekst vaak te licht van kleur is om leesbaar te zijn, en dat een schermlezer er niet altijd goed mee omgaat.

Wat is een dark pattern en mag dat?

Een dark pattern is een ontwerpkeuze die mensen stuurt naar iets wat ze eigenlijk niet willen: een verstopte afmeldknop, een vooraf aangevinkt hokje, een neptimer.

Voor online platforms is dit sinds 17 februari 2024 verboden onder de Europese digitaledienstenverordening. Daarnaast let de ACM op misleidende opzet in webwinkels, en de Autoriteit Persoonsgegevens op cookiemeldingen waarin weigeren moeilijker is gemaakt dan accepteren.

Moet ik een donkere modus aanbieden?

Verplicht is het niet, maar het is weinig werk omdat de voorkeur al in het besturingssysteem van de bezoeker staat en je site die kan overnemen.

Doe je het, kies dan geen puur wit op puur zwart, want dat is voor veel mensen te fel. Controleer ook het contrast van je donkere versie apart, want kleuren die op wit prima werken vallen op donkergrijs vaak weg.

Hoeveel mensen heb ik nodig om mijn interface te testen?

Vijf is genoeg om het grootste deel van de problemen te vinden. Dat is een bekende bevinding uit het werk van de Nielsen Norman Group, en hij houdt in de praktijk goed stand.

Belangrijker dan het aantal is wie je kiest. Neem mensen die je site niet kennen, geef ze een concrete opdracht en zeg daarna niets meer. Zodra je gaat helpen meet je niets.

Wat is een ontwerpsysteem?

Een vastgelegde set kleuren, tekstgroottes, afstanden en onderdelen, met afspraken over wanneer je wat gebruikt. Bij grotere sites voorkomt het dat er ongemerkt drie soorten knoppen ontstaan.

Voor een klein bedrijf volstaat een document van twee pagina's met je kleurcodes, je lettertypes en hoe een knop eruitziet.

Wat is een goede foutmelding?

Een die zegt wat er mis is, waar het misging en wat de gebruiker eraan kan doen, in gewone taal en op de plek waar het probleem zit.

Zet hem onder of naast het veld in kwestie en niet als algemene melding bovenaan de pagina. Gebruik niet alleen een rode kleur om het aan te wijzen, want dat verschil ziet niet iedereen.