1. No category

BRUKERGRENSESNITT
BankID på mobil
Versjon: 28. september 2015
BRUKERGRENSESNITT
BankID på mobil
Dette er dokumentet har to deler, en del som viser og beskriver det visuelle og en del beregnet for
utviklere som skal bruke kodemalene som er klargjort for brukersteder.
Kodemaler inneholder html, css, javascript, animasjoner og hjelpetekst. Utforming og funksjonalitet
av fokus (aktiv markør) er vist i disse filene. Kodemalene er utviklet og testet for å gjøre
implementering av nytt responsivt design enklere.
Kontakt BankID Norge for å motta filene.
DEL1: DOKUMENTASJON AV BRUKERGRENSESNITT
BankID på mobil
INNHOLDSFORTEGNELSE
1. Introduksjon
Introduksjon
Denne delen av dokumentet beskriver utforming av brukergrensesnittet for
innlogging, signering og betaling med BankID på mobil.
Retningslinjene gjelder på tvers av plattformer: grensesnittet skal fungere i alle utbredte
nettlesere på PC og Mac, nettbrett og smarttelefoner. Kontakt BankID for fullstendig liste
av klienter som skal støttes.
2. Krav
3. Designmaler
4. Retningslinjer
5. Prosessflyt
Krav
Krav
Overordnede krav 1
Tema
Krav
BankID på mobil logo
BankID-logoen skal vises på alle skjermbildene og plasseres på definert sted i applikasjonsfeltet
Fargevalg
Skjermbildene skal inneholde de samme fargene som skissene og fargeoversikten viser.
Typografi
Krav til bruk av typografi er gitt i spesifiserte høyder og bredder.
Elementer på nettstedet
Antall elementer og plassering av elementer skal implementeres i henhold til gitte skjermskisser.
Layout
Løsningen skal være responsiv og tilpasse seg plassen den får tildelt. Anbefalt standard størrelse på
desktop/tablet er 388 x 240 pixler, mens den på mobil skal tildeles all tilgjengelig plass. Klienten kan
tilpasses større og mindre størrelser, med en minstestørrelse på 320 x 150 pixler (bredde x høyde).
Feilmeldinger
Visuell karakter av feilmeldinger skal implementeres i henhold til gitte skjermskisser.
Krav
Overordnede krav 2
Tema
Krav
Tekst
Ved implementering av løsningen skal teksten i skjermbildene være lik det skjermskissene viser.
Prosess/flyt
Flyt for identifisering, signering og BankAxess skal implementeres slik skjermskissene beskriver.
Data
All data inkludert i skjermskisser skal inkluderes i «BankID på mobil» løsning. Ekstra data/felter
implementert av brukersted er ikke tillatt (for eksempel brukerens e-post).
Validering
Validering vil hovedsakelig skje på server-siden. Nettleseren/JavaScript skal validere åtte siffer i feltet for
mobilnummer og seks siffer i feltet for fødselsdato.
Bilder
Det er ikke tillatt å bruke nye bilder/grafiske elementer i den implementerte BankID løsningen.
Input typer
Input typer skal være som illustrert i skjermskisser.
Krav
Universell utforming
Forskrift om universell utforming av IKT-løsninger stiller krav om at nettsider må oppfylle 35 av 61
suksesskriterier i standarden Retningslinjer for tilgjengelig webinnhold (WCAG) 2.0.
”
Med universell utforming menes utforming eller tilrettelegging av hovedløsningen i de fysiske
forholdene, herunder informasjons- og kommunikasjonsteknologi (IKT), slik at virksomhetens
alminnelige funksjon kan benyttes av flest mulig.
Kravene og mer info finner du her:
http://uu.difi.no/veiledning/nettsider/krav-til-nettlosninger/krav-wcag
Designmaler
Mal: Login.html
Innlogging
Standard størrelse - 388 x 240 pixler
”Avbryt” tekst vises
Mobil visning (fullskjerm)
”Avbryt” tekst fjernes da det er lite horisontal plass.
Mal: Reference.html
Referanseord
Standard størrelse - 388 x 240 pixler
”Avbryt” tekst vises
Mobil visning (fullskjerm)
”Avbryt” tekst fjernes da det er lite horisontal plass.
Mal: wait.html
Ventesignal
Standard størrelse - 388 x 240 pixler
”Avbryt” tekst vises
Mobil visning (fullskjerm)
”Avbryt” tekst fjernes da det er lite horisontal plass.
Mal: Error.html
Feilmelding
Standard størrelse - 388 x 240 pixler
Mobil visning (fullskjerm)
Mal: Success.html
Suksess
Standard størrelse - 388 x 240 pixler
Mobil visning (fullskjerm)
Retningslinjer
Retningslinjer
Innramming av klienten
Klienten defineres med en bakgrunn og ramme som på en diskret måte vil integrere feltet i visuelt ulike brukersteder og applikasjoner.
Avbryt klient
Type tjeneste
Identifisering, Signering eller BankAxess.
font-family: Arial, Helvetica, Verdana;
font-size: 14px;
color: #555555;
font-family: Arial, Helvetica, Verdana;
font-size: 18px;
color: #555555;
Bakgrunn og ramme
background-color: #FBFBFB;
border-color: #BBBBBB;
border-radius: 3px;
Retningslinjer
SVG-grafikkfiler
All grafikk i klienten skal bestå av SVG-grafikk. SVG-filer kan skaleres uten tap av kvalitet og vil sikre skarp visning i alle oppløsninger på alle
enheter, både nå og i framtiden. Filene er innbakt i html-dokumentet som Base64-encodet tekst og finnes således ikke som tilknyttede filer.
bankid-mobil_logo.svg (norsk)
bankid-mobile_logo.svg (engelsk)
ico_arrow_right.svg
ico_arrow_left.svg
ico_help.svg
ico_close.svg
bankid-mobil_logo.svg
ico_spinner.svg
ico_warning.svg
Retningslinjer
Farger
#007BC0
Uthevet tekst, lenker, rammefarge for aktiv input
#BADBEB
Støttefarge
#E9F1F4
Støttefarge
#000000
Tekst, labels
#555555
Heading, hjelpetekst
#BBBBBB
Rammer, linjer
#EEEEEE
Støttefarge
#F8F8F8
Bakgrunnsfarge
#FFFFFF
Aktiv nestepil
Retningslinjer
Responsiv oppførsel
Ettersom klienten skal brukes i mange størrelser og proporsjoner må den tilpasse seg plassen den får tildelt.
Eksempel under viser hvordan klienten endres.
Minimumsstørrelse - 320 x 150 pixler
”Avbryt” tekst fjernes og ramme rundt knapp skjules.
Høyde på klienttopp, inputfelter og nesteknapp reduseres.
Tekststørrelser reduseres.
Standard størrelse - 388 x 240 pixler
”Avbryt” tekst vises
Mobil visning (fullskjerm)
”Avbryt” tekst fjernes da det er lite horisontal plass.
Retningslinjer
Mellomrom
Ettersom klienten skal brukes i mange størrelser og proporsjoner må den tilpasse seg plassen den får tildelt.
Eksempel under viser hvordan størrelsen på inntastingsfeltene endres i forskjellige bredder.
* 35 pixler er høyden i minimodus.
Retningslinjer
Innlogging
Heading
Hjelpetekst knapp og ikon
font-family: Arial, Helvetica, Verdana;
font-family: Arial, Helvetica, Verdana;
font-size: 18px;
font-size: 14px;
color: #555555;
color: #555555;
Knapp
Tittel
background: #0078BD;
border-radius: 3px;
font-family: Arial, Helvetica, Verdana;
font-size: 18px;
color: #000000;
Input
Label hint
font-family: Arial, Helvetica, Verdana;
font-family: Arial, Helvetica, Verdana;
font-size: 18px;
font-size: 14px;
color: #000000;
color: #555555;
Retningslinjer
Referanseord
Label
font-family: Arial, Helvetica, Verdana;
font-size: 16px;
color: #000000;
Delelinje
Referansekode
border-color: #BBBBBB;
font-family: Arial, Helvetica, Verdana;
font-size: 18px;
font-weight: bold;
text-transform: uppercase
color: #0078BD;
Type BankID
Hjelpetekst
font-family: Arial, Helvetica, Verdana;
font-family: Arial, Helvetica, Verdana;
font-size: 12px;
font-size: 14px;
color: #555555;
color: #000;
Retningslinjer
Ventesignal
Label
font-family: Arial, Helvetica, Verdana;
font-size: 14px;
color: #000000;
Retningslinjer
Suksess
Tittel
font-family: Arial, Helvetica, Verdana;
font-size: 16px;
font-weight: bold;
color: #000000;
Retningslinjer
Alvorlig feil
Suksess
font-family: Arial, Helvetica, Verdana;
font-size: 16px;
font-weight: bold;
color: #000000;
Suksess
font-family: Arial, Helvetica, Verdana;
font-size: 16px;
font-weight: normal;
color: #000000;
Retningslinjer
Responsiv løsning
Implementeringen må tilpasses i tilfeller der det er lite plass tilgjengelig i bredden
og/eller høyden.
Bredde
Når klienten er smalere enn 388 pixler gjør vi tiltak for å ivareta plass i bredden.
• Teksten ”Avbryt” på knappen oppe til høyre fjernes.
• Bredde på inntastingsfelter og nesteknapp skalerer ned fra 350 til tilgjengelig
plass, minst 302 pixler.
• Tekststørrelse på ”Label” (Mobilnummer og fødselsdato) reduseres fra 18 til
16 pixler.
Høyde
Når klienten er lavere enn 239 pixler gjør vi tiltak for å ivareta plass i høyden.
•
•
•
•
Topp på klienten reduseres fra 45 til 35 pixler i høyden.
Ramme på knapp i topp fjernes, men er synlig ved ”mus-over”.
Tekststørrelse på tittel i topp reduseres fra 18 til 16 pixler.
BankID på mobil logo flyttes ned og bryter delelinjen.
Retningslinjer
Minimumsstørrelse eksempel
Applikasjonsfeltet kan gis fri bredde og høyde, men med en definert minimumsverdi på 320 px bredde eller 150px høyde - se skjermbilder.
Retningslinjer
Skjemafelter
For å sikre korrekt skjermtastatur er det viktig at skjemafelter følger angitte krav.
Label
Value
Input type
Validering på klient-siden
Kommentar
Mobilnummer
Ingen default
Tel
Numerisk
MINLENGTH=8 MAXLENGTH=8
Fødselsdato
Ingen default
Tel
Numerisk
MINLENGTH=6 MAXLENGTH=6
FEILMELDINGER
Eksempler på feilmeldinger
Melding hvis validering feiler.
Kritisk feil.
Prosessflyt
Prosessflyt
Oversikt
BankID på mobil dekker tre funksjoner; Identifisering, Signering og BankAxess.
Sidemalene er like for alle tre løp, men husk å endre tittel fra
Identifisering til Signering eller BankAxess.
MALER
Eksternt
Innlogging
Referanseord
Suksess
IDENTIFISERING
SIGNERING
Dialog på nettstedet
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
Ventesignal
Prosessflyt
Identifisering
IDENTIFISERING
Dialog på nettstedet
SIGNERING
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
Prosessflyt: Identifisering
Velg BankID på mobil
Brukersteder som tilbyr bruk av både «BankID» og «BankID på mobil» skal gi
brukeren muligheten til å velge hvilken mekanisme som skal benyttes.
Følgende krav gjelder ved utforming av inngang som er spesifikk for brukerstedet:
• BankID logoen skal synliggjøres på siden.
• Fargepaletten skal benyttes for utforming av applikasjonsfeltet.
• Når klient er startet skal det tydeliggjøres at brukeren er inne i prosessflyt for
Identifisering.
• For at brukeren skal få hjelp til å velge mellom «BankID» og «BankID på mobil» kan
følgende hjelpetekst benyttes:
BankID: Din BankID er lagret sentralt i banken.
BankID på mobil: Din BankID er lagret på SIM-kortet i din mobiltelefon.
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
I-03: Informasjon om BankIDidentifisering
T-04: Tast ID-PIN
Brukeren er identifisert
I-05: SMS-bekreftelse på
identifisering
Prosessflyt: Identifisering
Mobilnummer og fødselsdato
Retningslinjer:
• På desktop skal markør være plassert i mobilnummer-feltet når applikasjonsfeltet
fremkommer.
• Brukeren skal kunne bruke tabulator for å flytte markøren til fødselsdato-felt.
• Brukeren skal kunne trykke enter for å komme videre i dialogen etter at mobilnummer
og fødselsdato er fylt ut.
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
I-03: Informasjon om BankIDidentifisering
T-04: Tast ID-PIN
Brukeren er identifisert
I-05: SMS-bekreftelse på
identifisering
Prosessflyt: Identifisering
Referanseord
Retningslinjer:
• Skjermbildet skal vises mens brukeren utfører handling på mobilen
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
I-03: Informasjon om BankIDidentifisering
T-04: Tast ID-PIN
Brukeren er identifisert
I-05: SMS-bekreftelse på
identifisering
Prosessflyt: Identifisering
I-03. Informasjon om BankIDidentifisering
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
N Telenor
12:34
I-03: Informasjon om BankIDidentifisering
Tilbake
T-04: Tast ID-PIN
Brukeren er identifisert
Bekreft referanse: FEILFRI
DIAMANT hos DNB Bank for
BankID identifisering
Avbryt
Godta
I-05: SMS-bekreftelse på
identifisering
Prosessflyt: Identifisering
T-04. Tast ID-PIN
Merk: Ulike versjoner av SIM-kort kan ha ulik begrepsbruk. Noen SIM-kort bruker «Sign-PIN»
som begrep, mens andre bruker «ID-PIN». Alle nye SIM-kort benytter «ID-PIN».
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
N Telenor
12:34
Tilbake
Avbryt
I-03: Informasjon om BankIDidentifisering
T-04: Tast ID-PIN
Tast ID-PIN:
Brukeren er identifisert
I-05: SMS-bekreftelse på
identifisering
Send
Prosessflyt: Identifisering
Suksess
Retningslinjer:
• Skjermbildet skal vises når brukeren er identifisert.
• Brukersted bestemmer hvor bruker kommer ved trykk på ”Neste”
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
• Av brukervennlighetshensyn frarådes bruk av dette steget.
• I kodeeksempelet finnes dette steget i filene success.html
og success_en.html.
Kontroller referansenummer
på mobilen
I-03: Informasjon om BankIDidentifisering
T-04: Tast ID-PIN
Brukeren er identifisert
I-05: SMS-bekreftelse på
identifisering
Prosessflyt: Identifisering
I-05. SMS-bekreftelse på
identifisering
SMS: Brukerstedet bestemmer innholdet i SMS-en. Inntil 160 tegn. Avsender for meldingene
vil være: «BankID»
IDENTIFISERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
N Telenor
12:34
I-03: Informasjon om BankIDidentifisering
T-04: Tast ID-PIN
Valgfri tekst for
brukerstedet.
Maks 60 tegn.
Brukeren er identifisert
Avsender BankID
Valgfri tekst for brukerstedet.
(inntil 160 tegn)
I-05: SMS-bekreftelse på
identifisering
Prosessflyt
Signering
IDENTIFISERING
Dialog på nettstedet
SIGNERING
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
Prosessflyt: Signering
Velg BankID på mobil
IDENTIFISERING
Velg BankID på mobil
Brukersteder som tilbyr bruk av både «BankID» og «BankID på mobil» skal gi
brukeren muligheten til å velge hvilken mekanisme som skal benyttes.
Følgende krav gjelder ved utforming av inngang som er spesifikk for brukerstedet:
Tast inn mobilnummer og
• BankID logoen skal synliggjøres på siden.
• Fargepaletten skal benyttes for utforming av applikasjonsfeltet.
fødselsdato
Kontroller referansenummer
• Når klient er startet skal det tydeliggjøres at brukeren er inne i prosessflyt
for
på mobilen
Signering.
• For at brukeren skal få hjelp til å velge mellom «BankID» og «BankID
mobil» kan
I-03:på
Informasjon
om BankIDfølgende hjelpetekst benyttes:
identifisering
BankID: Din BankID er lagret sentralt i banken.
SIGNERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
S-03: Informasjon om BankIDsignering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
BankID på mobil: Din BankID er lagret på SIM-kortet i din mobiltelefon.
Prosessflyt: Signering
Tast inn mobilnummer og
fødselsdato
Retningslinjer:
IDENTIFISERING
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
Tast inn mobilnummer og
fødselsdato
• På desktop skal markør være plassert i mobilnummer-feltet når applikasjonsfeltet
fødselsdato
fremkommer.
• Brukeren skal kunne bruke tabulator for å flytte markøren til fødselsdato-felt.
Kontroller referansenummer
• Brukeren skal kunne trykke enter for å komme videre i dialogen etterpåatmobilen
mobilnummer
og fødselsdato er fylt ut.
PS. Husk å endre tittel i sidemalen fra Identifisering til Signering
SIGNERING
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Prosessflyt: Signering
S-03. Informasjon omBankIDsignering
N Telenor
IDENTIFISERING
12:34
Avbryt
Bekreft for å starte signering
med BankID hos
Nettbutikken.no.
OK
SIGNERING
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Prosessflyt: Signering
S-04: Brukeren får se teksten som
skal signeres
IDENTIFISERING
Velg BankID på mobil
Merk: Dette er dataene som brukeren signerer over, og brukerstedet må sørge for at det
Tast inn
inneholder nok informasjon til at det kan benyttes som bevis. Begrensning
påmobilnummer
120 tegn. og
N Telenor
12:34
Avbryt
Velg BankID på mobil
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Brukersted: Nettbutikken.no
Signering kjøpekontrakt.
Ref. nr: 4536745
Dato: 14.09.2010
SIGNERING
Prosessflyt: Signering
T-04. Tast ID-PIN
IDENTIFISERING
Velg BankID
mobil
Merk: Ulike versjoner av SIM-kort kan ha ulik begrepsbruk. Noen SIM-kort
brukerpå«Sign-PIN»
som begrep, mens andre bruker «ID-PIN». Alle nye SIM-kort benytter «ID-PIN».
N Telenor
12:34
Tilbake
Avbryt
SIGNERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Tast ID-PIN:
Send
Prosessflyt: Signering
Ventesignal
Retningslinjer:
IDENTIFISERING
Velg BankID på mobil
SIGNERING
Velg BankID på mobil
• Skjermbildet skal vises mens brukeren utfører markerte handlinger på mobilen.
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Prosessflyt: Signering
Suksess
Retningslinjer:
• Skjermbildet skal vises når brukeren har signert.
• Brukersted bestemmer hvor bruker kommer ved trykk på ”Neste”
• Av brukervennlighetshensyn frarådes bruk av dette steget.
• I kodeeksempelet finnes dette steget i filene success.html
og success_en.html
IDENTIFISERING
SIGNERING
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Prosessflyt: Signering
S-05. SMS-bekreftelse påsignering
IDENTIFISERING
Velg BankID
mobil
SMS: Brukerstedet bestemmer innholdet i SMS-en. Inntil 160 tegn. Avsender
for på
meldingene
vil
være: «BankID»
N Telenor
12:34
Avbryt
Brukersted:
Nettbutikken.no
Kjøpekontrakt signert.
Brukersted: Nettbutikken.no
Ref.nr: 4536745
Kjøpekontrakt signert.
Dato: 14.09.2014
Ref. nr: 4536745
Dato: 14.09.2010
SIGNERING
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
Prosessflyt
BankAxess
IDENTIFISERING
Dialog på nettstedet
SIGNERING
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
Dialog på nettstedet
Prosessflyt: BankAxess
Velg BankID på mobil
IDENTIFISERING
Velg BankID på mobil
SIGNERING
Velg BankID på mobil
Brukersteder som tilbyr bruk av både «BankID» og «BankID på mobil» skal gi
brukeren muligheten til å velge hvilken mekanisme som skal benyttes.
Følgende krav gjelderTast
vedinn
utforming
av inngang
som er spesifikk for brukerstedet:
mobilnummer
og
Tast inn mobilnummer og
• BankID logoen skalfødselsdato
synliggjøres på siden.
• Fargepaletten skal benyttes for utforming av applikasjonsfeltet.
Kontroller referansenummer
fødselsdato
S-03: Informasjon om BankID-
• Når klient er startetpå
skal
det tydeliggjøres at brukeren er inne i prosessflyt
mobilen
signeringfor
BankAxess.
• For at brukeren skal
få Informasjon
hjelp til å velge
mellom «BankID» og «BankID
påKunden
mobil»fårkan
I-03:
om BankIDS-04:
se teksten som
følgende hjelpetekst
benyttes:
identifisering
skal signeres
BankID: Din BankID er lagret sentralt i banken.
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
B-03: Informasjon om BankAxess
med BankID på mobil
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
BankID på mobil: Din BankID er lagret på SIM-kortet i din mobiltelefon.
Dialog på nettstedet
Prosessflyt: BankAxess
Tast inn mobilnummer og
fødselsdato
Retningslinjer:
IDENTIFISERING
SIGNERING
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
Tast inn mobilnummer og
Tast inn mobilnummer og
fødselsdato
• På desktop skal markør
være plassert i mobilnummer-feltet når applikasjonsfeltet
fødselsdato
fødselsdato
fremkommer.
• Brukeren skal kunneKontroller
bruke tabulator
for å flytte markøren til fødselsdato-felt.
referansenummer
S-03: Informasjon om BankIDmobilen
• Brukeren skal kunnepåtrykke
enter for å komme videre i dialogen ettersignering
at mobilnummer
og fødselsdato er fylt ut.
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
PS. Husk å endre tittel i sidemalen fra Identifisering til BankAxess
Dialog på nettstedet
Prosessflyt: BankAxess
B-03: Informasjon om BankAxess
med BankID på mobil
N Telenor
IDENTIFISERING
SIGNERING
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
Avbryt
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
12:34
Bekreft for å starte betaling
med BankAxess
hos
I-05: SMS-bekreftelse
på
Nettbutikken.no.
identifisering
OK
Dialog på nettstedet
Prosessflyt: BankAxess
B-04: Brukeren får informasjon om
betalingsforslaget / betalingsordren
IDENTIFISERING
Velg BankID på mobil
SIGNERING
Velg BankID på mobil
Merk: Dette er dataene som brukeren signerer over, og brukerstedet må sørge for at det
Tast inntilmobilnummer
og
Tast inn
inneholder nok informasjon
at det kan benyttes
som bevis. Begrensning
påmobilnummer
120 tegn. og
N Telenor
Dialog på mobil
BANKAXESS
Velg BankID på mobil
fødselsdato
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN Avbryt
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
12:34
Brukersted: Nettbutikken.no
BankAxess betaling
I-05: SMS-bekreftelse på
identifisering
Ref. nr:
4536745
Dato: 14.09.2010
Beløp: 5 679,-
Dialog på nettstedet
Prosessflyt: BankAxess
T-04. Tast ID-PIN
IDENTIFISERING
SIGNERING
BankID påkan
mobil
Velg BankID
mobil
Merk: Ulike versjonerVelg
av SIM-kort
ha ulik begrepsbruk. Noen SIM-kort
brukerpå«Sign-PIN»
som begrep, mens andre bruker «ID-PIN». Alle nye SIM-kort benytter «ID-PIN».
N Telenor
Tilbake
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankID12:34
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
identifisering
Avbryt
T-04: Tast ID-PIN
Tast ID-PIN:
Send
Dialog på nettstedet
Prosessflyt: BankAxess
Ventesignal
Retningslinjer:
IDENTIFISERING
Velg BankID på mobil
SIGNERING
Velg BankID på mobil
Dialog på mobil
BANKAXESS
Velg BankID på mobil
• Skjermbildet skal vises mens brukeren utfører markerte handlinger på mobilen.
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
Dialog på nettstedet
Prosessflyt: BankAxess
Suksess
Retningslinjer:
IDENTIFISERING
Velg BankID på mobil
SIGNERING
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
• Skjermbildet skal vises når brukeren har betalt.
Tast inn mobilnummer og
fødselsdato
• Brukersted bestemmer hvor bruker kommer ved trykk på ”Neste”.
• Av brukervennlighetshensyn frarådes bruk av dette steget.
dette steget i filene success.html
• I kodeeksempelet finnes
på mobilen
og success_en.html
Dialog på nettstedet
Prosessflyt: BankAxess
B-05. SMS-bekreftelse påhandel
IDENTIFISERING
SIGNERING
Velg BankIDinnholdet
på mobil i SMS-en. Inntil 160 tegn. Velg BankID på mobil
SMS: Brukerstedet bestemmer
Avsender for meldingene vil være: «BankID»
Dialog på mobil
BANKAXESS
Velg BankID på mobil
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Tast inn mobilnummer og
fødselsdato
Kontroller referansenummer
på mobilen
S-03: Informasjon om BankIDsignering
B-03: Informasjon om BankAxess
med BankID på mobil
I-03: Informasjon om BankIDidentifisering
S-04: Kunden får se teksten som
skal signeres
B-04: Kunden får informasjon om
betalingsforslaget/betalingsordren
T-04: Tast ID-PIN
T-04: Tast ID-PIN
T-04: Tast ID-PIN
Brukeren er identifisert
Brukeren har signert, bekreftelse
på nettstedet
Brukeren har handlet, bekreftelse
på nettstedet
I-05: SMS-bekreftelse på
identifisering
S-05: SMS-bekreftelse på signering
B-05: SMS-bekreftelse på handel
DEL 2: DOKUMENTASJON AV KODEMALER
Readme for utviklere
BankID på mobil
Oppsett - Demo
Start index.html
Filer som bare er til bruk i demo:
index.html - brukes for å vise flyten i de andre 5 html-filene
iframe.html kjører index.html i en iframe for å vise ulike størrelser
bidm.js - brukes for å simulere flyten i applikasjonen og hvordan elementene på
siden skal fungere sammen. Filen er veldig enkelt satt opp slik at all kode skal kunne
forstås
Ekstra
For demoens skyld har javascript-filen assets/js/bidm.js blitt lagt til i filene
login.html , ref.html , wait.html , success.html og error.html . Javascript-filen
demonstrerer funksjonaliteten og flyten til BankID på mobil.
Oppsett - Prod
Vedlagt: 5 html-filer
login.html - er selve startskjermen
ref.html - er skjermen hvor referanseordet vises
wait.html - er skjermen som vises når brukeren må vente på signal fra signering
eller bekreftelse
success.html - er skjermen som vises når verifisering med BankID på mobil ble
gjennomført uten problemer
error.html - er skjermen som vises når verifisering med BankID på mobil feilet
Vedlagt: 1 css-fil
bidm.css - brukes av alle 5 html-filene som skal i prod.
Forklaring av prod-filene:
login.html
Startup
input.bidm_phone skal ha fokus
Operation
.bidm_header button.bidm_close:
Ved klikk skal applikasjonen avsluttes
.bidm_body button.bidm_help:
Ved klikk skal hjelpedialog .bidm_dialog vises
.bidm_error-wrapper:
.bidm_error-wrapper må hentes ut fra DOM treet og tas vare på. Den må settes
tilbake i DOM treet når en error skal vises, se eksempelkode. Dette er for å få
animasjon til å fungere i Firefox.
.bidm_error-wrapper .bidm_text må fylles dynamisk med feilmelding i forhold til
innholdet i input feltet.
.bidm_body input.bidm_phone:
Krever 8 tall
Max 8 tall
.bidm_body input.bidm_birth:
Krever 6 tall
Max 6 tall
.bidm_body button.bidm_next:
Validere innholdet i input.phone, om feil vis error-wrapper
legg til css-klassen bidm_visible til bidm_error-wrapper
Validere innholdet i input.birth, om feil vis error-wrapper
legg til css-klassen bidm_visible og bidm_right til bidm_error-wrapper
.bidm_dialog:
Når .bidm_close trykkes, ESC trykkes eller bruker trykker utenfor dialogen, skal
den lukkes.
Når dialogen blir vist, skal .bidm_dialog-header .bidm_title ha autofokus (på
desktop) for å gjøre dialogen modal.
Exceptions
ref.html
Startup
#bidm_ref-label skal ha fokus
Operation
.bidm_header button.bidm_close:
Ved klikk skal applikasjonen avsluttes
.bidm_body button.bidm_help:
Ved klikk skal hjelpedialog .bidm_dialog vises
.bidm_ref-wrapper bidm_ref-word:
Dette er labelen som skal inneholde referanseordet.
.bidm_dialog:
Når .bidm_close trykkes, ESC trykkes eller bruker trykker utenfor dialogen, skal
den lukkes.
Når dialogen blir vist, skal .bidm_dialog-header .bidm_title ha autofokus (på
desktop) for å gjøre dialogen modal.
Exceptions
Hvis nettleseren ikke støtter animation, skal css-klassen .bidm_no-animation legges på
.bidm_app
wait.html
Startup
#bidm_wait-message skal ha fokus
Operation
.bidm_header button.bidm_close:
Ved klikk skal applikasjonen avsluttes
Exceptions
Hvis nettleseren ikke støtter animation, skal css-klassen .bidm_no-animation legges på
.bidm_app
success.html
Startup
header.bidm_header h1.bidm_title skal ha fokus
Operation
button.bidm_next:
Ved klikk skal brukeren føres videre til neste skjerm
error.html
Startup
header.bidm_header h1.bidm_title skal ha fokus
Operation
button.bidm_next:
Ved klikk skal brukeren føres videre til neste skjerm
.bidm_info h2:
Her skal feilmeldingens tittel vises.
.bidm_info p:
Her skal feilmeldingens beskrivelse vises.
Exceptions
Exceptions
body -> .bidm_no-animation
Brukes for å få en fallback-løsning når det vises en spinner på ref.html siden.
body -> .bidm_no-placeholder
Brukes for å vise en fallback placeholder
Berørt:
IE 9
body -> .bidm_partial-placeholder
Brukes for å vise en delvis fallback til placeholder i input
Berørt:
IE 10+
Android Internal Browser
Touch Devices:
Fjerne alt av startup focus
Det er ikke noen grunn å ha input focus når man ikke programmerisk klarer å
trigge tastaturet
Det er heller ikke noe grunn til å ha focus på .bidm_scroll på en device