Designguide ID-porten v1. - Difi

Designguide
Implementasjon av ID-porten brukergrensesnitt
Designguide – versjon 1.0 – 17.01.2012 Side 1 av 15

Innhold
1 Introduksjon ................................................................................................................. 3
1.1 Symbol ............................................................................................................................ 3
1.2 Navn ................................................................................................................................ 3
1.3 Brukerstatuser ................................................................................................................. 3
2 Symbol ......................................................................................................................... 4
2.1 Hovedversjon ................................................................................................................... 4
2.2 Alternativ versjon ............................................................................................................. 5
2.3 Farger .............................................................................................................................. 5
2.4 Originalversjon ................................................................................................................. 6
2.5 Størrelse og plassering .................................................................................................... 6
2.6 Navn og bildetekst ........................................................................................................... 6
3 Brukerstatus – Før innlogging ...................................................................................... 7
3.1 ID-porten/MinID som eneste innloggingsalternativ ............................................................ 7
3.2 ID-porten/MinID sammen med andre innloggingsalternativer ............................................ 8
4 Brukerstatus - Innlogget bruker .................................................................................... 9
4.1 Presentasjon av innlogget bruker ..................................................................................... 9
4.2 Alternativ presentasjon av innlogget bruker .................................................................... 11
5 Brukerstatus – Utlogging ............................................................................................ 12
5.1 Anbefalt informasjon til utlogget bruker ........................................................................... 12
6 Sikkerhetsnivå............................................................................................................ 13
7 Informasjonsmateriell ................................................................................................. 13
8 Grunnprinsippene for ID-porten .................................................................................. 14
8.1 Innlogging ...................................................................................................................... 14
8.2 Kontekstuell ................................................................................................................... 14
8.3 Lett uttrykk ..................................................................................................................... 15
8.4 Et felles koblingspunkt ................................................................................................... 15
8.5 Enkelhet......................................................................................................................... 15
Designguide – versjon 1.0 – 17.01.2012 Side 2 av 15

1 Introduksjon
For å ivareta brukervennlighet, universell utforming og sikkerheten til brukerne av ID-porten/MinID,
er det viktig at den visuelle presentasjonen skaper tillit og er gjenkjennbar på tvers av ulike
tjenesteeiere (TE). Med en felles designguide for ID-porten/MinID ønsker Difi å skape en felles
forståelse for hvordan dette kan oppnås.
Designguiden er laget som en veiledning. Den griper ikke inn i den enkelte tjenesteeiers valg av
farger, fonter og annen layout. Designguiden er laget som en retningsgiver for tjenesteeier og
utviklere under implementasjon av ID-porten/MinID på den enkelte tjenesteeiers nettside.
1.1 Symbol
Direktoratet for forvaltning og IKT (Difi) har utviklet et symbol til bruk i og av aktørene i verdikjeden
for innlogging til offentlige tjenester. Det fungerer som visuelt virkemiddel for å gi innbyggerne et
enklere forhold til bruk av elektroniske tjenester. Samtidig skal det skape tillit til hvem som leverer
innloggingsløsningen.
1.2 Navn
Navnet på innlogging til offentlige tjenester er ID-porten/MinID. Navnet skal være lett synlig i
nærheten av symbolet dersom dette brukes.
1.3 Brukerstatuser
Impementasjon av ID-porten hos tjenesteeier er knyttet til følgende brukerstatuser:
- Bruker som ønsker å logge inn
- Bruker som er innlogget
- Bruker som er utlogget
De ulike brukerstatusene vil inneholde forskjellige elementer. Eksempler på dette er for eksempel
at en bruker som ønsker å logge inn, må kunne finne teksten ”Logg inn”, mens en bruker som er
innlogget bør få en entydig visuell påminning om at han eller hun er innlogget.
Designguide – versjon 1.0 – 17.01.2012 Side 3 av 15

2 Symbol
Det er utviklet et eget symbol for felles innlogging i offentlig sektor. Symbolet kan brukes i
ID-porten, av offentlige virksomheter tilknyttet ID-porten og leverandører som leverer e-ID
gjennom ID-porten.
Symbolet skal:
• Garantere for funksjonen til MinID og e-ID fra Buypass og Commfides, samtidig som det
skiller innlogging til offentlig tjenester fra andre tilsvarende produkter.
• Skape umiddelbar gjenkjennelse av de elektroniske ID-ene som brukes til innlogging til
offentlig tjenester.
• Være manøvreringsstøtte på alle nettsteder som gir tilgang til offentlige tjenester.
Brukerne av offentlige tjenester blir kjent med symbolet når de logger seg inn. Symbolet er også
gjort tilgjengelig for bruk på bærere av e-ID som gir adgang til offentlige tjenester, for eksempel på
smartkort, USB-pinner og ID-kort.
2.1 Hovedversjon
Symbolet er spesialdesignet og tilpasset slik at det fungerer godt i et lite format.
Designguide – versjon 1.0 – 17.01.2012 Side 4 av 15

2.2 Alternativ versjon
Symbolet kan brukes i negativ versjon, dersom denne varianten samsvarer bedre med design på
bærere/annet materiell.
2.3 Farger
Symbolet har en grå fargeskala. Fargetonene er valgt for å fungere optimalt på skjerm.
Det gis rom for justering av gråskalaen i symbolet mot brukerens fargeprofil. Dersom bruker
eksempelvis har «varme» gråtoner, kan symbolet justeres for å passe overens med andre
designelementer.
Slike spesialjusteringer av gråskalaen skal godkjennes av Difi.
Designguide – versjon 1.0 – 17.01.2012 Side 5 av 15

2.4 Originalversjon
Symbolet skal alltid brukes fra originalkilder, og ikke kopieres fra andre steder. Se www.difi.no/
2.5 Størrelse og plassering
For å oppfylle krav om god lesbarhet skal ikke symbolet være mindre enn
24x24 piksler (ca 8.5 mm).
Det skal settes av 1/3 av størrelsen til symbolet over, under og til siden for symbolet.
2.6 Navn og bildetekst
Symbolet skal brukes sammen med navnet ”ID-porten/MinID”. Symbolet skal alltid ha en
beskrivende alternative bildeteksten (alt), som for eksempel ”ID-porten/MinID”.
Designguide – versjon 1.0 – 17.01.2012 Side 6 av 15

3 Brukerstatus – Før innlogging
Brukere som ikke er innlogget bør få informasjon om tjenesten som krever innlogging, hvilket
sikkerhetsnivå tjenesten krever og informasjon om personvern. Alternativt kan informasjonen gjelde
en selvbetjeningsløsning og ikke en enkelttjeneste.
For Difi er det viktig at brukeren kan kjenne igjen ID-porten som innloggingsalternativ. Dette skaper
kjente og trygge omgivelser for eksisterende brukere, noe som bidrar til mestring og mindre behov
for brukerstøtte.
3.1 ID-porten/MinID som eneste innloggingsalternativ
• På den enkelte tjenestens innloggingsside skal symbolet og navnet plasseres sammen
med eller så nære som mulig «Logg inn» som gir tilgang til infrastrukturen ID-porten.
• Navnet, ID-porten/MinID, bør benyttes sammen med Logg inn for å sikre at brukere med
funksjonsnedsettelser så tidlig som mulig får beskjed om hva slags innlogging som
benyttes. Teksten ”Logg inn med ID-porten/MinID” vil bedre ivareta behovet for universell
utforming, enn kun Logg inn. Spesielt dersom det ikke gis informasjon om ID-porten andre
steder på innloggingssiden.
Eksempel: Innlogging til skattelistene på skatteetaten.no
Designguide – versjon 1.0 – 17.01.2012 Side 7 av 15

3.2 ID-porten/MinID sammen med andre innloggingsalternativer
Difi anbefaler at ID-porten/MinID presenteres som primærinnlogging og at andre alternativer også
grafisk blir presentert som sekundær innlogging for de som ikke kan/ønsker å bruke ID-porten.
Eksempel: Innlogging hos NAV
Designguide – versjon 1.0 – 17.01.2012 Side 8 av 15

4 Brukerstatus - Innlogget bruker
Det er viktig at brukerne vet når de er innlogget med ID-porten/MinID hos en tjenesteeier. En
innlogget bruker har tilgang til informasjon med ulik sensitivitetsgrad, avhengig av sikkerhetsnivå.
Det er derfor ønskelig at brukeren har en enhetlig visuell påminning om at han/hun er innlogget.
Dette kan gjøres ved å synliggjøre symbolet og brukerens navn. Difi er av den oppfatning at å kun
bruke ”Logg ut”-knappen til å bevisstgjøre brukeren om innloggingen, ikke er godt nok.
Mer oppmerksomme brukere vil kunne bidra til bedre sikkerhet i ID-porten/MinID og redusere
muligheten for misbruk.
4.1 Presentasjon av innlogget bruker
Difi anbefaler design der informasjon om innlogget bruker blir presentert på toppen av nettsiden i
en topplinje.
Illustrasjon: Plasseringer og mulige grensesnitt på topplinje.
Designguide – versjon 1.0 – 17.01.2012 Side 9 av 15

Innholdet i topplinjen bør være høyrejustert og minimum inneholde følgende informasjon:
• Symbolet for ID-porten og navnet ”ID-porten/MinID”
• Navnet på innlogget person og et personsymbol
a. Dersom navn ikke er tilgjengelig anbefaler vi bruk av fødselsdato – seks tegn:
20.02.82.
• ”Logg ut”-knapp
•
Eksempel: Topplinje på nav.no.
For å ivareta lesbarhet forslår vi en minstestørrelse på 24x24 piksler for symbolet, og at det er
tomrom på minimum 8 piksler rundt symbolet. Font og fontstørrelse må ivareta lesbarhet.
Designguide – versjon 1.0 – 17.01.2012 Side 10 av
15

4.2 Alternativ presentasjon av innlogget bruker
• Dersom TE ikke har mulighet til å implementere anbefalt design på nettsiden, bør den
samme informasjonen presenteres oppe i høyre hjørne.
• For at informasjonen alltid skal være synlig for brukeren ved lasting av siden bør den
plasseres innenfor 250*400 piksler øverst til høyre. Symbolet og navnet ”ID-porten/MinID”
skal være synlig sammen med informasjonen om brukeren (navn eller fødselsdato).
Illustrasjon: Alternativ presentasjon av innlogget bruker.
Designguide – versjon 1.0 – 17.01.2012 Side 11 av
15

5 Brukerstatus – Utlogging
Brukerne bør av sikkerhetsgrunner få en bekreftelse når de logger ut av ID-porten/MinID og
tjenestene hos tjenesteeier. Dette fordi en innlogging til en TE gir tilgang til de fleste tjenestene hos
andre TE som også benytter ID-porten/MinID (SSO). Denne informasjonen er viktig å gi, slik at
brukerne bevisstgjøres om viktigheten av å logge ut og lukke nettleser.
5.1 Anbefalt informasjon til utlogget bruker
• Symbol og navn brukes sammen med informasjon om at brukeren er logget ut.
• Bruker bør få tydelig informasjon rundt hvorfor det er viktig med korrekt utlogging og at alle
åpne nettlesere bør lukkes, av sikkerhetsmessige årsaker.
• En lenke til ny innlogging bør være lett tilgjengelig.
Eksempel: Tydelig informasjon om utlogging på nav.no
Designguide – versjon 1.0 – 17.01.2012 Side 12 av
15

6 Sikkerhetsnivå
Det er ikke avklart hvilket begrep som skal brukes for ulike sikkerhetsnivå, og det er derfor ønskelig
at informasjon om dette ikke blir implementert i grensesnittet mot brukeren i denne omgang. Difi
anbefaler at TE ferdigstiller funksjon for dette i systemet, men at dette utelates fra brukerens
grensesnitt.
7 Informasjonsmateriell
Vi anbefaler at man i størst mulig grad lenker til informasjon om e-ID og ID-porten hos Difi. Ved å
sentralisere informasjonen knyttet til innlogging sikrer man at brukerne alltid får oppdatert
informasjon.
Vi ser likevel at det er nyttig for tjenesteeierne å ha eget informasjonsmateriell i enkelte tilfeller,
som for eksempel som tilleggsinformasjon for markedsføringsmateriell for egne tjenester.
I løpet av første halvår 2012 vil Difi produsere et sett med standardtekster og grafiske elementer
som kan benyttes av tjenesteeierne. Nærmere informasjon om dette vil bli gjort tilgjengelig
på www.difi.no og i Samarbeidsportalen.
Ta gjerne kontakt med oss dersom dere skal lage informasjonsmateriale som omfatter ID-porten.
Designguide – versjon 1.0 – 17.01.2012 Side 13 av
15

8 Grunnprinsippene for ID-porten
I utvikling av ID-porten er det utarbeidet noen prinsipper for hva ID-porten skal være og hvordan
den skal fungerer mot brukerne.
8.1 Innlogging
ID-porten/MinID er ikke et nettsted, men en identifisering/innlogging
• Bør se ut og oppleves som en innlogging for brukerne, en midlertidig stopp, ikke et
frittstående nettsted. Så langt som mulig må det oppleves som at man logger inn ved hjelp
av / gjennom ID-porten, ikke at man logger inn på ID-porten/MinID.
8.2 Kontekstuell
ID-porten/MinID er kontekstuell, og understøtter brukerens flyt
• Brukere vil møte ID-porten når de er i gang med å logge inn på en tjeneste. Denne
konteksten bør understøttes –om man kommer fra Lånekassen, bør ID-porten oppleves
som innlogging til Lånekassen.
Designguide – versjon 1.0 – 17.01.2012 Side 14 av
15

8.3 Lett uttrykk
ID-porten/MinID bør ha et lett uttrykk, med effektivt språk og språktone.
• Innlogging/autentisering, ulike eID-er, oppleves gjerne som komplisert for mange brukere,
og ID-porten blir enda et nytt abstraksjonslag. ID-porten skal derfor kommunisere svært
effektivt.
8.4 Et felles koblingspunkt
ID-porten/MinID er et felles koblingspunkt, ikke en paraply.
• Selv om ID-porten vil være innlogging og autentisering mot en rekke ulike offentlige
tjenester, møter brukerne ID-porten ved behov for en konkret tjeneste.
• ID-porten bør oppleves som et koblingspunkt eller nav som knytter disse tjenestene
sammen, mer enn en overgripende paraply for alle tjenester den omfatter.
8.5 Enkelhet
ID-porten/MinID må være enkel – og både effektiv og hjelpsom.
• ID-porten må være enkel og effektiv å bruke. I tillegg må den balansere behovene til
erfarne og mindre erfarne brukere. Kyndige brukere bør ha en mest mulig effektiv vei
gjennom ID-porten, mens brukere med behov for hjelp bør kunne finne veiledning eller
alternative veier.
Designguide – versjon 1.0 – 17.01.2012 Side 15 av
15