Wat is UI en UX: de betekenis en het verschil

UI en UX design zijn termen die je in de digitale wereld vaak tegenkomt. Maar ze worden ook vaak door elkaar gehaald. Wat betekenen ze nou echt? Waarom is dat verschil belangrijk? En wanneer pas je ze toe?

De afkortingen UI Design en UX Design staan respectievelijk voor User interface design en User experience design. Als je het hebt over de User interface design, dan gaat het vooral over het uiterlijk, het plaatje. Hierbij gaat het dan bijvoorbeeld over kleur- en lettertype gebruik, fotografie en algehele vormgeving. Het User experience design gaat veel meer over beleving. Niet persé: ziet het er mooi uit, maar vooral: werkt deze applicatie prettig? Kan ik hem eenvoudig en intuïtief doorlopen? Je zou kunnen zeggen dat UI en UX ook wel de Beauty & the Brains zijn.

UX Design: The brains

Tijdens het opstarten van een nieuw project starten we met het uitdenken van de user journey. Wat willen we bereiken, en wie? Hoe kunnen we dit het beste voor elkaar krijgen? Bij het uitdenken van de user journey bedenk je stap voor stap: Hoe gaat een gebruiker - die niet gewend is met mijn applicatie te werken - deze doorlopen? Wat is zijn doel, en hoe kunnen we ervoor zorgen dat hij deze het beste bereikt?

De UX-designer bedenkt een plan om de gebruiker stap voor stap mee te nemen in het verhaal van de applicatie. Hij start hierbij met een denkrichting, en ontwikkelt deze steeds verder door. Als tijdens het proces duidelijk wordt wat de gebruiker nodig gaat hebben en welke functionaliteiten hem het beste kunnen ondersteunen wordt er door de UX-designer een wireframe ontwikkeld. Simpel gezegd is dit eigenlijk een soort kleurplaat; de buitenste lijntjes worden bepaald, de UI-designer zorgt er later voor dat alles er gelikt uit komt te zien.

In het wireframe wordt goed nagedacht over de positie van elementen zoals knoppen en invulvelden, maar wordt ook uitgedacht hoe de flow gaat. Hoe doorloop je een aanmeldprocedure of winkel-aankoop zo prettig mogelijk? En hoe zorg je ervoor dat alles zo intuïtief mogelijk werkt?

Als het wireframe gemaakt is wordt deze uitvoerig getest bij een zogeheten testgroep. Dit zijn mensen die hypothetisch gezien gebruiker zouden kunnen zijn van de applicatie, en om deze reden de applicatie goed kunnen testen. Bijvoorbeeld: maken we een applicatie voor een babykleding-webshop, dan zullen we vaders en moeders van kleine kinderen uitnodigen voor de testgroep. Zij zijn namelijk ervaringsdeskundigen, en kunnen ons precies vertellen wat er wel en niet goed werkt.

De testresultaten zullen uitvoerig worden bekeken en de learnings die hieruit komen worden doorgevoerd in de wireframes. Ook worden de plannen voor de applicatie bijgeschaafd om aan de verwachting van de eindgebruiker te voldoen.

UI Design: The beauty

Niet alleen de werking van de app is belangrijk, maar minstens zo belangrijk is het uiterlijk ervan. Dit is een taak voor de User interface designer. Deze gaat zorgvuldig te werk om de designs zo goed mogelijk te laten aansluiten bij het merk, maar ook bij de doelgroep. Er wordt bij het designen gekeken naar: Kleurgebruik, typografie, fotografie, gebruik van witruimte, etc. Het is heel belangrijk om ervoor te zorgen dat de designs zo goed mogelijk aansluiten bij de bestaande huisstijl. Dit om ervoor te zorgen dat de herkenbaarheid van het merk goed gewaarborgd wordt.

Het UI-design is niet alleen een cosmetische toevoeging van het geheel. Het zorgt er ook voor dat mensen een bepaald gevoel overhouden aan hun bezoek. Zo kan bijvoorbeeld fotografie een grote rol spelen bij het gevoel dat een bezoeker bij je applicatie heeft. Gebruik je veel standaard stock fotografie - zoals het bovenste voorbeeld in deze foto - dan zal je applicatie minder echt of oprecht overkomen. Dat kán de bedoeling zijn, maar bij twijfel is oprecht altijd de juiste keuze.

Ook kan het zo zijn dat een designer een bepaalde bepaalde kleurstelling veel gebruikt. Ook dat heeft dat effect op de ‘mood’ van de eindgebruiker. Alle elementen worden zorgvuldig afgewogen om tot een gebalanceerd eindresultaat te komen. Hetzelfde geldt voor typografie en het gebruik van bepaald taalgebruik en interpunctie. Kijk maar eens naar dit voorbeeld: Je ziet dat het design een gigantisch effect heeft op de boodschap die je wil uitstralen. Links is subtiel, gedecideerd, maar misschien een beetje braafjes. Rechts is schreeuwerig, maar ook wel activerend. Afhankelijk van de doelgroep wordt gekozen welke lettertypes, kleuren en schrijfstijlen er worden gebruikt om de gebruikers mee aan te spreken.

User interface design - the differences in color use and typography

UI & UX design gaan hand in hand

Zoals je ziet gaan UI- en UX design altijd hand in hand. De één kan niet zonder de ander. Want heb je een mooie buitenkant, maar werkt de applicatie niet goed? Dan verlies je je gebruikers. Werkt de applicatie als een zonnetje, alleen ziet deze er niet mooi uit? Ook dan ben je je publiek kwijt. Zorg er dus altijd voor dat er in je project aan allebei de aspecten wordt gedacht. Een UX- en UI-designer hoeven niet persé 2 verschillende mensen te zijn, maar het zijn wel twee invalshoeken die beide goed moeten worden belicht.

Onze passie ligt bij het ontwikkelen van high-end digitale producten en daar hoort goed design bij: zowel op het gebied van UI als UX. Ben je benieuwd hoe dat kan werken voor jou organisatie? Neem vrijblijvend contact met ons op voor een kennismakingsgesprek.

UX Design: The brains

UI Design: The beauty

UI & UX design gaan hand in hand

Dit vind je misschien ook interessant:

Ureninschatting op basis van fixed fee of een nacalculatie?_

Wat is een Design Sprint en is het iets voor mij?

Code Review