Wat is het verschil tussen UX en UI design?

Het zijn termen waarmee je misschien al eens in aanraking kwam: UX en UI. Maar wat is het nu juist? En belangrijker nog: wat is het verschil tussen UX en UI design? User Experience (UX) gaat over de gebruikerservaring van je bezoekers. User Interface (UI) focust dan weer op het visuele aspect of de interface. UX en UI versterken elkaar en komen zo samen tot een aantrekkelijke website voor je gebruiker. In dit artikel maken we jou wegwijs in de wereld van UX design en het verschil met aanverwante termen. 

In dit artikel

Wat is UX design?

Wat valt onder UX?

Wat doet een UX designer?

Wat is UI?

Wat valt onder UI?

Wat doet een UI designer?

Wat is usability?

Wat is UX design?

Er is helaas geen universele definitie van User Experience (UX). Het is een ingewikkeld concept waarin veel vervat zit. Waar het eigenlijk op neerkomt is het volgende: UX design is het proces dat UX designers gebruiken om een ervaring te creëren die betekenisvol en relevant is voor bezoekers. Het doel is om je gebruiker door een intuïtieve en efficiënte flow te laten lopen. Het is daarbij belangrijk dat gebruikers inzien en waarderen wat je aanbiedt. UX design is van toepassing op zowel website of applicatie als op een offline product. In dit artikel leggen we de focus op UX design voor websites en online toepassingen. 

Een website dat is opgemaakt volgens een goed UX design is bijgevolg:

  • nuttig;
  • gemakkelijk in gebruik;
  • en een plezier om te gebruiken.

Enkele jaren geleden gaf Don Norman, mede-oprichter van Nielsen Norman Group (en ook wel eens de uitvinder van UX genoemd) volgende uitleg rond User Experience:

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

User Experience omvat veel. Daarom gaan we in het kort dieper in op de 7 belangrijkste principes van UX design.

  1. Focus op de gebruiker
    De naam ‘User Experience’ doet het al vermoeden maar de focus op de gebruiker is hét principe bij uitstek als het op UX design aankomt. Een website moet ontworpen worden met de eindgebruiker in de gedachten en niet met het idee dat je website de mooiste en meest moderne website van het jaar wordt. Zo moet de homepagina binnen 3 seconden de juiste indruk maken.

  2. Hiërarchie
    Als we over hiërarchie praten, kijken we naar de structuur van je website, maar ook naar de structuur van je specifieke pagina’s. Er wordt vaak een boomstructuur gebruikt om de structuur van een website in kaart te brengen. De bedoeling is uiteindelijk dat gebruikers zo vlot door je website navigeren dat de structuur vanzelfsprekend en bijna ‘onzichtbaar’ wordt. Ook de manier waarop je je pagina’s gaat structureren speelt een rol. Denk hierbij aan het gebruik van titels, opsommingen, blauwe links, etc.

  3. Consistentie
    Een consistente website is een duidelijke website. De header en footer van je site blijven doorgaans consistent doorheen je website en bevatten belangrijke items waarnaar gebruikers snel kunnen navigeren. Denk hierbij aan de contactpagina, een winkelmandje of profielpagina. Maar als je over consistentie praat, denk je ook aan lettertype, titels, kleurgebruik, etc. Een gebruiker wil een herkenbare flow zien in je website. Hoe meer vertrouwd de website eruit ziet, hoe gemakkelijker het is voor je gebruiker om de site te gebruiken. 

  4. Context
    Contextueel ontwerpen is vandaag belangrijker dan ooit. Als je weet dat Google nu eerst naar de mobiele versie van je website kijkt én dat de meeste mensen surfen vanop hun smartphone, weet je dat hier voldoende aandacht naartoe moet gaan. Daarnaast speelt ook locatie een rol. Is jouw gebruiker iemand die onderweg snel jouw website checkt of doet hij/zij dit ‘s avonds rustig in de zetel? Andere contextuele factoren zijn bijvoorbeeld de emotionele toestand van je gebruiker en de hoeveelheid tijd die wordt doorgebracht op je website. 

  5. Gebruikerscontrole
    Hier gaat het opnieuw over het belang van de gebruiker. Je gebruiker meer controle of flexibiliteit geven resulteert in een betere User Experience. Een knop ‘ongedaan maken’, ‘cancel’ of ‘terug’ zorgt bij veel gebruikers voor een geruststellend gevoel. Ook de mogelijkheid om snel terug naar de bovenkant van een pagina te gaan door middel van een pijl waar men simpelweg op kan klikken kan een verademing zijn. 

  6. Toegankelijkheid
    Een toegankelijke website betekent een website die ook voor mensen met een beperking gemakkelijk te gebruiken is. Zo helpen alt tags afbeeldingen beschrijven en zorgen duidelijke, gevulde icoontjes ervoor dat mensen die minder goed zien toch beter kunnen navigeren op je website. Ook het plaatsen van labels bij tekstvelden is een schoolvoorbeeld van toegankelijkheid. Als iemand die slechtziend is je formulier wil invullen, kan een tool de tekst lezen en weet hij/zij wat in welk vakje in te vullen.

  7. Bevestiging
    Iedereen klikt wel eens te snel waardoor er iets fout gaat. Je hebt bijvoorbeeld een item aan je winkelkarretje toegevoegd en bij het uitchecken klik per ongeluk op ‘verwijderen’. Niets zo handig als een pop-up die verschijnt met de tekst ‘ben je zeker?’. Een bevestiging zorgt ervoor dat je gebruikers geen onomkeerbare fouten maken en zich hierdoor gaan frustreren. Een bevestigingsbericht is zeker niet overal nodig, maar je overweegt best om bij belangrijke stappen een extra confirmatie toe te voegen. 

Wat valt onder UX?

Het is intussen duidelijk dat User Experience een veelzijdig concept is. Het gaat namelijk niet alleen rond het ontwerpen van een goed product, maar ook alles dat daarrond gebeurt. Niet enkel het bezoeken en gebruiken van een website maar ook hoe de gebruiker tot bij de website komt en hoe eventuele problemen worden aangepakt. 

Om het het begrip wat duidelijker te schetsen kunnen we stellen dat er zes belangrijke elementen aan UX design verbonden zijn.  

  1. Informatie-architectuur
    Je hele design staat of valt met de structuur van je website. Je website moet een duidelijke en eenvoudige navigatie bevatten die intuïtief werkt voor gebruikers. Wanneer een gebruiker een specifieke vraag heeft of naar een bepaald product op zoek is, moet hij/zij dit zo efficiënt mogelijk vinden. De ‘taak’ van de gebruiker moet dus zo vlot mogelijk voltooid worden.

  2. Design met de focus op interactie
    Een simpele, transparante en persoonlijke aanpak als het op design aankomt is vaak the way to go. Maar je wil vooral dat je design aanleiding geeft tot zoveel mogelijk interactie. Denk hierbij aan duidelijke call-to-actions en vanzelfsprekende icoontjes zoals een een hart voor favorieten of een vlag/wereldbol voor taalinstellingen. 

  3. Usability of bruikbaarheid
    Usability zou elke ondernemer hoog in het vaandel moeten dragen. Je wil namelijk niet dat je gebruikers verward zijn of niet weten hoe ze verder moeten op je website. Er zijn genoeg voorbeelden van populaire brands waarbij tot op de dag van vandaag usability problemen soms de overhand nemen. Zo biedt de communicatietool Slack nog steeds geen manier om meerdere berichten tegelijk te verwijderen en frustreren Netflix gebruikers zich nog altijd over de autoplay wanneer je hoovert over een serie. Lees meer over usability.

  4. Visueel aantrekkelijk design
    Hier komen we in het vaarwater van UI design terecht. Er wordt gezegd dat je minder dan een seconde hebt om een eerste indruk te maken met je website. En laat een visueel aantrekkelijk design daarbij nu essentieel zijn. Lettertype, kleurgebruik, foto’s, indelingen, witruimtes, layout,… het heeft allemaal een impact op de perceptie van je gebruikers. Consistentie zal een belangrijke rol spelen, ook bij je design. En verder is vaak het principe ‘less is more’ te hanteren in deze situaties. Probeer een simpel, gebalanceerd en overtuigd design uit te werken. 

  5. User research
    Zoals we eerder al aanhaalden is User Experience niks zonder de gebruiker. User research is dan ook een centraal aspect in alle UX design projecten. Het verstaan en in kaart brengen van het gedrag, de voorkeuren en de manier van denken van je gebruiker is een noodzaak. Er zal zowel kwalitatief onderzoek (interviews, usability testen) als kwantitatief onderzoek (enquêtes, analytics) moeten gebeuren. Waar het kwalitatief onderzoek focust op gedrag en meningen en de ‘waarom’ vraag beantwoordt, focust kwantitatief onderzoek op cijfers (het ‘wat’). Daarnaast wordt user research opgedeeld in attitude (wat zegt de gebruiker) en gedrag (wat doet de gebruiker). 

  6. Wireframing en prototyping
    Met behulp van wireframes kan je schematische weergaven van je website maken. De focus ligt hier op de inhoud en niet op het design van je website. Het is namelijk vaak zo dat als je gebruiker op een simpele voorstelling van je website niet weet hoe te navigeren, de kleuren, fonts etc. er ook niet zullen toedoen. Prototypes gaan een stapje verder en zullen rekening houden met inhoud en grafisch design. De prototypes worden vaak gebruikt om het (bijna) totale plaatje te testen bij gebruikers. 

Wat doet een UX designer?

Een UX designer houdt zich bezig met het volledige proces dat komt kijken bij de gebruikerservaring. Het is de taak van de UX designer om opinies, voorkeuren, wensen, eisen en behoeften van eindgebruikers in kaart te brengen en zo de best mogelijke gebruikerservaring te creëren. Een UX expert zorgt er dus voor dat een website of applicatie afgestemd is op de behoeften van haar gebruikers. 

Een UX designer zorgt ervoor dat een website bruikbaar, toegankelijk en aangenaam is. Zij zijn een soort gateway tussen de gebruiker en het development team. Je moet namelijk zorgen dat het product of de website die uit de bus komt zowel bij het bedrijf als bij de eindgebruiker in de smaak valt. Een UX designer zal dus een groot takenpakket hebben. Enkele van een UX designer zijn/haar taken zijn: 

  • Gebruikersonderzoek doen
  • Wireframes en prototypes maken
  • Interviews met gebruikers afnemen
  • Buyer persona’s en user stories opzetten
  • De informatie-architectuur opzetten
  • User flows opstellen
  • Testen met gebruikers uitvoeren

De skills van een UX designer moeten dus vrij uitgebreid zijn. Eén van de belangrijkste vaardigheden waarover een UX designer moet beschikken is samenwerking. Een UX ontwerper komt in aanraking met verschillende mensen (gebruikers, development team, klanten, mede-designers …) en moet op een effectieve en efficiënte manier zien omgaan met de verschillende groepen. Daarbij is ook communicatie een fundamentele vaardigheid voor een UX designer. Niet alleen moet je in staat zijn om ideeën te verwoorden, ook luisteren en feedback verwerken zijn essentieel. Andere skills die nodig zijn zijn onder andere empathie (je werkt tenslotte met gebruikers samen) en een problem-solving mentaliteit. 

Wat is UI design?

Als een belangrijk onderdeel van de User Experience mag je de User Interface (UI) niet uit het oog verliezen. Bij UI draait het om de interface van je product en hoe dit eruit zal zien. De branding van je product, zeg maar. Denk hierbij aan het visueel design van de homepagina van je website. Ook de look en feel van de call-to-actions, buttons, scrollbars, dropdown menu’s, footer, enzovoort passen onder de term UI design. Het draait dus zowel om het visuele aspect als het interactieve

“UX is focused on the user’s journey to solve a problem; UI is focused on how a product’s surfaces look and function.”

Ken Norton, Partner at Google Ventures

Een belangrijke nuance is dat User Experience design zowel offline als online gehanteerd kan worden. De term User Interface design daarentegen is enkel van toepassing binnen de digitale wereld. Jakob Nielsen (Nielsen Norman Group) werkte 10 principes van UI design uit. Dit zijn geen strikt te volgen richtlijnen maar zorgen voor enkele vuistregels binnen UI design. 

  1. Zichtbaarheid van de status
    Het eerste principe zegt eigenlijk dat je te allen tijde moet laten zien aan je gebruiker wat er gebeurt. Is er een wachttijd? Toon aan je gebruiker waarom hij/zij moet wachten en hoe lang de wachttijd bedraagt. Moet er een formulier ingevuld worden? Geef aan hoeveel stappen de gebruiker moet doorlopen en in welke stap hij/zij zich bevindt. Als men op de hoogte is van de status, zal men minder snel geneigd zijn het proces te verlaten en minder frustraties hebben. 

  2. Relatie tussen website en bezoeker
    Het is belangrijk dat je de taal van je gebruiker spreekt. En dan hebben we het hier niet meteen over Engels of Nederlands. Het gebruik van jargon is vaak af te raden omdat gebruikers zich hier niet in herkennen. Icoontjes en afbeeldingen moeten tevens herkenbaar zijn zodat een gebruiker op een aangename en efficiënte manier doorheen je website klikt. 

  3. Controle en vrijheid voor de gebruiker
    We maken allemaal al eens een fout. En als we deze fout niet ongedaan kunnen maken, geraken we wel eens gefrustreerd. Net zoals je uit een gebouw een ‘nooduitgang’ hebt zou je dit ook moeten implementeren in je website. Zorg ervoor dat je bezoeker snel een fout kan herstellen door bijvoorbeeld op ‘annuleren’ te klikken. Je geeft je gebruiker hiermee controle en vrijheid binnen jouw systeem, wat vertrouwen opwekt. 

  4. Consistentie
    Gebruikers zijn nu eenmaal gewend aan specifieke zaken op een website. Jouw website is namelijk niet de eerste website die zij bezoeken. Er is een bepaalde standaard die verwacht wordt. Een logo staat links, de taal aanpassen doe je rechts en de zoekbalk is altijd bovenaan de website te vinden. Zorg er dus voor dat jouw website consistent is qua layout maar ook qua aansprekingen. 

  5. Voorkom fouten
    Voor je je website live zet is het cruciaal dat je uitgebreid test om toekomstige fouten te voorkomen. Je wil namelijk niet dat je gebruiker gefrustreerd of verward is en je website verlaat voor hij/zij tot een bepaalde actie is overgegaan. Stel ook altijd een goede foutmelding in die duidelijk aangeeft wat de gebruiker fout doet. 

  6. Minimaliseer denkwerk bij je gebruikers
    Je gebruiker wil liefst niet teveel moeten nadenken. Je website zo vanzelfsprekend mogelijk maken is een must. Zo geeft Google bijvoorbeeld suggesties als je zoekwoorden ingeeft. Op die manier denkt de zoekmachine mee en moet de gebruiker minder nadenken. Je ondersteunt op die manier je gebruiker net dat tikkeltje extra. 

  7. Flexibiliteit en efficiëntie
    Niet elke gebruiker is hetzelfde. De één heeft al meer ervaring op je website dan de ander dus zal je een manier moeten vinden om beide groepen te helpen. Shortcuts en personalisatie zijn ideale tools in dit scenario. Een nieuwe gebruiker zal extra informatie nodig hebben (bv. een tutorial) terwijl een ervaren gebruiker meteen kan doorstromen.  

  8. Minimalistisch design
    We haalden het eerder in het artikel al aan maar less is more. Een flashy website met allerlei handige snufjes is niks waard als een bezoeker zijn/haar doel niet efficiënt kan bereiken. Een simpele interface is vaak nog de beste optie aangezien gebruikers niet overrompeld worden door informatie en andere irrelevante animaties. 

  9. Simpele foutmeldingen
    Niets zo vervelend als een foutmelding krijgen die geschreven is in een error code. Een gebruiker kan hier niets mee en zal gefrustreerd de website verlaten. Zorg voor foutmeldingen in duidelijke taal die begrijpbaar is voor je bezoeker. Je voorziet ook best een oplossing zodat je gebruiker meteen verder kan. 

  10. Help en documentatie
    In het allerbeste geval heeft je website geen uitleg nodig en is alles vanzelfsprekend. Zijn er toch enkele complexe zaken aanwezig op je website? Probeer dan hulp en ondersteuning te bieden. Een FAQ is een mooi voorbeeld maar ook een chatfunctie implementeren in je website kan interessant zijn. 

Wat valt onder UI?

User Interface design gaat eigenlijk over de presentatie en vormgeving van je website. Zo zijn er enkele typische User Interface elementen die gebruikt worden. Belangrijk hierbij is om deze elementen  consistent te gebruiken. 

  • Input controls: knoppen, drop down lijstjes, tekstvelden, checkboxes, keuzerondjes, …
  • Navigatie: zoekbalk, icoontjes, breadcrumbs, paginanummering, tags, fotogalerij, …
  • Informatie: notificaties, voortgangsmeter, pop ups, tips, …
  • Containers: accordeon

Naast het implementeren van bovengenoemde elementen moet een UI designer ook rekening houden met andere grafische elementen. Denk hierbij aan keuze van typografie en kleurenpalet maar ook welke animaties, foto’s en video’s er gebruikt worden en hoe de layout van de website eruit zal zien. 

Wat doet een UI designer?

UI design is, net zoals UX design, een uitgebreid en complex proces. Het takenpakket van een UI designer omvat dan ook verschillende zaken die te maken hebben met het grafisch vormgeven van een website. Alles wat komt kijken bij het creëren van de look en feel van een website valt binnen het vakgebied van een User Interface designer. Belangrijk hierbij is dat het hele proces bekeken wordt vanuit het standpunt van de gebruiker, zoals het geval is bij het volledige UX design verloop. 

Om een duidelijker beeld te scheppen van wat een UI designer dagelijks mee bezig is, geven we enkele voorbeelden uit hun takenpakket

  • Analyseren van andere websites (puur qua vormgeving)
  • Visueel ontwerp opstellen (typografie, kleurenpalet, witruimte, knoppen, layout, …)
  • Interactief ontwerp opstellen (zoekbalk, animaties, interactiviteit, …)
  • Consistente branding van het bedrijf uitwerken
  • Interface afstemmen op de gebruiker én het bedrijf
  • A/B testen van interfaces

De skills waarover een UI designer moet beschikken komen deels overeen met deze van een UX designer. Zo is ook empathie een belangrijke vaardigheid. Je bent namelijk aan het creëren voor eindgebruikers en niet om enkel een mooie interface af te leveren. Je zal je dus moeten inleven in de emoties, behoeften en wensen van de gebruikers. Aan de slag gaan met hen is ook van groot belang. Samenwerking en communicatie zijn natuurlijk ook een must. 

Daarnaast zijn er ook enkele specifieke vaardigheden waarover een UI designer moet beschikken. Zo moet hij/zij een creatieve geest hebben. Nieuwe ideeën moeten voortvloeien uit deze creativiteit. Oog voor detail is ook enorm belangrijk in deze sector. Het kleinste mankement kan de volledige User Interface uit balans brengen. Er moet niet enkel gekeken worden naar het geheel (bv. de website) maar ook naar de aparte onderdelen op zich. Er moet voldoende tijd genomen worden om bij elk aspect stil te staan. Daarnaast zal een UI designer met enkele designing tools moeten kunnen werken. Denk hierbij aan InDesign, PhotoShop, Illustrator en Figma. 

Wat is usability?

Een ander buzzword dat wel eens verward wordt met User Experience is usability. Zowel usability als UI design zijn belangrijke aspecten bij UX design, maar het is belangrijk om te onthouden dat beide slechts onderdelen zijn van het hele UX proces. Usability betekent letterlijk ‘bruikbaarheid’. Hoe gemakkelijk kan je product gebruikt worden? Met andere woorden: hoe gebruiksvriendelijk is je product? Dit speelt een belangrijke rol binnen UX design. Ga na hoe gebruiksvriendelijk jouw webstek is met onze website usability checklist.

Met de wijze woorden van Jakob Nielsen (Nielsen Norman Group): 

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.”

Volgens diezelfde Jakob Nielsen is usability opgemaakt uit 5 kernelementen

  1. Leerbaarheid: hoe gemakkelijk kunnen gebruikers taken uitvoeren op jouw website?
  2. Efficiëntie: hoe snel kunnen gebruikers taken uitvoeren op jouw website?
  3. Gedenkwaardigheid: hoe memorabel is je design? Als gebruikers na een tijdje terugkeren naar je website, zullen zij de taken dan nog even snel/gemakkelijk kunnen uitvoeren?
  4. Fouten: hoeveel fouten maken gebruikers? Wat is de impact van die fouten? 
  5. Tevredenheid: is het design aangenaam in gebruik?

Eén van de eerste usability principes is waarschijnlijk het KISS principe. Keep It Simple, Stupid (KISS) spreekt eigenlijk voor zich: houd het design simpel. Een complex design moet veelal vermeden worden om gebruikers niet in verwarring te brengen. 

Een ander principe dat onlosmakelijk verbonden is met usability is ‘don’t make me think‘. Het was Steve Krug die omtrent web usability een boek uitbracht en het don’t make me think principe op de voorgrond bracht. Hierin stelt hij dat een website of systeem zo gebouwd moet zijn dat gebruikers op de meest gemakkelijke en efficiënte manier een taak moeten kunnen voltooien. Zorg dus voor een duidelijk, to the point systeem. Hij kaart verder aan dat mensen lui zijn, niet graag lezen en uit gewoonte bepaalde zaken verwachten. Ook zijn we geneigd om de eerste optie te kiezen eerder dan de beste optie. 

Relevante artikels

5 min

Recap: SEO Benelux Meetup Gent 5 mei 2022

Onlangs vond de SEO Benelux meetup plaats in Gent. Kon je er niet bij zijn maar toch benieuwd? Wij schreven deze recap!
3 min

Google Analytics 4 vervangt Universal Analytics. Wat betekent dit nu?

“Prepare for the future with Google Analytics 4”. Zo kondigde Google vorige week aan in hun blog binnenkort te stoppen met het ondersteunen van Universal Analytics. Vanaf 1 …
10 min

Wat is het verschil tussen UX en UI design?

Het zijn termen waarmee je misschien al eens in aanraking kwam: UX en UI. Maar wat is het nu juist? En belangrijker nog: wat is het verschil tussen …

Zoeken

Contact

Nieuwsbrief

Contact

Dazzle BV
Braemstraat 127
9050 Gentbrugge

+32 475 60 38 94
info@dazzle.be

BE 0873.618.820

Nieuwsbrief

Schrijf je nu in voor onze maandelijkse nieuwsbrief en kies je favoriete onderwerpen.

>>>