Bygg et lite designsystem som holder bedriftsnettstedet samlet

Kategori: Webdesign og UX

Et bedriftsnettsted blir sjelden uoversiktlig på én dag. Uroen oppstår gradvis: En ny knapp får en annen farge, en kampanjeside bruker egne overskrifter, og kontaktskjemaet løser avstander på en tredje måte. Hver enkelt endring kan virke fornuftig, men summen blir et nettsted som er vanskeligere å forstå, vedlikeholde og bruke.

Et lite designsystem kan motvirke dette. Det trenger ikke være et omfattende bibliotek eller et stort teknologiprosjekt. For mange norske bedrifter er det nok med et tydelig sett regler for sidetyper, navigasjon, typografi, farger, komponenter og handlinger. Målet er ikke at alle sider skal se identiske ut. Målet er at brukeren skal kjenne igjen hvordan nettstedet fungerer.

Hva et lite designsystem skal løse

Et designsystem er en felles fasit for hvordan nettstedet skal bygges og utvikles. Det kobler visuell identitet til praktiske brukerbehov. Når en redaktør skal lage en ny tjenesteside, skal vedkommende slippe å finne opp struktur, knappestil og avstander på nytt.

For en mindre eller mellomstor bedrift bør systemet først og fremst svare på disse spørsmålene:

• Hvilke sidetyper trenger vi, og hva er oppgaven til hver sidetype?
• Hvordan beveger brukerne seg mellom hovedområdene?
• Hvordan ser overskrifter, brødtekst, lenker og knapper ut?
• Hvilke farger kan brukes til informasjon, handlinger og statusmeldinger?
• Hvilke komponenter kan redaktørene velge mellom?
• Hvordan sikrer vi tilgjengelighet og tydelig konvertering?

Hvis systemet ikke gir svar på disse spørsmålene, er det trolig mer en grafisk profil enn et verktøy for webdesign.

Start med å kartlegge det dere allerede har

Før dere lager nye regler, bør dere finne variasjonene som finnes på nettstedet. Velg et representativt utvalg sider: forsiden, en tjenesteside, en artikkel, en kontaktside, en landingsside og gjerne et skjema eller en produktside.

Registrer hvilke varianter dere finner av overskrifter, knapper, kort, skjemafelt, bakgrunnsfarger, ikonbruk og avstander. Ta også med navigasjonselementer som hovedmeny, mobilmeny, brødsmulesti og lenker i bunnområdet.

Det er vanlig å oppdage flere nesten like løsninger. Kanskje nettstedet har fire blåfarger, tre knappetyper og flere måter å vise en tjeneste på. Ikke bestem dere for en vinner ut fra smak alene. Vurder hvilken variant som er tydeligst, fungerer best på små skjermer og er enklest å bruke med tastatur og hjelpemidler.

Definer sidetyper før enkeltkomponenter

Mange begynner med knapper og farger. Det er mer nyttig å starte med sidetypene. En sidetype beskriver hvilken oppgave siden har, og hvilke innholdselementer den vanligvis trenger.

En enkel modell kan bestå av:

• Tjenesteside som forklarer behov, løsning, arbeidsform og neste steg.
• Artikkelside som gir faglig veiledning og leder videre til relevant tjeneste.
• Landingsside som er spisset mot én målgruppe, kampanje eller henvendelse.
• Kontaktside som gjør det enkelt å velge riktig kontaktmåte.
• Om oss-side som dokumenterer kompetanse, mennesker og arbeidsform.

For hver sidetype bør dere beskrive obligatoriske og valgfrie seksjoner. En tjenesteside kan for eksempel alltid ha en tydelig innledning, en forklaring av leveransen og et relevant neste steg. Kundehistorier eller vanlige spørsmål kan være valgfrie.

Denne strukturen gir redaktørene frihet innenfor forutsigbare rammer. Samtidig reduserer den risikoen for at nye sider blir lange samlinger av tilfeldige innholdsblokker.

Gjør navigasjonen til en del av systemet

Navigasjon handler ikke bare om hva som står i hovedmenyen. Et godt system beskriver også hvordan brukeren finner tilbake, går videre og forstår hvor innholdet hører hjemme.

Begrens hovedmenyen til de viktigste områdene. Menypunktene bør bruke ord kundene forstår, ikke interne avdelingsnavn. Hvis et punkt krever forklaring fra en ansatt, er det sannsynligvis ikke tydelig nok.

Bestem også faste regler for lokale menyer, brødsmulesti og relaterte lenker. En artikkel kan for eksempel alltid avsluttes med én relevant tjeneste og et lite utvalg videre lesning. En tjenesteside kan peke til kontakt, arbeidsprosess eller en relevant kundehistorie.

Mobilnavigasjonen må vurderes som en egen situasjon. Kontroller at menyknappen er lett å finne, at undermenyer er forståelige, og at kontaktinformasjon ikke skyves ned bak mange valg. Ikke anta at en komprimert skrivebordsmeny automatisk fungerer på telefon.

Lag et typografisk hierarki som tåler ekte innhold

Typografi skal hjelpe brukeren med å skanne, forstå og lese. Definer et begrenset antall tekstnivåer: sidetittel, hovedoverskrift, mellomoverskrift, brødtekst, ingress, bildetekst og eventuelt liten hjelpetekst.

Hvert nivå bør ha regler for størrelse, linjehøyde, vekt og avstand. Test med realistiske tekster, inkludert lange norske sammensatte ord. En overskrift som ser god ut med to korte ord, kan bryte sammen når den møter et faktisk tjenestenavn.

Brødteksten må ha god kontrast og tilstrekkelig størrelse. Linjene bør ikke være så lange at leseren mister retningen. Bruk fet skrift med måte, og unngå lange partier i versaler. Lenker må kunne identifiseres uten at brukeren er avhengig av farge alene.

Velg helst få skrifttyper og snitt. Mange varianter gir sjelden bedre kommunikasjon, men gjør designet vanskeligere å styre og kan påvirke lastetiden.

Oversett visuell identitet til funksjonelle regler

En profilfarge er ikke automatisk en god knappfarge. Logo, farger og grafiske elementer må tilpasses digitale flater og konkrete funksjoner.

Gi fargene tydelige roller. Én farge kan brukes til primære handlinger, mens andre støtter bakgrunner, informasjon, varsler og feil. Da unngår dere at samme rødfarge både betyr «send inn» og «noe gikk galt».

Beskriv også bruk av bilder, illustrasjoner og ikoner. Hvis autentiske bilder av ansatte og arbeidssituasjoner er en viktig del av identiteten, bør systemet si noe om utsnitt, lys, motiv og hvor bildene skal brukes. Det skaper større sammenheng enn et tilfeldig utvalg bilder med samme fargetone.

Visuell identitet bør dessuten fungere når innholdet forstørres, når siden brukes uten bilder, og når kontrastbehovet er høyere. En gjenkjennelig merkevare kan ikke være avhengig av svake farger eller dekorative detaljer alene.

Standardiser komponentene som påvirker konvertering

Knapper, skjemaer, kontaktkort og handlingsfelt påvirker om brukeren kommer videre. Derfor bør de være blant de mest gjennomarbeidede delene av systemet.

Definer én primær og én sekundær knappestil. Den primære brukes til sidens viktigste neste steg, som å be om tilbud eller bestille en samtale. Den sekundære brukes til mindre forpliktende valg, som å lese om prosessen. Hvis alt får samme visuelle tyngde, blir det vanskelig å velge.

Knappetekster bør beskrive handlingen konkret. «Send forespørsel» er tydeligere enn «Klikk her». Sørg også for at lenker som ser ut som knapper, oppfører seg forutsigbart.

For skjemaer bør systemet beskrive etiketter, hjelpetekster, feilmeldinger, obligatoriske felt og bekreftelse etter innsending. Feil må forklares i tekst og knyttes til riktig felt. Ikke bruk bare en rød ramme som signal.

Konvertering handler ikke nødvendigvis om flere knapper. Ofte handler det om å redusere tvil: Hva skjer etter innsending? Hvor lang tid tar det å få svar? Hvilke opplysninger trenger bedriften? Slike svar bør være en del av komponenten rundt handlingen.

Bygg tilgjengelighet inn i reglene

Tilgjengelighet bør ikke ligge som en kontroll til slutt. Legg kravene inn i hver komponent. En knapp trenger synlig fokusmarkering. Et skjemafelt trenger en varig etikett. En meny må kunne brukes med tastatur. En tekst oppå et bilde må ha tilstrekkelig kontrast i alle aktuelle utsnitt.

Beskriv flere tilstander enn standardsituasjonen. Komponenter kan være i fokus, aktive, deaktivert, åpne, lukket eller vise feil. Hvis disse tilstandene ikke er utformet, blir de ofte improvisert under utvikling.

Test også løsningen med tekstforstørring og smale skjermer. Innholdet skal kunne flyte om uten at knapper overlapper, tekst kuttes eller rekkefølgen blir ulogisk. Dette forbedrer ofte opplevelsen for alle, ikke bare brukere med varige funksjonsnedsettelser.

Dokumenter akkurat nok til at systemet blir brukt

Et designsystem har liten verdi hvis det bare forstås av designeren som laget det. Dokumentasjonen bør være kort, visuell og knyttet til reelle publiseringsoppgaver.

For hver komponent holder det ofte å vise:

• Hva komponenten skal brukes til.
• Når den ikke bør brukes.
• Hvilke innholdsfelt den har.
• Et godt og et dårlig eksempel.
• Krav til mobilvisning og tilgjengelighet.

Utpek en person som kan godkjenne nye varianter. Nye komponenter bør bare lages når et faktisk behov ikke kan løses med det som finnes. Ellers vokser systemet raskt tilbake til lappverket det skulle erstatte.

Begynn lite og prioriter det brukerne møter oftest

Dere trenger ikke rydde hele nettstedet samtidig. Start med hovedmenyen, typografien, knappene, skjemafeltene og de to eller tre viktigste sidetypene. Dette er elementer som går igjen og derfor gir stor effekt når de blir konsistente.

Bruk deretter systemet hver gang en side oppdateres eller bygges om. Over tid vil en større del av nettstedet følge de samme reglene uten at dere må gjennomføre en full redesign.

Et godt designsystem fjerner ikke behovet for vurderinger. Det gjør vurderingene enklere og mer konsekvente. Redaktører får tydelige rammer, utviklere får færre spesialtilfeller, og brukerne møter et nettsted som oppfører seg slik de forventer.