Bygg et lite designsystem før bedriftsnettstedet vokser ut av kontroll

Mange bedriftsnettsteder starter ryddig, men blir gradvis ujevne. Nye tjenester får egne sideløsninger, knapper kommer i flere varianter, overskrifter endrer størrelse og viktige budskap plasseres forskjellig fra side til side. Hver enkelt endring kan virke liten, men summen gjør nettstedet vanskeligere å bruke og dyrere å videreutvikle.

Løsningen trenger ikke være et omfattende designsystem laget for en stor organisasjon. For mange norske bedrifter er det tilstrekkelig med et lite, dokumentert sett av regler for struktur, navigasjon, typografi, farger, komponenter og handlinger. Målet er ikke at alle sider skal være like. Målet er at de skal oppleves som deler av samme nettsted.

Start med oppgavene nettstedet skal løse

Et designsystem bør ikke begynne med fargepaletten. Start med å avklare hvilke oppgaver besøkende kommer for å løse. En potensiell kunde vil kanskje forstå en tjeneste, vurdere om bedriften passer og ta kontakt. En eksisterende kunde kan være ute etter support, dokumentasjon eller kontaktinformasjon. En jobbsøker trenger andre innganger.

Lag en kort liste over de viktigste oppgavene, og prioriter dem. Listen gir retning for menyen, sidehierarkiet og hvilke komponenter dere faktisk trenger. Hvis tilbudsforespørsler er viktigst, må designet støtte veien fra behov til relevant tjeneste, dokumentasjon av kompetanse og en tydelig kontaktmulighet.

Uten denne prioriteringen blir designsystemet lett en samling visuelle regler uten tydelig forretningsmessig funksjon.

Definer noen få sidetyper

De fleste bedriftsnettsteder kan bygges rundt et begrenset antall sidetyper. Det kan for eksempel være forside, tjenesteside, temaside, kundehistorie, artikkel og kontaktside. Hver sidetype bør ha en anbefalt struktur, men samtidig gi redaktøren nok fleksibilitet til å tilpasse innholdet.

En tjenesteside kan ha denne grunnstrukturen:

1. En tydelig overskrift som beskriver tjenesten.
2. En kort forklaring på hvem tjenesten passer for.
3. Problemet eller behovet kunden ønsker å løse.
4. Hvordan bedriften arbeider og hva leveransen omfatter.
5. Dokumentasjon som kundehistorier, fagkompetanse eller konkrete eksempler.
6. Svar på vanlige spørsmål og innvendinger.
7. En relevant neste handling.

Strukturen hjelper brukeren med å finne svar i en logisk rekkefølge. Den gjør også publiseringen enklere. Redaktøren slipper å designe siden på nytt hver gang en tjeneste skal opprettes.

Gjør navigasjonen forutsigbar

Et designsystem må omfatte mer enn det visuelle uttrykket. Navigasjon er en sentral del av brukeropplevelsen, og den bør følge tydelige regler på tvers av hele nettstedet.

Bestem hvilke nivåer som kan vises i hovedmenyen, hvordan undermenyer fungerer, og hvor støttefunksjoner som innlogging, språkvalg og kontakt skal ligge. Bruk navn som besøkende forstår uten intern kjennskap til bedriften. Organisasjonsnavn, produktfamilier og interne avdelinger er ikke nødvendigvis gode menypunkter.

Den samme betegnelsen bør brukes konsekvent. Hvis menyen bruker ordet Tjenester, bør ikke brødsmuler, sideoverskrifter og knapper veksle mellom tjenester, løsninger og fagområder uten en god grunn.

Husk også brukere som ikke starter på forsiden. En person som kommer direkte til en artikkel eller tjenesteside, må kunne forstå hvor vedkommende befinner seg, hvilke relaterte sider som finnes, og hva som er et naturlig neste steg.

Lag et typografisk hierarki som tåler ekte innhold

Typografi handler ikke bare om valg av skrifttype. Det handler om lesbarhet, prioritering og rytme. Definer et begrenset antall nivåer for overskrifter, brødtekst, ingress, bildetekster og mindre hjelpetekster.

Test typografien med ekte innhold. En overskrift som fungerer med tre korte ord, kan bryte sammen når en tjeneste har et langt norsk navn. En knapp som ser ryddig ut med teksten Les mer, kan bli for trang med Bestill en uforpliktende vurdering.

Kontroller særlig at:

• Brødteksten har en størrelse og linjeavstand som er behagelig å lese.
• Tekstlinjene ikke blir unødvendig brede på store skjermer.
• Overskriftsnivåene er lette å skille fra hverandre.
• Fet skrift brukes til å fremheve poenger, ikke hele avsnitt.
• Store bokstaver ikke brukes på lange tekster eller uklare knapper.
• Teksten fortsatt fungerer når brukeren forstørrer den.

Et godt typografisk system hjelper brukeren med å skanne siden og forstå hva som er viktig. Det gjør også nettstedet mer gjenkjennelig uten at hver seksjon trenger dekorative virkemidler.

Oversett den visuelle identiteten til konkrete regler

En profilmanual beskriver ofte logo, farger og skrifttyper, men gir ikke nødvendigvis svar på hvordan identiteten skal fungere på en nettside. Nettstedet trenger derfor egne regler for bruk av profiluttrykket.

Definer hvilke farger som kan brukes til bakgrunner, tekst, lenker, knapper, varsler og dekorative flater. Det bør være tydelig hvilken knapp som er primær, og når en sekundær variant skal brukes. Hvis alle knapper får ulik farge og form, forsvinner signalet om hva som er viktigst.

Avklar også bildestilen. Skal bildene vise ansatte i arbeid, leveranser hos kunder, produkter i bruk eller miljøene bedriften opererer i? Ekte og relevante fotografier gir ofte mer troverdighet enn motiver som kunne ha tilhørt hvilken som helst virksomhet.

Visuell identitet skapes gjennom konsekvent bruk over tid. Logoen alene kan ikke gjøre jobben dersom resten av nettstedet oppleves tilfeldig.

Bygg tilgjengelighet inn i komponentene

Tilgjengelighet bør være en egenskap ved systemet, ikke en kontroll som kun utføres rett før publisering. Når grunnkomponentene er gjennomtenkte, blir det vanskeligere å lage utilgjengelige sider ved et uhell.

Knapper og lenker må være enkle å oppfatte og bruke. Fargekontraster må fungere i alle godkjente kombinasjoner. Skjemaer må ha tydelige ledetekster, forståelige feilmeldinger og logisk rekkefølge. Interaktive elementer må kunne brukes med tastatur, og fokusmarkeringen må være synlig.

Unngå å bruke farge som eneste signal. En feilmelding bør for eksempel ikke bare markeres med rødt, men også inneholde tekst som forklarer hva som må rettes. På samme måte bør en lenke være mulig å kjenne igjen uten at brukeren må oppfatte en liten fargeforskjell.

Komponentbiblioteket bør dessuten vise hva redaktøren må bidra med. Det kan være alternativ tekst til meningsbærende bilder, riktig overskriftsnivå og beskrivende lenketekster.

Standardiser handlingene som støtter konvertering

Konvertering blir ofte behandlet som plassering og farge på en knapp. I praksis handler det om å redusere usikkerhet og gjøre neste steg forståelig.

Definer et lite sett med handlinger, for eksempel å be om tilbud, bestille møte, kontakte fagperson, laste ned et dokument eller gå videre til en relevant tjeneste. Hver side bør ha én tydelig hovedhandling. Eventuelle sekundære handlinger skal ikke konkurrere visuelt med den.

Knappeteksten bør beskrive hva som skjer. Send forespørsel er tydeligere enn Kom i gang dersom knappen åpner et kontaktskjema. Hvis neste steg innebærer en samtale, kan dere også forklare hva brukeren kan forvente etter innsending.

Lag egne regler for hvor handlingene plasseres. På en lang tjenesteside kan hovedhandlingen gjentas etter sentrale beslutningspunkter, men den bør ha samme tekst og utforming. Stadig nye varianter gjør valget mer krevende.

Gi redaktørene frihet innenfor tydelige rammer

Et designsystem fungerer dårlig dersom det oppleves som et hinder. Redaktørene trenger nok fleksibilitet til å presentere ulike typer innhold, men ikke så mange valg at hver side får sitt eget uttrykk.

En god modell er å tilby et begrenset utvalg ferdige seksjoner. Det kan være introduksjon, tekst med bilde, punktliste, kundehistorie, sitat, spørsmål og svar, kontaktperson og handlingsfelt. For hver seksjon bør det være definert når den passer, hvilke felt som må fylles ut, og hvilke kombinasjoner som er tillatt.

Unngå frie innstillinger for skriftstørrelser, tilfeldige fargevalg og manuelle avstander. Slike valg virker praktiske i øyeblikket, men skaper raskt avvik som må ryddes opp senere.

Forvalt systemet som et arbeidsverktøy

Designsystemet bør ha en ansvarlig eier. Det kan være en person internt eller et samarbeid mellom bedriften og webbyrået. Nye komponenter bør opprettes fordi et reelt innholdsbehov ikke kan løses godt med eksisterende alternativer, ikke fordi én enkelt side skal se annerledes ut.

Gjennomgå systemet med jevne mellomrom. Se etter komponenter som sjelden brukes, varianter som har fått samme funksjon, og sider som bryter med mønstrene. Bruk også innsikt fra skjemaer, kundeservice og brukeratferd til å forbedre struktur og handlinger.

Et lite designsystem er vellykket når brukerne møter et forutsigbart nettsted, redaktørene publiserer raskere og bedriften kan utvikle nye sider uten å starte designarbeidet fra bunnen. Det gir ikke bare et jevnere visuelt uttrykk. Det skaper en mer robust kobling mellom innhold, brukerbehov og forretningsmål.