UX & UI: de verschillen & toepassing in je design

User interface-design & user experience-design zijn als Buurman en Buurman. Ze lijken op het eerste gezicht verdomd veel op elkaar en bijna niemand weet wie wie is. Maar als je ze eens van dichtbij bekijkt, zijn er wel degelijk verschillen aan te wijzen. Beide hebben zo hun eigen charmes en kwaliteiten, maar de één kan de klus niet klaren zonder de ander.

In onze online wereld is de competitie moordend. Webdesigners gaan elkaar digitaal te lijf en trekken de trukendoos steeds verder open. Om boven het maaiveld uit te blijven steken, worden aan UX- en UI-design vaak superkrachten toegedicht. Het zijn de stomende ijzers in het vuur van de pientere developer.

Beide disciplines klinken erg ‘2018’ en kunnen je producten ongetwijfeld naar een hoger niveau tillen. Maar waar de termen vaak door elkaar heen worden gebruikt, zijn de concepten die erachter schuilgaan niet helemaal hetzelfde. Hoog tijd om een antwoord te vinden op een aantal prangende vragen. Wat houden UI- en UX-design precies in? Wat zijn de verschillen? Waarom zijn ze relevant voor de ontwikkeling van jouw product? En hoe kun je ze toepassen in je ontwerpproces? We nemen de buurmannen eens wat nadrukkelijker onder de loep.

UI: Het digitale likje verf

De UI van een website is in feite het contactpunt tussen de aangeboden producten en diensten en de potentiële klant die daar graag meer over wil weten. Het is een instrument waarmee je alle informatie die je wil overbrengen in hapklare brokken presenteert. Het liefst met een mooi strikje erom natuurlijk. Een goede interface is prikkelend, houdt de aandacht vast en nodigt de bezoeker uit om in actie komen; het is immers vaak het eerste (en soms ook het enige) wat hij van jouw bedrijf te zien krijgt. Dan kun je maar beter een goede eerste indruk achterlaten.

De wow-factor

UI-design vindt plaats op de voorgrond, is zichtbaar voor de gebruiker en draait om de wow-factor. Soms zit ‘m dat in de kleine details, zoals de vorm van een knop of de lettergrootte van een tekst. De stijl moet hoe dan ook passen bij wat je als bedrijf wil uitstralen. Ben jij een pionier op het gebied van technologie? Dan is een strak design iets voor jou. Organiseer je buurtbraderiën? Kies dan een thema dat gezelligheid uitstraalt.

Toeters en bellen zijn overigens lang niet altijd nodig voor een succesvol UI-design. ‘Authentic Weather’ is daar een goed voorbeeld van. Het is een eigenwijze weer-app met als slogan ‘No bullshit, just the fucking weather‘. De app is op zo’n humoristische manier vormgegeven dat je toch steeds even wil checken wat voor fucking weer het vandaag wordt. Het ontwerp is doodeenvoudig, maar bijzonder effectief. Het relatief kale design past goed bij het botte taalgebruik, zonder dat het saai overkomt.

De effectiviteit van verschillende UI-elementen kun je redelijk eenvoudig testen met A/B-testing. Levert een rode knop meer interactie op dan een groene? Zijn bezoekers eerder geneigd een blog te lezen als je een plaatje toevoegt? Stel een experimentje op en laat de data jouw vragen beantwoorden. Met die conversiedata krijg je een objectieve kijk op het gedrag en de impliciete voorkeuren van je bezoekers.

UX: Een ervaring op zich

Een deurtje verder vinden we UX-design. In tegenstelling tot bij buurman UI gaat de gebruikerservaring bij UX verder waar het beeldscherm ophoudt. De nadruk ligt op wat zich in het hoofd van de gebruiker afspeelt tijdens het bezoek, de emoties die worden opgeroepen en het oordeel dat hij velt na afloop van de interactie.

UX-design speelt zich wat meer op de achtergrond af en draait vooral om functionaliteit en structuur. Het is belangrijk dat het doel van je website en de behoeften van de gebruiker op elkaar zijn afgestemd. Wat wil de bezoeker weten of wat wil hij doen? Welke functionaliteiten moeten er geboden worden om hem daartoe in staat te stellen? Daarnaast is het verstandig om wat aandacht te besteden aan de manier waarop je informatie ordent. Staat alle informatie op de plek waar de gebruiker het verwacht? Zijn alle pagina’s binnen enkele kliks bereikbaar?

Zorg voor een natuurlijke user flow

Een goed UX-design valt of staat dus met een prettige user flow. De bezoeker hoeft niet per se aan het handje te worden gehouden als een gillende kleuter in de Efteling, maar moet een natuurlijk vloeiend pad door de website kunnen volgen, afhankelijk van wat hij wil weten of waar hij zin in heeft. Zo’n natuurlijk uitgesleten wandelpad maakt de interactie tussen jou en je klant praktisch en zinvol. De gebruiker moet met een goed en voldaan gevoel terug kunnen kijken op zijn bezoek, zodat hij zeker een reden heeft om in de toekomst nog eens terug te komen. Aan de andere kant spin jij er garen bij om bezoekers zo lang mogelijk vast te houden en alle hoeken van je website te laten zien.

Het UX-design van IKEA

IKEA is een schoolvoorbeeld van een vernuftig UX-design. De producten en handleidingen van de organisatie zijn bijvoorbeeld perfect op elkaar afgestemd. De handleidingen zijn simpel, universeel en herkenbaar. Ze zijn bijzonder gedetailleerd, zodat jij moeiteloos het juiste van die 24 schijnbaar identieke plankjes kunt kiezen. Mocht het je dan alsnog niet lukken om je Billy in elkaar te schroeven, dan kun je op de IKEA-website terecht voor nóg meer ondersteuning en opbeurende woorden. De UX stopt niet meteen na de aankoop, maar gaat door totdat die k(o)lere(n) kast eindelijk overeind staat. En zeg nou zelf, dat onschuldige mannetje neem je toch niets kwalijk?

Door actief je doelgroep te benaderen, kun je inzicht krijgen in de gemiddelde wensen en kenmerken. Die kennis kun je vervolgens gebruiken om functionaliteiten te kiezen en je design vorm te geven. Ten slotte kun je nog testen of je de gebruiker daadwerkelijk goed begrepen hebt, door hem enkele prototypes van je ontwerp voor te leggen en direct of indirect naar zijn mening te vragen. Het perfecte UX-design vergt geduld; vaak moet die cyclus meerdere keren worden doorlopen voordat alle details kloppen.

Kun je een user experience ontwerpen?

Je kunt je afvragen of een gebruikerservaring écht aan de tekentafel bedacht kan worden. Hoe iemand de interactie met jouw website beleeft is namelijk afhankelijk van tientallen factoren, die je lang niet allemaal onder controle hebt. Een gebruiker die jouw pagina bezoekt vanaf een hagelwit strand onder een stralend zonnetje zal ongetwijfeld anders reageren dan iemand die net tot op zijn onderbroek is natgeregend in een stevige plensbui. Het zijn onvoorspelbare zaken, zoals bijvoorbeeld het weer, die bepalen of de gebruikerservaring die je in gedachten had ook echt tot zijn recht komt.

Zoveel mogelijk controle

Hoewel je misschien niet kunt garanderen dat je bezoekers altijd goedgehumeurd je webpagina zullen laden, kun je er wél voor zorgen dat ze in elk geval niet gefrustreerd raken tijdens hun bezoek. Je kunt een prettige gebruikservaring dan misschien niet precies uittekenen, een onhandige structuur of beperkte functionaliteiten zullen die ervaring zeker schaden. Je kunt je website zo opbouwen dat alle ingrediënten voor een positieve UX op zijn minst aanwezig zijn en alle mogelijke obstakels uit de weg zijn geruimd. Wat er allemaal om de gebruiker heen gebeurt kun je (helaas) niet beïnvloeden, maar in die korte tijd dat jouw website even de volledige aandacht heeft wil jij zo veel mogelijk in controle zijn.

UI + UX = UX + UI

Hoe dan ook: een UI zonder UX is als een schilder die zijn dure acrylverf zonder nadenken op het canvas kwakt, terwijl een UX zonder UI is als de Mona Lisa zonder haar innemende glimlach. Toch nét wat minder mooi. Daarom is het belangrijk om beide concepten nadrukkelijk mee te nemen in verschillende fases van het ontwikkelingsproces. UX-design is al in een vroeg stadium van belang, omdat fundamentele zaken als functionaliteiten en structuur later veel tijd vergen om aan te passen. Een UI-ontwerp is op zichzelf natuurlijk ook vrij fundamenteel, maar het is hierbij nog relatief eenvoudig om later aan de knoppen te draaien.

Aan de slag

Het is een absolute aanrader om zelf aan de slag te gaan met UX- en UI-onderzoek. Zo bekijk je je klanten of gebruikers weer eens van een andere kant en ontwikkel je een nóg beter gevoel voor hun wensen en hun gedrag. Door je bezoekers bij het designproces te betrekken (of ze zich daar zelf nu bewust van zijn of niet), kun je je website beter op hun behoeften afstemmen.

Input van een expert kan je zeker helpen om een meer intuïtieve website te bouwen, mits die niet enkel zijn eigen mening opdringt. De enige mening die ertoe doet is die van de gebruiker, maar die moet je dan nog wel zien op te vangen. Enkele manieren zijn hierboven al kort beschreven, maar onze Buurman & Buurman hebben nog meer attributen in hun gereedschapskoffer verstopt. Een keur aan verschillende onderzoekstechnieken zal je ongetwijfeld helpen om de klus te klaren. A je to!