UX/UI design: 5 tips!

Uit onderzoek is gebleken dat gebruikers in minder dan een seconde al een oordeel klaar hebben staan over een website wanneer ze deze bezoeken. 94% van de eerste impressies van website en webshop bezoekers zijn gerelateerd aan UI design. Het ontwerpen van een website of webshop kan erg lastig zijn, want hoe verdeel je alle informatie over je pagina’s zodat het logisch is en het er ook nog eens goed uit ziet?

Zoals Steve Jobs ooit zei: “Design is not just what it looks like and feels like. Design is how it works”. Je UX/UI (User Experience en User Interface) design moeten goed werken. Toch zijn er nog websites die niet goed ingericht zijn, en dus ook niet goed converteren. Wij geven je tips!

Nieuwsgierig?

Wij optimaliseren UX/UI op basis van bewezen onderzoek over jouw doelgroepen! Ontvang nu gratis advies!

Analyseren

Het klinkt heel vanzelfsprekend, maar een goed design kun je pas maken als je je klant goed kent. Begin met het analyseren van je klant. Weet met wat voor reden ze op je website komen en speel daar op in. Kijk naar websites van de competitie om te kijken hoe zij omgaan met gebruikersgedrag, maar kijk daarnaast ook naar websites van bedrijven uit andere branches. Bij Klik & Steen gebruiken we de (vereenvoudigde) MBTI methode om klanten te analyseren.

Deze methode beschrijft 4 beslissingsvoorkeuren van mensen: de competitieve bezoeker, spontane bezoeker, methodische bezoeker en de humanistische bezoeker. Elementen van al deze 4 beslisvoorkeuren moeten op je website of webshop (eigenlijk op al je pagina’s) voorkomen. Het kan natuurlijk wel zo zijn dat je de nadruk legt op één beslisvoorkeur op je website of specifieke pagina’s van je website.

Een paar andere tips die we met je willen delen, zodat je je UX/UI design kunt verbeteren:

Mobiel UI Design

Wanneer je voor mobiel ontwerpt, is dat natuurlijk een ander verhaal dan wanneer je voor desktop ontwerpt. Waar je op desktop met een muis navigeert, doe je dat op mobiel met je vingers. Dit maakt het dan ook lastiger om knoppen in de drukken. Maak je knoppen sowieso 7 tot 10 mm groot zodat de gebruiker genoeg ruimte heeft om te ‘klikken’. Zorg er ook voor dat je invoervelden groter zijn dan op desktop. Eerst moeten inzoomen voordat je kunt lezen wat er in een veld staat, kan een reden zijn voor bezoekers om af te haken.

Wanneer een knop een belangrijke Call To Action (CTA) is, maak deze dan groter en duidelijker zichtbaar dan de rest van de knoppen. Geef je gebruikers ook feedback op mobiel wanneer ze op een button hebben ‘geklikt’. Je kunt je bezoekers laten zien dat ze hierop geklikt hebben door bijvoorbeeld de knop donkerder te maken na het ‘klikken’. Hierdoor lijkt de button meer op een 3D object. Een website kan eigenlijk niet meer niet-responsive zijn! Dit is een must voor elke website of webshop!

Kleuren

Je kunt bezoekers sturen op je website of webshop door middel van kleurgebruik. Zo trekken warme kleuren, zoals rood en oranje, meer aandacht dan koudere kleuren, zoals blauw en groen. Dit is vooral handig om te weten wanneer je wilt testen met kleuren voor je CTA.

Ook kun je hiermee primaire acties van secundaire acties onderscheiden. De primaire buttons maak je van een meer ‘aanwezige’ kleur dan de secundaire acties. Er zijn bepaalde richtlijnen ingesteld door W3C (World Wide Web Consortium) qua kleurencontrast voor websites. De contrastverhouding voor visuele weergave van tekst op een website is 4,5:1. Dit betekent dat er 4,5 tinten tussen de lichtste en donkerste kleur moeten zitten.

Bij een tekst groter dan 18 punten of 14 punten vetgedrukt, is deze contrastratio 3:1. Kleuren kun je gebruiken om informatie over te brengen. Een groene knop met het woord ‘stoppen’ is niet logisch en zal hoogstwaarschijnlijk alleen maar voor verwarring zorgen bij bezoekers. Een rode knop met het woord ‘stoppen’ is daarentegen een logische keuze, en laat je boodschap duidelijk overkomen.

Lettertype

Gebruik een ‘standaard’ lettertype wat makkelijk te lezen is. Zorg voor zoveel mogelijk ‘echte’ tekst. Tekst in afbeeldingen wordt niet gelezen door bots (wat wel erg belangrijk is voor je SEO!) en worden ook niet omgezet in geluid van voice synthesizers. Dit laatste wordt veel gebruikt door mensen die blind of slechtziend zijn. Voor hen worden afbeeldingen opgelezen.

Het is belangrijk dat je tekst groot genoeg is, zodat mensen niet hoeven in te zoomen om je tekst te kunnen lezen. Voor mobiel is het aan te raden om niet meer dan 30 tot 40 tekens per regel hebben. Voor desktop is dit 60 tot 75 tekens. Wanneer je je hier aan houdt, houd je je website of webshop overzichtelijke en leesbaar.

Interface

Mensen kunnen maar 5 tot 9 dingen onthouden in hun kortetermijngeheugen. Houd je interface daarom zo simpel mogelijk. Bezoekers moeten in principe door je website of webshop geleidt worden zonder daar al teveel moeite voor te doen.

Teveel keuzes maken het moeilijker voor bezoekers om te kiezen waar ze gaan klikken. Nieuwe snufjes toevoegen aan je website of webshop is erg leuk, maar het kan ook teveel afleiden van het doel of niet begrepen worden door bezoekers. Voeg deze snufjes dus alleen toe als dit relevant is.

Testen

Zoals genoemd in vorige blogs: test je website of webshop! De tips in dit blog helpen je website of webshop de goede kant op, maar test vooral of deze veranderingen ook voor jouw website of webshop werken. Doe dit niet zelf, maar laat ‘echte’ gebruikers je website testen, zodat je ook echte resultaten hebt.

Maak gebruik van verschillende tools voor het testen, zoals Google’s A/B testen, maar ook een tool zoals Hotjar is erg handig om te kijken hoe bezoekers je website of webshop gebruiken. Zorg er dus voor dat je website of webshop responsive is, dat je kleuren goed gebruikt worden en dat je je teksten groot genoeg maakt. Zorg voor een ‘makkelijke’ website of webshop en blijf analyseren!