Ny innlogget meny på nav.no: vi kutter den til beinet
Når vi gjør tekniske forbedringer i headeren på nav.no gjør vi også store endringer i innlogget meny for privatpersoner.
Dagens løsning
Når du logger inn på nav.no i dag får du tilgang til følgende i headeren:
På desktop ligger alle valgene synlige, mens på mobil er det kun varsler og hamburgermenyen som vises. På små skjermer smeltes nemlig den uinnloggede og den innloggede menyen sammen.
![Desktop- og mobilbilde av dagens innloggede meny.](https://cdn.sanity.io/images/hnbe3yhs/production/5f3662c13e0c7f30a641c13ab8a0e99d8b25bab8-2400x990.png?auto=format)
Bakgrunn for endringene
NAV kontaktsenter har erfart at flere brukere de er i kontakt med starter «reisen sin» på nav.no på mobil. Når de går over til å bruke desktop, sliter de med å finne tilbake til den innloggede menyen. Slik kan vi ikke ha det!
For å lage en mer brukervennlig og enhetlig navigasjon på nav.no har vi valgt å gjøre en rekke grep:
Lik layout på alle dingser
De ulike layoutene på mobil og desktop var hovedårsaken til at vi ville gjøre endringer i headeren. Vi utforsket flere muligheter, men landet til slutt på å slå sammen varsler, innlogget meny og logg ut-knappen.
For det første samler det alt av innhold i header som indikerer at du er logget inn. For det andre gir det oss mulighet til å tilby nøyaktig det samme grensesnittet for innlogget innhold på alle skjermstørrelser.
![Bildet av dagens dekoratør med en pil som viser at vi har samlet varsler, innlogget meny og logg ut-knappen i ett og samme menypunkt](https://cdn.sanity.io/images/hnbe3yhs/production/d2750d70983e95d9a1d5e11294316145f2a3f161-2194x400.png?auto=format)
Minimalt med innhold
Dagens innloggede meny består av fryktelig mange lenker. De aller fleste er svært lite brukt. Lenken til «Min side» er med god margin den mest brukte. Derfor har vi valgt å fjerne så å si alt innhold i den nye menyen.
![Graf som viser hva folk klikker på i den innloggede menyen. Den lenken som desidert har flest klikk er Min side, deretter er det utbetalinger, innboks og dokumentarkiv](https://cdn.sanity.io/images/hnbe3yhs/production/fc272af405fd17f067419ec62b7e3bcba57dbf07-2812x1268.png?auto=format)
Men det er også andre grunner til at vi tør å fjerne så mye av innholdet nå:
![Skisse av Min side som viser eksempler på personalisert innhold. Siden inneholder widgets for meldekort, aktivitetsplan, dialog med veileder, dialogmøte, dagpenger og sykepenger og sykefravær. Nederst er det inngang til utbetalinger, innboks og dokumentarkiv.](https://cdn.sanity.io/images/hnbe3yhs/production/ea819dee559ef664caca4bc66bde0f6775464e66-1440x1766.png?auto=format)
![Skjermbilde av «Innloggede tjenester» som ligger nederst på Min side. Lenkeliste i to kolonner gruppert i fire grupper.](https://cdn.sanity.io/images/hnbe3yhs/production/7db92be491ccea5a195e4ddd2d5d6174871b1296-1788x1363.png?auto=format)
Hvorfor har vi valgt å beholde personopplysninger i ny meny?
Vi skjønner at det kan virke rart at vi lar personopplysninger bli liggende i menyen når dette menypunktet er lite brukt.
Bakgrunnen for dette er resultatet fra en enkel prototypetest vi gjorde av Min side. Da så vi at ca. 34% av respondentene var innom den innloggede menyen da de skulle finne ut av hvilket NAV-kontor de tilhørte. I etterkant har vi innsett at dette kanskje ikke var så rart, siden konvensjonen i mange apper og andre tjenester er at personopplysninger og profilinnstillinger ligger tett knyttet opp til brukerprofilen din. Altså den innloggede brukeren.
«Det var litt vanskelig å finne mitt Nav kontor. Jeg vil anbefale å plassere det ved siden av mitt navn i header av siden. NAV kontor er veldig tett knyttet til mitt identitet, så MITT NAVN + MITT NAV KONTOR kunne stått sammen. Lykke til :-)»
Anonym testperson
Ny innlogget meny!
Snart vil du se at logg inn-knappen har byttet plass med hamburgermeny og søk når du besøker nav.no.
![Dekoratøren med uinnlogget bruker. I dekoratøren ser man NAV-logo, inngang til privatperson, arbeidsgiver og samarbeidspartner, logg inn-knapp, meny og søk](https://cdn.sanity.io/images/hnbe3yhs/production/b0f708bd87920f340df29c92af9e8a34fea29575-1097x84.png?auto=format)
Når du logger inn erstattes logg inn-knappen med den innloggede menyen, som består av et personikon og navnet ditt. Lange navn kan føre til at menyfeltet blir veldig stort. For å sørge for at menyfeltet ikke blir for stort har vi satt en størrelsesbegrensning på knappen. Navn som er lengre enn x antall pixler får ellipse (...) for å markere at bokstaver er utelatt.
Hvis du har et varsel (ulest beskjed eller uløst oppgave) dukker det opp en rød prikk (badge) ved Min side-ikonet. Varslene vises i selve menyen, under lenkene til Min side og Personopplysninger. Logg ut-knappen finner du helt nederst i menyen.
![Bilder av innlogget meny med og uten varsler. I menyen uten varsler ser vi at det er Charlie Jensen som er logget inn. Under navnet er det lenker til Min side og Personopplysninger. Under der igjen er det et lenkepanel med teksten: «Du har ingen varsler. Vi varsler deg når noe skjer» med en lenke til tidligere varsler. Helt nederst i menyen ligger Logg ut-lenken. I bildet ved siden av, i menyen med varsler, er det det samme oppsettet, men det er en rød prikk ved Min side-ikonet. I menyen er lenkepanelet hvor det stod at du ikke hadde noen varsler erstattet med tre varsler: 2 oppgaver og toppen av 1 beskjed.](https://cdn.sanity.io/images/hnbe3yhs/production/213a8b5fe60a256100944247f91b9d37e66dbcf0-1200x821.png?auto=format)
Vi har også sneket inn noen små justeringer av åpen meny. Den hadde en del visuelle forskjeller mellom lenkene til privatperson, arbeidsgiver og samarbeidspartner. På mobil var interaksjon og kode unødvendig komplisert. En sammenblanding av ekspanderingsknapper og vanlige lenker som så helt like ut.
![Skjermbilder av ny layout for åpen meny på desktop og mobil](https://cdn.sanity.io/images/hnbe3yhs/production/9566d6d5f6549e756318a97db0ec237870572c26-4198x1597.png?auto=format)
Veien videre
Den nye headeren, med ny innlogget meny, vil snart bli tilgjengelig i dev-miljøet i NAV. På den måten sørger vi for at teamene har mulighet til å se at alt fungerer som det skal, før den prodsettes på nav.no.
Når løsningen er lansert vil vi følge godt med på bruken av menyen, sammen med bruken av det personaliserte innholdet på Min side. I tillegg vil vi ha tett dialog med NAV kontaktsenter.
Viser det seg at brukerne savner noen av inngangene vil vi vurdere å legge disse inn i menyen igjen. Det kan for eksempel være ett eller flere av menypunktene som er en del brukt i dag: innboks, utbetaling og dokumentarkiv. Men vi skal ikke forhaste oss. Mange valgalternativer i menyen gjør ikke nødvendigvis brukeropplevelsen bedre.
Kodemengden er redusert
Når dekoratøren (header og footer) skulle skrives om var fokuset å redusere kodemengden slik at den blir lettere å vedlikeholde, mer stabil og lettere å endre over tid.
Dette er noen av endringene som har blitt gjort:
Bidragsytere
Flere blogginnlegg
I arbeidet med å lage et strategisk fundament for den visuelle identiteten til NAV utforsker vi to verktøy som kan bli gull verdt i det daglige (design)arbeidet med nav.no.
Alexander Flammier Muskaug
Vi utforsker fargebruken på de nye sidemalene.
Jørgen Maristuen
Etter flere runder med designiterasjoner og brukertesting er den nye malen for produktsider klar! Her er en oppsummering av de viktigste designgrepene vi har gjort.
Martin Berglund