Design Principles
De kernuitgangspunten van het nieuwe LogicTrade-design
Familiar · Fast · Focused
Familiar
Sluit aan bij wat mensen al kennen
We bevinden ons in een relatief traditionele sector. De gemiddelde LogicTrade-gebruiker is geen tiener. Daarom grijpen we bewust terug naar papieren en analoge concepten die onze gebruikers al kennen: oud, vertrouwd en herkenbaar. Dat hoeven we ze niet te leren. Herkenbaarheid gaat vóór technische of visuele slimheid.
Fast
Snelheid is geen luxe, het is de basis
De bestaande LogicTrade-modules worden ervaren als traag. Dat is zelfs de nummer één klacht bij support en in het veld. Daarom bouwen we nieuwe modules vanaf scratch met performance als een van de belangrijkste uitgangspunten. Informatie moet direct verschijnen, acties moeten direct reageren, en de gebruiker mag nooit wachten op het systeem.
Focused
Minder kliks, minder denken, meer doen
Less is more. De oude LogicTrade-modules laten standaard veel te veel zien. We laten alleen zien wat echt veel en dagelijks gebruikt wordt. We ontwerpen voor de 95% van onze gebruikers en hun standaardworkflow, met de hoofdcontent centraal. LogicTrade is complexe software, maar die complexiteit verstoppen we zoveel mogelijk achter progressive disclosure, korte flows en gerichte acties. Schroom niet om dingen te scrappen: begin met het bare minimum en laat gebruikers aangeven wat terug moet komen.
Digitaliseer het vertrouwde
Start with the real world
Maak de digitale wereld herkenbaar door aan te sluiten op hoe mensen in de fysieke wereld werken.
Waarom herkenbaarheid leidt
- We proberen waar mogelijk een analogie te maken met de fysieke wereld en bestaande, vertrouwde werkwijzen.
- Veel processen die we digitaliseren bestaan of bestonden oorspronkelijk uit papieren documenten en fysieke objecten. Denk aan een geprinte A4-offerte, A4-orderbevestiging, service/RMA-formulier, werkbon of visitekaartje.
- Daar is een belangrijke reden voor: iedereen kent en begrijpt deze objecten, jong en oud. Een A4-offerte hoef je aan niemand uit te leggen. Het is misschien oud, maar het is vertrouwd.
- Een extra reden is onze doelgroep. We bevinden ons in een relatief traditionele sector en de gemiddelde LogicTrade-gebruiker is geen tiener. Papieren en analoge concepten zijn voor deze gebruikers herkenbaar en vertrouwd; dat hoeven we ze niet te leren.
- Nieuwe complexe of fancy UI's moet je vaak wél uitleggen.
Vragen om mee te starten
- Hoe zou dit in de fysieke wereld gaan?
- Hoe zou dit op papier werken?
- Welke documenten of objecten worden hiervoor gebruikt?
- Welke informatie staat daarop?
- Hoe kunnen we dit vervolgens digitaliseren en vertalen naar goede software?
Bewuste balans
- Herkenbaarheid gaat vóór technische of visuele slimheid. Een gebruiker moet zoveel mogelijk begrijpen zonder uitleg of training.
- Bij editors lopen we soms tegen de grenzen van dit principe aan. Editors tussen verschillende LogicTrade-modules moeten namelijk ook een bepaalde mate van consistentie behouden. Dit blijft een bewuste afweging.
Raadplegen moet sneller zijn dan navigeren
View fast. Edit deliberately.
Informatie bekijken is iets anders dan ermee werken.
Het probleem
- Gebruikers raadplegen gedurende de dag continu informatie: een order, offerte, klant, factuur, serviceverzoek of ander object.
- Daarvoor zouden ze niet steeds hun huidige context moeten verlaten.
Performance als uitgangspunt
- De bestaande LogicTrade-modules worden door gebruikers ervaren als traag. Dat is de meest genoemde klacht bij support en in gesprekken met klanten.
- Daarom bouwen we nieuwe modules vanaf scratch met snelheid en performance als een van de belangrijkste eisen.
- Data moet direct beschikbaar zijn, schermen moeten direct reageren, en acties mogen nooit het gevoel geven dat de gebruiker moet wachten.
- Snelheid is geen optimalisatie die later komt, maar een fundamenteel ontwerpcriterium vanaf de eerste iteratie.
Het patroon: Preview / Quick Peek
- Daarom gebruiken we Preview / Quick Peek als belangrijk UX-pattern.
- Inspiratie hiervoor is onder andere macOS, waar je met één actie vrijwel ieder bestand direct kunt previewen zonder het daadwerkelijk te openen.
- Het doel is snelheid: even kijken en weer door.
- In de analoge wereld is dit vergelijkbaar met even door een stapel papieren bladeren om te kijken: "Wat hadden we ook alweer afgesproken?"
Het onderscheid
- Een Preview opent snel, houdt de gebruiker in zijn huidige context, is primair bedoeld om informatie te raadplegen, is in principe read-only en verdwijnt net zo makkelijk als hij verschijnt.
- Een volledig scherm of editor gebruiken we wanneer iemand daadwerkelijk aan het object gaat werken.
- Daarmee maken we bewust onderscheid tussen viewing en editing.
Content centraal, metadata secundair
Content deserves space.
Wat inhoudelijk belangrijk is staat centraal. Wat het systeem erover weet staat ernaast.
Links = Content
- Het linkergedeelte bevat de daadwerkelijke inhoud. Hier draait het object om en hier zit de kern van het probleem of proces.
- Denk aan producten, orderregels, teksten, bedragen, afspraken, documenten en andere inhoudelijke informatie.
- Dit is bovendien vaak informatie die samen met of in aanwezigheid van een klant wordt bekeken.
Rechts = Metadata
- Het rechtergedeelte bevat ondersteunende informatie die iets óver het object zegt.
- Denk aan status, verantwoordelijke, labels, interne kenmerken, instellingen, systeeminformatie en andere metadata.
- In vrijwel alle gevallen is deze informatie secundair en niet bedoeld om centraal in beeld te staan. Een groot deel hiervan is bovendien interne informatie die niet relevant of geschikt is voor de ogen van de klant.
Simpel standaard, complexiteit op aanvraag
Complexity should be available, not visible.
Ontwerp voor de 95%, zonder de overige 5% onmogelijk te maken.
De uitdaging
- LogicTrade bestaat door zijn historie uit enorm veel functionaliteit, instellingen, uitzonderingen en legacy.
- Die complexiteit kunnen en willen we niet zomaar verwijderen.
- Maar we hoeven hem ook niet standaard aan iedere gebruiker te laten zien.
Minder kliks, kortere flows
- Een veelgehoorde kritiek is dat gebruikers te veel klikken moeten doen om iets te bereiken.
- We ontwerpen daarom bewust voor korte flows: de meest voorkomende acties moeten in zo min mogelijk stappen bereikbaar zijn.
- Acties plaatsen we direct bij de content, niet verstopt in menu's of meerdere lagen verwijderd.
- Waar logisch omarmen we hotkeys en sneltoetsen, zodat ervaren gebruikers nog sneller kunnen werken.
Less is more
- De oude LogicTrade-modules laten standaard veel te veel zien. Velden, opties, knoppen en instellingen die maar zelden of nooit gebruikt worden, staan vaak prominent in beeld.
- Bij nieuwe modules draaien we dit om: we tonen alleen wat echt veel en dagelijks gebruikt wordt.
- Schroom niet om dingen te scrappen. Het is beter om een functie achterwege te laten en later op verzoek terug te brengen, dan om elk scherm vol te zetten met mogelijkheden die niemand gebruikt.
- Doe het bare minimum. Alleen door bewust dun te ontwerpen maken we LogicTrade dunner.
Progressive Disclosure
- Daarom hanteren we het principe van Progressive Disclosure: complexiteit wordt pas zichtbaar wanneer iemand die daadwerkelijk nodig heeft.
- De standaardinterface bevat alleen wat de meeste gebruikers nodig hebben.
- Minder gebruikte functionaliteit, instellingen, legacy-functionaliteit en edge cases mogen blijven bestaan, maar mogen het primaire ontwerp niet domineren.
- Hiervoor gebruiken we onder andere consequent ••• → Advanced.
Wanneer prominent?
- Nieuwe functionaliteit hoort alleen prominent in de primaire interface wanneer deze daadwerkelijk onderdeel is van de standaardworkflow.
Principles, Patterns & Components
Drie niveaus die samen het LogicTrade design system vormen.
Onze designkeuzes zijn opgebouwd uit drie lagen. Principles geven richting, Patterns vertalen dat naar herbruikbare oplossingen, Components maken het concreet in code.
1. Product Design Principles
Principles bepalen waarom we een bepaalde ontwerpbeslissing nemen. Ze geven richting en helpen bij situaties waarvoor nog geen bestaande oplossing of component bestaat.
- Digitaliseer het vertrouwde
- Raadplegen moet sneller zijn dan navigeren
- Content centraal, metadata secundair
- Simpel standaard, complexiteit op aanvraag
2. UX Patterns
Patterns bepalen hoe we terugkerende UX-problemen binnen LogicTrade oplossen.
- Preview / Quick Peek
- Editor
- Content links + metadata rechts
- ••• Advanced
- Tabellen
- Dialogs
- Empty states
- Search
- Navigation
- Actions / command bars
3. Components
Components zijn de daadwerkelijke technische en visuele bouwstenen waarmee we deze patterns realiseren. Een component vertelt hoe iets eruitziet en technisch werkt. Een pattern vertelt wanneer we het gebruiken. Een principle vertelt waarom we daarvoor kiezen.
Agentic Design
Waarom agents deze principes moeten begrijpen.
Nieuw LogicTrade-modules worden steeds meer agentic coding first ontwikkeld. We willen een coding agent daarom niet alleen vertellen welke componenten beschikbaar zijn.
Wat een agent moet kunnen bepalen
- De intentie van een scherm of interactie begrijpen.
- Welk Design Principle daarop van toepassing is.
- Welk bestaand UX Pattern daarbij hoort.
- Welke Components gebruikt moeten worden om dat pattern uit te voeren.