 sier Truls og Audun at vi må "slutte å begynne med ting, og begynne å slutte med ting". Ikke bare er det artig formulert, det er også sant! Så, i et forsøk på å etterleve det, vil jeg hjelpe så mange team som mulig å slutte med Less.

Hvorfor slutte med Less, sier du? Jo, fordi verktøystøtten for Less blir stadig dårligere (hverken Create React App eller Next.js støtter Less ut av boksen), og fordi det finnes bedre alternativer i 2022: Gode, gamle CSS har fått features som gjør preprocessors mindre nødvendige. Eventuelt kan du bruke CSS Modules eller noe css-in-js greier. Eller, om du vil fortsette å leve i fortiden, kan du ty til Less sin erkerival Sass.

De fleste apper i NAV som bruker Less gjør det fordi de uansett måtte ha Less i pipelinen sin for å kunne ta i bruk de gamle pakkene til designsystemet (

). Det er heldigvis ikke tilfellet lenger, for nå distribueres ferdig kompilert CSS for hver komponent. Så i denne guiden kvitter vi oss med Less uten å samtidig miste stilene til designsystemet!

Målet er altså raskeste vei vekk fra Less, og måten vi oppnår det er ved å kompilere til CSS, men før vi setter i gang er det et par ulemper du må vite om. For det første mister du referanser til variabler og mixins. Det nye komponentbiblioteket (

) introduserer "design tokens" i form av CSS Custom Properties, men å ta i bruk de tenker jeg er best å løse som en separat oppgave. For det andre finnes ikke nesting av stiler i CSS enda, så all nesting flates ut.

Om du på noe tidspunkt sitter fast, sliter med å forstå hva jeg har ment, eller har noen andre tilbakemeldinger er det bare å fyre løs på #frontend eller sende meg en direktemelding på Slack.

Mathias har nylig gjort denne migrasjonen i en av appene sine, så ta gjerne en titt på 

 hans for et ryddig eksempel på endringene som skal til.

Steg 0: Sørg for å ha nyeste versjon av 

 de siste par åra, men siste versjon har ryddet i måten Less importeres, og de distribuerer ferdig kompilert CSS.

For å ivareta filstrukturen til de lokale stilarkene dine vil vi kompilere hver Less-fil separat. For at det skal fungere må vi forsikre oss om at Less-filer som refererer til variabler eller mixins har import-statments for de relevante filene. Sørg også for at importen gjøres med "

", hvis ikke vil hver av de resulterende CSS-filene inkludere alle stilene fra 

Her er et eksempel på hvordan man kan importere variabler som en referanse fra nav-frontend-core (merk at importen ikke starter med tilde 

Etter at referansene er på plass er det på tide med en runde kommandolinjemagi:

Denne kommandoen søker etter filer som slutter på 

 i src, kjører Less-kompilatoren for hver av de, og skriver output til en fil med 

-suffiks. For at den skal funke må du ha 

Etter å ha kjørt kommandoen har du forhåpentligvis en flunkende ny CSS-fil per Less-fil. Det neste vi da må gjøre er å bytte ut imports av gammel Less med imports av ny CSS, og til det kan vi f.eks. bruke vår gamle venn find-and-replace i din nærmeste kode-editor: 

Alt som da skal gjenstå er å rydde opp etter moroa ved å slette alle less-filer: 

Og vipps er du kvitt all Less-kode i prosjektet ditt! 🎉 

Selv om de lokale Less-filene nå er historie, så kompileres fortsatt Less fra 

 i bygget. For å beholde de stilene etter at vi fjerner CRACO må vi importere CSSen deres separat. De ligger under 

 i hver pakke, og kan f.eks. importeres sånn:

For å gjøre dette steget raskt kan du kopiere de relevante pakkenavnene (

) fra dependencies i package.json, paste linjene der du vil importere stilene, for så å mikse og trikse med multi-cursor/macros.

Husk å importere de globale stilene fra core-pakken om du har behov for de:

Om du noe sted har en direkte import av stiler fra en 

 så blir stilene derfra også distribuert som CSS, men under en litt annen sti:

Og da har vi kommet til steget der vi endelig kan kaste CRACO, Less og 

! Alt du trenger å gjøre nå er å bytte ut "craco" med "react-scripts" for build-, start- og test-scriptene i package.json: 

Så kan du slette alle spor av CRACO, og leve lykkelig i alle dine dager!

Om du er en av de heldige få som bruker CRACO til mer enn bare Less kan du istedenfor å fjerne CRACO helt bare fjerne pakken 

 er et eksempel på hvordan det kan gjøres.

Andreas Nordahl

Designsystemet har i lengre tid vært i beta - både kodekomponenter og Figma-komponenter. Betaperioden har gitt oss fleksibilitet og mulighet til å eksperimentere og teste nye ting. Samtidig har det vært litt uforutsigbart for dere som har valgt å bruke de nyeste løsningene. 

Før sommeren satte vi inn støtet for å ta oss over målstreken og publisere en første versjon uten betamerke.

Vi har forsøkt å endre så lite som mulig, men noen endringer har det blitt. Nøkkelordene for oss har vært rydding, forbedring og stabilitet. 

Du har sikkert opplevd at oppdateringsknappen har dukket opp i nedre høyre hjørne i Figma. Nå vil du forhåpentligvis ikke se den like ofte. Vi har ryddet opp i eget rot, og fjernet en rekke unødvendige koblinger til utdaterte farge- og typografistiler.

Figma har fått ny funksjonalitet som har gjort det enklere å lage og vedlikeholde komponenter. 

 er den største og viktigste nye funksjonaliteten i Figma. Vi har bygget en rekke komponenter på nytt og bruker denne nye funksjonaliteten der det er mulig. Tilbakemeldinger fra dere har vært veldig viktig underveis. 

 og interaktive prototyper, så vi følger med på hva som skjer med disse, og håper problemene løses raskt. 

Vi har innført nye rutiner for oppdatering av komponenter i Figma. Nå lager vi en kopi av komponenten som vi gjør endringer på. Det gjør vi for å redusere risikoen for at oppdateringer ødelegger skissene deres. 

Komponentbiblioteket er nå delt i tre og filene har fått nye navn. 

 UI kit er det samme som før, med komponenter som kan brukes ganske fleksibelt. 

 UI kit inneholder mer spesielle komponenter som er tilpasset domenet. 

Alle pakkene vil fremover ha samme versjon. Om 

 og alle andre pakker også ha samme versjon. Dette gir bedre oversikt over endringer og det blir mindre smertefult å holde alt oppdatert.

 strengere med major/minor/patch for nye endringer, men fortsatt ha høy endringstakt. 

Breaking changes vil fortsatt oppstå noen ganger, men vi håper de fleste kan løses automatisk med hjelp av codemods i 

 pakken. Om ikke dette er mulig vil fortsatt alle endringer finnes i 

Om du allerede har tatt i bruk de nye kodepakkene våre, så er det skrevet en egen migreringsguide fra beta til v1. Det medfølger en del breaking changes, men er forhåpentligvis en relativt rask prosess å oppdatere. Om det er noe som ikke stemmer helt, er det bare å 

 så hjelper vi til og fikser problemene!


Migreringsguide

Vi skal selvfølgelig ikke slette nyttige og relevante «gamle» komponenter, men det tar tid å oppdatere det som er aktuelt å ta med videre. Dette arbeidet fortsetter vi med sammen med dere. Arbeidet med å bygge ut og vedlikeholde designsystemet er en kontinuerlig jobb.

For å redusere vedlikeholdsjobben så mye som mulig, ønsker vi å arkivere en del av det som er gammelt og utdatert. Dette trenger vi hjelp til å finne ut av. 

Tusen takk for tilbakemeldingene vi har fått så langt! Dere er superviktige for å gjøre designsystemet bedre.

Martin Berglund

Ken Aleksander Johansen

Sjur Grønningsæter

Hver måned er det 1 million mennesker som starter besøket sitt på forsiden av nav.no. Forsiden får 70% av sidetreffene hver dag. For mange er det den første siden de ser på nav.no. 

Men hvis forsiden er så viktig, hvorfor har vi ikke tatt tak i den før nå?

Små justeringer og et eksperiment i 2020

De fleste kjenner ikke til alle de omtrent 170 forskjellige pengestøttene, tjenestene og hjelpemidlene NAV tilbyr. Og navnene på disse er ofte lange og vanskelige å forstå. 

Det gjør det vanskelig eller umulig å benytte seg av rettighetene sine. Vi hadde en hypotese om at det ville bli enklere for folk å finne frem på nettstedet hvis vi rammet inn tjenestene i situasjoner de kjenner seg igjen i.

I august 2020 gjorde vi et eksperiment: vi la noen nye innganger på forsiden der vi hadde byttet ut navn på ytelser med situasjoner folk er i. For eksempel byttet vi ut "Dagpenger" med "Arbeidssøker" og "Permittert". Situasjonene var basert på kvalitativ innsikt utført tidligere i NAV.

Flere folk tok forsiden i bruk, fra 80% til 90%.

Fluktraten (bounce rate) falt fra 22% til 9.4%.

Og viktigst av alt: flere folk fikk gjort det de kom for på nettsiden, fra 52.5% til 57%.

Eksperimentet var vellykket, og gjorde oss trygge på at situasjonsinnganger var verdt å utforske videre. Innholdet under disse inngangene var imidlertid fortsatt i gammel struktur og drakt.

Selv om forsiden er en viktig side, blir den aldri bedre enn innholdet som ligger under den. For å virkelig kunne løfte forsiden, måtte vi rydde opp på bakrommene først.

Det siste halvannet året har vi jobbet med nytt konsept og en innholdsstrategi for innhold til personbrukere på nav.no. Strategien ble vedtatt på direktørmøtet i NAV i desember 2021.

Innholdsstrategi for nav.no

Det første innholdet i ny drakt og struktur ble publisert 23. juni 2021. Det var en pilot for å se hvordan det nye konseptet for livssituasjoner ville fungere. Spoiler: det funket!

Pilot for situasjoner på nav.no

Resultatene fra piloten

Siden har vi ryddet oss gjennom hundrevis av gamle artikler og skrevet om innhold sammen med ulike fagområder i NAV. Samtidig har vi videreutviklet design og funksjonalitet i de nye sidemalene.

Og etterhvert som vi har ryddet i innholdet, har andelen innbyggere som oppgir at de klarer å finne ut hva de har rett til i sin situasjon økt. Fra 41 % i desember 2021 til 62 % i mai 2022.

Produkt

Situasjon

Slik gjør du det

Temaartikkel

Men forsiden har stått mer eller mindre urørt. Frem til nå.

Forsiden hadde mye innhold. Veldig mye. Og innholdet reflekterte i for stor grad hva NAV er opptatt av, og i for liten grad hva folk kommer til nettsiden for å gjøre. Viktige brukeroppgaver var lite fremhevet i design og prioritering på forsiden.

Situasjonsinngangene fungerte, men representerte bare et utvalg situasjoner. Mange ville ikke finne sin situasjon i oversikten. Likevel var det for mange situasjoner til at det var enkelt å få oversikt.

Sammen med de ulike fagområdene i NAV og kontaktsenteret har vi skisset opp hvilke situasjoner vi bør dekke på nettsidene. Det er omtrent 40 situasjoner. Disse vil gi god og spisset informasjon til ulike grupper. 

Men vi kunne ikke ha 40 situasjoner på forsiden. Det blir for uoversiktlig. Designet skalerer med andre ord ikke godt.

Forsiden fungerte dårligere for mobilbrukerne

, gjør det på mobilen. Men forsiden fungerte dårligere på små skjermer enn på store.

Med så mye innhold, ble forsiden veldig lang å scrolle igjennom på mobil, og dermed vanskeligere å få oversikt over. Mobilbrukerne brukte 30 sekunder lenger på å velge en situasjon enn brukerne på PC.

Bare halvparten av brukerne opplevde forsiden som vennlig. Det var mye grått og få andre farger.

Forsiden hadde også lite visuelt hierarki som kunne bidra til å skille elementer fra hverandre, og kun 56 % av brukerne opplevde forsiden som ryddig og oversiktlig.

I et år nå har nav.no vært en blanding av gammel og ny tilnærming til innhold. Det kommer det til å fortsette å være en stund mens vi rydder oss gjennom innholdet side for side og område for område.

Men nå har vi ryddet oss gjennom nok innhold til at tiden er moden for å reflektere den nye strukturen på forsiden og i navigasjonen.

Vi har tatt innholdsstrategien ut på forsiden.

At flere får gjort det de kom for på nav.no

At forsiden blir en god og funksjonell inngangsport til innholdet, i tråd med innholdsstrategien

Like god brukeropplevelse på PC og mobil

At forsiden oppleves som ryddig, oversiktlig og vennlig

Strengere prioritering av innhold, basert på brukerinnsikt

Tydeligere visuelt hierarki og inndeling i seksjoner

Møte gruppen som er nye for NAV på en inviterende og oversiktlig måte

Gjøre det raskt og enkelt for de rutinerte brukerne å løse oppgavene sine.

Gi direkte inngang til sentralt innhold for innloggede brukere

Et friskere og vennligere visuelt design som henger bedre sammen med designet av de nye innholdstypene vi har introdusert på nav.no gjennom året.

Vi vet at å finne ut hva du har rett til i din situasjon er en av de vanskeligste brukeroppgavene på nav.no. Samtidig er det en av de viktigste fordi det er inngangsporten til å få brukt rettighetene dine.

Derfor er det første som møter deg på forsiden inngang til de 6 store områdene der NAV tilbyr tjenester.

Innenfor hvert område finner du de ulike situasjonene som finnes på området. For eksempel finner du situasjonene «Venter eller har nylig fått barn», «Er helt eller delvis alene med barn» og «Har mistet noen i nær familie» i området «Familie og barn».

Område

På den måten gir vi enkel og tydelig inngang til alle situasjonene fra forsiden, uten at det blir overveldende og vanskelig å finne din situasjon.

Hvordan har vi sjekket om inndelingen i situasjoner og områder fungerer?

Områdeinngangene er ment å fange opp dem som befinner seg i en ny situasjon eller møter NAV for første gang og ikke vet hva de har rett til. 

Flesteparten av de som bruker nettsidene er imidlertid folk som allerede har søkt om, eller får, støtte fra NAV. Mange av disse vet nøyaktig hva de er på jakt etter.

Noen av brukeroppgavene som aller flest forsøker å løse på nettsidene er å sjekke utbetalinger, sende skjema eller søknad og sjekke status på saken sin.

Hvordan vet vi hva folk kommer til nav.no for å gjøre?

Derfor har vi nå lagt tydelig inngang til oversiktene over 

 på forsiden, slik at folk kommer raskt til den informasjonen de trenger. 

Disse sidene er også pusset opp slik at inndelingene her matcher inndelingen i produkter på produktsidene. Informasjon om saksbehandlingstider og utbetalingsdatoer vises både i oversiktene og på de respektive produktsidene. Slik støtter vi flere mentale modeller og gir flere veier til mål.

Oversikt

 er ny, og gir inngang til en førsteversjon av den nye produktoversikten som på sikt skal erstatte skjemaveilederen. Her lister vi opp inngang til alle produktsider og slik gjør du det-sider (skjema). Du kan søke og filtrere resultatene.

Vi tilgjengeliggjør denne fra forsiden i tillegg til inngangen til 

Innsikten vår viser at denne inngangen ble mye brukt, men at den ga dårlig forventningsstyring og at mange trodde de ville få mer hjelp til å velge riktig støtte enn de får.

Snarveiene til utbetalingsdatoer og saksbehandlingstider gir deg imidlertid bare generisk, åpen informasjon. 

Så for deg som er logget inn med BankID, har vi sammen med Ditt NAV-teamet, laget en egen modul som gir deg inngang til sentralt innhold på de innloggede sidene. Den dukker opp på toppen av forsiden når du er logget inn.

. Å sjekke utbetalinger eller status på søknaden eller saken min er toppoppgave nummer 2 og 5 i spørreundersøkelsen Task Analytics.

Den soleklare toppoppgaven på nav.no er å sende meldekort. Så alle som sender meldekort får i tillegg snart inngang til 

Disse inngangene til innlogget innhold direkte fra forsiden er bare starten. Sammen med Ditt NAV-teamet vil vi videreutvikle dette og se på hvordan vi kan vise innhold direkte og tilpasse bedre til den enkelte.

Når folk besøker nav.no har de en konkret oppgave de forsøker å løse, for eksempel finne ut hva de har rett til i sin situasjon eller sjekke når de får utbetalt penger denne måneden. Ingen er der for å sjekke om det er noen generelle nyheter fra NAV.

Derfor er nyhetsfokuset nedjustert på forsiden. Det er i tråd med innholdsstrategien som slår fast at vi informerer i kontekst fremfor å lage nyhetssaker.

Aktueltseksjonen på forsiden er strengt prioritert. Den skal brukes til å fremheve viktige saker om angår mange privatpersoner, eller er særlig viktig for en mindre gruppe.

Aktueltseksjonen kan også brukes til å fronte saker i årshjulet vårt, slik som informasjon om viktige frister eller oppdateringer som skjer hvert år. For eksempel informasjon om den årlige reguleringen av grunnbeløpet i folketrygden eller årets feriepenger.

Viktig informasjon skal selvfølgelig også vises i kontekst, slik at man ikke er avhengig av å fange den opp på forsiden, i henhold til beredskapsplanen vår.

Beredskapsplan for nav.no

Vi har løftet frem kontaktinformasjonen til NAV nederst på forsiden. Det har vi gjort for å gjøre det enkelt for folk å ta kontakt i riktig kanal hvis de ikke får gjort det de kom for på nettsiden. 

På forsiden er det direkteinngang til chat og til Kontakt oss-siden der man får oversikt over alle kanaler.

På områdesidene og andre sider i ny mal viser vi et utvalg kanaler. Kanalene vil variere, avhengig av behov og muligheter på området.

Tuva Sverdstad

Wei Qing

Tobias Mcvey

. Visjonen skal skape stolthet og forpliktelse internt, samt fortelle brukere, samarbeidspartnere og resten av samfunnet hva vi ønsker å oppnå. Prinsippene for brukeropplevelse bygger på dette.

Dette er begynnelsen på NAVs digitale verktøykasse for produktutvikling. Vi har trua på å jobbe åpent med nettsiden, derfor er noen biter litt uferdige.

NAVs digitale verktøykasse for produktutvikling

Bak enhver god nettside står godt innhold. NAVs innhold skal løse ekte problemer for ekte mennesker, og sørge for at innbyggerne finner, forstår og får til. Her får du tips, retningslinjer og verktøy til å lage innhold som gjør jobben sin.

Innholdsstrategi

Skriveråd

Verktøy

Sidetyper på nav.no

Vi synes det er topp når folk skriver innhold til Aksel. Lurer du på hvordan du kan bidra?

Skriv for Aksel

Innholdsarbeid

Disse sidene er laget for å gjøre hverdagen enklere for oss som jobber med brukerinnsikt, og tilrettelegge for at vi skal gjennomføre brukerinnsiktsarbeid oftere, mer effektivt, med ønsket kvalitet, som er etisk riktige, inkluderende og lovlige.

Webanalyse

Verktøy og metoder

Brukertesting

Spørreundersøkelser

Innsiktstorget

Brukerinnsikt

Universell utforming handler om at tjenester, produkter og omgivelser skal kunne brukes av alle som trenger dem, uavhengig av funksjonsevne eller brukskontekst. Mye er fortsatt under arbeid, så du kan fortsatt finne den 

Uansett hva du jobber med, så har du en rolle å spille når det kommer til gode brukeropplevelser for alle.  

Hvordan få det til?

FAQs, vanlige uu-problemer og områder som trenger særskilt oppmerksomhet.  

Heite temaer

UU-teamet tilbyr flere kurs, aktiviteter og testingmuligheter til NAV-ansatte. 

Kurs, testing og aktiviteter

Hvilke krav til universell utforming må din løsningen oppfylle, og hvem har ansvar for å sikre at løsningen møter kravene?  

NAVs digitale verktøykasse for produktutvikling

Snarveier

Temaer

Innholdsarbeid

Brukerinnsikt

Universell utforming

Prinsipper for brukeropplevelse

Aksel trenger deg!

Blogg

Bli kvitt Less på 1-2-3

Designsystemet er endelig ute av beta!

Ny forside på nav.no