Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Guide

Produktside

Hovedmålet med produktsidene på nav.no er å samle all informasjon om hvert enkelt produkt, slik at innbyggeren slipper å hoppe rundt for å samle informasjon på egenhånd.

Innholdstyper

Sidetypen produktside brukes til både pengestøtter, tjenester, hjelpemiddel og tiltak. Alle tilbud fra NAV skal ha en produktside.

Eksempler på produktsider:

Bakgrunnen for én side per produkt

Tips

Har du spørsmål om bruk av sidemalen produktside? Ta kontakt med Team nav.no, så hjelper vi deg!

Hvem er ansvarlig?

Kjernegrupper har ansvaret for sine egne produktsider.

Innholdsstruktur

Innholdet på produktsiden er delt opp i hovedkapitler med underkapitler.

Hovedkapitlene er faste, mens underkapitlene gir mulighet for å trekke fra eller legge til kapitler der det er nødvendig for de ulike produktene.

Det er egne varianter av denne strukturen for de ulike hovedgruppene av produkter (pengestøtter, hjelpemidler, tjenester og tiltak) og for de ulike målgruppene (personbrukere, arbeidsgivere og samarbeidspartnere).

Personbrukere

Arbeidsgivere

Samarbeidspartnere

Ankerlenker til kapitlene

  • Ankerlenker til hoved- og underkapitler er faste og angitt i oversiktene over innholdsstrukturene.
  • Hvis man skal lage ankerlenker til unike kapitler for et produkt:
    • Ankerlenkene trenger ikke å ha samme ordlyd som tittelen på kapittelet
    • Ankerlenkene bør formuleres på en mest mulig kortfattet og standardisert måte
  • Ankerlenkene bør ikke forandres for ofte. Hvis lenken blir endret, gi beskjed til kontaktsenteret slik at de kan endre den aktuelle ankerlenken i sitt støttemateriell (Navet). Sørg også for at eventuelle brev til innbyggere som bruker denne lenken, blir endret samtidig.

Bakgrunn

Elementer på siden

Produktheader

Skjembilde av produktsideheader for sykepenger

Produktheaderen inneholder:

  • Piktogram for produktet
  • Produkttype (f.eks «Pengestøtte», «Tjeneste» eller «Hjelpemiddel»)
  • Produktnavn
  • Ingress
  • Hvis aktuelt: inngang til informasjon om produktet for andre målgrupper

Dette hentes fra metadataene.

Bakgrunn

Innholdsmeny

Produktsiden har en innholdsmeny med snarvei til korresponderende hovedkapittel på siden.

Innholdsmeny for sykepenger

Hovedkapitler med underkapitler har en undermeny.

Bakgrunn

Inngang til lovtekst

Lenker til lovtekst om produktet ligger under "Hva sier loven?", nederst på siden. Bruk tittelen på loven som lenketekst.

Inngang til lovteksten om sykepenger

Språkversjoner

  • Hva sier loven?
  • Kva seier lova?
  • What does the law say?

Inngang til aktuelle situasjoner

Situasjoner der produktet er aktuelt ligger som siste kapittel i hovedkapitlet "Hva kan du få?". Bruk komponenten "Aktuelle situasjoner". Denne henter situasjonene fra metadataene.

Fire situasjonskort fra produktsiden om sykpenger

Bakgrunn

Inngang til andre produkter eller verktøy

For å gi inngang til andre produkter eller relevant informasjon, setter man inn produktkort i løpende tekst. Før kortet bør det være tekst som setter det i kontekst - hvorfor kan det være relevant for innbyggeren å se på dette produktet eller denne informasjonen?

Fra produktsiden til sykepenger. Her tipses bruker om en annen pengestøtte som kan være relevant. Kort med inngang til reisetilskudd.

Du kan også bruke kort som inngang til slik gjør du det-sider, temaartikler, kalkulatorer eller veivisere.

Kortene viser sidetittelen/produktnavnet og kategori.

Bakgrunn

Situasjonsbestemt informasjon eller lister med utdyping

Til situasjonsbestemt informasjon eller til ulike alternativer på samme nivå, bruker vi trekkspill (accordion). Det skal være minst to trekkspill i listen.

Liste med to trekkspill, et for hver aldersgruppe.

Utdyping av en prosess eller tema

Til nødvendig utdyping av en prosess eller tema, bruker vi les mer (read more). Dette brukes sparsomt på siden og til tydelig avgrensede tema.

For å tydeliggjøre innholdet i elementet best mulig for brukerne, bør lenketeksten være så konsis som mulig, for eksempel “Slik gjør du x”, “Slik beregner vi y“, “Dette regnes som inntekter”. Unngå formuleringen "Les mer om ...".

Vi bruker kun én les mer-komponent av gangen. Det skal være annet innhold, slik som brødtekst, mellom to les mer-komponenter.

Brødtekst etterfulgt av les mer-komponent med tittel "Hvordan trekkes egenandelen?"

Satser, utbetalingsdatoer, saksbehandlingstider og dokumentasjonskrav

Til dette bruker vi utvidbart kort (expansion card). Satser, saksbehandlingstider og utbetalingsdatoer er sentralt forvaltet informasjon som brukes både på produktsider og i sentrale oversikter.

Kortet får et av fire ikoner, avhengig av type.

Utvidbart kort med tittelen "Saksbehandlingstider"

Søknader, skjema, klage og anke

For å lenke til søknader, skjema, klage og anke, bruker vi komponenten skjemadetaljer. Disse er vedlikeholdt sentralt og vises både på produktsiden og i sentrale oversikter.

Skjemadetaljene har én knapp som leder til søknaden. Hvis det er mulig å velge mellom digital innsending og innsending via post, får man dette valget i neste steg. Det samme gjelder for inngang til ettersendelse.

Mer om hvordan skjemadetaljene fungerer finner du i e-læringen.

Video

Vurderer du bruk av video på siden? Les mer om retningslinjer, bruk og anbefalinger for bruk av video på nav.no her.

Regelverksendringer

Kommende regelverksendring

Informasjon om regelverk som skal endres legger du inn som brødtekst på produktsiden, under kapittelet som er mest relevant. Den som eier innholdet avgjør detaljnivået og hvor i kapittelet informasjonen bør stå, avhengig av når endringen vil skje.

For større regelverksendringer som har vesentlig betydning for produktet som helhet, kan man i en kort periode legge inn en varselboks i starten av siden, etter innholdsmenyen. Se e-læring for fremgangsmåte.

Parallelle regelverk

Når det er flere gjeldende regelverk samtidig, bør informasjonen om de ulike regelverkene legges i relevante kapitler eller i trekkspill. Her kan du bruke underoverskrifter for å tydeliggjøre hva som gjelder for hvilke grupper. Informasjon som er til alle, kan du gjerne legge først.

Eksempel:

Hvor lenge kan du få [produkt]? (kapittel)
[Eventuell informasjon som er lik for begge grupper]

Hvis barnet ditt er født før 1. oktober 2021 (underoverskrift eller trekkspill)
[Egne regler for denne gruppen]

Hvis barnet ditt er født etter 1. oktober 2021 (underoverskrift eller trekkspill)
[Egne regler for denne gruppen]

Metadata

Alle produktsider skal ha disse metadataene:

Metadataene legges inn i redaktørgrensesnittet i Enonic.

Gode metadata gir oss god oversikt over innholdet vårt og gjør det mulig å bruke innholdet på en strukturert måte.

Designmal og publiseringssystem

I Enonic ligger produktsiden som en mal med eget redaktørgrensesnitt. Denne malen forvaltes teknisk av Team nav.no slik at teamene ikke behøver å utvikle funksjonalitet eller vedlikeholde visuelt design og kode.

URL

Produktsiden ligger rett på roten av strukturen på nav.no, altså rett under forsiden.

For personbruker og på bokmål: nav.no/produktnavn (eventuelt kortversjon av produktnavn der disse er lange) f.eks nav.no/foreldrepenger

For andre målgrupper: nav.no/målgruppe/produktnavn f.eks nav.no/arbeidsgiver/foreldrepenger

For andre språkvarianter: nav.no/produktnavn/språk .eks nav.no/foreldrepenger/en

For både andre målgrupper og språkvarianter: nav.no/målgruppe/produktnavn/språk f.eks: nav.no/arbeidsgiver/foreldrepenger/en

Norske bokstaver i URL

Vi bruker ikke æ, ø og å i URLene.

  • æ erstattes med a
  • ø erstattes med o
  • å erstattes med a

Bakgrunn

Medvirkende

Tuva Sverdstad

Innspill til artikkelen

Logg inn med Nav SSO for å gi innspill til artikkelen

Logg inn med Nav SSO