Derfor bør en webshop have et design system

Et design system er ikke en stilguide i en PDF. Det er komponenter, regler og variabler, som både designere og udviklere arbejder direkte i.

Forskellen mærkes første gang en ny landingsside skal bygges. Med en PDF sidder nogen og genskaber knapper, afstande og farver ud fra et billede, og resultatet ligner shoppen på afstand. Med et system samles siden af dele, der allerede findes, og den ligner shoppen, fordi den er bygget af shoppen.

Den praktiske prøve er enkel: kan en ny farve på den primære knap rulles ud overalt ved at rette ét sted? Kan den ikke det, har I en stilguide. Det kan sagtens være nok, men så skal forventningen til tempoet følge med.

En webshop har et forholdsvis afgrænset sæt af elementer, der gentager sig. Det gør dem taknemmelige at sætte i system, og listen er som regel kortere, end folk tror:

• Produktkort med pris, førpris og badge
• Knapper i to eller tre niveauer
• Prisvisning med tilbud, styk- og literpris
• Formularfelter, fejlbeskeder og kvitteringer
• Bannere og kampagnesektioner
• Filtre, sortering og paginering
• Anmeldelser, leveringsbesked og betalingsikoner

Hvert element defineres én gang i designværktøjet og bygges én gang i koden. Derefter kan kampagneteamet stille en ny side op uden at vente på en designer, og uden at en udvikler skal tage stilling til, om en afstand skal være 24 eller 32 pixels. Den slags valg er truffet på forhånd, én gang for alle.

Systemet har tre lag, og de bliver ofte blandet sammen.

Tokens er de værdier, alt andet peger på. Komponenter er de dele, sider samles af. Mønstre er opskrifterne på hele sider.

De fleste systemer, vi overtager, har komponenter, men ingen tokens. Så står farvekoder og afstande skrevet direkte ind i halvtreds filer, og en justering af brandfarven bliver et projekt i stedet for en rettelse. Rækkefølgen betaler sig: tokens i bund, komponenter ovenpå.

Et design system behøver ikke begynde som et projekt med eget budget og et halvt års horisont. De systemer, vi har set overleve, begyndte som noget, der skulle laves alligevel.

Vi plejer at tage den næste kampagneside og bygge den ordentligt. Hver gang vi får brug for en knap, et kort eller en sektion, lægger vi den ind i systemet i stedet for at lave den lokalt på siden. Den næste kampagne genbruger halvdelen. Den tredje genbruger det meste.

Rækkefølgen, der virker i praksis: tokens først, så de fire-fem mest brugte komponenter, så et par hele sidemønstre. Den omvendte vej, hvor alt skal være dokumenteret, før noget må bruges, ender som regel i en mappe, ingen åbner.

Gevinsten er ikke kun tempo. En kunde, der klikker på en annonce, lander på en side og senere får en mail, danner sig et indtryk af, om I hænger sammen. De små skift i farve, skrift og knapform bliver ikke registreret bevidst, men de tæller med.

For en webshop er det tydeligst i købsflowet. Ser kurven og betalingssiden ud, som om de kommer fra et andet firma, går der et øjeblik, hvor kunden overvejer, om det her er sikkert nok.

Genkendelighed er billigere end overtalelse.

Et system skaber ikke tillid i sig selv. Det fjerner de utilsigtede brud, så det, kunden lægger mærke til, er det, I faktisk har besluttet.

Et system uden ejer forfalder. Rollen behøver ikke være fuldtid, men der skal stå et navn på den.

Ejeren har tre opgaver. At afgøre, om noget nyt hører hjemme i systemet eller er en engangsting. At holde designværktøj og kode i takt, så en komponent ikke findes i to udgaver, der langsomt driver fra hinanden. Og at sige nej tit nok til, at antallet af komponenter ikke vokser ud over, hvad nogen kan overskue.

Vi støder ofte på systemer med fire varianter af den samme knap, fordi tre forskellige mennesker havde travlt på tre forskellige tidspunkter. Ingen af dem gjorde noget forkert. Der var bare ingen, hvis opgave det var at rydde op bagefter.

Der er nogle tydelige tegn på forfald, og de kommer som regel i den samme rækkefølge.

Først dukker der lokale tilretninger op i koden. Små justeringer af afstand eller farve lige dér, hvor det skulle gå stærkt. Derefter begynder designfilerne og koden at være uenige om, hvordan en komponent ser ud. Til sidst bygger folk nyt i stedet for at lede, fordi det går hurtigere end at finde ud af, hvad der allerede findes.

Modtrækket er ikke en stor oprydning en gang om året. Det er en fast halv time, hvor tilretningerne enten bliver til rigtige varianter i systemet eller bliver rullet tilbage. Jo længere man venter, desto mere kommer opgaven til at ligne et redesign.

Effekten af et design system er svær at sætte i en graf, men den kan mærkes på tre forhold.

Hvor lang tid går der, fra en kampagne er besluttet, til siden er live? Hvor mange gange skal den forbi en designer undervejs? Og hvor mange sider på shoppen kan I selv se er bygget uden om systemet?

Mål det groft, inden I går i gang, og igen efter et halvt år. Tallene behøver ikke være præcise for at vise en retning.

Det, vi som regel hører først fra kunderne, er noget helt andet: at der er færre diskussioner om detaljer. Når rammen ligger fast, handler samtalen om indhold i stedet for om pixels.