UX Vs. UI Design: Wat Is Het Verschil?

UX vs. UI design. Waar begin ik?

Nou, om te beginnen kun je geen website bouwen zonder beide. Het gevoel van de gebruikerservaring is net zo belangrijk als het uiterlijk van de gebruikersinterface.

Dus eigenlijk gebruiken we allemaal die als webdesigners werken zowel UI-design als UX-design bij het maken van websites. Dat gezegd hebbende, als we het hebben over de formele disciplines van UI en UX, is dat een heel ander verhaal. En als je hier bent, vraag je je misschien af of een van deze carrières iets voor jou is.

Wat betreft het kiezen welke je moet doen, daar is geen makkelijk antwoord voor. Iedereen die erover denkt om webdesigner te worden moet dat voor zichzelf uitzoeken. Dus daar is de volgende gids voor.

Hoe UX-valkuilen te vermijden en conversies te verhogen

Inhoudsopgave

UX vs. UI Design: Wat is het verschil?

Laten we beginnen met de basale verschillen tussen de twee ontwerpprincipes:

Wat is User Experience (UX) Design?

User experience design gaat over hoe goed een website werkt:

Hoe voelen gebruikers zich over de website?
Hoe vloeiend is de gebruikersstroom door de site?
Hoe makkelijk is het voor gebruikers om hun doelen te bereiken?

UX-design is een mens-eerst benadering van webdesign. Vanwege dit vertrouwen UX-designers sterk op onderzoek en testen om erachter te komen wat hun publiek nodig heeft, wat ze waarderen en wat ze pijn doet — en dan een ideale oplossing eromheen te ontwerpen.

Het einddoel is om een website te maken die de gebruiker bruikbaar, nuttig en waardevol vindt.

Wat is User Interface (UI) Design?

User interface design gaat over de esthetiek van de website:

Vinden gebruikers het aantrekkelijk?
Zijn de interactieve elementen intuïtief?
Voelt het ontwerp natuurlijk aan en roept het een positieve reactie op?

UI-design is de visuele kant van webdesign. Het is de taak van de UI-designer om de kleinste details op een website te perfectioneren: kleurenpaletten, lettertype-combinaties, afbeeldingen, formulieren, menu’s, hover-getriggerde animaties, knoppen, en meer.

UI-designers vertrouwen op ontwerponderzoek en trends, brancheanalyse en webdesignprincipes om een interface en interacties te creëren waarmee gebruikers comfortabel en zelfverzekerd kunnen omgaan.

Wat doet een UX-designer?

Als je een website wilt bouwen die de juiste bezoekers aantrekt en hen laat doen wat je wilt, dan moet die specifiek voor hen gebouwd zijn.

Uiteraard moeten de doelen van het merk ook worden bereikt. Die doelen zullen echter nooit worden bereikt als de website niet in staat is bezoekers te converteren. Daarom zijn UX-designers een onmisbaar onderdeel van het webdesignproces.

Ze verbeteren de kansen op succes van een merk door te ontwerpen vanuit het perspectief van de gebruiker.

Doelen

UX-ontwerpers hebben een tweeledig doel:

Wrijvingsloze, gebruikersvriendelijke website-ervaringen ontwerpen
Hun klanten helpen hun zakelijke doelen te bereiken via de website

Belangrijkste verantwoordelijkheden

Het zou misschien nauwkeuriger zijn om UX-ontwerpers UX specialisten te noemen. Hoewel ze een hand hebben in het ontwerpen van wireframes en low-fidelity prototypes voor een website, bestaat het grootste deel van wat ze doen uit onderzoek, testen en validatie.

Laten we eens kijken naar hun verantwoordelijkheden:

Onderzoek

UX-ontwerpers verzamelen op verschillende manieren gegevens om werkhypothesen voor de website te vormen.

Concurrentieanalyse is daar een onderdeel van en is vooral handig als je een website bouwt voor een nieuw merk met weinig tot geen klantgegevens om uit te putten.

Industriestatistieken zijn een andere nuttige maatstaf in de onderzoeksfase. UX-ontwerpers gebruiken deze gegevens om meer te weten te komen over het publiek, industrietrends te identificeren en meer.

Afhankelijk van de grootte van de website zullen sommige UX-ontwerpers ook veldonderzoek uitvoeren. Via gebruikersenquêtes en interviews leren ontwerpers uit eerste hand wie de doelgebruikers zijn, hun pijnpunten en hun motivaties.

Gebruikerspersona's

Een gebruikerspersona is een fictieve gebruiker die UX-onderzoekers bedenken. Ze nemen wat ze hebben geleerd over de doelgroep van hun klant en gebruiken die kenmerken om een gebruikerspersona (of persona’s, als ze verschillende gebruikerssegmenten hebben) op te bouwen.

Hier is een voorbeeld van PersonaGenerator van hoe een gebruikerspersona eruit zou kunnen zien:

Allerlei details moeten worden uitgewerkt. Bijvoorbeeld:

Demografie
Behoeften (met betrekking tot de website die wordt gebouwd)
Wil
Waarden
Angsten
Technisch profiel
Citaten die samenvatten hoe ze zich voelen en hoe ze klinken

Het doel is om een realistische weergave van de gebruiker te creëren, zodat de ontwerper effectiever voor hen kan marketen en verkopen.

Informatiearchitectuur

UX-ontwerpers hanteren een zorgvuldig afgemeten en stapsgewijze aanpak bij het ontwerpen van een website. Dus zodra het onderzoek is voltooid, wordt de informatiearchitectuur gepland.

Hoewel je dit simpelweg zou kunnen afdoen als sitemap-planning, is het veel meer dan dat.

UX-ontwerpers gebruiken iets dat kaartsortering heet om de ideale structuur, workflows en contentorganisatie voor de website te bedenken. Dit deel van UX-ontwerp vereist directe input van gebruikers.

Wireframes

Wireframes zijn low-fidelity prototypes van een website. Ze stellen UX-ontwerpers in staat om de structuur, layout en gebruikersstromen van de website te perfectioneren zonder verstrikt te raken in de details.

Hier is een voorbeeld van hoe een wireframe versus een mockup eruit ziet:

Wireframes zijn typisch kaal en schetsmatig. Met andere woorden, je ziet de layout en de plaatshouders voor waar afbeeldingen, tekst en andere elementen op de pagina komen. En dat is het. Door de basis van de pagina te schetsen, is het veel makkelijker om te focussen op het maken van strategische en creatieve ontwerpkeuzes in de mockup-fase.

Wireframes kunnen met de hand worden geschetst, gedaan worden met wireframing software of je kunt je wireframes direct binnen Elementor bouwen.

Analyse, Bruikbaarheidstesten en Iteratie

UX-ontwerpers werken in een gesloten lus. Ze komen dus niet alleen met hypotheses over wat zal werken op de website. Ze testen ze daadwerkelijk.

Er zijn verschillende manieren waarop UX-ontwerpers bruikbaarheidstests uitvoeren:

Face-to-face interviews
Enquêtes
Website feedbackformulieren
Heatmaps
Sessie-opnames

Terwijl ze echte gebruikersfeedback verzamelen en de analytics van de live website bestuderen, passen ze de website dienovereenkomstig aan. UX-ontwerp is een iteratief proces – een proces dat altijd gericht is op het verbeteren van de gebruikerservaring en het helpen van het merk om zijn doelen in de loop der tijd te overtreffen.

UX-ontwerptools

Hier zijn enkele van de gebruikelijke tools die een UX-ontwerper zal gebruiken:

Concurrentie-onderzoekstools zoals SEMrush
Industrie-onderzoekstools zoals SimilarWeb
Tools voor gebruikersonderzoek en het werven van testers zoals User Interviews
Wireframing en prototyping tools zoals Figma
Website testtools zoals Hotjar
Bruikbaarheidstesttools zoals UserZoom
Website analyse-tools zoals Kissmetrics

Zoals je je kunt voorstellen met zo’n lang en intensief proces, kunnen UX-designers dit niet allemaal in hun eentje doen. Of in ieder geval zou het niet efficiënt zijn om dat te doen. Een UX-toolkit hebben kan echt een game-changer zijn in dit werk.

Wat Doet een UI Designer?

Er is geen twijfel over mogelijk dat de bruikbaarheid en behulpzaamheid van een website belangrijk zijn voor je gebruikers. Maar het is niet alleen de ervaring van navigeren of een website gebruiken die invloed heeft op de conversie- en afhaakpercentages van de site.

Het uiterlijk speelt ook een rol.

Dit wordt bewezen door een webdesignprincipe genaamd het Esthetisch-Bruikbaarheidseffect. Kortom, gebruikers geloven dat aantrekkelijke interfaces beter werken dan die dat niet zijn.

Dus UI-design speelt een belangrijke rol bij het versterken van die eerste indruk en het krijgen van gebruikers in de daadwerkelijke ervaring waar de UX-designer zo hard aan heeft gewerkt.

Doelen

UI-designers hebben een aantal doelen:

Interfaces maken die de persoonlijkheid, stem en waarden van het merk nauwkeurig weergeven
Esthetisch aangename interfaces creëren die een positieve reactie van de gebruiker uitlokken
Interfaces en interacties ontwerpen die conversies maximaliseren

Belangrijkste Verantwoordelijkheden

UI-designers richten zich op wat de bezoeker op een website ziet – tot in de kleinste details. Ze zijn ook verantwoordelijk voor het ontwerpen van de interacties die hen betrokken houden bij de inhoud en moeiteloos van pagina naar pagina laten stromen.

Laten we eens kijken naar hun verantwoordelijkheden:

Onderzoek

UI-designers beginnen met een stevige onderzoeksronde. Hoewel een deel ervan gebruikersanalyse betreft (als de klant een bestaande website heeft, tenminste), is er ook ander onderzoek bij betrokken.

UI-designers doen concurrentieonderzoek om erachter te komen wat toonaangevende bedrijven in de branche doen met hun websites en ook om te zien hoe ze eruit zien en hoe ze werken.

Ze doen ook designonderzoek. Hoewel originaliteit en memorabiliteit belangrijk zijn in UI-design, is het vertrouwen van de gebruikers in de interface dat ook. En te ver afwijken van de normen kan enorm problematisch zijn voor veel websites.

Veel hiervan weten ze uit hun hoofd, zoals wat de nieuwste trends in webdesign zijn en wat de huidige webstandaarden voorschrijven voor dingen als responsive design, toegankelijkheid en coderingsstandaarden. Maar ze moeten misschien ook bijspijkeren wat er trendy is binnen hun industrie of niche.

Psychologie speelt ook een grote rol in UI-design, dus UI-designers zullen zich moeten verdiepen in de principes van websiteontwerp en gebruikerspsychologie om ervoor te zorgen dat hun ontwerpen de juiste emotionele knoppen indrukken.

Merkidentiteit

Ontwikkeling van merkidentiteit gaat niet alleen over logo-ontwerp, hoewel UI-designers klanten hier ook mee moeten helpen.

Het proces van het ontwikkelen van de visuele identiteit van een merk gaat helemaal over het bedenken van strategieën over hoe de branding van een website eruit zal zien en ervoor zorgen dat het de juiste signalen naar het doelpubliek stuurt.

Dus UI-designers moeten eerst uitzoeken wat de persoonlijkheid en visuele stijl van het merk zijn. Ze zullen dan de merkbeelden die daarbij horen uitzoeken: elementen zoals het kleurenpalet, typografie, beeldmateriaal, iconografie, patronen en meer.

Stijlgidsen/Designsystemen

Zodra de visuele identiteit is uitgewerkt, maken UI-designers een stijlgids en/of designsysteem om de strategie te documenteren.

Een stijlgids is een must, ongeacht welk type website je bouwt. Een designsysteem is daarentegen het beste voor grotere websites en voor websites die doorlopend onderhoud en updates nodig hebben.

Het maakt niet uit of je als soloartiest werkt als UX/UI-designer. Een stijlgids is om een aantal redenen nuttig:

Het is een gedocumenteerd aanvalsplan dat je helpt op koers te blijven met de website die je aan het bouwen bent
Het kan gedeeld worden met andere bijdragers om ervoor te zorgen dat ze consistent zijn met de stijlen die je hebt vastgesteld
Het zal toekomstige website-updates of herontwerpen soepeler laten verlopen omdat je het wiel niet opnieuw hoeft uit te vinden

Hier is een voorbeeld van hoe een stijlgids eruitziet:

Een designsysteem gaat nog een stap verder. Binnen je designsysteem zal een UI-ontwerper al die stijlen definiëren, maar ze zullen ook hun componenten opslaan in een bibliotheek — wat opnieuw de tijd voor toekomstig ontwerp/herontwerp vermindert. Designsystemen vatten ook de doelen van het project samen, de waarden van het merk en hoe de website deze zal uitvoeren.

Mockups

De UI-ontwerper zal al hun onderzoek en planning combineren met het fundament dat de UX-ontwerper heeft gelegd.

De website-mockups zullen op ware grootte, in kleur en volledige weergaven zijn van hoe elke webpagina eruit zal zien in het eindproduct.

UI-ontwerpers vullen echter niet alleen de visuele details in. Ze moeten ook omgaan met dingen zoals:

Witruimte en hoe ze het gaan gebruiken om de bruikbaarheid en leesbaarheid te verbeteren
Hiërarchie zodat ze duidelijke aandachtsgebieden kunnen creëren terwijl ze bezoekers effectief door de inhoud leiden
Responsief ontwerp en hoe de webpagina’s eruit zullen zien op verschillende apparaten en browsers
Interactie en animaties op kritieke gebieden van elke webpagina
Toegankelijkheid zodat elke bezoeker de inhoud zonder problemen kan bekijken en benaderen

UI-ontwerpers hebben een keuze in hoe ze deze mockups ontwerpen.

Ze kunnen ze maken met ontwerp- of mockup-software zoals UX-ontwerpers doen met wireframes. Of ze kunnen hun mockups direct in Elementor ontwerpen, wat gemakkelijk zal zijn als de wireframes daar al in staan. Het zal ook de ontwikkeling soepeler laten verlopen.

A/B-testen

Net zoals het werk van een UX-ontwerper nooit af is, geldt hetzelfde voor UI-ontwerpers.

Zodra de website live gaat, moeten UI-ontwerpers de verkeersanalyses van de website in de gaten houden om te zien of er mogelijke wrijving is die bezoekers tegenhoudt om te converteren. Ze kunnen ook samenwerken met UX-ontwerpers om heatmaps en sessie-opnames op de site uit te voeren om te zien of ze UI-hindernissen in realtime kunnen spotten.

Maar in plaats van een permanente oplossing te implementeren op basis van deze observaties. Zal een UI-ontwerper een hypothese vormen over het probleem — zoals “de CTA-knop staat te ver naar beneden op de pagina” — en vervolgens een A (controle) en B (variabele) test uitvoeren om te zien of een alternatief ontwerp beter presteert.

Realistisch gezien zou de UI-ontwerper A/B-tests kunnen uitvoeren gedurende de hele levensduur van een website. Ze zijn niet alleen nuttig voor het gladstrijken van visuele ontwerpproblemen, maar ook voor het verbeteren van de algehele look en feel van de website.

UI-ontwerptools

Hier zijn enkele van de gebruikelijke tools die een UI-ontwerper zal gebruiken:

Webdesign-organisatiebronnen zoals de Nielsen Norman Group blog
World Wide Web Consortium voor de nieuwste webstandaarden, technologie en trends
Tools voor de ontwikkeling van merkrichtlijnen zoals Frontify
UI-kits zoals die te vinden zijn op UI8
Mockup-sjablonen zoals die in de Elementor-sjabloonbibliotheek
Ontwerpsoftware zoals Sketch
Een contentmanagementsysteem zoals WordPress
Analysetools zoals Google Analytics

UI-ontwerpers zijn praktisch als het gaat om ontwerp, dus het grootste deel van hun gereedschapskist moet bestaan uit ontwerptools die ze goed kennen en vertrouwen.

Hoe werken UX-ontwerp en UI-ontwerp samen?

Als je kijkt naar de verschillen tussen UI en UX, zou je kunnen denken dat er niet veel overlap is tussen de twee rollen. Maar die is er wel.

UX-ontwerpers kunnen niet gewoon in isolatie werken en dan hun sitemaps en wireframes overhandigen aan de UI-ontwerper of ontwikkelaar als ze klaar zijn. Of andersom.

Ook al werken elke rol – UX-designer, UI-designer en zelfs de webontwikkelaar – aan verschillende dingen en in verschillende fasen van het project, er moet gedurende het hele traject samenwerking zijn.

Om te beginnen zorgt dit voor consistentie in hoe de website wordt ontworpen, de content wordt geschreven, en uiteindelijk hoe het allemaal wordt uitgevoerd.

Er is ook nog de kwestie van informatie verzamelen. Wat de UX-designer leert over de gebruikers, concurrentie en industrie moet geen bedrijfsgeheim blijven. Hetzelfde geldt voor wat de UI-designer begrijpt over webdesign trends en standaarden. Of trouwens, wat de webontwikkelaar weet over coderingsmogelijkheden.

Wat de ene designer in gedachten heeft voor de website, komt misschien niet overeen met beproefde webdesign principes of de ontwikkelaar kan misschien niet vlekkeloos uitvoeren wat zij voor ogen hadden. Nauwe samenwerking zorgt ervoor dat dingen nooit terug naar de tekentafel hoeven.

Je moet ook de overdracht in overweging nemen.

Meestal geeft de UX-designer hun onderzoek en werk door aan de UI-designer en webontwikkelaar. En de UI-designer geeft hun mockups door aan de webontwikkelaar. Deze drie profs werken allemaal met verschillende tools en gebruiken een andere design ’taal’.

Zonder nauwe samenwerking, goede communicatie en een solide overdrachtssysteem, kunnen dingen rommelig worden als de website van hand tot hand gaat.

Hoe te Beginnen Als UI of UX Designer

Dit moet je weten om te beginnen als UI vs. UX designer:

Vaardigheden

Er zal wat overlap zijn tussen UI en UX designers als het gaat om soft skills. Dingen zoals:

Creativiteit
Organisatie
Samenwerking
Probleemoplossing
Aanpassingsvermogen

Maar vanwege de verschillende taken die ze doen en de doelen waar ze naartoe werken, zullen UI en UX designers meestal verschillende vaardigheden nodig hebben.

UX Designers	UI Designers
Kritisch denken	Creatief denken
Gebruikers-, industrie- en concurrentieonderzoek	Webdesign principes en standaarden
Projectcoördinatie	Menselijke psychologie
Analyse	Visueel ontwerp
Strategie en planning	Responsief ontwerp
Wireframing	Branding
Informatiearchitectuur	Interactieontwerp
Testen en iteratie	HTML5 en CSS3

Onderwijs

Een formele opleiding in design is niet vereist om UX designer of UI designer te worden. Dat gezegd hebbende, omdat dit zeer gespecialiseerde niches van webdesign zijn en je waarschijnlijk meer geld gaat verdienen dan iemand die zichzelf ‘webdesigner’ noemt, is het een goed idee om een certificaat te halen.

Het goede nieuws is dat er tonnen online bronnen zijn waar je je gecertificeerde (en niet-gecertificeerde) UX of UI training kunt doen:

Interaction Design Foundation is een goede bron om mee te beginnen. We kunnen ook deze lijst van de Beste UX bronnen aanbevelen om meer over het onderwerp te leren.

Hoewel ze hun cursussen als ‘User Experience Cursussen’ bestempelen, behandelen ze een breed scala aan onderwerpen. Gestaltpsychologie en interactieontwerp zijn bijvoorbeeld goede keuzes voor UI designers in opleiding.

Coursera is nog een geweldige trainingsbron. Anders dan bij IDF kun je hier cursussen volgen en certificaten halen bij een hoop verschillende aanbieders. Zoals Google:

Nielsen Norman Group en Springboard bieden ook UX design certificeringsprogramma’s aan. En CareerFoundry en General Assembly bieden beide UI design certificeringsprogramma’s aan.

Je loopt niet alleen weg van deze programma’s met een certificaat op zak, maar je hebt ook hands-on training plus enkele geweldige voorbeelden om je professionele portfolio mee te vullen. Het zal niet lang duren voordat webdesign klanten smeken om met je te werken.

Denk er wel aan om je designopleiding bij te houden – zowel binnen je specialiteit als daarbuiten. Webdesign boeken en online cursussen (gratis en betaald) helpen je om je vaardigheden up-to-date en competitief te houden.

Baanvooruitzichten

UI en UX designers zijn enorm in trek.

Volgens het InVision’s 2019 Product Design Hiring Report:

“Geen twijfel mogelijk: productontwerpers zijn op dit moment hotter dan ooit, met UI/UX-ontwerper als de meest gevraagde productontwerptitel. In feite wordt vier op de vijf (81%) productontwerpers minstens maandelijks benaderd door recruiters, terwijl een op de drie (34%) wekelijks wordt benaderd.”

Het rapport onthult ook dat dit de meest gevraagde banen zijn in de UI- en UX-velden. Focus op de “Product Designers” kolom:

Zoals je kunt zien, zijn UI- en UX-ontwerpers van alle ervaringsniveaus en in verschillende specialisaties nodig.

Eén ding om in gedachten te houden is echter dat de groeiende vraag naar UI- en UX-specialisten heeft geleid tot een grote toename van studenten en sollicitanten. Volgens Colman Walsh, de CEO van the UX Design Institute:

“Het UX Design Institute heeft een toename van 220% in studentenaantallen gezien van april 2019 tot april 2020, wat wijst op de bredere groei van de UX-industrie.”

Het goede nieuws is dat er een groeiende behoefte is aan digitale ontwerpers nu steeds meer organisaties zich inzetten voor een 100% digitaal of hybride model na de pandemie.

Maar de concurrentie zal hevig zijn met nieuwe UX- en UI-ontwerpers die elke dag het veld betreden. Dus het is absoluut cruciaal dat je een manier vindt om jezelf te onderscheiden.

Salarisverwachtingen

Ongeacht welke webdesign niche je kiest — UI, UX, of een hybride rol — het potentieel om meer te verdienen dan niet-gespecialiseerde webdesigners is enorm. Terwijl gemiddelde webdesigner salarissen rond de $24/uur of $51,564/jaar liggen, verdienen specialisten meestal meer:

Hier is wat toonaangevende vacaturebronnen rapporteren als de gemiddelde verdiensten voor UI-ontwerpers, UX-ontwerpers en senior UX-ontwerpers in de Verenigde Staten:

Deze salarisbenchmarks zijn geen garantie voor wat je verdiensten zullen zijn als UI- of UX-ontwerper. Er zijn veel factoren die je jaarlijkse inkomen kunnen beïnvloeden:

Je ontwerpexpertise
Je industrie/niche
Waar je woont
Hoe lang je al als ontwerper werkt
Wie je werkgever of klanten zijn
De grootte en complexiteit van de websites die je bouwt

Nogmaals, het ontwerpveld wordt steeds concurrerender dankzij de toestroom van talent in de afgelopen paar jaar. Als je wilt dat je verdiensten aan de hogere kant van deze schattingen liggen, zijn certificering en voortdurende training en educatie een must.

Welk carrièrepad moet je kiezen?

Je moet nu een beslissing nemen. Wil je een:

UX-ontwerper worden?
UI-ontwerper worden?
UX/UI-ontwerper worden?

Dat klopt. Je hoeft niet de een boven de ander te kiezen als je dat niet wilt. Er zijn tegenwoordig veel werkgevers die ontwerpers willen die alles kunnen. Doe gewoon een zoekopdracht op een vacaturebord zoals Indeed voor “UI-ontwerper” of “UX-ontwerper” en je zult zien wat ik bedoel:

Maar de populariteit van banen is niet het enige om over na te denken bij het kiezen van je specialiteit. Een goede vuistregel is om iets te vinden dat in je sweet spot zit:

Als je nog niet helemaal zeker weet in welk gebied je het meest bekwaam of gepassioneerd bent, is dat oké. Daar zijn online cursussen en tutorials voor. Probeer wat UX- en UI-taken uit en kijk welke natuurlijker en bevredigender aanvoelt.

Je kunt ook een stap terug doen en nadenken over hoe je het web als consument benadert. Wat valt je als eerste op? Hoe goed een website eruitziet… of hoe gemakkelijk het te gebruiken is? Dat kan een goede indicator zijn van wat je het meest enthousiast maakt over webdesign en waar je het beste in zult uitblinken.

UX vs. UI Design: Wat is het verschil?

Inhoudsopgave