Sheriff: Designsystem og styleguide

Farger

• Fargekoder finner du i Digital palett inneholder også en palett med egne analoge fargeharmonier for varsler og meldinger. 
• Fargekoder som SVG for å enkelt kunne kopiere ut verdier
• Ansvarlig for brukeropplevelse i en selvstendig tjeneste er også ansvarlig for universell utforming av fargebruk.

Typografi

Alle de digitale løsningene våre benytter Roboto som er god å lese på skjerm.

Interne løsninger må ha et dokumentert hieraki for tekststørrelser, men kan sette dette opp basert på behovene til bruker og skape en god brukeropplevelsen.

Spesifikasjon i Figma 

Illustrasjon av typografi som bilde

Meldingar og varsel

Fargar som skal brukes på varsel, informasjon og meldingar til bruker finnes som fargeharmonier til politiets sekundærfarger. Disse fargene er forbeholdt bruk hvor man ønsker brukers oppmerksomhet på en status eller følgene av en handling.

Tekniske feil og brukerfeil skal alltid ha en forklaring (se klarspråk) og et forslag til hva som kan gjøres. 

Alle meldinger som ikke tilhører komponenter i et skjema skal benytte tilhørende ikon.

Informasjon til bruker som blir oppdatert under bruk, som er klikkbar og bevirker handling, kan settes i CTA. 

Feil i skjemaer blir satt under elementet med feil. Om dette ikke er synlig i viewport for bruker, skal også en kort forklaring settes under elementet som utløste validering (feks en knapp).

Farger for varsel og viktig informasjon gir tilstrekkelig kontrast mot de andre fargene til politiet. De skal bare brukes til varsel og viktig informasjon i digitale løsninger på web og mobil.

Skjema og forms

Alle løsninger som tar inn data fra bruker skal bruke de etablerte designkomponentene. 

Språk på politiet.no.

Bruker skal se minst 25% nynorsk redaksjonelt innhold på politiet.no.

For selvbetjening hvor bruker kommuniserer med det offentlige, skal skal hele den naturlige brukerreisen være tilgjengelig på ønsket målform. For innlogget skjema, skal ønsket språk automatisk velges.

For språk i andre skjema, se illustrasjon av komponenter i skjema.

Så også tekst i selvbetjeningsløysningar

Knappar

• Call to action, primærknapp brukes for knapper som er brukerens primære (mest vanlige) handling. Denne skal det i utgangspunktet kun finnes én synlig call to action for bruker i en visning. Ellers brukes standardknapp eller andre knapper. 
• Knapper er beskrevet politiets designsystem 

Grid

Politiet bruker et 8x8 grid. Margins skal i hovedsak defineres under og til høyre på element, for forutsigbart flyter. For nærhet kan 4pt brukes for å vise tydelig sammenheng.

For politiet.no:

Layouten er basert på Foundation sitt float grid, med enkelte tilpasninger. Dette er de viktigste aspektene:

Knekkpunkter

• Mobil - under 640
• Tablet - mellom 640 og 1024
• Desktop - over 1024

Innholdsområde

• Innholdsområdet er sentrert.
• Innholdsområdet inneholder alltid kolonner (1-12).
• Maks bredde for innholdsområdet er 1280px.

Marger

• Mobil - 0
• Tablet - 10px
• Desktop - 80px

Kolonnesystem

• 1-12 kolonner.
• Hver kolonne har marg på 15px på hver side.

Ikon

For funksjonelle systemikon benytter vi Materialt Design Outline. Dette er ikon som passer med formspråket til politiet, er lett å gjenkjenne, og man kan enkelt lage etatspesifikke ikon ved å følge samme oppbygging. Ikoner kan lastast ned i ulike formater og bibliotek eller man kan lage etatsspesifikke ved å følge material design prinsipper. Standardikon for bruk i politiets digitale løsninger er en del av politiets designsystem i figma 

• Ikon skal bære meningen alene og forenklet
• For at et ikon skal oppfattes best mulig, skal det ha enkle geometriske
  former og få detaljer.
• System-ikon er ikke illustrasjon.
• Ikon er ikke pynt. Ikon skal bidra til bedre interaksjon og forståelse av brukerflate for bruker
• Et ikon skal gi tydelige assosiasjoner og mening til brukeren
• Et ikon skal bety det samme / ha samme mening ved bruk på tvers av løsninger.
• Vær konsekvent med ikonbruk og variant
• Bruk ikon hvor de gir bedre forståelse enn tekst (alene)
• Ikke bruk et ikon med etablert mening til en fundamental annen funksjon
• Ikon på data og merkelapper, skal kun brukes dersom de er entydige og universelle (raskere å tolke enn merkelapp)
• Ikon plassert før meningsbærende innhold, skal brukes med omhu da de kan oppleves som forstyrrende for brukere med lese skrivevansker
• Gjennomfør brukertester for å sikre at brukeren forstår ikonene og at de forenkler interaksjonen mellom løsningen og brukeren.

Kort

Vi bruker kort for å gruppere likeverdige entydige objekt med informasjon. Typisk er dette datapunkt og ikke lengre tekster. Kort blir brukt når det er tydelig at bruker alltid har minst et, eller gjentatte slike objekt.

For skjema eller andre flyter hvor man kan, men ikke må, legge til gjentatte entydige objekt, kan man benyttet invertert kort. 

På samme måte kan man, hvis det er eneste logiske måte, ha likeverdige kort/objekt tilhørende kort, som kort i kort. (ikke anbefalt)

For innloggede tjenester, benytter vi bakgrunn #DDE4EA for å vise data fra register eller statusmeldinger.

Alle tjenester for publikum, skal bruke web component header som beskrevet under tjenester på politiet.no

Skråstreker til logo for interne løsninger kan lastes ned her

Chip og merkelapper

Vi bruker chips til fire ulike interaksjonsmønster. Støtte (assist), filter, enhet (input), og forslag (suggestion).

Chip skal kun brukes til enkeltord eller korte konseptuelle enheter på maksimalt 16 tegn. Eksempel her kan være "Oslo" og "Møre og romsdal". 

Chip skal aldri ha mer enn én interaktiv funksjon på samme chip. Har man bruk for flere funksjoner eller lengre tekster, skal andre mønster som lister brukes. 

Støtte-chip (assist) brukes for selvstendige smarte funksjoner/handlinger på tvers av en løsning. Handlingene vises dynamisk avhengig av kontekst og status for å hjelpe bruker. Dette kan være “Lagre favoritt”, “opprett nytt” eller aktivere en kontekstmeny.

Filter-chip kan vi bruke for å filtrere data eller når brukeren skal kunne velge flere elementer av et sett med elementer. Det kan også erstatte tabs, når tab kun gir ulik visning av et datasett, og nedtrekksmenyer når disse setter et datasett eller funksjoner. Fordelen ved å benytte chips fremfor nedtrekksmenyer, er at brukeren umiddelbart ser alle valg, og filterlister skalerer godt / utnytter skjermplass bedre i responsivt design.

Enhets-chip (Input) representerer lister med små selvstendige enheter med informasjon fra en bruker. Typisk merkelapper / tags, og filter som ikke er utelunkende. En enhet-chip kan legges til og fjernes igjen ved å trykke X-ikonet. 

Forslags-chips representerer automatisk generert merkelapp / innhold som støtte til brukeren. Som støtte til forståelse eller oppsummering.

For å skille chip fra knapper har de pilleform, med runde kanter på venstre og høyre side.

Merkelapper på innhold, som ikke er interaktive og ikke kan legges til / trekkes fra, bruker fargene beskrevet i designsystemet og har ingen avrunding på hjørner. De plasseres fortrinnsvis under eller over enhetens overskrift, og kan ha lengre tekst (anbefales ikke)

Mørk modus (dark mode)

For flater som skal benyttes i mørke omgivelser, bruker vi grunnfargen svart (#000000). Dette fordi enheter med OLED teknologi da vil ha helt avskrudde bildepunkt. For flater hvor merkevaren / logo til politiet skal vises, eller kort, bruker vi Pantone Black C. Som primærknapp, call to action, bruker vi varianten av 285c med digital farge #7fb8e6 for tilstrekkelig kontrast.

Styleguide og mønster skal følges for alle nettløsninger mot innbyggere. Ta kontakt med politiet.no@politiet.no for informasjon om design av digitale løsninger.