UX-design en UI-design voor schermen die logisch aanvoelen

UX staat voor user experience: hoe iemand je product ervaart. UX-design gaat dus over structuur en logica. Welke stappen zet een klant om een offerte aan te vragen? Waar zoekt een medewerker de knop om een order af te sluiten? Hoeveel velden telt een formulier, en welke kun je schrappen?

UI staat voor user interface, de zichtbare laag. Hier gaat het dus om kleuren, typografie, iconen, knoppen en witruimte. Een mooi scherm met een onlogische flow werkt niet, maar een logische flow in een rommelige vormgeving evenmin. Daarom ontwerpen we beide samen, met je huisstijl als vertrekpunt.

Onderzoek klinkt duur, maar het hoeft niet groot te zijn. Vaak volstaan enkele gesprekken met mensen die het product echt gaan gebruiken. Dat kunnen klanten zijn, maar ook medewerkers aan de balie of in het magazijn.

Eerst vragen we hoe ze vandaag werken, waar ze vastlopen en wat ze nu omzeilen met een notitie of een telefoontje. Daarnaast kijken we mee terwijl iemand een bestaande tool gebruikt. Zo zie je snel waar mensen twijfelen. Die inzichten bundelen we in een korte lijst van knelpunten en prioriteiten, zonder dik rapport.

Die gesprekken voeren we het liefst waar het werk gebeurt. In Torhout en buurgemeenten als Zedelgem, Ichtegem of Oostkamp kijken we daarom mee aan de balie of in het magazijn. Ook in Brugge en elders in West-Vlaanderen is dat vlot te regelen. Liggen je gebruikers verspreid over Vlaanderen, dan doen we de interviews en tests via videogesprek, met een gedeeld scherm.

Eerst tekenen we wireframes: eenvoudige schetsen in grijstinten die alleen de indeling tonen. Zo bespreken we de structuur, zonder dat kleur of beeld afleidt. Wijzigen gaat in deze fase snel en kost weinig.

Vervolgens werken we de schermen uit in je huisstijl en verbinden we ze tot een klikbaar prototype. Dat open je op je laptop of smartphone alsof het een echte app is. Je kunt het dus laten testen door een paar gebruikers, nog voor er een regel code bestaat. Een fout die je hier vindt, kost veel minder dan dezelfde fout tijdens de bouw.

Een designsysteem is een bibliotheek van vaste bouwstenen: kleuren, lettergroottes, knoppen, formuliervelden, tabellen en meldingen. Elk onderdeel heeft één vorm en één gedrag. Dat geeft rust, want een knop ziet er overal hetzelfde uit en doet overal hetzelfde.

Bovendien vertrekken we van je bestaande logo en kleuren, zodat je merk op papier en op scherm hetzelfde blijft. Werk je later aan een nieuwe webapplicatie of een app, dan bouw je verder op hetzelfde systeem. Dat bespaart ontwerptijd en houdt alles herkenbaar.

Een goed scherm werkt ook voor mensen met een visuele beperking, kleurenblindheid of een motorische beperking. De internationale richtlijn daarvoor is WCAG, opgesteld door het W3C. We ontwerpen volgens niveau AA, de gangbare norm. Concreet letten we onder meer op:

• voldoende contrast tussen tekst en achtergrond
• knoppen die groot genoeg zijn om met een duim te raken
• formulieren met duidelijke labels en foutmeldingen
• bediening met alleen het toetsenbord

Die regels helpen trouwens iedereen, bijvoorbeeld wie in fel zonlicht naar een smartphone kijkt.