Ruimte en relaties

In onze Campus Experience System (CXS) richtlijnen speelt ruimte een essentiële rol. Door een zorgvuldige toepassing van ruimte creëren we duidelijke visuele relaties en versterken we de leesbaarheid, hiërarchie en interactie binnen onze leeromgevingen. Deze richtlijnen beschrijven hoe onze spacing scale, visuele principes en toegankelijkheidsnormen bijdragen aan een consistente en gebruiksvriendelijke interface.

Ruimte als organisatorisch principe

Ruimte ondersteunt de indeling van informatie op onze platformen en helpt gebruikers om de samenhang tussen elementen intuïtief te begrijpen. Door het bewust toepassen van de Gestaltwetten – zoals de wet van nabijheid – kunnen we visuele groepen vormen en hiërarchieën opbouwen die de gebruiker naar de gewenste interactie leiden.

Belangrijke uitgangspunten:

• Leesbaarheid en visuele rust: Door ruimte toe te voegen tussen tekstblokken en interactieve elementen, verbeteren we de leesbaarheid en gebruiksvriendelijkheid.
• Versterking van relaties: Elementen die bij elkaar horen, plaatsen we dichter bij elkaar. Dit maakt gebruik van de wet van nabijheid en versterkt de relaties tussen visuele componenten.
• Toegankelijkheid en eenvoud: Een juiste toepassing van ruimte helpt niet alleen bij leesbaarheid, maar verhoogt ook de toegankelijkheid, doordat het contrast en de structuur voor alle gebruikers duidelijker wordt.

Spacing scale

Ons spacing-systeem maakt gebruik van een gestandaardiseerde schaal, waarmee we consistentie en eenvoud in het ontwerp waarborgen. De gebruikte schaal is als volgt:

Token	Waarde
--cds-sys-spacing-3xs	~4px
--cds-sys-spacing-2xs	~8px
--cds-sys-spacing-xs	~12px
--cds-sys-spacing-s	~16px
--cds-sys-spacing-m	~24px
--cds-sys-spacing-l	~32px
--cds-sys-spacing-xl	~48px
--cds-sys-spacing-2xl	~64px
--cds-sys-spacing-3xl	~96px

Deze schaal biedt een breed scala aan afstanden voor verschillende componenten en lay-outs. Het systeem werkt met fluid typescaling, waardoor afstanden en regelhoogtes automatisch worden aangepast aan de schermgrootte. Dit betekent dat de spacing consistent blijft, ongeacht het type apparaat, en zorgt voor een vloeiende en aangename visuele ervaring.

Opmerking

Voor touch targets geldt een minimale afmeting van 48px x 48px om de toegankelijkheid en bruikbaarheid op touchscreens te optimaliseren.

Ruimte voor tekst en interactie

Regelafstand (line-height) wordt automatisch toegepast door classes zoals body-medium. Hierdoor is de leesbaarheid van tekst gewaarborgd, en wordt de juiste ruimte tussen regels en tekstblokken automatisch ingesteld op basis van de gebruikte typescale. Dit systeem minimaliseert handmatig werk voor ontwerpers en ontwikkelaars en zorgt ervoor dat tekst consistent en goed leesbaar is.

Voor interactieve elementen zoals knoppen of links hanteren we specifieke richtlijnen:

• Consistente padding: Hiermee vergroten we de touch target-gebieden zonder visuele rommel toe te voegen.
• Voldoende tussenruimte voor begrijpelijkheid: Knoppen en links worden nooit te dicht op elkaar geplaatst, zodat gebruikers een duidelijke keuze hebben en het risico op fouten beperkt blijft.

Toegankelijkheid en WCAG-richtlijnen

We zorgen ervoor dat onze ruimtesystemen voldoen aan de WCAG 2.2-criteria, waaronder:

• 1.4.12 Tekstafstand (Text spacing): Deze norm zorgt voor voldoende ruimte tussen tekstregels en paragrafen, wat bijdraagt aan leesbaarheid en gebruiksgemak.
• 2.5.8 Doelgrootte (minimaal): Met onze vereiste van 48px x 48px voor touch targets voldoen we aan deze norm (minimum is 24px x 24px), wat een cruciaal onderdeel is van onze toegankelijkheidsdoelstellingen.

Daarnaast dragen onze keuzes in spacing en visual grouping bij aan een interface die eenvoudiger te navigeren en intuïtief te gebruiken is voor een breed scala aan gebruikers, ook voor diegenen met motorische beperkingen.

Praktische tips voor ontwerpers en ontwikkelaars

Voor een effectieve toepassing van onze spacing-richtlijnen, volgen hier enkele best practices:

• Gebruik de gestandaardiseerde classes: Maak gebruik van classes als p-xs, m-bs-m, etc., om de juiste afstanden toe te passen en consistente visuele relaties te waarborgen.
• Vermijd visuele overlap: Door de juiste spacing toe te passen tussen interactieve en niet-interactieve elementen, voorkom je visuele rommel en maak je de interface overzichtelijker.
• Blijf bij de vastgestelde spacing scale: Consistentie is de sleutel tot een intuïtieve gebruikerservaring. Vermijd het gebruik van handmatige pixelwaardes buiten de schaal.
• Test op diverse apparaten: De fluid-scaling van spacing en tekst is ontworpen voor responsiviteit, maar testen op verschillende schermformaten waarborgt optimale prestaties.

Zie ook

https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/https://www.nngroup.com/articles/gestalt-proximity/https://www.chrbutler.com/gestalt-principles-of-design-proximity