Best Practices für Webberechtigungen

Berechtigungsaufforderungen sind der Hauptmechanismus des Webs zum Schutz leistungsstarker Funktionen, die die Privatsphäre und Sicherheit der Nutzer gefährden können. Mit Berechtigungsaufforderung sorgen Browser dafür, dass ein Nutzer der anfragenden Website Zugriff auf die betreffende Funktion gewähren möchte. Berechtigungsaufforderungen werden für eine Reihe von APIs verwendet, darunter Medienerfassung (Kamera und Mikrofon), Standortbestimmung, Speicherzugriff, MIDI und Benachrichtigungen. Weitere Informationen finden Sie in der Dokumentation zur Permissions API auf MDN.

In diesem Leitfaden werden die Best Practices für das Anzeigen von Berechtigungsaufforderungen anhand von Chrome-Nutzungsstatistiken und Nutzerstudien beschrieben. Wenn Nutzer diese Best Practices befolgen, sollten Nutzer weniger unnötige Aufforderungen erhalten, was zu weniger Blockierungsentscheidungen führt. Der Artikel endet mit einigen Codemustern für die Arbeit mit berechtigungsgesteuerten APIs und Best Practices für die Wiederherstellung von Nutzern aus einem blockierten Zustand.

Best Practices für Prompts

Sie sollten nach einer Nutzerinteraktion um die Berechtigung bitten, und zwar in einem Moment, in dem die Nutzer verstehen, warum Sie fragen, und welchen Nutzen sie daraus ziehen. Wenn möglich, solltest du Nutzern alternative Methoden anbieten, um die gleiche Funktionalität zu erreichen. Als allgemeine Richtlinie gilt: Wenn Sie seltener nach Berechtigungen fragen, indem Sie die Momente auswählen, in denen Sie sorgfältig fragen, sinkt die Wahrscheinlichkeit, dass Ihre Nutzer in einen blockierten Zustand geraten, der sich nur schwer wiederherstellen lässt. In den folgenden Best Practices finden Sie weitere Details zu jedem dieser Vorschläge.

Nie beim Seitenaufbau oder ohne Nutzerinteraktion fragen

Nutzer beim Seitenaufbau um Erlaubnis zu fragen ist so, als würden Sie einen Kunden beim Betreten eines Geschäfts nach sensiblen Daten fragen. Es verwirft, dass eine Berechtigungsaufforderung – möglicherweise neben mehreren anderen Aufforderungen zur Anmeldung für einen Newsletter und zur Cookie-Einwilligung – zu sehen ist. Die Nutzer werden nicht verstehen, warum sie gefragt werden und welche Vorteile sie daraus ziehen.

Selbst wenn Ihre Webanwendung nicht ohne Zugriff auf eine bestimmte Funktion funktionieren kann, sollten Sie den Nutzern die Möglichkeit geben, zu verstehen, warum sie benötigt wird. Sie können beispielsweise der Berechtigungsaufforderung eine eigene Aufforderung vorstellen, die die Notwendigkeit erläutert und Nutzern eine Wahl lässt (z. B. durch alternative Möglichkeiten, um die gleiche Funktionalität zu erreichen). Falls Ihnen gerade kein besserer Moment einfällt, als beim Seitenaufbau um Erlaubnis zu bitten, finden Sie weiter unten in diesem Leitfaden einige Beispiele.

Ähnlich ungünstig ist die Frage nach einer Berechtigung ohne vorherige Nutzerinteraktion (auch als vorübergehende Nutzeraktivierung bezeichnet). Aus der Chrome-Telemetrie geht hervor, dass 77% der Berechtigungsaufforderungen in Chrome auf dem Computer angezeigt werden, ohne dass ein sehr grundlegendes Signal der Nutzerabsicht vorliegt. Daher sind nur 12 % dieser Aufforderungen zulässig. Nach einer Nutzerinteraktion steigen die Raten auf 30 % an. Fordern Sie die Berechtigung also erst dann an, wenn der Nutzer in irgendeiner Form mit der Seite interagiert hat.

Fragen Sie nur, wenn die Nutzer verstehen, warum Sie fragen.

Entscheidungen über Berechtigungen sind oft Datenschutzentscheidungen. Aufgrund des Kontext-Integritäts-Frameworks wissen wir, dass Datenschutzentscheidungen in hohem Maße kontextabhängig sind. Zu verstehen, warum ein Zugriff notwendig ist, kann als ein wichtiger Aspekt dabei betrachtet werden. Daher sollten Sie nur Funktionen anfordern, für die Sie Nutzern einen Mehrwert bieten müssen (und bei denen die Nutzer wahrscheinlich Ihrer Meinung sind, dass sie tatsächlich einen Mehrwert bieten). Außerdem sollten Sie die Berechtigung in einem Moment anfordern, in dem der Nutzer versteht, warum die Funktion hilfreich ist. Ziel ist es, den Nutzungskontext so einfach wie möglich zu machen.

Unsere Nutzerstudien zeigen, dass Nutzer den Zugriff deutlich eher erlauben, wenn sie verstehen, warum eine Website um Zugriff bittet, und sie auch einen Nutzen wahrnehmen. Wir haben auch festgestellt, dass Nutzer erwarten, zuerst unbekannte Websites zu erkunden, um besser zu verstehen, welchen Nutzen sie für den Zugriff erhalten. In der Zwischenzeit schließen oder ignorieren sie Berechtigungsaufforderungen. Mit einmaligen Berechtigungen kann es sein, dass ein einzelner Besuch zuerst zugelassen wird. Ihre Anwendung muss diese Verhaltensweisen unterstützen.

Alternativen bieten, um dieselbe Funktionalität nach Möglichkeit zu erreichen

Das Ergebnis einiger Funktionen ist für die Nutzenden möglicherweise nicht hilfreich. Beispielsweise kann die Standortbestimmung eines Desktopgeräts ohne GPS-Sensor den falschen Standort zurückgeben, weil diese Person mit einem VPN verbunden ist. Andere Nutzer möchten möglicherweise keinen Zugriff auf die Zwischenablage gewähren, da sie die Kontrolle behalten und diese Ereignisse mit Tastenkombinationen manuell auslösen möchten. In solchen Situationen ist es wichtig, alternative Möglichkeiten anzubieten, um dieselben Ergebnisse zu erzielen. Wenn Sie beispielsweise die Berechtigung zur Standortbestimmung anfordern, bieten Sie ein Textfeld an, in das die Nutzer eine Postleitzahl oder Adresse eingeben können. Achten Sie in der Zwischenablage darauf, dass die zu kopierenden Elemente auch über eine Tastenkombinationen oder das Kontextmenü ausgewählt und kopiert werden können. Bieten Sie Benachrichtigungen an, dass sie E-Mails statt Push-Benachrichtigungen erhalten.

Es ist sinnvoll, die alternative UI auch als Erklärung dafür zu verwenden, warum der Zugriff vorteilhaft sein könnte. Nutzer, die eine Option zur Eingabe eines Standorts neben einer Schaltfläche sehen, die die Geolocation API auslöst, haben das Gefühl, die Kontrolle darüber zu haben, da sie wissen, dass sie auch einfach ihre Adresse eingeben können. Gleiches gilt, wenn Nutzer die Wahl haben, Benachrichtigungen per Push oder E-Mail zu erhalten oder an einer Videokonferenz teilzunehmen, ohne den Zugriff auf Kamera und Mikrofon zu erlauben, damit die Nutzer die Vor- und Nachteile besser verstehen.

Bringen Sie sich nicht in einen gesperrten Zustand, denn es ist schwer,

Sobald ein Nutzer den Zugriff auf eine berechtigungsgesteuerte Funktion dauerhaft nicht zugelassen hat, wird diese Entscheidung im Browser berücksichtigt. Wenn es möglich wäre, weiterhin Aufforderungen zum Zugriff anzufordern, würden Websites mit bösen Absichten die Nutzer weiterhin mit Aufforderungen bombardieren. Daher erfordert die Wiederherstellung aus dem blockierten Zustand einer Funktion absichtlich einen gewissen Aufwand für den Nutzer. Daher sollten Sie Nutzer nicht um Berechtigungen bitten, wenn es wahrscheinlich ist, dass viele Nutzer den Zugriff nicht erlauben.

Eine gängige Methode hierfür ist die Verwendung einer sogenannten Voreingabeaufforderung, bei der Sie den Nutzern erklären, was als Nächstes passieren wird und warum Ihre Anwendung die gewünschte Funktion benötigt. Die Berechtigungsaufforderung des Browsers sollte nur dann ausgelöst werden, wenn Nutzer positiv auf eine solche Vorab-Aufforderung reagieren. Es gibt Situationen, in denen Nutzer ihren Zustand aus legitimen Gründen wiederherstellen müssen. Weitere Informationen hierzu finden Sie im Abschnitt Nutzern bei der Wiederherstellung nach einem blockierten Status helfen.

Auf Inhalte von Dritten achten

Es gibt eine unerwartete Quelle von Berechtigungsaufforderungen, die Sie beachten sollten. Wenn du auf deiner Website Drittanbieterskripts verwendest, können diese Berechtigungsaufforderungen auslösen, die du nicht anzeigen möchtest. Das kann sich auf die Nutzererfahrung mit deiner Website auswirken, insbesondere wenn solche Aufforderungen nicht den bereits beschriebenen Best Practices entsprechen. Damit Sie die Kontrolle über die Nutzererfahrung behalten, sollten Sie die Dokumentation aller Bibliotheken und Skripts von Drittanbietern, die Sie Ihrem eigenen Code hinzufügen, sorgfältig lesen.

Wann Sie um Erlaubnis fragen sollten

Hier sind einige Beispiele für Momente, in denen es unter Berücksichtigung der bereits beschriebenen Best Practices gut funktioniert, um eine Berechtigung zu bitten:

  • Nachdem ein Nutzer neben einem Formularfeld auf die Schaltfläche „Meinen Standort verwenden“ geklickt hat, um eine Adresse manuell einzugeben.
  • Nachdem ein Nutzer einen Videokanal oder Beiträge abonniert und auf eine entsprechende Schaltfläche in einem Dialogfeld geklickt hat, in dem beschrieben wird, dass die Updates als E-Mails oder Benachrichtigungen an sein Smartphone oder Computer gesendet werden können.
  • Nachdem ein Nutzer auf eine Seite gelangt ist, auf der er auf einen Videoanruf vorbereitet wird und in einer Vorankündigung bestätigt hat, dass er gesehen und gehört werden möchte (siehe diese Fallstudie von Google Meet).

Codemuster für die Berechtigungsanfrage

Die Berechtigung zur Verwendung einer API wird je nach API auf unterschiedliche Weise erteilt. Einige (in der Regel ältere) APIs verwenden ein Modell, bei dem der Browser bei der ersten Verwendung der API automatisch um Erlaubnis bittet. Ein Beispiel ist die Geolocation API beim Aufrufen von navigator.geolocation.getCurrentPosition().

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

Bei anderen APIs wird ein Modell verwendet, bei dem Sie die Berechtigung zuerst explizit über eine statische Methode anfordern müssen. Ein gutes Beispiel ist Notification.requestPermission() zum Zulassen von Benachrichtigungen oder das weniger gebräuchliche DeviceOrientationEvent.requestPermission(), das Teil der Device Orientation Events API ist. Beachten Sie, dass einige Browser Berechtigungen für bestimmte APIs möglicherweise automatisch gewähren. Chrome lässt beispielsweise immer den Zugriff auf die Ausrichtung des Geräts zu, während Safari eine Eingabeaufforderung anzeigt.

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

Status der Berechtigungen prüfen

Mit der Methode navigator.permissions.query() der Permissions API können Sie prüfen, ob Sie eine bestimmte API verwenden können.

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

Unterstützte Browser

  • 43
  • 79
  • 46
  • 16

Quelle

Nutzern bei der Wiederherstellung nach einem blockierten Zustand helfen

Um Nutzern bei der Behebung von Zugriffsproblemen zu helfen, sollten Sie feststellen, dass sie den Zugriff über die Permissions API blockiert haben, und ihnen eine Anleitung zum Ändern ihrer Einstellungen anbieten. Wenn Nutzer beispielsweise mit UI-Elementen interagieren, die mit einer berechtigungsgesteuerten Funktion verknüpft sind, verwenden Sie das im vorherigen Abschnitt beschriebene Muster und öffnen Sie ein Dialogfeld zur Fehlerbehebung. Die genauen Schritte zum Ändern des Berechtigungsstatus variieren je nach Browser. Daher bietet es sich an, passende Beschreibungen basierend auf dem User-Agent-String und für die in Ihrem Produkt am häufigsten verwendeten Browser anzubieten.

Nutzer müssen in Chrome die Websitekontrollen aufrufen, indem sie auf das Feinabstimmungssymbol auf der linken Seite der Adressleiste klicken. Hier können sie die entsprechende Berechtigung aktivieren. In einigen Fällen müssen sie die Seite aktualisieren, bevor sie die Funktion verwenden können. In diesem Fall wird oben im Fenster eine Meldungsleiste angezeigt, über die Sie nach dem Klicken auf die entsprechende Schaltfläche neu laden können.

Websitesteuerelemente im Chrome-Browser.

Eine Aufforderung zum Aktualisieren nach dem Ändern von Berechtigungen über die Website-Steuerelemente.

Ähnliche Benutzeroberflächen zur Steuerung von Berechtigungen gibt es auch in anderen Browsern. Hier erfahren Sie beispielsweise, wie das in Firefox funktioniert.