UX en UI, wat is het verschil

Leestijd: 10 minuten

Inhoudsopgave

• Twee begrippen, twee werelden
• Wat UX is en waarom het onzichtbaar is als het goed werkt
• Wat UI is en waarom het de eerste indruk bepaalt
• Waarom UX en UI niet hetzelfde zijn
• Wat goede UX in de praktijk betekent
• Wat goede UI in de praktijk betekent
• Hoe UX en UI samenwerken in een goed ontwerp
• De meest gemaakte fout in webdesign
• Hoe ik UX en UI aanpak in een project

Twee begrippen, twee werelden

UX en UI zijn twee termen die in de wereld van webdesign dagelijks worden gebruikt, vaak door elkaar en niet altijd correct. Ze worden samengevoegd in functietitels als UX/UI designer, in projectomschrijvingen als we willen een sterke UX/UI, en in gesprekken tussen opdrachtgevers en designers die eigenlijk beide termen maar vaag begrijpen.

Dat is geen probleem van onwetendheid maar van taal. De twee begrippen hebben een genuanceerd onderscheid dat moeilijk in een zin te vangen is. Maar voor iemand die een website wil laten bouwen, is het onderscheid wel degelijk relevant. Het bepaalt namelijk de volgorde van het ontwerpproces en de manier waarop jij feedback kunt geven op wat er gemaakt wordt.

Wat UX is en waarom het onzichtbaar is als het goed werkt

UX staat voor user experience. Het is de totale ervaring die een persoon heeft als hij met een product interacteert. In de context van een website: hoe makkelijk vind je wat je zoekt? Hoe logisch voelt de navigatie? Hoe prettig is het om door de site te bewegen? Hoe duidelijk is de boodschap op elke pagina? Hoe eenvoudig is het om contact op te nemen?

Het bijzondere van goede UX is dat het onzichtbaar is. Als de gebruikerservaring goed is, merk je het niet. Je navigeert door de site, vindt wat je zoekt, begrijpt wat je moet doen en doet het. Zonder frustratie, zonder nadenken, zonder afhaken. Het voelt vanzelfsprekend.

Slechte UX is juist heel zichtbaar. Je weet niet waar je moet klikken. Je zoekt informatie die er niet is of er niet staat waar je hem verwacht. Je klikt terug naar de homepage en probeert het opnieuw. Na twee pogingen ben je weg. Dat gevoel van slechte UX hebben de meeste mensen al eens ervaren, op websites van banken, overheidsinstellingen of webshops die zijn gebouwd door mensen die nooit als gebruiker hebben nagedacht.

Wat UI is en waarom het de eerste indruk bepaalt

UI staat voor user interface. Het is de visuele laag van een website of applicatie. De kleuren, de typografie, de knoppen, de iconen, de afbeeldingen, de layout. Alles wat je ziet, is UI.

UI is wat de bezoeker als eerste ziet. Zijn eerste oordeel over een website, het oordeel dat in de eerste twee seconden wordt gevormd, is gebaseerd op de UI. Is de site mooi? Voelt het professioneel? Past het bij wat ik verwacht van dit type bedrijf? Die vragen worden beantwoord door de UI, voordat de bezoeker ook maar een woord heeft gelezen.

UI is daarmee het instrument van de eerste indruk. En eerste indrukken zijn in de context van een zakelijke website bepalend voor of iemand verder leest of afhaakt.

Waarom UX en UI niet hetzelfde zijn

UX en UI zijn verwant maar fundamenteel verschillend. UX is structuur, logica en gedrag. UI is visueel, esthetisch en stylistisch. Je kunt de twee het beste begrijpen aan de hand van een analogie.

Stel je een kantoorgebouw voor. De UX is de indeling van het gebouw: waar zijn de liften, hoe vind je de vergaderzalen, is er voldoende bewegwijzering, is de receptie logisch bereikbaar vanaf de ingang? De UI is de architectuur en de inrichting: welk materiaal is gebruikt, wat zijn de kleuren, hoe ziet de voorgevel eruit, is het interieur verzorgd?

Een gebouw kan er prachtig uitzien maar slecht functioneren omdat je je er voortdurend in verliest. En een gebouw kan functioneel perfect zijn maar er saai en onprofessioneel uitzien. Het ideaal is een gebouw waarbij beide kloppen. Dat geldt ook voor websites.

Wat goede UX in de praktijk betekent

Goede UX voor een professioneel dienstverlenend bedrijf begint bij de sitestructuur. Welke paginas heeft de site nodig? In welke volgorde staat de informatie op de homepage? Waar staan de call to actions? Hoe makkelijk is het contactformulier te bereiken?

Het gaat ook om de details op paginaniveau. Is de tekst op de dienstenpagina zo geschreven dat de bezoeker snel kan scannen of deze dienst voor hem relevant is? Is er een duidelijke volgende stap na elke pagina? Is de informatiehiërarchie logisch, met de belangrijkste informatie bovenaan?

Goede UX vraagt empathie: het vermogen om je te verplaatsen in de bezoeker en te begrijpen wat hij nodig heeft, in welke volgorde, op welk moment. Dat is een vaardigheid die ontwerpers ontwikkelen door veel websites te bouwen en te observeren hoe mensen er daadwerkelijk mee omgaan.

Wat goede UI in de praktijk betekent

Goede UI voor een professioneel dienstverlenend bedrijf betekent een visuele taal die past bij het type bedrijf en de doelgroep. Een accountantskantoor heeft een andere visuele taal nodig dan een creatief reclamebureau. Niet alleen in kleur, maar ook in typografie, in de keuze van afbeeldingen, in de hoeveelheid witruimte en in de toon van de microcopy op knoppen en formuliervelden.

Goede UI is consistent. Dezelfde kleuren op elke pagina. Dezelfde typografische verhoudingen. Dezelfde manier waarop knoppen eruitzien en zich gedragen. Consistentie is onzichtbaar als het goed is, maar storend als het ontbreekt. Een bezoeker die op elke pagina een andere visuele taal tegenkomt, ervaart dat als rommelig en onprofessioneel.

Goede UI is ook functioneel. Knoppen zien er uit als knoppen. Links zijn herkenbaar als links. De navigatie is duidelijk en consistent. Decoratieve elementen ondersteunen de boodschap in plaats van ermee te concurreren.

Hoe UX en UI samenwerken in een goed ontwerp

In een goed ontwerp zijn UX en UI onlosmakelijk verbonden. De structuur, de logica en het gedrag van de site worden zichtbaar gemaakt door de visuele taal. Elke designkeuze ondersteunt de gebruikerservaring in plaats van ermee te concurreren.

Dat vraagt een volgorde: UX first, dan UI. Eerst de structuur bepalen, dan de visuele laag eroverheen leggen. Als je begint bij de UI zonder de UX te hebben nagedacht, maak je mooie dingen die misschien niet logisch werken. Als je de UX hebt bepaald, heeft de UI een fundament om op te bouwen.

De meest gemaakte fout in webdesign

De meest gemaakte fout in webdesign is beginnen bij de UI. Een klant ziet een website die er mooi uitziet en wil iets vergelijkbaars. Een designer bouwt iets visuals dat er goed uitziet. En pas achteraf blijkt dat de structuur niet klopt, dat de bezoeker niet vindt wat hij zoekt en dat de conversie tegenvalt.

Mooi design op een zwakke structuur is zoals een mooie gevel op een slecht gebouw. De eerste indruk is goed, maar de ervaring valt tegen. En ervaringen tellen zwaarder dan eerste indrukken als het gaat om of iemand contact opneemt.

Hoe ik UX en UI aanpak in een project

Bij elk project begin ik met de UX-vragen. Wie is de doelgroep? Wat zoekt die persoon? Welke structuur begeleidt hem van de eerste landing naar het contact opnemen? Welke paginas zijn er nodig? Welke informatie staat op welke plek?

Pas als die vragen zijn beantwoord, begin ik met de visuele uitwerking. Het design is de UI-laag over een UX-fundament. Elke visuele keuze heeft een reden, en die reden is altijd verbonden met de gebruikerservaring die ik wil creëren.

Het resultaat is een website waarbij UX en UI samen optrekken: goed ontworpen en goed werkend als een geheel, niet als twee afzonderlijke lagen die naast elkaar bestaan.