<aside> 👉

Hva vil du sitte igjen med etter å ha lest denne artikkelen? Du vil få en oversikt over hvilke komponenter som ofte inngår i et komponentbibliotek, og tips til hvordan du kan strukturere og prioritere arbeidet med å bygge eller utvide komponentbiblioteket ditt.

</aside>

Et godt komponentbibliotek er en av de mest sentrale bestanddelene i et designsystem for å bygge effektive og konsistente digitale produkter. Men hvilke komponenter bør egentlig inkluderes for å dekke behovene til sluttbrukere, utviklere og designere? Og hvordan bør man prioritere implementeringen av dem?

Hvorfor trenger man et komponentbibliotek?

Et komponentbibliotek er en sentralisert samling av alle byggeklossene som trengs for å bygge et digitalt grensesnitt, slik som knapper og inputfelter, designet og utviklet én gang for å kunne brukes igjen og igjen.

Ved å bruke komponenter fra et slikt bibliotek kan designere og utviklere spare tid ved å unngå å lage de samme elementene fra bunn av hver gang. Endringer og vedlikehold gjøres ett sted og oppdateres automatisk overalt hvor komponenten er brukt. Et komponentbibliotek vil dermed gjøre det raskere og enklere å lage digitale produkter som ser like ut og fungerer på samme måte på tvers i en organisasjon.

Hvilke komponenter inngår typisk i et komponentbibliotek?

Komponentbiblioteket i et designsystem bør inneholde de mest grunnleggende og ofte brukte komponenter i de digitale flatene til en organisasjon. Det omfatter gjerne kjernekomponenter som knapper og typografi, og mer komplekse komponenter som tabeller og modaler.

For å gjøre biblioteket enklere å navigere i, velger noen å organisere komponentene i overordnede kategorier utifra hvilken funksjon de har slik som knappeelementer, navigasjonselementer, skjemaelementer, layoutelementer og feedback-elementer. Andre igjen skiller mellom kjernekomponenter (du har kanskje hørt uttrykket «core components»?) og sammensatte komponenter (såkalte «nested components»). Slike inndelinger kan være nyttige for å strukturere biblioteket og gjøre det enklere for brukerne av designsystemet å finne det de trenger, men er ikke nødvendigvis et krav. Her må man gjøre det som passer best for organisasjonen og gir mest mening for de som skal bruke biblioteket.

Nedenfor vil komponentene forklares og inndeles på bakgrunn av funksjonen deres, for å gjøre det enklere å få et overblikk over hva som bør inngå i et komponentbibliotek, og hvorfor.

Knappeelementer

Knappeelementer er interaktive komponenter som utløser en spesifikk handling eller setter i gang en prosess når brukeren klikker på dem. De er essensielle for å la brukeren utføre en funksjonell oppgave.

• Avatar En avatar-komponent brukes til å representere en brukerprofil ved å vise enten et profilbilde, initialer eller et ikon.
• Button Knapper lar brukeren utføre en handling og ta valg med et klikk. Knapper finnes i flere varianter og størrelser, slik som for eksempel primærknapp, sekundærknapp og ikonknapp.
• Chips Chips er små og kompakte knapper med tekst og ikoner som brukes for mindre sentrale handlinger hvor det ikke passer å bruke vanlig knapp.
• Link **Lenke-komponenten er en knapp som navigerer brukeren til en annen del av tjenesten eller til en ekstern nettside via en URL. Eksterne lenker bør ha et ikon som tydelig viser at de tar brukeren til en ekstern nettside.

Navigasjonselementer

Navigasjonelementer er komponenter som hjelper brukeren med å finne frem og bevege seg rundt til ulike deler i en digital tjeneste. Slike komponenter bidrar til en effektiv og oversiktlig brukeropplevelse.