Vad är ett komponent­bibliotek?

En komponent kan vara en mindre självständig del, som ett formulärfält eller en knapp, eller en större del bestående av flera komponenter, exempelvis ett formulär eller en dialogruta eller en sidfot.

Gemensamt för alla komponenter är att de inte bara visar eller beskriver hur något ska se ut – de är komponenterna, med HTML, CSS och JavaScript färdigt för utvecklare att hämta. Poängen är att innehållet kan återanvändas om och om igen i utvecklingen av nya webbsidor eller vid vidareutveckling av den befintliga webbplatsen. Förutom att det sparar mängder med tid, skapar det kontinuitet mellan olika plattformar och kvalitetssäkrar automatiskt alla leveranser.

Det handlar nämligen inte bara om att skapa en samling komponenter. Det handlar i synnerhet om att göra det bra. En bra komponent uppfyller kraven på prestanda, tillgänglighet, och användbarhet. Och när personen som äger komponentbiblioteket vet att det lever upp till detta kan hen vara trygg med att alla framtida leveranser också kommer göra det – så länge utvecklarna nyttjar komponentbiblioteket.

En effekt av användningen av ett komponentbibliotek är att man kan försäkra sig om att slutanvändaren hela tiden är i centrum. Det finns inte utrymme för någon i ett projekt att med sitt eget godtycke ändra i någonting, vilket lätt sker eller till och med förväntas ske när man designar något.

Hur markerar man ett interaktivt element? Hur beter sig en navigation eller olika flikar och tabbar på olika skärmar? Den här typen av frågor om hur komponenterna beter sig påverkar också användarens uppfattning om varumärket – och ett komponentbibliotek hjälper till att standardisera detta. Gör man det rätt stödjer man inte bara sina egna användare utan också processen att standardisera en användarcentrerad webb.

Komponentbiblioteket bygger på de principer och riktlinjer som styr varumärket. Modulerna går att återanvända om och om igen för att säkra samma upplevelse på webbplatser, i digitala produkter och PWA:er.

För att få maximal nytta av det här sättet att jobba gäller det att ta till sig det långsiktiga tänket. Därför är det viktigt att det är komponentbiblioteket man hela tiden hämtar sina byggsstenar ifrån. Och om man inte kan motivera varför något ska ändras i komponentbiblioteket finns det antagligen heller ingen anledning att göra det.

I teorin kanske det låter ganska självklart att alltid utgå från komponentbiblioteket. I verkligheten är det här ofta en utmaning. Ju större organisation, desto mer kraft behöver man lägga på att förankra det här sättet att jobba, och att motivera beställare, UX-designers och utvecklare att följa det.

Att jobba komponentbaserat med både visuell design och frontendutveckling är egentligen inget nytt. I ett tidigare blogginlägg har jag till exempel beskrivit hur jag jobbar med modulär design, med verktyg som Sketch och Figma. Att ta fram webb i mindre delar som kombineras och fungerar i större sammanhang känns intuitivt. Själva grundtanken är givetvis urgammal.

På senare år har den här typen av visuella systemtänk fått ett uppsving bland annat genom att stora digitala aktörer lett vägen. Google, som var tidiga med ett uttalat användarcentrerat fokus (ett av deras mantran är ”Focus on the user and all else will follow”), lanserade 2014 sitt designsystem Material Design som fått stor spridning. Microsoft, Apple och Salesforce är exempel på andra företag som implementerat sina egna system.

På Whitespace har vi arbetat in komponentbibliotek som en naturlig del av vår leverans. När vi bygger en webbplats skapar vi också ett parallellt komponentbibliotek. Fast skapar är egentligen fel ord. Själva biblioteket hämtas ju direkt från vårt utvecklingsverktyg – det är så vi bygger webbplatser. Ett komponentbibliotek är alltså ingenting som behöver kosta något att ta fram, det kommer sig naturligt genom våra arbetsmetoder.

Komponentbiblioteket måste naturligtvis också förvaltas och utvecklas i takt med allt annat. Har man dessutom ett komponentbibliotek på plats finns det goda utvecklingsmöjligheter att skapa en samlad plats för alla design- och varumärkesmanualer. Kan man samla komponentbibliotek och exempelvis bildbank, ikoner, grafisk manual och tone of voice på en och samma portal, och även göra det väldigt tillgängligt, för det är nyckeln i detta, då är man redan mycket längre fram än många andra företag.

1. Att varumärket hänger ihop i olika digitala kanaler.
2. Man bygger det en gång men drar nytta av det för alltid – i alla kommande utvecklingsprojekt.
3. Säkerställer kvalitet och kontinuitet. Även om man byter webbyrå en gång i kvartalet äger man kontroll över komponenterna.
4. Du kan jobba agilt, och komponentbiblioteket kan byggas ut så mycket eller så lite man vill.

Linn Nilsson är UX-designer på Whitespace. Linn brinner för användbara och tillgängliga gränssnitt.