GOV.UK Design System

Hvad er GOV.UK Design System, og hvem står bag

GOV.UK Design System er et centralt bibliotek af genbrugelige designelementer og vejledninger, som britiske offentlige teams bruger til at bygge digitale services, der ser ud og opfører sig som GOV.UK. Forsiden formulerer kernen direkte: du skal "Design your service using GOV.UK styles, components and patterns." Det er en samlet ressource, der binder visuelt udtryk, genbrugelig kode og dokumenteret vejledning sammen ét sted.¹

Ressourcen vedligeholdes af et team i Government Digital Service (GDS), den enhed i den britiske centraladministration, der har ansvaret for fælles digital infrastruktur på tværs af staten. Siden gør det tydeligt, at systemet passes af "a team at the Government Digital Service", og at du kan kontakte teamet med spørgsmål, idéer og forslag. Ansvaret for kvalitet, opdatering og support ligger hos en fast, offentligt finansieret organisation og ikke hos et løst fællesskab uden ejerskab.¹

GDS står også bag de britiske Government Design Principles fra 2012, der blandt andet siger "Start with user needs" og "Build digital services, not websites". GOV.UK Design System gør de principper konkrete, så et udviklingsteam kan tage dem i brug fra dag ét uden at skulle genopfinde en dato-input eller en fejlopsummering fra bunden hver gang.¹⁶

Selve sitet er organiseret i faste hovedsektioner: Get started, Styles, Components, Patterns, Community og Accessibility. Strukturen afspejler, at ressourcen henvender sig til hele leverancekæden, fra designeren, der skal vælge det rigtige mønster, over udvikleren, der skal implementere det, til den, der har ansvar for, at servicen lever op til tilgængelighedskrav. Fordi det hele ligger samlet og offentligt tilgængeligt, kan du bruge sitet både som opslagsværk og som fælles referencepunkt i et team.¹

Hvad indeholder det: styles, komponenter og patterns

Indholdet falder i tre dele. Styles dækker det visuelle fundament: siden beskriver dem som guides til at "Make government services look like GOV.UK with guides for applying layout, typography, colour and images." Det er vejledning i, hvordan du anvender layout, typografi, farve og billeder konsistent, så to forskellige services stadig føles som samme afsender.¹

Komponenter er de genbrugelige byggeklodser. GDS beskriver dem som "reusable, accessible components for forms, navigation, panels, tables and more" og definerer dem mere præcist som "reusable parts of a user interface", hvor færdigbyggede kerneelementer gør det muligt for teams at bygge konsistente services. Biblioteket er stort og rummer blandt andet accordion, back link, breadcrumbs, button, character count, checkboxes, cookie banner, date input, details, error message, error summary, fieldset, file upload, GOV.UK header og footer, inset text, notification banner, pagination, panel, radios, select, service navigation, skip link, summary list, table, tabs, tag, task list, text input, textarea og warning text.²¹

Komponenterne leveres med mere end kode. Som GDS skriver, har "Each component in the GOV.UK Design System" både "guidance on its use" og "coded examples". Hver komponentside forklarer altså, hvornår og hvordan du bruger elementet, ikke blot hvordan det ser ud. En komponent kan desuden bruges i forskellige patterns og kontekster, og de kodede eksempler renderer ens, uanset om de bruges via GOV.UK Prototype Kit eller GOV.UK Frontend. Kombinationen af vejledning og kode gør systemet til et beslutningsværktøj.²

Patterns er det tredje lag. Forsiden beskriver dem som hjælp til at "complete common tasks like entering names and addresses, filling in forms and creating accounts", og patterns-siden definerer dem som "best practice design solutions for specific user-focused tasks and page types". Et pattern er altså en dokumenteret måde at løse en tilbagevendende brugeropgave på. Som GDS formulerer det, bruger patterns "often one or more components and explain how to adapt them to the context." Patterns er inddelt i tre grupper: at bede brugeren om noget (adresser, bankoplysninger, datoer, e-mailadresser, navne, adgangskoder, betalingskortoplysninger, telefonnumre m.m.), at hjælpe brugeren gennem en opgave (tjekke svar, udføre flere opgaver, komme sig efter valideringsfejl, oprette konti, navigere), og komplette sidetyper (bekræftelsessider, cookie-sider, 404-sider, spørgsmålssider m.fl.).¹³

Forskellen mellem komponent og pattern er praktisk vigtig, når du bruger systemet. En komponent svarer på "hvilket UI-element skal jeg bruge", mens et pattern svarer på "hvordan løser jeg hele denne brugeropgave godt". Vil du for eksempel bede en bruger om en fødselsdato, kan du bruge date input-komponenten, men patternet for datoer fortæller dig, hvornår tre separate felter er bedre end en kalendervælger, og hvordan du håndterer omtrentlige datoer.³²

Hvorfor det bliver holdt frem som et forbillede

En stor del af grunden til systemets status er tilgængelighed. Komponenterne beskrives eksplicit som "accessible", og der findes en dedikeret Accessibility-sektion med en accessibility statement og en accessibility-strategi. Vigtigere for troværdigheden er, at GDS er ærlige om grænserne: de skriver direkte, at "Using the GOV.UK Design System in a service does not immediately make that service accessible", og at der skal "additional research, design, development and testing work" til. Det modvirker den udbredte misforståelse, at man kan "købe sig" til compliance ved at bruge et bibliotek.⁴

GDS beskriver desuden arbejdet med tilgængelighed som "a continuous and iterative process". Systemet behandler tilgængelighed som noget, der løbende revideres, efterhånden som teknologi, assisterende værktøjer og standarder udvikler sig. For dig, der arbejder med tilgængelighed, betyder det, at komponenterne er et fornuftigt udgangspunkt, men at ansvaret for den samlede services tilgængelighed stadig ligger hos dit team.⁴

Den anden søjle er, at systemet er brugstestet og forskningsbaseret. Patterns præsenteres som "best practice design solutions", og hele ressourcen bygger på erfaring fra rigtige offentlige services og deres brugere. Communityen kører desuden "'Always on' continuous research sessions", hvor folk fortæller, hvordan de bruger Design System, med det udtrykte mål at "stay in touch with the needs of our users and continuously improve our work." Vejledningen bliver løbende holdt op mod, hvordan tingene fungerer i praksis.³⁵

Den tredje søjle er åbenhed. Indholdet er tilgængeligt under Open Government Licence v3.0, og koden ligger på GitHub under en MIT-licens. Systemet er derfor gratis at bruge og genbruge, udviklingen sker i det åbne, og hvem som helst kan læse, hvorfor beslutninger er truffet. Kombinationen af fast institutionelt ejerskab i GDS og en åben, gennemsigtig proces er en model for, hvordan et offentligt designsystem kan drives.¹²

Sådan bruger du det, også uden for UK

Bygger du en britisk offentlig service, tager du systemet i brug direkte. Get started-sektionen leder dig videre til de tekniske pakker, og de kodede eksempler renderer ens, uanset om du prototyper med GOV.UK Prototype Kit eller bygger produktion med GOV.UK Frontend. Du får dermed et konsistent visuelt udtryk, genbrugelig kode og dokumenteret vejledning i samme arbejdsgang. Og fordi styles, komponenter og patterns hænger sammen, kan du bevæge dig fra idé til fungerende side uden at skulle bygge basale elementer selv.¹²

Men det meste af værdien er ikke bundet til den britiske stat. Selve komponentkoden er tæt knyttet til GOV.UK's visuelle identitet, og den vil du typisk ikke overføre direkte til et privat produkt eller en dansk myndighed med egen designlinje. Vejledningen bag er derimod i høj grad domæneuafhængig. Når patternet for adresser, navne eller valideringsfejl forklarer, hvorfor en løsning fungerer, gælder ræsonnementet uanset, hvilket land eller brand du designer for. Du kan altså bruge Design System som et opslagsværk over gennemtænkte, brugstestede løsninger, selv når du ikke bruger en eneste linje af koden.³²

En praktisk arbejdsmåde er at bruge patterns-siden som tjekliste, når du står over for en velkendt opgave. Skal brugeren indtaste en dato, oprette en konto, bekræfte sine svar eller komme sig efter en fejl, så slå det tilsvarende pattern op og læs GDS' begrundelser, før du beslutter dig. Selv hvis du ender med en anden løsning på grund af dit eget domæne, har du så truffet valget bevidst og med kendskab til, hvad GDS er nået frem til.³

Vær samtidig opmærksom på den advarsel, GDS selv giver: at bruge systemet gør ikke automatisk din service tilgængelig eller god. Komponenter og patterns er et stærkt fundament, men de erstatter ikke din egen research, dit design, din udvikling og din test i den konkrete kontekst. Brug ressourcen som et velunderbygget udgangspunkt og et fælles sprog i teamet, ikke som en garanti for kvalitet, du kan læne dig tilbage på.⁴

Adgang, licens og vedligeholdelse

Adgangen er fri. Alt indhold på sitet er tilgængeligt under Open Government Licence v3.0 "except where otherwise stated", og den tilhørende frontend-kode ligger offentligt på GitHub under MIT-licens. Der er ingen betalingsmur, ingen registrering og ingen kommerciel bagvedliggende model. Det er en offentligt finansieret fællesressource, du frit kan læse, bruge og genbruge inden for licensens rammer.¹²

Vedligeholdelsen er aktiv og struktureret. Systemet er versioneret med semantisk versionering, og release notes offentliggøres på GitHub, så du kan følge, hvad der ændrer sig fra version til version. Formel versionering og en offentlig ændringslog gør systemet forudsigeligt at bygge oven på, fordi du kan se, hvornår noget er en rettelse, en tilføjelse eller en brydende ændring.¹

Bag vedligeholdelsen står en levende community. GDS skriver, at de "depend on a strong cross-government community to ensure the Design System includes the latest research, design and development". Feedback og diskussion foregår i det åbne på GitHub, hvor der føres en liste over alle diskussioner, og statsansatte koordinerer desuden via Slack-kanalen #govuk-design-system. Der afholdes månedlige catchups og workshops, hvor teams deler idéer og feedback om igangværende arbejde. Nye komponenter og patterns kan foreslås og bygges af communityen og gennemgås derefter mod fastlagte bidragskriterier af Design System-teamet.⁵

Kombinationen af åbent bidrag og redaktionel kvalitetskontrol hos et fast team lader systemet udvikle sig hurtigt og samtidig bevare konsistens. Ressourcen opdateres løbende i takt med ny research og nye behov. Vil du bidrage, følge udviklingen eller bare forstå baggrunden for en beslutning, kan du gøre det i det åbne.⁵

Ofte stillede spørgsmål

Kilder

1. GOV.UK Design SystemGovernment Digital Service (GDS) · Forside: definition af styles, komponenter og patterns, ejerskab hos GDS, Open Government Licence v3.0.
2. Components — GOV.UK Design SystemGovernment Digital Service (GDS) · Definition af komponenter, liste over komponenter, vejledning plus kodede eksempler, MIT-licens på GitHub.
3. Patterns — GOV.UK Design SystemGovernment Digital Service (GDS) · Definition af patterns som best practice-løsninger, forholdet mellem patterns og komponenter, oversigt over patterns.
4. Accessibility — GOV.UK Design SystemGovernment Digital Service (GDS) · Udsagn om at brug af systemet ikke i sig selv gør en service tilgængelig, og at tilgængelighedsarbejdet er en løbende proces.
5. Community — GOV.UK Design SystemGovernment Digital Service (GDS) · Beskrivelse af tværstatslig community, GitHub-diskussioner, Slack, research-sessioner og bidragsproces.
6. Government Design PrinciplesGovernment Digital Service (GDS) / Central Digital and Data Office · De britiske designprincipper for offentlige digitale services, først udgivet 3. april 2012; bl.a. "Start with user needs" og "Build digital services, not websites".