Header

Om komponenten

Headeren er den globale navigasjonen på våre tjenester og nettsider. Den er et viktig element for merkevarebygging og et gjenkjennelig element. Den gir brukeren oversikt og konsistens i våre løsninger og tjenester, i tillegg til en konsekvent avsender på tvers av løsninger fra Oslo kommune. Headeren skal være lik og konsistent på alle sider av en applikasjon.

Ved å klikke på navnet til den som er logget inn trigger man en ekspandert meny. Les mer om styling og bruk av denne her.

Varianter

I Punkt finnes to variasjoner av header:

1. Innlogget header som brukes på de fleste løsninger eller tjenester utviklet i Origo
2. Utlogget header/generell header, altså headeren brukt på Oslo kommune sine nettsider (oslo.kommune.no)

Vi kommer til å beskrive innlogget header. Utseende og styling av header til åpne nettsider eies av designteamet hos UKE.

Flere av elementene er overlappende, men det er også noen forskjeller.

Innlogget header inneholder: logo, tjenestenavn, innlogget meny og mulighet for logg ut-knapp. Utlogget header inneholder: logo, søkefelt, inngang til megameny, kontakt, og inngang til min side.

Grunnen til at søkefeltet ikke er inkludert i innlogget header er for å unngå forvirring. Søkefeltet på oslo.kommune.no er globalt og søker på innholdet på deres sider. Dersom man ønsker et søkefelt på innloggede sider må det utformes annerledes og plasseres et annet sted på siden.

Det er ikke tenkt at man skal bruke innlogget header med alle elementene inkludert. Har du en innlogget bruker som skal logge ut? Bruk kun knappen med brukerens navn. Ønsker du kun å gi brukeren mulighet til å logge ut, bruk logg ut-knappen osv.

Farger

Headeren skal alltid opptre med hvit bakgrunnsfarge. Man kan bruke alle knappestylinger (primær, sekundær og tertiær) på høyre side. Ekspandert meny skal alltid styles likt og som det fremstår i designsystemet. Les mer om ekspandert meny her.

Responsivitet

Headeren er optimalisert for mindre enheter slik som mobil og nettbrett. Likevel er det viktig at du tester navigasjonen på siden din på mobil. Gjør dette ved enten å bruke Figma mirror-appen i skisse-perioden eller å åpne testlenker på mobilen din i tillegg til desktop når du tester.

På mobil skjules noen av elementene og alt legges inn i menyen. Du kan selv velge om du vil vise initialene til den innloggede brukeren, eller kun bruker-ikonet.

Slik bruker du komponenten

Seksjoner

I headeren skal alltid logo og avsender være plassert til venstre. På høyre side har man en seksjon for interaktive elementer og funksjonalitet, slik som søk, meny, innlogget meny og “logg ut”-knapp.

Logo

Oslologoen kan ikke kombineres med andre navn og må alltid brukes i sin helhet. Les mer om riktig bruk av Oslo logoen her.

Det er ikke påkrevd, men om ønskelig kan man legge til tjenestenavn ved siden av logo, dette legges det opp til i header på denne måten (markert i rødt):

Inkluder både navnet på applikasjonen og logoen hvis tilgjengelig. Klikk på applikasjonens navn eller logo skal ta deg til forsiden/starten til applikasjonen eller tilbake til oslo.kommune.no.

Navigasjonselementer

I høyre seksjon av headeren kan du implementere funksjonalitet. I headeren har vi lagt opp til meny, innlogget meny og logg ut-knapp. Alle må ikke brukes samtidig. Unngå logg ut-knapp sammen med innlogget meny. Navigasjonen skal være lik gjennom hele tjenesten din. Ha maksimalt fire elementer i hovednavigasjonen.

Bruk tydelige og konkrete tekster i lenkene.

Gjør dette/ikke gjør dette

• Ikke endre størrelsen på headeren
• Behold strukturen i headeren - ikke endre plassering av logo, avsender eller funksjonalitet
• Ikke endre bakgrunnsfargen på headeren
• Tenk over logisk knappestruktur
• Alltid ha Oslo-logoen på venstre side og i sin helhet
• Hold antall navigasjonselementer nede

Anatomi

1. Bakgrunn
2. Oslo logo
3. Tjenestenavn (valgfritt)
4. Meny (valgfritt)
5. Innlogget meny (valgfritt)
6. Logg ut-knapp (valgfritt)