Governikus KG Best Practice Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion Erstellt von der Governikus GmbH & Co. KG in Kooperation mit der AG Identity Management der Freien Universität Berlin 20.09.2017 / Version 1.0 Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion Inhaltsverzeichnis 2 Der ideale Webauftritt 3 Allgemeine Empfehlungen zum Inhalt 4 Allgemeine Empfehlungen zur Gestaltung / Design 5 Technische Empfehlungen 6 3.1. HTTPS 6 3.2. Client-URL 6 Empfehlung für die Struktur und einzelne Seiten 6 4.1. Aufruf von einem Desktop-PC 6 4.1.1. Startseite 6 4.1.2. Seite mit Voraussetzungen 8 4.1.3. Seite mit Hinweisen zum Ablauf 9 4.1.4. Seite mit Hinweisen zum Ablauf (2) 10 4.1.5. Seite mit Rückmeldung zum Auslesevorgang 12 4.2. Aufruf von einem Mobil-Gerät 13 4.2.1. Startseite 13 4.2.2. Seite mit Voraussetzungen 14 4.2.3. Seite mit Hinweisen zum Ablauf 15 4.2.4. Seite mit Rückmeldung zum Auslesevorgang 16 Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion Der ideale Webauftritt 3 Der folgende Leitfaden soll Ihnen als Diensteanbieter dabei helfen, die Webseiten der angebotenen Dienste für den Nutzer intuitiv benutzbar zu gestalten. Es werden Empfehlungen zum Design, der Technik, der Dialogstruktur sowie den Inhalten der Seite gegeben. Für diesen Leitfaden bedienen wir uns zu Anschauungszwecken der AusweisApp2, die Empfehlungen gelten jedoch auch bei Verwendung eines anderen eID-Clients. Der Dialog »Anbieter« der AusweisApp2 (siehe Abbildung 1) dient als eine Anlaufstelle bei der Suche nach Diensten und als ein Einstiegspunkt zur Nutzung eines Dienstes. Der Dialog selbst listet derzeit in der stationären Version nur den Namen (des Diensteanbieters / Dienstes) und eine dazugehörige URL, die auf den entsprechenden Internetauftritt verweist. Abbildung 1: Dialog »Anbieter« der AusweisApp2 (Version 1.10.1) Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 1. Allgemeine Empfehlungen zum Inhalt 4 Der angebotene Inhalt der Seite bestimmt maßgeblich die Chance, ob der Nutzer den angebotenen Dienst am Ende auch tatsächlich nutzt oder ob es beim bloßen Besuch der Seite bleibt. a) Wording Sprechen Sie auf allen Seiten von der „Online-Ausweisfunktion“. Die Verwendung von anderen Begriffen, wie z. B. „eID-Funktion“, sorgt für Verwirrung. Verzichten Sie auf Abkürzungen, wie z. B. „nPA“. Sprechen Sie stattdessen immer vom „Personalausweis“. b) Vorteile der Online-Ausweisfunktion Weisen Sie auf Vorteile der Funktion hin. Handelt es sich um einen Dienst, den man bisher nur persönlich vor Ort wahrnehmen konnte, so teilen Sie mit, dass dies nun „bequem von zu Hause aus“ erledigt werden kann. Auch Formulierungen, wie „direkt online“ oder „Diesen Antrag können Sie jetzt auch papierlos stellen“, stellen positive Aspekte des Einsatzes vor. c) Informationen in der AusweisApp2 Tragen Sie den in der AusweisApp2 angezeigten Informationen im Dialog Anbieter (siehe Abbildung 1) Rechnung. Wenn im Dialog »Ausweisen« der AusweisApp2 dem Nutzer nicht aussagekräftige oder neue Informationen angezeigt werden, kann bei ihm der Eindruck entstehen, einen Fehler gemacht zu haben bzw. einen anderen, als den gewollten Dienst zu nutzen. Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 2. Allgemeine Empfehlungen zur Gestaltung / Design 5 Wenn der Nutzer beim Aufruf der Seite erst nach der Einsatzmöglichkeit der Online-Ausweisfunktion suchen muss, erhöht das die Gefahr, dass der Nutzer den gewünschten digitalen Dienst nicht wahrnimmt. a) Sichtbarmachen der Online-Ausweisfunktion Stellen Sie die Möglichkeit der Nutzung der Online-Ausweisfunktion sichtbar dar. Verwenden Sie das Logo für die Online-Ausweisfunktion. Im Falle verschiedener Möglichkeiten zur Authentifizierung für Ihren Dienst versuchen Sie, diese gleichberechtigt neben- oder übereinander zu platzieren. b) Verwendung einer Landingpage Nutzen Sie für den Link in der Anbieterliste der AusweisApp2 eine Seite, die speziell auf die Nutzung des Dienstes zugeschnitten ist. Begrüßen Sie auf einer sog. Landingpage¹ den Nutzer noch einmal und machen Sie ihm ggf. deutlich, dass es sich hierbei um eine spezielle Seite für die Nutzung eines Dienstes handelt. c) Konzentration auf wenige Informationen Geben Sie dem Nutzer nicht zu viele Informationen. Verzichten Sie insbesondere auf solche, die nichts mit dem eigentlichen Dienst zu tun haben oder erst für spätere Schritte relevant sind. d) Trennung von Informationen Trennen Sie notwendige/wichtige Informationen von weiterführenden. Machen Sie dies auch gestalterisch deutlich, z. B. durch eine andere Hintergrundfarbe oder die Verwendung von Symbolen. Platzieren Sie die weiterführenden Informationen unterhalb der anderen. Eine kurze Überschrift stellt den Bezug zu den vorangegangenen Texten her (siehe Abbildung 3). e) Anzeige von aktuellen Informationen Zeigen Sie, wenn möglich, immer aktuelle Screenshots der AusweisApp2. Sollte es Ihnen nicht möglich sein, immer auf Änderungen zu reagieren und aktuelle Bilder einzupflegen, so greifen Sie auf stilisierte Bilder zurück. f) Anzeige auf Mobilgeräten Alle ausgesprochenen Empfehlungen gelten auch beim Einsatz von Mobilgeräten. Die Seite sollte verschiedenen Anforderungen der zum Einsatz kommenden Geräte Rechnung tragen (responsive design). Nicht auf mobile Geräte optimierte Seiten können die Nutzung der Online-Ausweisfunktion auf diesen stark erschweren oder sogar unmöglich machen. Passen Sie bei einem Aufruf von einem Mobilgerät Dialoge und Bilder an (siehe Abschnitt 4.2). Zeigen Sie hier insbesondere keine Bilder der Desktopversion der AusweisApp2. ¹Webseite, bei der ein bestimmtes Angebot (hier die Online-Ausweisfunktion) im Vordergrund steht. https://de.wikipedia.org/wiki/Landingpage Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 3. Technische Empfehlungen 6 3.1. HTTPS Nutzen Sie für Ihren gesamten Webauftritt, jedoch mindestens für die Sitzung, während derer die Authentifizierung stattfindet, eine HTTPS-Verbindung. 3.2. Client-URL Verwenden Sie auf Desktopsystemen zum Aufruf der AusweisApp2 die URL: http://127.0.0.1:24727/eID-Client Verwenden Sie aus Kompatibilitätsgründen auf mobilen Systemen zum Aufruf der AusweisApp2 hingegen die URL: eid://127.0.0.1:24727/eID-Client 4. Empfehlung für die Struktur und einzelne Seiten Um eine Überfrachtung mit Informationen zu vermeiden, teilen Sie den Ausweisprozess in mehrere aufeinander aufbauende Dialoge: ▪▪ ▪▪ ▪▪ ▪▪ ▪▪ Startseite mit Begrüßung Seite mit Voraussetzungen Seite mit Hinweisen zum Ablauf Seite mit weiteren Hinweisen zum Ablauf Seite für Rückmeldung zum Auslesevorgang Für dei nachfolgenden Schritte haben wir uns aus Gründen der Verständlichkeit auf einen konkreten Dienst „Open PGP-Schlüssel beglaubigen“ bezogen. 4.1. Aufruf von einem Desktop-PC 4.1.1. Startseite Stellen Sie auf der „ersten Seite“ einen Bezug zur Online-Ausweisfunktion her. Machen Sie deutlich, dass der Nutzer hier richtig ist und wie er den Ausweisprozess starten kann. Starten Sie mit einer Begrüßung, in der Sie mitteilen, dass hier die Online-Ausweisfunktion zur Erledigung einer Aufgabe eingesetzt Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 7 werden kann. Wenn die Aufgabe z. B. in der Beglaubigung eines Schlüssels besteht, so könnte die Begrüßung lauten: „Herzlich willkommen, Sie haben hier die Möglichkeit, mit der Online-Ausweisfunktion Ihres Ausweises einen OpenPGP-Schlüssel beglaubigen zu lassen.“ Zeigen Sie auf der Landingpage nur Informationen an, die der Orientierung (Wo bin ich hier? Was kann ich hier machen?) dienen. Verwenden Sie das Logo der Online-Ausweisfunktion, um dem Besucher zu verdeutlichen, dass er die Online-Ausweisfunktion hier nutzen kann. Platzieren Sie das Logo direkt auf der Schaltfläche, die den weiteren Dialog startet, in dem der Ausweisprozess stattfindet. Verweisen Sie an dieser Stelle bei Fragen zur Online-Ausweisfunktion auf den Webauftritt des Bundesministerium des Innern zum Personalausweis (http://www.personalausweisportal.de). Vermeiden Sie durch eine Platzierung im unteren Bereich der Seite die Einstufung des verlinkten Inhalts als Pflichtlektüre für die erfolgreiche Nutzung (siehe Abbildung 2). Herzlich willkommen, Woher bekomme ich nähere Informationen zur Online-Ausweisfunktion? www.personalausweisportal.de Zurück Abbildung 2: Dialogbox mit Begrüßung und Infobereich Weiter Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 8 4.1.2. Seite mit Voraussetzungen Der Nutzer hat sich auf der Startseite für den Einsatz der Online-Ausweisfunktion entschieden. Bieten Sie auf der folgenden Seite Informationen zu den Voraussetzungen für die Nutzung an. Für die Nutzung der Online-Ausweisfunktion benötigen Sie: Portal zum Personalausweis. https://www.ausweisapp.bund.de/download Woran erkenne ich, ob die Online-Ausweisfunktion freigeschaltet ist? AusweisApp2 Zurück Abbildung 3: Dialogbox mit Voraussetzungen für den Einsatz der Online-Ausweisfunktion Ein Großteil der Nutzer sind nicht im Bilde, ob ihr Ausweis freigeschaltet ist bzw. wie man selbiges herausfinden kann. Verweisen Sie an dieser Stelle (im Infobereich) auf die AusweisApp2 oder Informationsquellen (siehe Abbildung 3). Weiter Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 9 4.1.3. Seite mit Hinweisen zum Ablauf Geben Sie auf der nächsten Seite Informationen zum Ablauf des Ausweis-Prozesses. Hierbei müssen Sie nicht auf die einzelnen durchzuführenden Schritte, wie Anschluss eines Kartenlesers oder das Auflegen des Ausweises auf den Kartenleser, eingehen, da die entsprechenden Hilfestellungen im Bedarfsfall von der AusweisApp2 angezeigt werden. Es reicht ein Hinweis auf den Start der AusweisApp2 (siehe Abbildung 4). Starten der AusweisApp2 Handbuch Wie kann ich die AusweisApp2 installieren? https://www.ausweisapp.bund.de/download Zurück Abbildung 4: Dialogbox mit Hinweis zum Start der AusweisApp2 Es besteht die Möglichkeit über http://localhost:24727/eID-Client?status zu prüfen, ob die AusweisApp2 bereits gestartet ist. In diesem Fall könnte diese Seite automatisch übersprungen werden. Weiter Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 10 4.1.4. Seite mit Hinweisen zum Ablauf (2) Auch wenn die AusweisApp2 automatisch in den Vordergrund kommt und damit in den Fokus rücken sollte, empfiehlt es sich, auf der Webseite auf den Wechsel hinzuweisen (siehe Abbildung 5). Abbildung 5: Dialogbox mit weiteren Hinweisen zum Ablauf Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 11 Wenn Sie aktuelle Screenshots der AusweisApp2 (statt stilisierter Bilder) verwenden, zeigen Sie hier einen Screenshot des zum Schritt passenden Dialogs »Ausweisen«. So kann der Nutzer beide Bilder vergleichen und bekommt auf diesem Wege eine Bestätigung, sich auf dem richtigen Weg zu befinden (siehe Abbildung 6). Abbildung 6: Dialogbox mit weiteren Hinweisen zum Ablauf und aktuellem Screenshot der AusweisApp2 Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 12 4.1.5. Seite mit Rückmeldung zum Auslesevorgang Teilen Sie mit, wenn und was für Daten erfolgreich ausgelesen wurden (siehe Abbildung 7). Zeigen Sie aus Datenschutzgründen die ausgelesenen Inhalte nur an, wenn dies für Ihren Vorgang sinnvoll oder notwendig ist. Teilen Sie dem Nutzer ebenso mit, wenn der Auslesevorgang nicht erfolgreich war. Geben Sie hier den Grund (Entfernen des Ausweises, Eingabe einer falschen PIN) so genau wie möglich an. Noch keine Datei ausgewählt Sie haben noch keinen PGP-Schlüssel? hier Zurück Abbildung 7: Dialogbox mit Rückmeldung zum Auslesevorgang Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 13 4.2. Aufruf von einem Mobil-Gerät 4.2.1. Startseite Nutzen Sie »expand less« und »expand more« Elemente, um Inhalte zu kapseln und die angezeigten Informationen übersichtlich zu gliedern (siehe Abbildung 8). Herzlich willkommen, Herzlich willkommen, Zweck eines OpenPGP-Schlüssels Zweck eines OpenPGP-Schlüssels Weiter Abbildung 8: Entwurf einer mobilen Startseite mit expand-Elementen Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 14 4.2.2. Seite mit Voraussetzungen Passen Sie die Seite mit den Voraussetzungen an die mobile Plattform an (siehe Abbildung 9). Smartphone oder Tablet oder ein AndroidGerät und einen Bluetooth-Kartenleser. Liste mit geeigneten Geräten Zurück Abbildung 9: Entwurf für eine mobile Seite mit Voraussetzungen Weiter Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 15 4.2.3. Seite mit Hinweisen zum Ablauf Weisen Sie auf einem Mobilgerät auf die ggf. notwendige Auswahl der AusweisApp2 beim Internet-Aufruf hin (siehe Abbildung 10). Zurück Weiter Abbildung 10: Internet-Aufruf auf einem Android-Smartphone Der ideale Diensteanbieter – Empfehlungen für die Gestaltung des Web-Auftritts eines Dienstes zur Online-Ausweisfunktion 16 4.2.4. Seite mit Rückmeldung zum Auslesevorgang Teilen Sie mit, wenn und was für Daten erfolgreich ausgelesen wurden (siehe Abbildung 11). Zeigen Sie aus Datenschutzgründen die ausgelesenen Inhalte nur an, wenn dies für Ihren Vorgang sinnvoll oder notwendig ist. Teilen Sie dem Nutzer ebenso mit, wenn der Auslesevorgang nicht erfolgreich war. Geben Sie hier den Grund (Entfernen des Ausweises, Eingabe einer falschen PIN) so genau wie möglich an. Die weiteren Schritte erfolgen dann analog den statioinären Versionen. Abbildung 11: Rückmeldung zum Auslesevorgang Wir wünschen Ihnen viel Erfolg bei der Umsetzung dieser Empfehlungen. Für weitere Fragen wenden Sie sich gerne an das AusweisApp2-Team unter www.ausweisapp.bund.de