Le richieste di autorizzazione sono il meccanismo principale del web di proteggere funzionalità potenti che sono potenzialmente pericolose per la privacy e la sicurezza degli utenti. Con i prompt di autorizzazione, i browser mirano a garantire che un utente intenda consentire al sito web richiedente di accedere alla funzionalità in questione. Le richieste di autorizzazione vengono utilizzate per diverse API, tra cui acquisizione di contenuti multimediali (fotocamera e microfono), geolocalizzazione, accesso allo spazio di archiviazione, MIDI e notifiche (per ulteriori informazioni, consulta la documentazione dell'API Authorization su MDN).
Questa guida illustra le best practice per mostrare richieste di autorizzazione agli utenti in base alle statistiche sull'utilizzo di Chrome e alla ricerca sugli utenti. Seguendo queste best practice, gli utenti dovrebbero ricevere meno messaggi non necessari, portando gli sviluppatori a ricevere meno decisioni di "blocco". L'articolo termina con alcuni pattern di codice per lavorare con API basate su autorizzazione e con le best practice per aiutare gli utenti a eseguire il ripristino da uno stato bloccato.
Best practice per la richiesta di richieste
Devi chiedere l'autorizzazione dopo un'interazione da parte di un utente, in un momento in cui gli utenti possono capire perché lo stai chiedendo e quali vantaggi otterranno. Se possibile, dovresti consentire agli utenti di utilizzare mezzi alternativi per svolgere la stessa funzionalità. Come regola generale, chiedere l'autorizzazione meno frequentemente, scegliendo i momenti in cui la chiedi, riduce le probabilità che gli utenti entrino in uno stato di blocco da cui è difficile recuperare. Le best practice riportate di seguito offrono maggiori dettagli su ciascuno di questi suggerimenti.
Non chiedere mai durante il caricamento pagina o senza interazione dell'utente
Chiedere agli utenti l'autorizzazione durante il caricamento pagina equivale a chiedere a un cliente un'informazione sensibile quando si trova in un negozio fisico. Vedere una richiesta di autorizzazione (probabilmente insieme ad altre richieste per l'iscrizione alla newsletter e il consenso all'uso dei cookie) è un'esperienza molto fastidiosa. Gli utenti non capiranno perché viene loro chiesto e quali vantaggi possono trarne.
Anche se la tua applicazione web non può funzionare senza l'accesso a una determinata funzionalità, dovresti dare agli utenti la possibilità di capire perché è necessaria. Ad esempio, presentando alla richiesta di autorizzazione una richiesta personale che spiega la necessità e offre agli utenti una scelta (ad esempio, ove possibile, fornendo mezzi alternativi per svolgere la stessa funzionalità). Se non ti viene in mente un momento migliore per chiedere l'autorizzazione rispetto al caricamento pagina, troverai alcuni esempi più avanti in questa guida.
Anche in questo caso la richiesta di autorizzazione non è una situazione pregressa (nota anche come attivazione utente temporanea). La telemetria di Chrome mostra che il 77% delle richieste di autorizzazione su Chrome per desktop viene visualizzato senza un segnale molto basilare dell'intenzione dell'utente e, di conseguenza, solo il 12% di queste richieste viene consentito. Dopo un'interazione da parte di un utente, le tariffe consentite aumentano fino al 30%. Pertanto, chiedi l'autorizzazione solo dopo che l'utente ha interagito con la pagina in un qualche forma.
Chiedi conferma solo quando gli utenti possono capire perché lo stai chiedendo
Le decisioni relative alle autorizzazioni sono spesso decisioni sulla privacy. In base al framework relativo all'integrità contestuale, sappiamo che le decisioni sulla privacy sono altamente contestuali. Comprendere il motivo per cui è necessario l'accesso può essere considerato un aspetto chiave di questo processo. Pertanto, dovresti richiedere solo le funzionalità che ti servono per fornire agli utenti un valore aggiunto (e laddove gli utenti siano probabilmente d'accordo con te sul fatto che otterranno davvero un valore aggiunto). Inoltre, devi chiedere l'autorizzazione nel momento in cui sarà chiaro all'utente perché la funzionalità è utile. L'obiettivo è aiutare gli utenti a comprendere il più facilmente possibile il contesto di utilizzo.
La nostra ricerca sugli utenti mostra che questi utenti sono molto più propensi a concedere l'accesso se capiscono perché un sito richiede l'accesso e percepiscono anche un vantaggio. Inoltre, gli utenti si aspettano di esplorare prima siti che non conoscono per comprendere meglio il valore che possono ottenere in cambio di un accesso. Nel frattempo, spesso ignorano o ignorano le richieste di autorizzazione. Con autorizzazioni una tantum, potrebbero consentire prima una singola visita. L'applicazione deve supportare questi comportamenti.
Fornire mezzi alternativi per svolgere la stessa funzionalità, ove possibile
Il risultato di alcune funzionalità potrebbe non essere utile per gli utenti. Ad esempio, la geolocalizzazione di un computer senza un sensore GPS potrebbe restituire la posizione sbagliata perché l'utente è connesso a una VPN. Altri utenti potrebbero non voler fornire l'accesso agli appunti perché preferiscono mantenere il controllo e attivare manualmente questi eventi con combinazioni di tasti. In situazioni come queste, è importante fornire un mezzo alternativo per ottenere gli stessi risultati. Ad esempio, se richiedi l'autorizzazione di geolocalizzazione, offri un campo di testo in cui gli utenti possano inserire direttamente un codice postale o un indirizzo. Con gli appunti, assicurati che gli elementi da copiare possano essere selezionati e copiati tramite una combinazione di tasti o il menu contestuale. Con le notifiche, offri agli utenti che ricevono email invece di notifiche push.
Un pattern utile è utilizzare l'interfaccia utente alternativa anche come spiegazione del motivo per cui l'accesso potrebbe essere vantaggioso. Gli utenti che visualizzano l'opzione per inserire una posizione accanto a un pulsante che attiva l'API di geolocalizzazione avranno il controllo su cosa accadrà, perché capiscono di poter semplicemente digitare il proprio indirizzo. Allo stesso modo, se si può scegliere tra ricevere notifiche tramite push o email o partecipare a una riunione senza consentire l'accesso alla videocamera e al microfono, gli utenti comprendono in modo più naturale i compromessi che stanno facendo.
Non entrare in uno stato bloccato, è difficile risolvere il problema da
Una volta che un utente decide di non consentire in modo permanente l'accesso a una funzionalità con accesso limitato, i browser rispettano questa decisione. Se fosse possibile continuare a chiedere l'accesso, i siti malevoli continueranno a bombardare gli utenti di prompt. Di conseguenza, il ripristino dallo stato di blocco di una funzionalità richiede intenzionalmente un po' di lavoro da parte dell'utente. Di conseguenza, evita di chiedere l'autorizzazione agli utenti in situazioni in cui è probabile che molti utenti non consentano l'accesso.
Un modo comune per farlo è utilizzare una cosiddetta richiesta preliminare, in cui spieghi agli utenti cosa sta per succedere e perché la tua applicazione ha bisogno della funzionalità che richiedi. Solo quando gli utenti reagiscono in modo affermativo a una richiesta di autorizzazione del browser devi attivare la richiesta di autorizzazione del browser. In alcune situazioni è possibile che gli utenti debbano legittimamente eseguire il ripristino da quello stato. Per saperne di più, consulta la sezione Aiutare gli utenti a eseguire il ripristino da uno stato di blocco.
Presta attenzione ai contenuti di terze parti
Devi essere a conoscenza di una fonte imprevista di richieste di autorizzazione. Se includi script di terze parti nel tuo sito, questi potrebbero attivare richieste di autorizzazione che non intendevi mostrare. Ciò può influire sull'esperienza degli utenti sul tuo sito web, soprattutto se questi prompt non seguono le best practice già descritte. Per mantenere il controllo sull'esperienza degli utenti, leggi attentamente la documentazione relativa alle librerie e agli script di terze parti che aggiungi al tuo codice.
Quando richiedere l'autorizzazione
Ecco alcuni esempi di momenti in cui chiedere l'autorizzazione, seguendo le best practice già descritte:
- Dopo che un utente fa clic su un pulsante con la scritta "utilizza la mia posizione" accanto a un campo del modulo per inserire manualmente un indirizzo.
- Dopo che un utente si è iscritto a un canale o a un post video e ha fatto clic su un pulsante di conferma in una finestra di dialogo che descrive che gli aggiornamenti possono essere inviati sotto forma di email o notifiche sul suo smartphone o computer.
- Dopo che un utente arriva a una pagina che lo prepara a partecipare a una videochiamata e risponde in modo affermativo che vuole essere visto e ascoltato in un prompt preliminare (vedi questo case study di Google Meet).
Pattern di codice per richiedere l'autorizzazione
L'autorizzazione per utilizzare un'API avviene in modi diversi, a seconda
dell'API. Alcune API (in genere più vecchie) utilizzano un modello in cui il browser chiede automaticamente l'autorizzazione la prima volta che provi a utilizzare l'API. Un esempio è l'API Geolocation durante la chiamata a navigator.geolocation.getCurrentPosition().
try {
navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
console.error(error);
}
Altre API utilizzano un modello in cui devi prima richiedere l'autorizzazione utilizzando un metodo statico. Un buon esempio è Notification.requestPermission() per consentire le notifiche o il meno comune DeviceOrientationEvent.requestPermission(), che fa parte dell'API Device Orientation Events. Tieni presente che alcuni browser potrebbero concedere automaticamente l'autorizzazione ad API specifiche. Ad esempio, Chrome consente sempre di
accedere all'orientamento del dispositivo, mentre Safari mostra un messaggio.
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. */
}
Come controllare lo stato delle autorizzazioni
Per verificare se puoi usare una determinata API, usa il metodo navigator.permissions.query() dell'APIPermissions.
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.
}
Aiuta gli utenti a ripristinare lo stato di blocco
Per aiutare gli utenti a risolvere i problemi di accesso, rileva se hanno bloccato l'accesso utilizzando l'APIPermissions e offri loro una guida su come modificare le impostazioni. Ad esempio, quando gli utenti interagiscono con elementi dell'interfaccia utente associati a una funzionalità basata sulle autorizzazioni, utilizza il pattern descritto nella sezione precedente e apri una finestra di dialogo per la risoluzione dei problemi. I passaggi esatti per modificare lo stato delle autorizzazioni variano a seconda del browser, quindi ti consigliamo di offrire descrizioni corrispondenti in base alla stringa dello user agent e ai browser più utilizzati nel prodotto.
In Chrome, gli utenti devono accedere a Controlli del sito facendo clic sull'icona "Ottimizza" sul lato sinistro della barra degli indirizzi. Qui possono attivare la rispettiva autorizzazione. In alcuni casi, potrebbe essere necessario ricaricare la pagina prima di utilizzare la funzionalità. In questo caso, nella parte superiore della finestra verrà visualizzata una barra dei messaggi che consente di ricaricare facendo clic sul rispettivo pulsante.
In altri browser esistono interfacce utente simili per il controllo delle autorizzazioni (ad esempio, scopri come funziona in Firefox).