Wat is het verschil tussen UI- en UX-design?

UI- en UX-design zijn twee design termen die we steeds vaker tegenkomen, maar waar we ook vaak van merken dat ze op de foute manier gebruikt worden. Voor we hier dieper op ingaan, nemen we even een kijkje naar de basis.

UI of user interface design heeft alles te maken met het visuele geheel en de vormgeving van jouw interface. Dit noemen we ook wel de “look & feel”. Hiermee praten we over alle grafische elementen, van kleurgebruik tot buttons, die er toegepast moeten worden en stijlelementen waarover het moet beschikken.

UX of user experience design gaat over de interactie en de beleving die de gebruiker met een product of dienst heeft. UX-design kan in tegenstelling tot UI-design op alle producten of ontwerpen toegepast worden. Bij digitale marketing focust UX-design zich voornamelijk op het gevoel van de gebruikers en het voorzien van een naadloze ervaring op jouw digitale platform.

Dit is kort uitgelegd wat het verschil is tussen de twee termen. Nu zullen we er nog wat dieper induiken en ook wat voorbeelden geven van slecht en goed UI- en UX-design.

UI of user interface design

User interface is een strikt digitale term. Een user interface of gebruikersinterface is een punt van interactie tussen de gebruiker en het digitale product. Met betrekking tot websites en apps houdt UI-design rekening met de look & feel en de interactiviteit van het product. De gebruiker moet een ervaring krijgen die zo intuïtief mogelijk is en daarom moet er zorgvuldig overwogen worden welk visueel element er op welke plaatst komt te staan. De UI designer zal rekening houden met icoontjes, knoppen, kleuren, typografie, afbeeldingen en responsieve elementen.

Even samenvatten waar UI design om draait:

Het is puur voor digitale producten. Het houdt rekening met alle visuele, interactieve elementen van een productinterface.
Het doel is de gebruiker te begeleiden door de interface van het product, bij marketing vaak een website. Het draait om het creëren van een gestroomlijnde, intuïtieve ervaring waarbij de gebruiker niet te veel hoeft na te denken.
Het brengt de sterke punten en visuele troeven van het merk over naar de interface van een product en zorgt ervoor dat het ontwerp consistent, coherent en esthetisch aantrekkelijk is.

Voorbeeld van slecht UI design

Als voorbeeld van hoe het niet moet gebruiken we de website van Arngren. Zoals je uit onderstaande screenshot al kan afleiden, is dit een duidelijk beeld van design waarbij de gebruiker niet centraal geplaatst wordt.

$\"Arngren$

Er zijn ontzettend veel zaken die hier verkeerd lopen, maar dit zijn enkele van de belangrijkste:

De website maakt geen gebruik van een “grid”, waardoor alles door elkaar geplaatst wordt.
De navigatiestructuur is ontzettend onduidelijk.
Slechte, wisselende typografie maakt het bijna onleesbaar.
Ze gebruiken zowat alle kleuren van de regenboog om het nog onduidelijker te maken.

Voorbeeld van goed UI design

Als voorbeeld hoe het wel moet gebruiken we een groot merk, Apple. Op deze website valt er niet veel aan te merken. Ze hebben een zeer duidelijke navigatiestructuur die ook in een andere kleur is geplaatst om op te vallen. Daaronder gebruiken ze enkel de tekst die hoogst noodzakelijk is met duidelijke, mooie fotografie en slechts twee call-to-actions.

$\"Voorbeeld$

UX of user experience design

User experience design zet de gebruiker op de eerste plaats bij het ontwerpen van een product. Het verschil met UI-design is dat UX niet enkel voor digitale producten gebruikt kan worden. UX-design omvat alle interacties tussen een potentiële of actieve klant en een bedrijf. Als wetenschappelijk proces kan het op alles worden toegepast: straatlantaarns, auto\’s, Ikea-rekken, enzovoort. Ondanks dat het een wetenschappelijke term is, wordt het voornamelijk gebruikt bij digitale domeinen.

Eigenlijk is UX van toepassing op alles dat kan worden ervaren, of het nu een website, een koffiezetapparaat of een bezoek aan de supermarkt is. Het gaat om de interactie die een gebruiker heeft met het product of dienst. Een UX-ontwerper denkt na over hoe de ervaring de gebruiker doet voelen en hoe eenvoudig het is om zijn taak te voltooien.

Bij UX-design draait het dus voornamelijk om:

Het proces van het ontwikkelen en verbeteren van de kwaliteit van de interactie tussen een gebruiker en alle facetten van een bedrijf.
Het is in feite een wetenschappelijk proces, maar wordt voornamelijk door de digitale industrie gebruikt.
Het draait niet om de visuele eigenschappen van een product of dienst, maar om de gehele gebruikservaring.

Voorbeeld van slecht UX ontwerp

In onderstaand voorbeeld zien we een klaslokaal gevuld met rechtshandige bureaus. Aangezien ongeveer 10% van de bevolking linkshandig is, bestaat de kans dat een aantal leerlingen niet blij zal zijn met hun bureau.

$\"UX$

Voorbeeld van goed UX ontwerp

Als je Siri vraagt om iets in te plannen voor \”morgen\” en het is na middernacht, maar ruim voor zonsopgang, dan zal het vragen of je morgen bedoelde zoals in \”nadat ik wakker ben\” of \”de kalenderdag na de huidige kalenderdag\”. Dit is een voorbeeld van zeer goede UX, aangezien het ervoor zorgt dat de gebruiker geen fout maakt.

$\"Goed$

Conclusie

UI- en UX-design zijn niet hetzelfde, maar wel twee termen die hard op elkaar lijken. Het voornaamste bij beide is echter dat je jouw doelpubliek steeds centraal zet. Bij digital marketing is zowel UX- als UI-design belangrijk voor het ontwikkelen van een efficiënte website. Het is belangrijk om steeds na te denken over wie jouw doelgroep juist is en hoe je ze de best mogelijke ervaring kan geven.

Weet je niet zeker of jouw website een goede UI- en/of UX-ervaring biedt? Wij scannen hem gratis en bieden jouw de resultaten aan in een overzichtelijk document.

[vc_empty_space][vc_row_inner][vc_column_inner][qodef_button size=\”small\” type=\”solid\” hover_animation=\”\” target=\”_self\” icon_pack=\”simple_line_icons\” simple_line_icons=\”icon-rocket\” font_weight=\”\” text=\”Gratis Audit\” link=\”https://www.bluepixlmedia.com/gratis-quickscan-website-of-webshop/\”][/vc_column_inner][/vc_row_inner][vc_empty_space height=\”62px\”]