Skip to main content

DigiD afnemers richtlijnen

Klantreis bij authenticeren

Situatie zonder routeringsdienst

Flow van klantreis situatie zonder routeringsdienst

Situatie met routeringsdienst

Flow van klantreis situatie met routeringsdienst

Authenticeren voor taak

Beschrijving

Dit authenticatie blok stuurt de gebruiker op adequate wijze een authenticatie flow in, die nodig om een taak of actie uit te voeren op de website. Hij valt op en biedt hulp aan als nodig. Door de keuze tussen authenticatiedienst al te maken op de detailpagina waar de taak is vermeld, kun je het aantal clicks verminderen en de keuze meer in de context plaatsen van de taak.

Wanneer gebruiken

Gebruik dit component op een pagina van waar uit je een taak, actie of formulier kan starten waarvoor een authenticatie nodig is. Welke variant je gebruikt is afhankelijk van de mogelijke authenticatiedienst.

Varianten

Mogelijke varianten:

  • Authenticeren met DigiD
  • Authenticeren met eHerkenning
  • Authenticeren met DigiD of met eIDAS
  • Authenticeren met op dit punt unspecified dienst, of authenticeren niet nodig (je gaat gelijk de taak flow in)

Kun je voor een taak zowel authenticeren met DigiD (met of zonder eIDAS optie) en eHerkenning? Plaats dan beide blokken onder elkaar. Vermeld in de copy een verschil in user value tussen inloggen met DigiD (of eIDAS) en eHerkenning - zoals voor particulieren of voor ondernemers - indien dit er is.

Component

Anatomie en customizen

Dit authenticatie component bestaat uit:

1. Background

Functie: opvallen en de gebruiker effectief een flow in leiden.

Vereist: moet te zien zijn, of via background-color, of via border. Moet alle content op de juiste manier bevatten.

Vrij te bewerken: background-color (zolang WCAG kleur-contrast nog behaald wordt), border-style, border-width, border-color, border-radius, shadow, width.

2. Title

Functie: de flow introduceren en door de bewoording duidelijk maken wat de gebruiker gaat doen.

Vereist: font-weight: bold, WCAG kleur-contrast moet behaald worden, copy moet zoveel mogelijk taalniveau B1 halen en activerend/taakgericht geformuleerd zijn.

Vrij te bewerken: font-color, font-size (mag niet kleiner zijn dan paragraph font-size), font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy.

Voorbeeld van titel: Vraag parkeervergunning aan als burger

3. Subtitle (optioneel)

Functie: extra toelichting bieden over het inloggen of over de taak.

Vereist: font-weight: regular, WCAG kleur-contrast moet behaald worden, copy moet zoveel mogelijk taalniveau B1 halen.

Vrij te bewerken: font-color, font-size (is paragraph font-size), font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy.

Voorbeeld van subtitel: U hebt minimaal eHerkenning niveau 3 nodig om in te loggen

4. logo authenticatiedienst

Functie: in één oogopslag laten zien dat je moet authenticeren met authenticatiedienst als deze taak wilt uitvoeren.

Vereist: logo design mag niet worden aangepast tenzij authenticatiedienst het logo hierziet, positie is rechtsboven het blok, size is 56px bij 56px of 3,5 rem bij rem=16.

Vrij te bewerken: keuze logo

DigiD logo

5. Button

Functie: taak flow starten en doorleiden naar omgeving authenticatiedienst.

Vereist: font-weight: bold, WCAG kleur-contrast moet behaald worden, copy moet zoveel mogelijk taalniveau B1 halen en activerend/taakgericht geformuleerd zijn, min-height: 44px of 2,75rem bij rem=16.

Vrij te bewerken: aantal buttons, background-color, font-color, font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy, icon-color, icon, width, shadow, border-style, border-width, border-color, border-radius, interactive states.

Voorbeeld van een knop

6. Assistive text

Functie: linken naar aanvragen authenticatiedienst indien gebruiker deze niet heeft, linken naar troubleshooting of meer uitleg (optioneel).

Vereist: font-weight: regular, WCAG kleur-contrast moet behaald worden, copy moet zoveel mogelijk taalniveau B1 halen en activerend/taakgericht geformuleerd zijn, link font-color komt overeen met huisstijl en heeft underscore, link copy is beschrijvend genoeg voor link-to-link navigatie, communiceer dat het een externe link betreft (met icoon of tekstueel).

Vrij te bewerken: font-size (is paragraph font-size), font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy.

Voorbeeld van Voorbeeld helptekst

Taak met DigiD als middel

Voorbeeld van DigiD op desktop

Voorbeeld van DigiD (desktop scherm).

Voorbeeld van DigiD op mobiel

Voorbeeld van DigiD (mobiel scherm).

Taak met eHerkenning als middel

Voorbeeld van eHerkenning op desktop

Voorbeeld van eHerkenning (desktop scherm).

Voorbeeld van eHerkenning op mobiel

Voorbeeld van eHerkenning (mobiel scherm).

Taak met DigiD en eIDAS als middels

Voorbeeld van DigiD en eIDAS op desktop

Voorbeeld van DigiD en eIDAS (desktop scherm).

Voorbeeld van DigiD en eIDAS op mobiel Voorbeeld van DigiD en eIDAS (mobiel scherm).

Taak met unspecified middel

Voorbeeld van unspecified middel op desktop

Voorbeeld van unspecified middel (desktop scherm).

Voorbeeld van unspecified middel op mobiel

Voorbeeld van unspecified middel (mobiel scherm).

Voorbeelden in context

Parkeervergunning aanvragen

Voorbeeld aanvragen parkeervergunning voor burgers

Voorbeeld van het aanvragen van een parkeervergunning voor burgers.

Voorbeeld aanvragen parkeervergunning voor ondernemers

Voorbeeld van het aanvragen van een parkeervergunning voor ondernemers.

Patiëntgegevens wijzigen

Bent u verhuisd, of hebt u een andere verzekering, huisarts of apotheek? Dan kunt u de nieuwe gegevens doorgeven aan zorginstelling in uw Mijn omgeving.

Na wijzigen van de gegevens, sturen wij een bevestiging naar het e-mailadres dat u hebt ingevuld. In deze bevestiging staan de gegevens die u hebt doorgegeven.

Voorbeeld wijzigen patiëntgegevens

Voorbeeld van het wijzigen van patiëntgegevens.

Authenticeren voor Mijn omgeving

Beschrijving

Dit authenticatie blok stuurt de gebruiker op adequate wijze een authenticatie flow in, die nodig om de Mijn omgeving binnen te komen van de organisatie. Hij valt op en biedt hulp aan als nodig. Door de pagina te vullen met tegels krijg je in één oogopslag een beeld tussen welke authenticatiediensten je kunt kiezen.

Wanneer gebruiken

Gebruik dit component alleen op de algemene inlogpagina van de Mijn omgeving. Welke variant je gebruikt is afhankelijk van de mogelijke authenticatiedienst.

Varianten

Mogelijke varianten:

  • Authenticeren met DigiD
  • Authenticeren met eHerkenning
  • Authenticeren met eIDAS

Bij kleinere schermbreedtes kun je het beste de mobiele variant gebruiken. Deze is verticaal ingekort zodat 1 blok niet schermvullend is en de gebruiker veel moet scrollen.

Heb je meer dan deze 3 authenticatiediensten? Probeer die in hetzelfde stramiën toe te passen en plaats een comment in dit bestand.

Component

Anatomie en customizen

Dit authenticatie component bestaat uit:

1. Background

Functie: opvallen en de gebruiker effectief een keuze laten maken.

Vereist: moet te zien zijn, of via background-color, of via border. Moet alle content op de juiste manier bevatten.

Vrij te bewerken: background-color (zolang WCAG kleur-contrast nog behaald wordt), border-style, border-width, border-color, border-radius, shadow, width.

2. logo authenticatiedienst

Functie: in één oogopslag laten zien welke authenticatiedienst het betreft.

Vereist: logo design mag niet worden aangepast tenzij authenticatiedienst het logo hierziet, positie is middenbovenin het blok, size is 80px bij 80px of 5 rem bij rem=16.

Vrij te bewerken: keuze logo

DigiD logo

3. Title

Functie: duidelijk maken dat het hier inloggen met authenticatiedienst betreft.

Vereist: font-weight: bold, WCAG kleur-contrast moet behaald worden, copy zoals bovenaan deze sheet benoemd.

Vrij te bewerken: font-color, font-size (mag niet kleiner zijn dan paragraph font-size), font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten). Voorbeeld titel: Inloggen met eHerkenning

4. Subtitle (optioneel)

Functie: extra toelichting bieden over het inloggen of over de Mijn omgeving.

Vereist: font-weight: regular, WCAG kleur-contrast moet behaald worden, copy moet zoveel mogelijk taalniveau B1 halen.

Vrij te bewerken: font-color, font-size (is paragraph font-size), font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy.

Voorbeeld subtitel: U hebt minimaal eHerkenning niveau 3 nodig om in te loggen

5. Button

Functie: Authenticatieflow ingaan en doorleiden naar omgeving authenticatiedienst.

Vereist: font-weight: bold, WCAG kleur-contrast moet behaald worden, copy zoals bovenaan deze sheet benoemd, min-height: 44px of 2,75rem bij rem=16.

Vrij te bewerken: background-color, font-color, font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy, icon-color, icon, width, shadow, border-style, border-width, border-color, border-radius, interactive states.

Voorbeeld knop

6. Assistive text

Functie: linken naar aanvragen authenticatiedienst indien gebruiker deze niet heeft, linken naar troubleshooting of meer uitleg (optioneel).

Vereist: font-weight: regular, WCAG kleur-contrast moet behaald worden, copy moet zoveel mogelijk taalniveau B1 halen en activerend/taakgericht geformuleerd zijn, link font-color komt overeen met huisstijl en heeft underscore, link copy is beschrijvend genoeg voor link-to-link navigatie, communiceer dat het een externe link betreft (met icoon of tekstueel).

Vrij te bewerken: font-size (is paragraph font-size), font-family (RijksoverheidSansWebText is vereist voor overheidsdiensten), inhoud copy.

Voorbeeld helptekst met link: Geen eHerkenning? Vraag eHerkenning aan.

Componenten op desktop, tablet en mobiel

DigiD op desktop en tablet

DigiD op dektop en tablet.

DigiD op mobiel

DigiD op mobiel.

eHerkenning op desktop en tablet

eHerkenning op desktop en tablet.

eHerkenning op mobiel

eHerkenning op mobiel.

eIDAS op desktop

eIDAS op desktop en tablet.

eIDAS op mobiel

eIDAS op mobiel.

Voorbeelden in context

Inloggen bij Mijn omgeving

In de persoonlijke online omgeving Mijn omgeving kunt u makkelijk, snel en veilig zaken regelen bij de gemeente. Bewoners kunnen bijvoorbeeld een verhuizing doorgeven of extra parkeertegoed kopen via DigiD. Bedrijven kunnen eenvoudig online zaken regelen via eHerkenning.

Voorbeeld inloggen Mijn omgeving met DigiD

Voorbeeld inloggen Mijn omgeving met eHerkenning

Voorbeeld inloggen Mijn omgeving met eIDAS

Voorbeeld inloggen Mijn omgeving met meerdere middelen

Toegankelijkheid

Let op het volgende:

Referenties

Documentatie geschreven door Rowan Verbraak. Neem voor vragen en feedback contact op met rowan.verbraak@logius.nl