Het verbeteren van de UX en UI, hoe gaat dat?

In 2025 zijn we met ons softwarepakket GreenCommerce een nieuwe fase ingegaan. De techniek waarmee GreenCommerce is ontwikkeld, zal in de toekomst mogelijk niet meer ondersteund worden door Microsoft. Dat risico wilden we niet lopen, maar ook wilden we zelf regie voeren over de te maken keuzes op het gebied van technologie. Vanuit deze positie begonnen we met een onderzoek naar een toekomstbestendige techniek voor onze oplossingen. Dit bood ons de kans om niet alleen te moderniseren, maar ook de visuele vormgeving en toegankelijkheid van ons product onder de loep te nemen. In deze blog nemen we je mee in de aanpak van UX-designer Frank.

Starten met onderzoek

Frank startte het proces met een onderzoekstraject. ‘UX (User Experience) en UI (User Interface) gaan over hoe intuïtief software werkt en hoe visueel aantrekkelijk de software is,’ vertelt hij. ‘Normaal gesproken ga ik met gebruikers in gesprek om te ontdekken wat voor hen werkt en wat beter kan aan een product. In dit traject heb ik dat bewust niet gedaan.’ Die keuze lijkt misschien opvallend, maar heeft een duidelijke reden. Binnen ons team is er dagelijks contact met gebruikers en worden verbeterpunten continu opgehaald. ‘Daardoor lag mijn focus nu ergens anders: het vernieuwen van de look-and-feel en het optimaliseren van de toegankelijkheid.’

Dit deed hij onder andere vanuit zijn eigen expertise. Hij analyseerde kritisch wat al goed werkte in GreenCommerce en wat er beter kon. Ook keek hij naar andere applicaties, deed hij inspiratie op en verdiepte hij zich in UX- en UI-trends.

Structuur met wireframes

Na het onderzoek bracht Frank eerst het grotere geheel in kaart. Welke variaties in schermen heeft GreenCommerce? Wat gebeurt er als een gebruiker een actie uitvoert?

In plaats van direct te ontwerpen, koos hij ervoor om wireframes te maken: schematische weergaven zonder kleur en typografie. ‘Door het visuele nog even los te laten, kun je je volledig focussen op structuur en logica,’ legt hij uit. 

Samen met collega’s werkte Frank de wireframes uit voor belangrijke pagina’s. Door de flows en alle informatie nu al scherp te krijgen, voorkom je dat je later in het proces grote aanpassingen moet doen.

Lees verder onder de illustratie

Keuze voor een nieuw framework

Terwijl Frank werkte aan de structuur, hielden de developers zich bezig met een minstens zo belangrijke vraag: welke techniek gaat de basis vormen voor GreenCommerce Future Proof?

Voor Frank was die keuze cruciaal. ‘Je kunt nog zo’n goed ontwerp maken, maar als het technisch niet haalbaar is, houdt het op.’ Zijn wensen werden daarom meegenomen in de selectie van het framework. Pas toen er meer duidelijkheid kwam over de technische basis, kon hij echt verder met het ontwerp.

Het ontwerp

Met de inzichten uit het onderzoek en de wireframes ging Frank aan de slag met ontwerpen. Eén ding stond centraal: de manier van werken voor de gebruiker moet herkenbaar blijven. 

Digitale toegankelijkheid

Toegankelijkheid speelde een grote rol in het ontwerp. GreenCommerce wordt vaak gebruikt in AGF loodsen, waar de omstandigheden niet altijd even ideaal zijn: fel licht, donkere hoeken en reflecties op schermen. Daarom zijn factoren als voldoende contrast, duidelijke lettertypes en herkenbare iconen essentieel. De software is al volledig bedienbaar met een toetsenbord; een cruciale feature voor de meeste gebruikers omdat het de snelheid bevordert. Hier hield Frank bij al zijn ontwerpkeuzes rekening mee.

Trends

Naast toegankelijkheid keek Frank ook naar UX-trends om de software intuïtiever te maken. Maar alleen als ze echt iets toevoegen, een trend is pas waardevol als het de gebruiker helpt. 

Zo nam hij in zijn ontwerp mee dat het eerste invoerveld in een formulier automatisch geselecteerd is. Dit lijkt misschien verwerpbaar, maar hierdoor kan de gebruiker direct beginnen met typen, zonder eerst te hoeven klikken, wat de snelheid ten goede komt.

Ook werd autocomplete toegevoegd: typ je ‘Tom’, dan verschijnt automatisch ‘Tomaat’. Dit versnelt het invoeren en verkleint de kans op fouten.

Daarnaast krijgen gebruikers direct feedback bij een verkeerde invoer in formulieren. In plaats van pas achteraf te zien dat iets niet klopt, wordt dat meteen duidelijk. Kleine aanpassingen, maar met grote impact op het dagelijks gebruik.

Modern jasje 

Naast optimalisaties in de toegankelijkheid, kreeg ook de visuele uitstraling een update. Daarbij was het uitgangspunt duidelijk: moderniseren zonder de herkenbaarheid te verliezen.
Frank bracht meer rust in het ontwerp. ‘In de huidige schermen bestaat wat visuele ruis omdat het pakket door de jaren steeds verder is uitgebreid. Belangrijke informatie kan hierdoor soms wegvallen in het geheel.’ Zo maakte hij iconen eenduidiger en keek hij kritisch naar welke elementen onmisbaar zijn op een scherm.

Een goed voorbeeld is de filterweergave. In de huidige GreenCommerce versie krijgt elke gebruiker alle filters te zien, terwijl het per gebruiker verschillend kan zijn welke filters ze gebruiken. Via statistieken konden we nagaan welke filters het meest gebruikt worden door onze klanten. Deze meest gebruikte filters hebben we als standaard filters gedefinieerd. Elke gebruiker krijgt die set aan standaard filters te zien. De overige filters hebben we instelbaar gemaakt. Dit zorgt ervoor dat de gebruikers alleen de filters zien die voor hen relevant zijn. 

In plaats van nieuwe kleuren toe te voegen, keek Frank vooral naar het slimmer inzetten van bestaande kleuren. Belangrijke informatie krijgt meer nadruk. Zo ontstaat er meer hiërarchie en overzicht.

Afwegingen: Toegankelijkheid, uiterlijk en klantwens

Frank weegt continu af wat het meest visueel aantrekkelijk is, het meest toegankelijk en het handigst voor de klant. Deze belangen zijn namelijk niet altijd gelijk.

Een goed voorbeeld hiervan is responsive design, wat betekent dat de software geschikt is voor mobiele apparaten. Dit is tegenwoordig de norm, maar toch hebben wij er bewust voor gekozen om dat niet te doen.

‘Onze klanten werken met grote hoeveelheden data. Op een klein scherm verlies je simpelweg overzicht. Het is niet te doen om grote hoeveelheden data op zo’n compact scherm te tonen.’ legt Frank uit. In plaats van alles passend te maken voor mobiel, hebben we ervoor gekozen om GreenCommerce te optimaliseren voor tablets en desktops. Voor mobiel zijn er aparte apps, waarin de focus niet op de grote hoeveelheid data ligt.

Het is een keuze die ingaat tegen de standaard, maar wel beter aansluit bij hoe onze klanten de software gebruiken. En uiteindelijk is dat leidend.

Investeren in onszelf en de toekomst

Na goedkeuring van het ontwerp kon het ontwikkelteam aan de slag. 

Frank en collega-developer Dennis zochten vervolgens de tekentafel op om het ontwerp slim en toekomstbestendig in te kunnen zetten, voor zichzelf en de rest van het team. ‘We willen dat schermen snel en consistent ontwikkeld kunnen worden, met zo min mogelijk ruimte voor eigen interpretatie van de developers.’ legt Dennis uit.

Daarom zijn er templates geïntroduceerd: vaste structuren waarin terugkerende elementen al zijn gedefinieerd. Dit zorgt ervoor dat pagina’s er consistent uitzien en het bespaart tijd bij toekomstige designs.

Ook werd een designboek met zogenoemde design tokens gemaakt, welke bestaan uit kleuren en stijlelementen. Deze tokens vormen de basis van de hele applicatie. Dat maakt het niet alleen makkelijker om nu te ontwikkelen, maar ook om in de toekomst aanpassingen door te voeren.

Het nieuwe ontwerp wordt op dit moment meegenomen in een showcase om later dit jaar aan klanten te presenteren. Zo zetten we een grote stap richting GreenCommerce Future Proof.