User interface: wat betekent UI en hoe werkt het?

Een user interface (UI) is de gebruikersinterface van een digitaal product. Het is het geheel waarmee je een website, app of ander systeem bedient én waarlangs je informatie terugkrijgt. Een knop is dus UI, maar de melding na een klik ook. Het woord gaat niet alleen over hoe iets eruitziet. Het gaat ook over wat je ermee kunt doen en of je begrijpt wat er gebeurt.

Wat hoort bij een user interface?

Stel dat je via een website een vraag wilt stellen. Je ziet een contactformulier met een veld voor je naam, een veld voor je e-mailadres en een groter vak voor je bericht. De labels vertellen wat in elk veld hoort. De verzendknop maakt de volgende actie duidelijk.

Vul je het e-mailadres verkeerd in, dan hoort een foutmelding aan te geven welk veld aandacht nodig heeft. Na verzending vertelt een bevestiging of je bericht is ontvangen. Zo’n melding is net zo goed onderdeel van de interface als de knop: zonder terugkoppeling weet je niet of je actie is gelukt. Het versturen van het formulier kan een conversie zijn.

In dit voorbeeld kun je drie kanten onderscheiden. Uiterlijk is hoe de velden, tekst en knop zijn vormgegeven. Bediening is waar je kunt typen, kiezen of klikken. Terugkoppeling is wat de website na je actie laat zien. Die kanten werken samen. Een opvallende knop helpt weinig als je daarna geen idee hebt of het formulier is verstuurd.

Een menu en zoekveld zijn andere herkenbare onderdelen. Ze helpen je een pagina te vinden. De tekst op een knop maakt duidelijk wat er volgt: ‘Verstuur je vraag’ zegt meer dan ‘Klik hier’. Wat er op de pagina staat, hangt af van de taak die iemand wil uitvoeren. Een contactformulier vraagt andere onderdelen dan een productfilter. Welke inhoud en functies je nodig hebt, kun je bij de voorbereiding van een website bepalen.

UI en UX: waar zit het verschil?

UI gaat over de onderdelen waarmee je een taak uitvoert en over de presentatie daarvan. UX staat voor user experience, oftewel de gebruikerservaring: hoe de volledige taak verloopt voor degene die het product gebruikt. Dat omvat meer dan de losse knoppen of schermen.

Neem opnieuw het formulier. Je kunt de velden goed herkennen en toch vastlopen als je niet begrijpt waarom je bericht niet wordt verzonden. Een duidelijke foutmelding maakt die stap beter te volgen. De interface beïnvloedt daarmee de ervaring, maar UI en UX zijn geen twee afgesloten vakjes. Dezelfde keuze kan de bediening én het verloop van de taak raken.

Ook ‘design’ is geen aparte laag die alleen over mooie kleuren gaat. UI-design betekent dat iemand de interface bewust vormgeeft: welke woorden staan bij een veld, welke actie krijgt nadruk en welke reactie volgt op een invoer? De visuele vorm is een onderdeel van die keuze, niet de volledige betekenis van UI.

Wanneer is een interface bruikbaar?

Een bruikbare interface laat je zonder giswerk zien wat je kunt doen en wat de uitkomst van je actie is. Je kunt dat concreet bekijken. Zegt het label bij een veld wat erin moet? Maakt een knop duidelijk welke stap volgt? Gebruik je op vergelijkbare plekken dezelfde woorden? Krijg je een begrijpelijke melding als iets misgaat?

Die vragen zijn ook op een klein scherm zinvol. Als een knop lastig aan te raken is of een foutmelding buiten beeld valt, kan iemand de taak moeilijk afmaken. Het helpt om de handeling zelf te volgen: van de eerste invoer tot de bevestiging. Zo beoordeel je niet alleen of een scherm er rustig uitziet, maar ook of de bediening duidelijk blijft wanneer er iets anders gebeurt dan verwacht.

Een interface hoeft bovendien niet altijd grafisch te zijn. Een gesproken opdracht met een hoorbaar antwoord is ook een manier om een systeem te bedienen. Bij websites denk je meestal aan een grafische interface met tekst, knoppen en formulieren. Wie zich oriënteert op de bouw of verbetering van een site, vindt die bredere context op de pagina over websites.

De kern blijft eenvoudig: de interface is de plek waar je bedoeling en de reactie van het systeem elkaar raken. Als die reactie duidelijk is, kun je verder. Als ze ontbreekt of onduidelijk is, moet je raden wat er is gebeurd.