Les invites d'autorisation constituent le principal mécanisme sur le Web permettant de protéger les fonctionnalités puissantes qui peuvent compromettre la confidentialité et la sécurité des utilisateurs. Avec les invites d'autorisation, les navigateurs visent à s'assurer que l'utilisateur a l'intention de laisser le site Web à l'origine de la demande d'accès à la fonctionnalité en question. Les invites d'autorisation sont utilisées pour un certain nombre d'API, y compris la capture multimédia (caméra et micro), la géolocalisation, l'accès au stockage, les données MIDI et les notifications (pour en savoir plus, consultez la documentation de l'API Permissions sur MDN).
Ce guide décrit les bonnes pratiques à suivre pour présenter des invites d'autorisation aux utilisateurs en fonction des statistiques d'utilisation de Chrome et des recherches sur l'expérience utilisateur. Lorsqu'ils appliquent ces bonnes pratiques, les utilisateurs devraient rencontrer moins d'invites inutiles, ce qui permettra aux développeurs d'obtenir moins de décisions de blocage. Il se termine par des modèles de code permettant d'utiliser des API soumises à des restrictions, ainsi que des bonnes pratiques pour aider les utilisateurs à effectuer une récupération après un état bloqué.
Bonnes pratiques concernant les invites
Vous devez demander l'autorisation après une interaction avec l'utilisateur, à un moment où celui-ci peut comprendre pourquoi vous le posez et quel avantage il retirera de cette autorisation. Dans la mesure du possible, vous devez permettre aux utilisateurs d'utiliser un autre moyen pour obtenir la même fonctionnalité. En règle générale, le fait de demander une autorisation moins fréquemment en choisissant les moments où vous posez soigneusement la demande réduit le risque que vos utilisateurs se retrouvent dans un état bloqué difficile à récupérer. Les bonnes pratiques suivantes fournissent plus de détails sur chacune de ces suggestions.
Ne jamais demander au chargement de la page ou sans intervention de l'utilisateur
Demander l'autorisation aux utilisateurs lors du chargement de la page revient à demander à un client une information sensible lorsqu'il entre dans un magasin physique. Voir une invite d'autorisation (peut-être parmi plusieurs autres invites d'inscription à une newsletter et de consentement aux cookies) est une expérience très bouleversante. Les utilisateurs ne comprendront pas pourquoi on leur demande de l'aide ni en quoi ils peuvent en bénéficier.
Même si votre application Web ne peut pas fonctionner sans l'accès à une certaine fonctionnalité, vous devez donner aux utilisateurs la possibilité de comprendre pourquoi elle est nécessaire. Par exemple, vous pouvez faire précéder la requête d'autorisation d'une invite qui explique le besoin et permet aux utilisateurs de choisir (par exemple, dans la mesure du possible, en fournissant d'autres moyens d'obtenir la même fonctionnalité). Si le meilleur moment pour demander une autorisation n'est pas celui du chargement de la page, vous trouverez quelques exemples plus loin dans ce guide.
Il est tout aussi déconseillé de demander une autorisation sans interaction utilisateur préalable (également appelée activation utilisateur temporaire). Les données télémétriques de Chrome montrent que 77% des invites d'autorisation dans Chrome pour ordinateur s'affichent sans un signal très basique d'intention de l'utilisateur. Par conséquent, seules 12 % de ces invites sont autorisées. Après une interaction de l'utilisateur, le taux d'autorisation peut atteindre 30%. Par conséquent, ne demandez l'autorisation qu'après que l'utilisateur a interagi avec la page d'une manière ou d'une autre.
Ne demandez que lorsque les utilisateurs peuvent comprendre pourquoi vous le posez
Les décisions concernant les autorisations portent souvent sur la confidentialité. D'après le framework d'intégrité contextuelle, nous savons que les décisions de confidentialité sont hautement contextuelles. Comprendre pourquoi un accès est nécessaire peut être considéré comme un aspect clé de ce processus. Par conséquent, vous ne devez demander que les fonctionnalités dont vous avez besoin pour apporter une valeur ajoutée aux utilisateurs (et lorsque les utilisateurs sont susceptibles d'être d'accord avec vous pour dire qu'ils obtiendront effectivement de la valeur). De plus, vous devez demander l'autorisation à un moment où l'utilisateur comprend pourquoi la fonctionnalité est utile. L'objectif est de permettre à vos utilisateurs de comprendre le plus facilement possible le contexte d'utilisation.
Notre étude sur l'expérience utilisateur montre que les utilisateurs sont beaucoup plus susceptibles d'autoriser l'accès s'ils comprennent pourquoi un site demande l'accès et en perçoivent un avantage. Nous constatons également que les utilisateurs s'attendent d'abord à explorer des sites qu'ils ne connaissent pas afin de mieux comprendre l'intérêt d'y accéder en retour. Entre-temps, ils ignorent souvent les invites d'autorisation. Avec des autorisations ponctuelles, ils peuvent autoriser une seule visite en premier. Votre application doit être compatible avec ces comportements.
Fournir d'autres moyens d'obtenir la même fonctionnalité lorsque cela est possible
Certaines fonctionnalités peuvent ne pas être utiles aux utilisateurs. Par exemple, la géolocalisation d'un ordinateur de bureau sans capteur GPS peut renvoyer la mauvaise position, car cette personne est connectée à un VPN. D'autres utilisateurs peuvent ne pas souhaiter autoriser l'accès au presse-papiers, car ils préfèrent garder le contrôle et déclencher manuellement ces événements avec des combinaisons de touches. Dans de telles situations, il est important de proposer un autre moyen d'obtenir les mêmes résultats. Par exemple, si vous demandez l'autorisation de géolocalisation, proposez un champ de texte dans lequel vos utilisateurs peuvent saisir eux-mêmes un code postal ou une adresse. Avec le presse-papiers, assurez-vous que les éléments à copier peuvent également être sélectionnés et copiés via une combinaison de touches ou le menu contextuel. Avec les notifications, proposez aux utilisateurs de recevoir des e-mails plutôt que des notifications push.
Un modèle utile consiste à utiliser l'autre UI pour expliquer les avantages de l'accès. Les utilisateurs qui voient l'option de saisie d'un emplacement à côté d'un bouton qui déclenche l'API de géolocalisation ont le sentiment de contrôler ce qui se passe, car ils savent qu'ils peuvent également saisir leur adresse. De même, s'ils ont le choix entre recevoir des notifications push ou par e-mail, ou rejoindre une réunion sans autoriser l'accès à la caméra et au micro, les utilisateurs comprennent plus naturellement les compromis qu'ils font.
Ne vous mettez pas dans un état bloqué, il sera difficile de le récupérer
Une fois qu'un utilisateur a décidé de ne pas autoriser définitivement l'accès à une fonctionnalité soumise à une restriction, les navigateurs respectent cette décision. S'il était possible de continuer à demander l'accès, les sites malveillants continueraient à bombarder les utilisateurs d'invites. Par conséquent, récupérer intentionnellement un peu d'effort de la part de l'utilisateur à partir de l'état bloqué d'une fonctionnalité. Par conséquent, évitez de demander l'autorisation aux utilisateurs dans les cas où il est probable que de nombreux utilisateurs refusent l'accès.
Pour ce faire, une méthode courante consiste à utiliser une pré-requête, dans laquelle vous expliquez à vos utilisateurs ce qui va se passer et pourquoi votre application a besoin de la fonctionnalité que vous allez demander. Vous ne devez déclencher l'invite d'autorisation du navigateur que lorsque les utilisateurs réagissent de manière positive à une telle requête préalable. Dans certains cas, les utilisateurs peuvent avoir besoin d'effectuer une récupération à partir de cet état. Pour en savoir plus à ce sujet, consultez la section Aider les utilisateurs à effectuer une récupération après un état bloqué.
Soyez attentif au contenu tiers
Il existe une source inattendue d'invites d'autorisation dont vous devez être conscient. Si vous incluez des scripts tiers sur votre site, ils peuvent déclencher des invites d'autorisation que vous ne souhaitiez pas afficher. Cela peut avoir une incidence sur l'expérience des utilisateurs sur votre site Web, en particulier si ces invites ne respectent pas les bonnes pratiques déjà décrites. Pour garder le contrôle sur l'expérience de vos utilisateurs, vous devez lire attentivement la documentation des bibliothèques et scripts tiers que vous ajoutez à votre propre code.
Quand demander l'autorisation
Voici quelques exemples de moments où il est bon de demander une autorisation, en respectant les bonnes pratiques déjà décrites:
- Lorsqu'un utilisateur clique sur le bouton "Utiliser ma position" à côté d'un champ de formulaire pour saisir une adresse manuellement.
- Après qu'un utilisateur s'est abonné à une chaîne vidéo ou à des posts, et qu'il a cliqué sur un bouton affirmatif dans une boîte de dialogue indiquant que les mises à jour pouvaient être envoyées sous forme d'e-mails ou de notifications sur son téléphone ou son ordinateur.
- Lorsqu'un utilisateur arrive sur une page qui le prépare à participer à un appel vidéo et répond de manière affirmative qu'il souhaite être vu et entendu dans une requête préalable (consultez cette étude de cas sur Google Meet).
Modèles de code pour demander une autorisation
L'obtention de l'autorisation d'utiliser une API s'effectue de différentes manières, en fonction de l'API. Certaines API (généralement plus anciennes) utilisent un modèle dans lequel le navigateur demande automatiquement une autorisation la première fois que vous essayez d'utiliser l'API. C'est par exemple le cas avec l'API Geolocation lors de l'appel de navigator.geolocation.getCurrentPosition().
try {
navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
console.error(error);
}
D'autres API utilisent un modèle dans lequel vous devez explicitement demander une autorisation au préalable à l'aide d'une méthode statique. Notification.requestPermission() est un bon exemple d'autorisation des notifications, ou DeviceOrientationEvent.requestPermission() moins courant, qui fait partie de l'API Device Orientation Events. Notez que certains navigateurs peuvent accorder automatiquement des autorisations à des API données. Par exemple, Chrome autorise toujours l'accès à l'orientation d'un appareil, tandis que Safari affiche une invite.
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. */
}
Vérifier l'état des autorisations
Pour vérifier si vous pouvez utiliser une API en particulier, appelez la méthode navigator.permissions.query() de l'API Permissions.
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.
}
Aider les utilisateurs à récupérer après un blocage
Pour aider les utilisateurs à résoudre les problèmes d'accès, vérifiez qu'ils ont bloqué l'accès à l'aide de l'API Permissions et proposez-leur un guide sur la façon de modifier leurs paramètres. Par exemple, lorsque les utilisateurs interagissent avec des éléments d'interface utilisateur associés à une fonctionnalité soumise à des autorisations, utilisez le modèle décrit dans la section précédente et ouvrez une boîte de dialogue de dépannage. Les étapes exactes pour modifier l'état d'autorisation varient selon les navigateurs. Vous pouvez donc proposer des descriptions correspondantes en fonction de la chaîne user-agent et des navigateurs les plus couramment utilisés dans votre produit.
Dans Chrome, les utilisateurs doivent accéder aux commandes relatives aux sites en cliquant sur l'icône de réglage située à gauche de la barre d'adresse. Il peut alors activer l'autorisation correspondante. Dans certains cas, ils devront peut-être actualiser la page avant d'utiliser la fonctionnalité. Dans ce cas, une barre de message s'affiche en haut de la fenêtre. Elle vous propose de l'actualiser lorsque vous cliquez sur le bouton correspondant.
Il existe des interfaces utilisateur similaires pour le contrôle des autorisations dans d'autres navigateurs (par exemple, découvrez comment cela fonctionne dans Firefox).