Naar de inhoud

Begrijp het verschil tussen GUI en UI: uitleg en concrete voorbeelden

De afkorting UI verwijst naar elke interface tussen een mens en een machine, of deze nu op tekst, stem of gebaren is gebaseerd. De GUI is slechts een specifieke vorm daarvan: degene die gebruikmaakt van grafische elementen die worden weergegeven op…

Développeuse analysant des interfaces graphiques GUI et UI sur deux écrans d'ordinateur dans un bureau moderne

De afkorting UI verwijst naar elke interface tussen een mens en een machine, of deze nu op tekst, stem of gebaren is gebaseerd. De GUI is slechts een specifieke vorm: diegene die gebruikmaakt van grafische elementen die op het scherm worden weergegeven. Het begrijpen van het verschil tussen GUI en UI stelt je in staat om de juiste ontwerpp keuzes te maken vanaf het begin van een digitaal project, in plaats van alles te verwarren met een van zijn onderdelen.

GUI, CLI, VUI: de drie families van gebruikersinterfaces in de praktijk

Praten over UI zonder te preciseren welk type het is, is als praten over een voertuig zonder een fiets van een vrachtwagen te onderscheiden. De gebruikersinterface (UI) is een algemene term die verschillende technische families dekt, elk met zijn ontwerpeisen en gebruiksgevallen.

Type interface Afkorting Interactiemodus Concreet voorbeeld
Grafische interface GUI Klikken, aanraken, slepen op visuele elementen (knoppen, pictogrammen, menu’s) Mobiele applicatie, desktopsoftware, website
Opdrachtregelinterface CLI Invoeren van tekstcommando’s in een terminal Linux-terminal, PowerShell, Git Bash
Spraakinterface VUI Spraakopdrachten, geluids- of spraakfeedback Spraakassistenten (Alexa, Siri), spraakgestuurde kiosken
Natuurlijke interface NUI Gebaren, lichaamsbewegingen, blik Mixed reality-headsets, Kinect

De GUI is een subset van de UI, geen synoniem. Een project kan verschillende soorten interfaces combineren: een navigatie-app voor auto’s combineert een GUI (kaart op het scherm) en een VUI (steminstructies). Beide vallen onder UI, maar hun ontwerpeisen verschillen totaal.

Om de definitie van de GUI-interface en de specifieke kenmerken ten opzichte van andere vormen van UI te verdiepen, moet men onderzoeken wat het technisch onderscheidt: de grafische laag tussen het systeem en de gebruiker.

Man die een visuele vergelijking toont tussen GUI-interface en opdrachtregelinterface op een interactief scherm

Ontwerp van een grafische interface (GUI): de elementen die het onderscheiden van een niet-visuele UI

Een GUI is gebaseerd op een gestructureerde visuele woordenschat. Elk element dat op het scherm wordt weergegeven, speelt een specifieke rol in de interactie, en het is deze grafische laag die het scheidt van andere vormen van UI.

Typische componenten van een GUI zijn onder andere:

  • Vensters, panelen en tabbladen die de werkruimte organiseren en taken segmenteren
  • Knoppen, selectievakjes en dropdown-lijsten die acties triggeren of keuzes instellen
  • Visuele feedback (voortgangsbalken, laadanimaties, kleurveranderingen bij hover) die de gebruiker bevestigt dat zijn opdracht is ontvangen
  • Typografie, een kleurenpalet en een lay-outgrid die de hiërarchie van informatie definiëren

Een CLI daarentegen heeft geen van deze elementen. De gebruiker typt een commando, het systeem retourneert tekst. De cognitieve belasting ligt volledig bij het onthouden van de syntaxis. De GUI verplaatst deze belasting naar visuele herkenning, waardoor het toegankelijker wordt voor niet-technische gebruikers, maar het ook zwaarder maakt om te ontwerpen en te onderhouden.

Een VUI stelt een ander ontwerpprobleem: de totale afwezigheid van een scherm. De ontwerper moet een dialoog structureren, anticiperen op spraakambiguïteiten en omgevingsgeluid beheren. De tools, vaardigheden en leveringen hebben niets gemeen met die van een GUI-ontwerper.

Toegankelijkheid en normen: hoe de Europese regelgeving de relatie tussen UI en GUI herdefinieert

Het onderscheid tussen UI en GUI krijgt een concrete dimensie met de wettelijke toegankelijkheidseisen in Europa. Sinds 28 juni 2025 is de Europese Toegankelijkheidswet (Richtlijn (EU) 2019/882) van toepassing in de 27 EU-landen voor een breed scala aan digitale producten en diensten voor het grote publiek: e-commerce, bankdiensten, transport, telecommunicatie, e-boeken.

Deze richtlijn is technisch gebaseerd op de Europese norm EN 301 549, die de WCAG 2.1-normen niveau AA voor digitale inhoud incorporeert. In de praktijk moet elke grafische interface die voor het grote publiek in Europa is bedoeld, voldoen aan gedetailleerde eisen voor contrast, toetsenbordnavigatie, leesbaarheid en compatibiliteit met schermlezers.

Impact op het ontwerp van GUI’s

Een knop die niet voldoet aan de vereiste contrastverhouding van WCAG 2.1 AA is niet langer alleen een slechte esthetische keuze: het is een gebrek aan wettelijke conformiteit. De zelfbedieningskiosken moeten ook voldoen aan EN 301 549 en WCAG 2.1 AA, met de verplichting om een toegankelijkheidsverklaring te publiceren.

WCAG 2.2, gepubliceerd in december 2024, introduceert nieuwe criteria die het ontwerp van GUI’s wijzigen zonder dat het nog volledig door de regelgeving wordt vereist. GUI-ontwerpers moeten dus anticiperen op twee niveaus van gelijktijdige conformiteit.

En de niet-grafische interfaces?

De norm EN 301 549 beperkt zich niet tot GUI’s. Het dekt ook spraakinterfaces en opdrachtregelinterfaces, maar met verschillende criteria. De conformiteit van een UI hangt af van het type interface dat wordt ingezet. Een spraakassistent moet voldoen aan eisen van duidelijkheid en snelheid, niet aan visueel contrast. Dit is een zeer directe illustratie van de reden waarom het verwarren van UI en GUI leidt tot specificatiefouten in een lastenboek.

Luchtfoto van een bureau met een laptop die een GUI-interface en een terminal weergeeft, omringd door aantekeningen over de UI

Kiezen tussen GUI en andere vormen van UI afhankelijk van de productcontext

De keuze van het type interface is geen kwestie van voorkeur, maar van een analyse van de gebruikscontext. Een operator in een serverruimte die repetitieve opdrachten uitvoert, zal sneller zijn met een CLI dan met een GUI. Een klant die een productcatalogus op zijn telefoon bekijkt, heeft behoefte aan een geoptimaliseerde aanraak-GUI.

De vraag die gesteld moet worden is niet “GUI of geen GUI”, maar “welk type UI past bij de eisen van de gebruiker, de omgeving en de regelgeving”. In een bewegend voertuig vermindert een VUI de visuele afleiding. Op een openbare kiosk moet de GUI voldoende grote aanraakzones integreren om te voldoen aan de toegankelijkheidsnormen.

Het type UI dicteert de vaardigheden van het ontwerpteam. Een GUI-project mobiliseert UI-ontwerpers, front-end ontwikkelaars en specialisten in visuele toegankelijkheid. Een VUI-project vereist computationele taalkundigen en conversatieontwerpers. Het verwarren van deze gebieden in de fase van de projectdefinitie genereert vertragingen en extra kosten tijdens de ontwikkeling.

Het onderscheid tussen GUI en UI is dus geen vocabulaire-debat. Het structureert de technische, budgettaire en wettelijke beslissingen van een digitaal project vanaf de eerste fasen.

Begrijp het verschil tussen GUI en UI: uitleg en concrete voorbeelden