Verschil UX en UI designer

Je bent klaar met je presentatie en voelt: dit varkentje is wel héél schoon gewassen. De interface die je hebt ontworpen prijkt nog achter je, en voor je zit de klant, vier man sterk, met een onleesbare uitdrukking op hun gezichten. Je maakt je geen zorgen; dit is het beste werk dat je ooit hebt geleverd — de staande ovatie kan elk moment beginnen.

"We vroegen je om het UX-design voor je rekening te nemen," zegt de CEO.

Het zweet breekt je uit. Dat heb je toch gedaan? Twee van hen fluisteren wat naar elkaar, terwijl de CEO je stoïcijns blijft aanstaren. Je kijkt achterom, kijkt terug. Als wat er op je scherm staat geen UX-design is, wat heb je dan gedaan?

Waar het fout is gegaan (met webdesign)

Een van de mooie dingen aan webdesign is dat iedereen mee mag doen. De bijna oneindige (gratis) bronnen om elke expertise binnen webcreatie te ontdekken zorgen ervoor dat je geen formele opleiding nodig hebt om het digitale domein te betreden. Wil je erbij? Kom maar.

Tegelijkertijd is dit gebrek aan elke vorm van een barrière een valkuil voor ons vakgebied.

Omdat er geen enkele toelatingseis is, kan iedereen zichzelf op elk moment bestempelen als digitale expert en aan de slag gaan. Dat betekent ook dat de scheidslijnen van ons vakgebied soms meer suggesties lijken dan harde grenzen.

Daardoor kan het gebeuren dat je klanten zeggen dat ze een presentatie over UX-design hadden verwacht, terwijl jij zou zweren dat dit precies is wat je net hebt laten zien.

Is er een verschil tussen UX en UI?

User Experience (UX) en User Interface (UI) design worden vaak door elkaar gehaald en zelfs uitwisselbaar gebruikt; ontwerpers die zich alleen met de interface bezighouden, noemen zichzelf toch User Experience-designers en andersom.

Toch is er wel degelijk een verschil tussen de twee vakgebieden, maar waar komt al die verwarring dan vandaan? Tja, de termen lijken sowieso verdacht veel op elkaar, en de werkvelden hebben veel overlap.

Daarom is het goed te kijken wat ze onderscheidend maakt, maar ook te bekijken hoe (en wanneer) je de twee samen ziet.

De verschillen tussen UX- en UI-design

Laten we eerst kijken in hoeverre de twee werkvelden van elkaar verschillen.

Het werk van de UX-designer

De User Experience-designer houdt zich bezig met de digitale reis van de klant. Deze expert bekijkt een project van bovenaf en houdt alle bewegende onderdelen in de gaten: hoe bereiken klanten de website, welke interacties hebben klanten al gehad met het merk en welk gevoel willen we met ons product overbrengen?

De UX-designer is de architect die de grote lijnen van een project uitzet. Net als de architect is de UX-designer niet bezig met de specifieke afmetingen van de ramen of het materiaal van de vloer.

Het werk van de UI-designer

De User Interface-designer houdt zich bezig met de details van de gebruikerservaring. Hoe moet de klantreis die de UX-designer heeft uitgestippeld er dan precies uitzien? Dit proces gaat over het daadwerkelijk maken van designs en het zoeken naar visuele oplossingen voor de ideeën die bedacht zijn om het beste product neer te zetten.

De UI-designer is degene die de grote lijnen oppakt en vervolgens het plaatje inkleurt. Zonder de User Interface-specialist bestaan er alleen ideeën; UI brengt ideeën naar de realiteit.

UX- en UI-design als twee kanten van dezelfde medaille

We kunnen UX en UI door elkaar heen gebruiken, omdat het twee kanten van dezelfde medaille zijn. De een kan zonder de ander niet bestaan, en daarom is het begrijpelijk dat sommige mensen het idee hebben dat we het hier hebben over dezelfde expertise — het opdelen in twee kleinere delen van een groter geheel.

In de ontwikkeling van een website heb je zowel UX- als UI-design nodig om tot een succesvol eindproduct te komen. In kleinere projecten kunnen beide rollen prima door één designer worden uitgevoerd. Pas bij grotere bedrijven zullen UX- en UI-design opgesplitst worden in meerdere functies.

Ze blijven altijd expertises die naast elkaar bestaan en kunnen, wat mij betreft, niet zonder elkaar bestaan.

De verschillen tussen UX- en UI-design

User Experience- en User Interface-design kun je zien als twee functies die door een onzichtbare lijn aan elkaar verbonden zijn. In het schema hieronder leg ik kort, in grote lijnen, de verschillen uit, maar je kunt de een niet zonder de ander zien.

Zoals we altijd spreken over de look én feel van een product, zo werkt dat ook bij UX- en UI-design — ken de verschillen, begrijp dat ze samenwerken.

UX design

  • Gebruikerservaring: Hoe de eindgebruiker het product ervaart. Is het doel gemakkelijk te begrijpen?

  • Prototyping: Test het product in de grote lijnen; wat werkt en wat moet beter.

  • High-level: Bekijk het project van bovenaf, in connectie met andere onderdelen.

UI design

  • Look & feel: Het algehele gevoel dat een product moet overbrengen.

  • Design: Ontwerp het product, van merkbeleving tot visuele details.

  • Details: Bekijk het product onder een loep en werk alles tot in de puntjes af.

Twee handen op één gebruiker

Je bent met stomheid geslagen; de CEO heeft gelijk: je hebt de user interface laten zien, terwijl zij het over UX-design wilden hebben. Toch weet je jezelf te herpakken, er is nog hoop. Want onderliggend aan de ontwerpen die je hebt laten zien, zit de user experience die je hebt vormgegeven, maar waarover je het eerder niet had.

Je gaat terug door de presentatie en vertelt hoe de klant tussen de regels door jouw UX-werk kan zien, want elke user interface is een uiting van de onderliggende user experience. Beide expertises werken samen en zijn onlosmakelijk met elkaar verbonden.

Figma Starter Design System

Een mini Design System voor Figma om je design project mee te starten. Met grids, kleuren, iconen, design tokens en meer!

Figma Starter Design System image

Figma Starter Design System

Een mini Design System voor Figma om je design project mee te starten. Met grids, kleuren, iconen, design tokens en meer!

Figma Starter Design System image

Figma Starter Design System

Een mini Design System voor Figma om je design project mee te starten. Met grids, kleuren, iconen, design tokens en meer!

Figma Starter Design System image