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
Introduksjon Denne delen av dokumentet beskriver utforming av brukergrensesnittet for innlogging, signering og betaling med BankID på mobil. INNHOLDSFORTEGNELSE 1. Introduksjon 2. Krav 3. Designmaler 4. Retningslinjer 5. Prosessflyt 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.
Krav
Krav Overordnede krav 1 Tema BankID på mobil logo Fargevalg Typografi Elementer Layout Feilmeldinger Krav BankID-logoen skal vises på alle skjermbildene og plasseres på definert sted i applikasjonsfeltet Skjermbildene skal inneholde de samme fargene som skissene og fargeoversikten viser. Krav til bruk av typografi er gitt i spesifiserte høyder og bredder. Antall elementer og plassering av elementer skal implementeres i henhold til gitte skjermskisser. 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). Visuell karakter av feilmeldinger skal implementeres i henhold til gitte skjermskisser.
Krav Overordnede krav 2 Tema Tekst Prosess/flyt Data Validering Bilder Input typer Krav Ved implementering av løsningen skal teksten i skjermbildene være lik det skjermskissene viser. Flyt for identifisering, signering og BankAxess skal implementeres slik skjermskissene beskriver. 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 vil hovedsakelig skje på server-siden. Nettleseren/JavaScript skal validere åtte siffer i feltet for mobilnummer og seks siffer i feltet for. Det er ikke tillatt å bruke nye bilder/grafiske elementer i den implementerte BankID løsningen. 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 font-family: Arial, Helvetica, Verdana; font-size: 18px; color: #555555; Hjelpetekst knapp og ikon font-family: Arial, Helvetica, Verdana; font-size: 14px; color: #555555; Knapp Tittel font-family: Arial, Helvetica, Verdana; font-size: 18px; color: #000000; background: #0078BD; border-radius: 3px; Input font-family: Arial, Helvetica, Verdana; font-size: 18px; color: #000000; Label hint font-family: Arial, Helvetica, Verdana; font-size: 14px; color: #555555;
Retningslinjer Referanseord Label font-family: Arial, Helvetica, Verdana; font-size: 16px; color: #000000; Referansekode font-family: Arial, Helvetica, Verdana; font-size: 18px; font-weight: bold; text-transform: uppercase color: #0078BD; Delelinje border-color: #BBBBBB; Type BankID font-family: Arial, Helvetica, Verdana; font-size: 12px; color: #555555; Hjelpetekst font-family: Arial, Helvetica, Verdana; font-size: 14px; 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 ) 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. Dialog Dialog på mobil MALER IDENTIFISERING SIGNERING BANKAXESS Eksternt Innlogging Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering B-03: Informasjon om BankAxess med BankID på mobil Referanseord I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres B-04: Kunden får informasjon om betalingsforslaget/betalingsordren Ventesignal Suksess Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel
Prosessflyt Identifisering Dialog Dialog på mobil IDENTIFISERING SIGNERING BANKAXESS 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 Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel
Prosessflyt: Identifisering 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 Kontroller referansenummer på mobilen I-03: Informasjon om BankIDidentifisering Brukeren er identifisert I-05: SMS-bekreftelse på identifisering
Prosessflyt: Identifisering Mobilnummer og 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 -felt. Brukeren skal kunne trykke enter for å komme videre i dialogen etter at mobilnummer og er fylt ut. IDENTIFISERING Kontroller referansenummer på mobilen I-03: Informasjon om BankIDidentifisering Brukeren er identifisert I-05: SMS-bekreftelse på identifisering
Prosessflyt: Identifisering Referanseord Retningslinjer: IDENTIFISERING Skjermbildet skal vises mens brukeren utfører handling på mobilen Kontroller referansenummer på mobilen I-03: Informasjon om BankIDidentifisering Brukeren er identifisert I-05: SMS-bekreftelse på identifisering
Avbryt Godta Prosessflyt: Identifisering I-03. Informasjon om BankIDidentifisering IDENTIFISERING Kontroller referansenummer på mobilen N Telenor 12:34 Tilbake I-03: Informasjon om BankIDidentifisering Brukeren er identifisert Bekreft referanse: FEILFRI DIAMANT hos DNB Bank for BankID identifisering 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 Kontroller referansenummer på mobilen N Telenor 12:34 Tilbake Tast ID-PIN: Avbryt I-03: Informasjon om BankIDidentifisering 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 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 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 Kontroller referansenummer på mobilen N Telenor 12:34 I-03: Informasjon om BankIDidentifisering Valgfri tekst for brukerstedet. Maks 60 tegn. Avsender BankID Valgfri tekst for brukerstedet. (inntil 160 tegn) Brukeren er identifisert I-05: SMS-bekreftelse på identifisering
Prosessflyt Signering Dialog Dialog på mobil IDENTIFISERING SIGNERING BANKAXESS 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 Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel
Prosessflyt: Signering IDENTIFISERING SIGNERING 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. Kontroller referansenummer Når klient er startet skal det tydeliggjøres at brukeren er inne i prosessflyt på mobilen for Signering. For at brukeren skal få hjelp til å velge mellom «BankID» og «BankID I-03: på Informasjon mobil» kan om BankIDidentifisering 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. S-03: Informasjon om BankIDsignering S-04: Kunden får se teksten som skal signeres Brukeren er identifisert Brukeren har signert, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering
Prosessflyt: Signering IDENTIFISERING 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 -felt. Kontroller referansenummer Brukeren skal kunne trykke enter for å komme videre i dialogen etter på at mobilen mobilnummer og er fylt ut. I-03: Informasjon om BankIDidentifisering SIGNERING S-03: Informasjon om BankIDsignering S-04: Kunden får se teksten som skal signeres Brukeren er identifisert Brukeren har signert, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering PS. Husk å endre tittel i sidemalen fra Identifisering til Signering
OK Prosessflyt: Signering S-03. Informasjon om BankIDsignering IDENTIFISERING SIGNERING Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering N Telenor 12:34 Avbryt I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres Bekreft for å starte signering med BankID hos Nettbutikken.no. Brukeren er identifisert I-05: SMS-bekreftelse på identifisering Brukeren har signert, bekreftelse S-05: SMS-bekreftelse på signering
Prosessflyt: Signering S-04: Brukeren får se teksten IDENTIFISERING som skal signeres Merk: Dette er dataene som brukeren signerer over, og brukerstedet må sørge for at det inneholder nok informasjon til at det kan benyttes som bevis. Begrensning Tast inn på mobilnummer 120 tegn. og SIGNERING Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering N Telenor 12:34 I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres Avbryt Brukersted: Nettbutikken.no Signering kjøpekontrakt. Ref. nr: 4536745 Dato: 14.09.2010 Brukeren er identifisert I-05: SMS-bekreftelse på identifisering Brukeren har signert, bekreftelse S-05: SMS-bekreftelse på signering
Prosessflyt: Signering T-04. Tast ID-PIN IDENTIFISERING SIGNERING Merk: Ulike versjoner av SIM-kort kan ha ulik begrepsbruk. Noen SIM-kort Velg BankID bruker på «Sign-PIN» mobil som begrep, mens andre bruker «ID-PIN». Alle nye SIM-kort benytter «ID-PIN». Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering N Telenor 12:34 Tilbake Avbryt I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres Tast ID-PIN: Brukeren er identifisert Brukeren har signert, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering Send
Prosessflyt: Signering Ventesignal Retningslinjer: IDENTIFISERING SIGNERING Skjermbildet skal vises mens brukeren utfører markerte handlinger på mobilen. Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres Brukeren er identifisert Brukeren har signert, bekreftelse 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 Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres Brukeren er identifisert Brukeren har signert, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering
Prosessflyt: Signering S-05. SMS-bekreftelse på signering IDENTIFISERING SMS: Brukerstedet bestemmer innholdet i SMS-en. Inntil 160 tegn. Avsender Velg BankID for på meldingene mobil vil være: «BankID» SIGNERING Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering N Telenor 12:34 I-03: Informasjon om BankIDidentifisering S-04: Kunden får se teksten som skal signeres Avbryt Brukersted: Nettbutikken.no Kjøpekontrakt signert. Brukersted: Nettbutikken.no Ref.nr: 4536745 Dato: 14.09.2014 Kjøpekontrakt signert. Ref. nr: 4536745 Dato: 14.09.2010 Brukeren er identifisert I-05: SMS-bekreftelse på identifisering Brukeren har signert, bekreftelse S-05: SMS-bekreftelse på signering
Prosessflyt BankAxess Dialog Dialog på mobil IDENTIFISERING SIGNERING BANKAXESS 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 Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel
Dialog Dialog på mobil Prosessflyt: BankAxess Velg BankID IDENTIFISERING på mobil SIGNERING BANKAXESS 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 Tast ved inn utforming mobilnummer av inngang og som er spesifikk for brukerstedet: BankID logoen skal synliggjøres på siden. Fargepaletten skal benyttes for utforming av applikasjonsfeltet. Kontroller referansenummer S-03: Informasjon om BankIDsigneringfor Når klient er startet på skal mobilen det tydeliggjøres at brukeren er inne i prosessflyt BankAxess. For at brukeren skal I-03: få Informasjon hjelp til å velge om BankIDidentifisering benyttes: skal mellom «BankID» og «BankID S-04: på Kunden mobil» får kan se teksten som følgende hjelpetekst signeres BankID: Din BankID er lagret sentralt i banken. BankID på mobil: Din BankID er lagret på SIM-kortet i din mobiltelefon. B-03: Informasjon om BankAxess med BankID på mobil B-04: Kunden får informasjon om betalingsforslaget/betalingsordren Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel
Dialog Dialog på mobil Prosessflyt: BankAxess Tast inn mobilnummer IDENTIFISERING og Retningslinjer: På desktop skal markør være plassert i mobilnummer-feltet når applikasjonsfeltet fremkommer. Brukeren skal kunne Kontroller bruke tabulator referansenummer for å flytte markøren til -felt. S-03: Informasjon om BankIDsignering at mobilnummer Brukeren skal kunne på trykke mobilen enter for å komme videre i dialogen etter og er fylt ut. I-03: Informasjon om BankIDidentifisering SIGNERING S-04: Kunden får se teksten som skal signeres BANKAXESS B-03: Informasjon om BankAxess med BankID på mobil B-04: Kunden får informasjon om betalingsforslaget/betalingsordren Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse 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
OK Dialog Dialog på mobil Prosessflyt: BankAxess B-03: Informasjon IDENTIFISERING om BankAxess SIGNERING med på mobil BANKAXESS Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering B-03: Informasjon om BankAxess med BankID på mobil N Telenor 12:34 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 Brukeren er identifisert Bekreft for å starte betaling med BankAxess I-05: SMS-bekreftelse hos på Nettbutikken.no. identifisering Brukeren har signert, bekreftelse S-05: SMS-bekreftelse på signering Brukeren har handlet, bekreftelse B-05: SMS-bekreftelse på handel
Dialog Dialog på mobil Prosessflyt: BankAxess B-04: Brukeren IDENTIFISERING får informasjon SIGNERING om betalingsforslaget / betalingsordren Merk: Dette er dataene som brukeren signerer over, og brukerstedet må sørge for at det inneholder nok informasjon Tast inn til mobilnummer at det kan benyttes og som bevis. Begrensning Tast inn på mobilnummer 120 tegn. og BANKAXESS Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering B-03: Informasjon om BankAxess med BankID på mobil N Telenor 12:34 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 Brukeren er identifisert Brukersted: Nettbutikken.no BankAxess betaling I-05: SMS-bekreftelse på Ref. nr: identifisering 4536745 Dato: 14.09.2010 Beløp: 5 679,- Brukeren har signert, bekreftelse S-05: SMS-bekreftelse på signering Brukeren har handlet, bekreftelse B-05: SMS-bekreftelse på handel
Dialog Dialog på mobil Prosessflyt: BankAxess IDENTIFISERING T-04. Tast ID-PIN SIGNERING BANKAXESS Merk: Ulike versjoner Velg av SIM-kort BankID på kan mobil ha ulik begrepsbruk. Noen SIM-kort Velg BankID bruker på «Sign-PIN» mobil som begrep, mens andre bruker «ID-PIN». Alle nye SIM-kort benytter «ID-PIN». Kontroller referansenummer på mobilen S-03: Informasjon om BankIDsignering B-03: Informasjon om BankAxess med BankID på mobil N Telenor 12:34 I-03: Informasjon om BankIDidentifisering Tilbake Avbryt S-04: Kunden får se teksten som skal signeres B-04: Kunden får informasjon om betalingsforslaget/betalingsordren Tast ID-PIN: Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel Send
Dialog Dialog på mobil Prosessflyt: BankAxess Ventesignal IDENTIFISERING SIGNERING BANKAXESS Retningslinjer: Skjermbildet skal vises mens brukeren utfører markerte handlinger på mobilen. 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 Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse I-05: SMS-bekreftelse på identifisering S-05: SMS-bekreftelse på signering B-05: SMS-bekreftelse på handel
Dialog Prosessflyt: BankAxess Suksess Retningslinjer: IDENTIFISERING SIGNERING Dialog på mobil BANKAXESS 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 Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse 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. 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 Dialog på mobil Prosessflyt: BankAxess B-05. SMS-bekreftelse IDENTIFISERING på handel SIGNERING BANKAXESS SMS: Brukerstedet bestemmer Velg BankID innholdet på mobil i SMS-en. Inntil 160 tegn. Avsender for meldingene vil være: «BankID» 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 Brukeren er identifisert Brukeren har signert, bekreftelse Brukeren har handlet, bekreftelse 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: Ekstra 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 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.bidm_dialog: Exceptions legg til css-klassen bidm_visible og bidm_right til bidm_error-wrapper 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.
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:.bidm_dialog: Exceptions Dette er labelen som skal inneholde referanseordet. 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. 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: Exceptions Ved klikk skal applikasjonen avsluttes 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:.bidm_info p: Her skal feilmeldingens tittel vises. 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