Een paar weken terug hebben we een blog geschreven waarin we het verschil uitlegden tussen UI en UX design. Om hierop voort te bouwen laten we hier vijf voorbeelden zien van hoe het wel moet en hoe het niet moet bij.

Nog even een korte samenvatting. In de vorige blog maken we duidelijk dat UI design alleen gebruikt wordt voor digitale producten, zoals een website of een app. Terwijl UX design toepasbaar is bij alle soorten producten. De kracht van UI design is zo dat dit het verschil kan betekenen tussen een succesvolle app of website, en een die geen impact maakt – of erger nog, een onvergetelijk slechte indruk achterlaat op de gebruiker. Om te voorkomen dat we zelf ook deze fouten maken, delen we hier vijf van de meest voorkomende UI design fouten. We vertellen er ook bij hoe je het beter kunt aanpakken.

Elke website of app is anders en heeft een ander doel. Er is dus niet één formule die zorgt voor het perfecte resultaat. Maak gebruik van onderstaande lijst als een soort checklist als je een nieuw ontwerp gaat maken, dit kan je alleen maar helpen.

Genoeg gepraat, laat ons beginnen met vijf voorbeelden van een goed en slecht UI design.

1. Geen zichtbare verschillen tussen primaire en secundaire call-to-action.

Een bezoeker van een website of een app moet begeleid worden naar de actie die jij wilt dat ze ondernemen. Navigatie gebeurt vaak door het gebruik van call-to-actions of knoppen. Je moet het de gebruiker makkelijk maken door de primaire call-to-actions in een onderscheidende kleur te zetten en prominent aanwezig te maken. Een secundaire call-to-action moet nog altijd goed zichtbaar zijn, maar zou minder prominent aanwezig moeten zijn dan de primaire.

Zo kan je een duidelijk onderscheid maken tussen primaire en secundaire call-to-actions:

• Geef de call-to-actions een verschillende kleur. Zorg dat de kleur van de primaire call-to-action meer opvalt, zodat de gebruiker meteen weet waar hij op moet klikken.
• Gebruik sterke kleuren, vetgedrukte tekst en grotere lettergrootte om visueel gewicht te geven aan primaire knoppen. Doe het tegenovergestelde voor secundaire acties.

2. Slecht uitgelijnde elementen

We zien slecht uitgelijnde elementen erg vaak terugkomen en het stoort enorm. Het uitlijnen van elementen is de sleutel achter een ontwerp dat mooi en gebalanceerd oogt.

Er zijn twee fundamentele manieren in het uitbalanceren van jouw interface: een raster met twaalf kolommen en een basislijnraster. Je zal dit raster in het uiteindelijke ontwerp niet terugzien, maar het zorgt er wel voor dat alles mooi uitgebalanceerd is. Maak jij gebruik van een CMS-systeem zoals WordPress? De meeste paginabouwers die je kunt gebruiken bij dergelijke CMS-systemen maken hier automatisch gebruik van.

Uiteraard zorgt het gebruik van een grid er ook voor dat je binnen bepaalde grenzen moet werken, maar het is belangrijk om eerst de basis juist te krijgen voordat je volledig zelf iets gaat ontwerpen.

Onze belangrijkste tip voor het uitlijnen van elementen:

• Zorg ervoor dat items die met elkaar te maken hebben op dezelfde manier uitgelijnd staan. Hierdoor zijn ze visueel met elkaar verbonden wat een design ten goede komt.

3. Slecht contrast tussen elementen

Contrast zorgt ervoor dat alles beter leesbaar is en duidelijk staat weergegeven. Als je een laag contrast hebt tussen je visuele elementen, lijken ze samen te vallen en zijn ze hierdoor slecht leesbaar. Dit zie je bijvoorbeeld bij een witte tekst op een lichtgrijze achtergrond. Zorg voor een goed contrast, dan verbeter je ook de gebruikservaring.

Waar je op moet letten bij contrast als het op UI design aankomt:

• Gebruik contrast om de gebruiker wegwijs te maken. Gebruik bijvoorbeeld hoog contrasterende kleuren voor call-to-actions zodat deze opvallen.
• Gebruik contrast om een duidelijk onderscheid te maken tussen verschillende elementen in je website of app. Gebruik bijvoorbeeld andere achtergrondkleuren om het verschil aan te duiden tussen je header en je footer.
• Toch nog aan het twijfelen? Gebruik dan deze website om te kijken of er genoeg contrast is tussen twee kleuren.

4. Geen responsief design

De laatste jaren is het zoekvolume op mobiele apparaten enorm sterk gestegen. Google denkt zelf dat de komende jaren het aantal zoekopdrachten via mobiele apparaten de desktop-zoekopdrachten zal overstijgen. Om ervoor te zorgen dat zowel mobiele- als desktopgebruikers een goede ervaring hebben op je website, moet je ontwerp responsief opgebouwd zijn.

Belangrijkste focuspunten voor een responsief ontwerp:

• Zorg ervoor dat je website automatisch schaalt naar de resolutie en de grootte van het apparaat van je bezoeker.
• Kijk na of je knoppen duidelijk en groot weergegeven worden op mobiele apparaten, zodat deze eenvoudig aan te klikken zijn.
• Zorg ervoor dat teksten en afbeeldingen een logische volgorde hebben als je de website schaalt naar een mobiel apparaat.

5. Inconsistent UI design

Om de gebruikservaring te verbeteren, moet je zo vaak mogelijk patronen en elementen herhalen. Een samenhangend design en verhaal zorgen voor vertrouwen bij je bezoeker en voor een aangename ervaring. Door te veel verschillende stijlen toe te passen, verwar je de gebruiker alleen maar, en we willen ze juist helpen om zo snel mogelijk hun weg te vinden naar wat ze zoeken.

Vermijd inconsistentie door op de volgende zaken te letten:

• Probeer altijd hetzelfde kleurenpalet toe te passen voor tekst, knoppen, links, headers en footers.
• Gebruik altijd dezelfde soort lettertypes op je website of app voor headers, paragrafen, links en zo verder.
• Gebruik dezelfde lijndikte bij iconen, scheidingslijnen en andere lijnen die je gebruikt.
• Wijk je toch af van de standaard, zorg er dan voor dat dit met een heel goede reden gebeurt.

Conclusie

Ga je van start met een nieuwe website of wil jouw website verbeteren? Denk dan steeds goed na over het UI design van je website. Hierdoor voorkom je frustraties bij de gebruiker en verhoog je de kans op conversies.

Ben je niet zeker of jouw website hieraan voldoet of wil je graag wat meer inzicht krijgen in de gebruikservaring van je website? Wij voeren graag een gratis Quickscan voor jou uit.