Wat is het verschil tussen UX en UI? Zo zit het

De twee letterparen worden zo vaak aan elkaar geplakt — "UX/UI designer" — dat bijna niemand nog weet dat het twee verschillende dingen zijn. En dat is jammer, want in de praktijk mislukken projecten meestal op de ene en niet op de andere.

Het korte antwoord: UX gaat over de route, UI over wat je onderweg ziet.

UX: de route die iemand aflegt

UX staat voor user experience. Het gaat over de vraag: welke stappen zet iemand, in welke volgorde, en waar loopt hij vast?

Een UX-vraag is bijvoorbeeld:

• In welke volgorde moet iemand informatie krijgen om een beslissing te kunnen nemen?
• Hoeveel stappen zitten er tussen binnenkomen en een aanvraag versturen?
• Wat gebeurt er als iemand iets verkeerd invult, of halverwege wegklikt?
• Welke informatie heeft hij nodig die er nu niet staat?

Bij UX hoort onderzoek: kijken waar mensen afhaken, luisteren naar de vragen die binnenkomen, en de route uittekenen voordat er iets ontworpen wordt. Het resultaat is vaak saai om naar te kijken — schetsen in grijstinten, een stroomdiagram, een lijst met schermen — en precies daar wordt het geld verdiend.

UI: wat je ziet

UI staat voor user interface. Dat is het zichtbare: typografie, kleur, knoppen, ruimte, iconen, beweging. Of iets er rustig uitziet of druk, duur of goedkoop, modern of gedateerd.

Een UI-vraag is bijvoorbeeld:

• Welke knop is de belangrijkste, en zie je dat ook?
• Is de tekst groot genoeg en het contrast sterk genoeg om comfortabel te lezen?
• Past het bij het merk, of ziet het eruit als een willekeurig sjabloon?
• Wat gebeurt er visueel als je iets aanwijst, indrukt of fout invult?

UI bepaalt of mensen je serieus nemen. Dat klinkt oppervlakkig en is het niet: bij een onbekende leverancier is hoe iets eruitziet een van de weinige signalen die iemand heeft.

Waarom de volgorde uitmaakt

Een mooi scherm op een verkeerde route helpt niemand. Je kunt een formulier prachtig vormgeven, maar als er zeven velden in staan die niemand kan beantwoorden, vult niemand het in.

Andersom werkt ook niet. Een goede route in een lelijk jasje wordt niet vertrouwd, zeker niet als er geld mee gemoeid is.

Je hebt ze dus allebei nodig — maar in deze volgorde. Eerst uitzoeken wat er moet gebeuren en in welke volgorde, dan pas hoe het eruitziet. Begin je bij het uiterlijk, dan ontwerp je een gevel voordat je weet hoeveel kamers het huis heeft.

Hoe je ziet welk van de twee jouw probleem is

Een vuistregel die bijna altijd klopt:

Het is waarschijnlijk UX als:

• mensen bellen met vragen die op je site beantwoord zouden moeten zijn
• bezoekers wel komen maar niet doorklikken naar de volgende stap
• je formulier wel wordt geopend maar niet verstuurd
• je intern steeds discussieert over welke pagina's er moeten komen
• je site "eigenlijk wel goed" is maar je hem toch niet meestuurt

Het is waarschijnlijk UI als:

• je je ervoor schaamt bij een klant die hem opent
• je site er goedkoper uitziet dan je bent
• alles werkt, maar niets springt eruit
• elke nieuwe pagina er weer net iets anders uitziet

En vaak is het allebei. Dat is geen verkooppraatje: een site die jaren niet is aangeraakt, is meestal op beide fronten blijven staan.

Wat het geen van beide is

Twee dingen die vaak onder "UX/UI" worden geschoven en er niet onder vallen:

Techniek. Of je site snel laadt en of hij op elke telefoon werkt, is bouwwerk. Het raakt de ervaring, maar je lost het niet op met een ontwerp.

Je aanbod. Als niet duidelijk is wat je verkoopt en aan wie, lost geen enkele knop dat op. Dat is positionering, en dat komt vóór alles. Daarover schreef ik in eerst je merk of eerst je website.

Hoe het er in een project uitziet

Bij een gemiddeld traject ziet de verdeling er zo uit:

1. Uitzoeken wat er moet gebeuren: welke vragen heeft je bezoeker, in welke volgorde, en waar haakt hij nu af. Dit is UX, en het is het minst zichtbare deel.
2. De opzet vastleggen: welke pagina's, welke volgorde, welke stappen naar contact. Nog steeds UX.
3. Schetsen zonder kleur. Dat dwingt het gesprek naar structuur in plaats van naar smaak, en het scheelt later hele ontwerprondes.
4. Visueel ontwerp. Nu pas kleur, typografie en beeld. Dit is UI.
5. De lastige gevallen. Lege staten, lange namen, foutmeldingen, een lijst met één item. Dit is allebei, en het wordt het vaakst overgeslagen.

Dat laatste punt is waar ontwerpen klapt zodra het echte data ziet. Een scherm met drie nette regels is makkelijk; een scherm met een bedrijfsnaam van zestig tekens niet.

Waar het in B2B vooral op vastloopt

In consumentenproducten gaat de discussie vaak over de laatste tien procent: een animatie die net iets soepeler moet, een knop die net iets anders staat. In B2B ligt het probleem bijna altijd eerder in de keten.

Drie dingen die ik telkens terugzie:

De bezoeker is niet één persoon. Bij een offerte van enige omvang kijken er meerdere mensen mee: degene die het probleem heeft, degene die het budget beheert en vaak iemand die op techniek of regels let. Die drie zoeken niet hetzelfde. Een site die er maar één bedient, verliest de andere twee onderweg.

De beslissing duurt weken. Iemand komt binnen, leest, gaat weg, komt twee weken later terug. Dat betekent dat je pagina ook moet werken voor wie hem voor de tweede keer opent: hij moet snel terug kunnen vinden wat hij de vorige keer las, zonder opnieuw door een verhaal heen te moeten.

Het echte gesprek gebeurt offline. Je site hoeft niet te verkopen, hij moet zorgen dat iemand belt met vertrouwen in plaats van met twijfel. Dat is een lagere lat dan "converteren", en het vraagt iets anders: duidelijkheid en bewijs, geen verkooptrucs.

Wat een designsysteem is, en wanneer je er een nodig hebt

Nog een term die in dit hoekje valt. Een designsysteem is geen ontwerp maar een set herbruikbare onderdelen met de regels erbij: welke maten, welke kleuren, welke afstanden, en welke staten een onderdeel kan hebben (normaal, aangewezen, uitgeschakeld, foutmelding).

Je hebt het nodig zodra meerdere mensen schermen maken, of zodra je over een jaar nog nieuwe pagina's wilt bouwen die er nog steeds bij horen. Heb je een site van zes pagina's die je zelden aanpast, dan is het overdreven: dan is een kort document met je kleuren, je lettertypes en een paar voorbeelden genoeg.

Het verschil zit hem in de vraag of je iets één keer maakt of blijft doorbouwen. Dat is een bedrijfsvraag, geen ontwerpvraag.

Hoe je het beoordeelt zonder vakkennis

Je hoeft geen ontwerper te zijn om te zien of het klopt. Drie tests die je zelf kunt doen:

• De vijf-secondentest. Laat iemand die je bedrijf niet kent vijf seconden naar je homepage kijken. Vraag daarna: wat doen wij, en voor wie? Weet hij het niet, dan is dat geen UI-probleem maar een UX-probleem.
• De telefoontest. Loop je eigen route na op je telefoon, met je mobiele verbinding in plaats van wifi. Noteer elke plek waar je moet nadenken of inzoomen.
• De hardoptest. Lees je eerste zin hardop voor. Gaat hij over jou of over je bezoeker?

Drie tests, een half uur, en je weet meer dan uit de meeste rapporten.

Wat je aan een ontwerper moet vragen

Krijg je een offerte waarin "UX/UI design" staat, vraag dan door:

• Wat doe je vóórdat je begint met ontwerpen?
• Op basis waarvan bepaal je de volgorde van de pagina's?
• Hoe toets je of het werkt, en wanneer?
• Ontwerp je ook de lastige gevallen, of alleen het nette voorbeeld?

Krijg je op de eerste vraag een antwoord dat met kleur of stijl te maken heeft, dan koop je UI en betaal je voor UX.

Meer over hoe ik dat aanpak: UX/UI design. En wil je eerst weten waar je nu staat, loop dan de checklist voor een goede B2B-website langs.