AU designsystem gør det lettere at leve op til tilgængelighedsloven

9. september 2019 af Karen Bjorholm Viberg

I Brugeroplevelser har vi den seneste tid arbejdet på at udvikle og fastlægge et designsystem, som er en systematisk tilgang til de farver, fonte, afstande og komponenter, der bruges i digitalt design. Dvs. en fastlæggelse af fx overskriftsstørrelser, primære og sekundære farver, formulardesign m.m.

I udviklingen af designsystemet har vi især brugt meget energi på at sikre god tilgængelighed og overholdelse af den nye tilgængelighedslov. For eksempel hvilke farver vi kan bruge sammen for at sikre bedst mulig kontrast, og hvordan en formular skal kodes for at fungere optimalt med en skærmlæser – begge dele til glæde for synshandicappede. I designsystemet er der således fastsat gode digitale versioner af AU’s 9 officielle brandfarver. Brug af designsystemet kan derfor være en genvej til at overholde tilgængelighedsloven, som træder i kraft for mange af vores systemer i september 2020.

Der er dog også en række andre fordele ved at have og bruge et designsystem:

Tidsbesparelse for både udviklere og ux’ere, fordi der ikke er et ”photoshop”-design, der skal designes og kodes helt fra bunden. Med designsystemets css- og html-pakke er der et godt fundament at starte på.
Matematisk forhold mellem forskellige tekststørrelser og afstande, så det hele ser harmonisk ud på
De komponenter, der lægges ind i systemer er grundigt researchet, så de overholder generelle webkonventioner. Det betyder øget brugervenlighed i vores systemer.
Vi kan opnå større konsistens på tværs af systemer, hvis vi fx bruger de samme ikoner med samme betydning. Det samme gælder formulardesign, søgefunktioner og meget mere.
Lækre features, som der sjældent er tid til at tage højde for i enkelte projekter. Fx maks-længde på p-tags, så linjer aldrig bliver for lange, og enkle små animationer på interaktionselementer.

Gode erfaringer med designsystemet i projekter

Designsystemet er allerede blevet brugt i projekterne 726 Formular og -workflowhåndtering og 804 Udfasning af mit.au.dk. Her er oplevelsen at både ux’ere og udviklere hurtigere kan lave både prototyper og udviklede komponenter, fordi en del basal css-kode er givet og der er færre designvalg, der skal træffes.

Designsystemet kan også bruges i forbindelse med konfiguration af farver, fonte m.m. i standardsystemer. Her vil fordelen især være, at man sikrer overholdelse af tilgængelighedsloven og WCAG 2.1-standarden, samt at det øger konsistensen med øvrige AU-systemer.

Hvem har gjort jer til designpoliti?

I Brugeroplevelser har vi ikke mandat til at fastlægge AU’s digitale design – det er der vist nærmest ingen der har. Men vi har løbende koordineret med AU’s grafikere i Forskning og Eksterne relationer, således at designsystemet er alignet med AU’s overordnede visuelle brand. Designsystemet udbygges desuden løbende ved at nogle af de komponenter UX’erne designer i projekter også fastlægges som mere generelle standarder.

Se designsystemet

Designsystemet er pt fastholdt på https://delphinus.surge.sh. Her er man velkommen til at kigge med. Hvis nogen er interesseret i at høre mere eller at bruge designsystemet i konkrete projekter, så kontakt Claus Stadel Petersen på claus.stadel@au.dk eller Thomas Riis Hansen på trh@au.dk.