Abilita accessi rapidi: pattern UX della modalità UI immediata

Eiji Kitamura

Data di pubblicazione: 30 settembre 2026

Panoramica

La modalità UI immediata risolve la perdita di contesto e l'abbandono degli utenti causati dalla navigazione in una pagina di accesso dedicata. Consente accessi rapidi, permettendo agli utenti di completare l'accesso utilizzando le passkey o le password salvate direttamente nella pagina che stanno visualizzando o su cui stanno lavorando senza uscire dal contesto.

A differenza della UI condizionale, che mostra i suggerimenti di compilazione automatica quando un utente seleziona un campo di input di testo, la modalità UI immediata richiama immediatamente la finestra di dialogo di autenticazione del browser in risposta a un clic su un pulsante o un link (al momento, uiMode accetta solo "immediate", ma potrebbe cambiare in futuro).

Tre caratteristiche principali rendono la modalità UI immediata particolarmente efficace per gli accessi rapidi:

  • Ignorare i codici QR cross-device: se sul dispositivo sono presenti passkey o password salvate immediatamente disponibili, il browser visualizza subito la finestra di dialogo di autenticazione. Se non ne esistono, esce immediatamente senza mostrare una schermata con codice QR cross-device per smartphone. In questo modo, il tuo sito può passare naturalmente alla navigazione di fallback normale (ad esempio, passando alla pagina di accesso).
  • UI di selezione intuitiva incentrata sull'account: anziché elencare singolarmente i tipi misti di credenziali, nasconde le differenze sottostanti tra passkey e password per presentare un selettore di account intuitivo incentrato sull'account con cui l'utente vuole accedere.
  • Potenziamento progressivo sicuro: sebbene supportato solo nei browser Google Chrome e Chromium, l'utilizzo del rilevamento delle funzionalità consente di offrire accessi rapidi agli utenti negli ambienti supportati senza interrompere i flussi di accesso esistenti per gli utenti su browser non supportati (come Safari o Firefox) o in modalità Incognito.

Per informazioni dettagliate sul funzionamento dell'API e su come implementare il rilevamento delle funzionalità, consulta Modalità UI immediata per gli accessi. In questo documento esploriamo i pattern UX consigliati che aumentano le conversioni con la modalità UI immediata, nonché gli anti-pattern di progettazione da evitare.

Il punto più efficace per utilizzare la modalità UI immediata è l'intercettazione subito prima della navigazione della pagina. Ogni volta che un utente non autenticato (o con sessione scaduta) fa clic su un link o su un pulsante di azione che normalmente lo indirizzerebbe a una pagina di accesso, l'invocazione della modalità UI immediata in quel preciso momento crea un'esperienza utente fluida che non interrompe il flusso di lavoro.

La maggior parte dei siti web inserisce un link "Accedi" nell'intestazione globale nella parte superiore dello schermo che rimanda alla pagina di accesso dedicata. Quando un utente fa clic su questo link nella pagina che sta navigando, la sospensione della navigazione e l'attivazione della modalità UI immediata consentono al browser di mostrare una finestra di dialogo di selezione dell'account direttamente sopra la pagina corrente se le credenziali sono presenti sul dispositivo.

Una volta che l'utente seleziona il proprio account e completa l'autenticazione, l'intestazione viene aggiornata allo stato di accesso senza alcuna navigazione della pagina, consentendogli di continuare a navigare senza allontanarsi dalla pagina che stava visualizzando. Al contrario, se non esistono credenziali sul dispositivo, non viene visualizzata alcuna UI del browser e l'utente passa senza problemi alla pagina di accesso esattamente come previsto in origine.

Accesso dinamico al momento del pagamento (e-commerce)

Sui siti di e-commerce, la transizione dal carrello al pagamento è uno dei punti più comuni di abbandono del carrello causato da problemi di navigazione della pagina. Se viene richiamata la modalità UI immediata nel momento in cui un acquirente non autenticato fa clic sul pulsante di checkout nella schermata del carrello, viene visualizzata una finestra di dialogo di selezione dell'account nel punto in cui è stato fatto clic sul pulsante, completando l'autenticazione con un solo tocco.

Quando l'autenticazione va a buon fine, l'acquirente ignora completamente la pagina di accesso e arriva direttamente alla schermata finale di conferma della spedizione e del pagamento (pagina di pagamento), riducendo drasticamente i passaggi necessari per completare un acquisto. Se non esistono credenziali, l'acquirente passa normalmente alla schermata di selezione di accesso convenzionale o pagamento come ospite. Puoi progettare il tuo sito in modo da consentire il pagamento come ospite o richiedere l'accesso in base ai requisiti della tua attività. La modalità UI immediata serve a eliminare gli attriti del pagamento per i clienti di ritorno.

Accesso in linea per le micro-azioni (Mi piace, aggiungi ai preferiti, salva)

Quando i visitatori navigano nei feed social, nei siti della community o nei cataloghi di prodotti di e-commerce, forzare un reindirizzamento a pagina intera alla pagina di accesso ogni volta che provano a "Mi piace" un post o a "Aggiungere ai preferiti" un elemento potrebbe indurre alcuni utenti ad abbandonare l'azione.

Quando un visitatore disconnesso fa clic su un pulsante di azione come Mi piace, Aggiungi ai preferiti o Salva, la visualizzazione di una finestra di dialogo in modalità UI immediata consente di completare la verifica dell'identità e attivare immediatamente il record dell'azione e l'animazione dell'interfaccia utente (ad esempio l'icona a forma di cuore che diventa rossa). La posizione di scorrimento non si sposta di un solo pixel, preservando completamente l'immersione nella navigazione. Se non esistono credenziali, anziché uscire immediatamente, puoi visualizzare una modale di accesso in linea leggera sopra la schermata corrente o guidare l'utente alla pagina di accesso in modo da riportarlo alla posizione originale dopo l'accesso.

Riautenticazione step-up per le operazioni sensibili

Anche quando un utente ha già eseguito l'accesso, le best practice di sicurezza richiedono l'autenticazione secondaria incrementale quando vengono eseguite operazioni sensibili, come la modifica di una password, l'aggiornamento di un indirizzo di spedizione, la modifica dei metodi di pagamento salvati o l'aggiunta di una nuova passkey, dopo un determinato periodo di tempo trascorso dall'ultima autenticazione. L'attivazione della modalità UI immediata quando un utente fa clic su un link o un pulsante che rimanda a un'impostazione sensibile nella pagina di panoramica Il mio account completa la verifica dell'identità direttamente nella dashboard senza uscire dalla pagina. In questo modo, l'utente può accedere direttamente alla pagina di modifica delle impostazioni di destinazione (o eseguire immediatamente l'operazione sensibile) senza passare attraverso una schermata di accesso intermedio. Se non esistono credenziali, reindirizza l'utente alla schermata standard di verifica (ad esempio una schermata di reinserimento della password o una schermata di verifica della password monouso).

Mentre gli accessi rapidi standard da uno stato non autenticato non specificano le credenziali di destinazione, devi specificarle per questo caso d'uso di riautenticazione. Imposta allowCredentials nella richiesta in modo che vengano presentate solo le credenziali appartenenti all'utente che ha eseguito l'accesso.

Sblocco del paywall del sito dell'editore

Le piattaforme di contenuti e i media di notizie adottano ampiamente un modello in cui i paragrafi iniziali di un articolo sono liberamente accessibili, mentre a metà pagina, mentre il lettore scorre, viene visualizzato un paywall flessibile o un'immagine sfocata riservata agli abbonati.

Quando un lettore scorre verso il basso un articolo, raggiunge il paywall e fa clic sul pulsante Continua a leggere con il tuo account, l'attivazione della modalità UI immediata mostra la finestra di dialogo di autenticazione esattamente nella posizione di scorrimento in cui il lettore ha messo in pausa. Al termine dell'autenticazione, la sfocatura dell'articolo scompare gradualmente senza ricaricare la pagina, consentendo al lettore di continuare a leggere senza perdere la riga di testo che stava guardando. Se non esistono credenziali, espandi un modulo di registrazione o accesso in linea all'interno della sezione del paywall.

Anti-pattern da evitare

Sebbene la modalità UI immediata offra un valore straordinario se utilizzata prima della navigazione della pagina, se posizionata nella posizione sbagliata, danneggerà attivamente l'esperienza di accesso dell'utente.

Evitare la modalità UI immediata sui pulsanti di accesso nelle pagine di accesso dedicate

Poiché la modalità UI immediata gestisce sia le passkey sia le password in un'unica finestra di dialogo raffinata, può essere allettante utilizzarla sul pulsante "Accedi" posizionato nella pagina di accesso dedicata. Tuttavia, ti consigliamo di non utilizzarlo qui. Innanzitutto, la modalità UI immediata richiede rigorosamente l'attivazione da parte dell'utente (ad esempio un clic o un tocco), il che la rende scomoda in una pagina di accesso in cui gli utenti potrebbero aspettarsi che le opzioni di accesso siano immediatamente disponibili al tempo di caricamento della pagina. In secondo luogo, la pagina di accesso è la destinazione finale in cui gli utenti arrivano quando non hanno credenziali locali sul proprio dispositivo o quando intendono accedere con una passkey sul proprio dispositivo mobile (autenticazione cross-device) o con una chiave di sicurezza hardware facendo clic su "Accedi con una passkey". Se qui utilizzi la modalità UI immediata, il browser elimina i fallback del codice QR e del token di sicurezza cross-device e termina immediatamente non appena non trova credenziali locali sul dispositivo, intrappolando l'utente in un vicolo cieco in cui fare clic sul pulsante non produce alcun risultato in una pagina senza ulteriori destinazioni.

In una pagina di accesso in cui ogni metodo di autenticazione deve funzionare in modo affidabile, la best practice consiste nel configurare l'interfaccia utente condizionale (integrazione del completamento automatico) nei campi di input per garantire la comodità delle passkey locali, abbinando i pulsanti espliciti "Accedi con una passkey" ai metodi di chiamata standard che mostrano in modo affidabile le opzioni di codice QR e token di sicurezza cross-device.

Conclusione

La modalità UI immediata è un potente strumento UX per eliminare deviazioni non necessarie alle pagine di accesso e ottenere accessi rapidi che completano l'accesso preservando il contesto. Intercettando i momenti di chiara user intent, come i link di accesso nell'intestazione, i pulsanti di checkout, le microazioni, la riautenticazione step-up per operazioni sensibili (con allowCredentials specificato) e i paywall degli articoli, subito prima che si verifichi la navigazione della pagina, puoi evitare l'abbandono e offrire un'esperienza utente ottimale.

Allo stesso tempo, ricorda che la modalità UI immediata è un potenziamento progressivo prima della Navigazione nelle pagine; evita di applicarla ai pulsanti della pagina di accesso alla destinazione prova finale in modo che il progetto rimanga aperto e accessibile agli utenti cross-device (codice QR).

Per ulteriori dettagli sull'implementazione delle passkey e sulle funzionalità più recenti di Web Identity, esplora le seguenti risorse: