Interactieve elementen

In onze Campus Experience System (CXS) richtlijnen spelen interactieve elementen, zoals knoppen en links, een cruciale rol. Deze elementen zijn ontworpen met gebruiksgemak en toegankelijkheid in gedachten, en daarom zorgen we voor voldoende ruimte om ze intuïtief en veilig te gebruiken, zelfs op apparaten met touchscreens. De ruimte rond interactieve elementen draagt bij aan een aangename gebruikerservaring en minimaliseert fouten bij het navigeren.

Belangrijke richtlijnen voor interactieve elementen

Om de toegankelijkheid en intuïtiviteit van onze interactieve componenten te waarborgen, hanteren we de volgende richtlijnen:

• Touch targets: Alle interactieve elementen hebben een minimale afmeting van 48px x 48px. Deze maat biedt voldoende ruimte voor een comfortabele aanraking, zodat gebruikers nauwkeurig kunnen navigeren. Deze afmeting voldoet aan de WCAG-criteria 2.5.8: Doelgrootte (minimaal), wat essentieel is voor een inclusieve ervaring op mobiele apparaten en tablets.
• Consistente padding: Padding rondom de inhoud van knoppen en links is van groot belang voor de visuele balans en gebruiksvriendelijkheid. Consistente padding zorgt ervoor dat teksten binnen knoppen altijd goed leesbaar zijn en visueel in het midden staan. Gebruik een ruimere padding-waarde voor inline (met de tekst) en een kleinere padding-waarde voor block (boven en onder de tekst).

Ruimte rond en tussen elementen

Afstand tussen interactieve elementen helpt gebruikers om afzonderlijke keuzes te onderscheiden en maakt de interface beter te navigeren. Door middel van visuele hiërarchie en Gestaltprincipes zoals de wet van nabijheid, creëren we ruimte die duidelijkheid en intuïtie bevordert. Zie ook relaties.

Belangrijke overwegingen:

• Groeperen van gerelateerde elementen: Interactieve elementen die bij elkaar horen, worden gegroepeerd met kleinere gaps om een visuele connectie te versterken. Dit helpt gebruikers bij het snel begrijpen van logische relaties.
• Afstand voor begrijpelijkheid en precisie: Knoppen en andere touch-elementen staan niet te dicht bij elkaar om per ongeluk klikken te voorkomen en de interface eenvoudiger te maken.

Praktische tips voor ontwerpers en ontwikkelaars

Voor een effectieve toepassing van ruimte bij interactieve elementen, houd rekening met de volgende richtlijnen:

• Gebruik tokens voor touch-targets: Pas de minimale afmetingen voor interactieve elementen consistent toe met behulp van de volgende tokens:
  • --cds-sys-dimension-touch-target: 48px voor de totale targetgrootte.
  • --cds-sys-dimension-touch-content: 40px voor de inhoudsruimte binnen het interactieve element.
  • --cds-sys-dimension-touch-content-min: 32px als de minimale contentgrootte voor kleinere elementen.

Deze tokens helpen om de juiste afmetingen te waarborgen en voldoen aan toegankelijkheidsnormen, en zijn bovendien niet afhankelijk van fluid scaling, wat zorgt voor een stabiele ervaring op diverse schermformaten.

Door deze tokens toe te passen, creëren we een consistente, toegankelijke en gebruiksvriendelijke interface voor een breed scala aan gebruikers en apparaten.