Finestre di dialogo e menu a discesa

I dialoghi e i riquadri a comparsa sono elementi temporanei dell'interfaccia utente visualizzati quando si verifica un evento che richiede notifiche, approvazione o informazioni aggiuntive dell'utente.

Dialoghi

I dialoghi sono sovrimpressioni modali dell'interfaccia utente che forniscono informazioni contestuali sull'app. I dialoghi bloccano le interazioni con la finestra dell'app fino a quando non vengono ignorate in modo esplicito. Spesso richiedono un'azione da parte dell'utente.

Riquadri a comparsa

Un flyout è un popup contestuale di basso impatto che visualizza l'interfaccia utente correlata alle attività dell'utente. Include la logica di posizionamento e ridimensionamento e può essere usata per rivelare un controllo secondario o mostrare altri dettagli su un elemento.

A differenza di una finestra di dialogo, un riquadro a comparsa può essere rapidamente ignorato toccando o facendo clic all'esterno del riquadro a comparsa, premendo il tasto Escape o il pulsante Indietro, ridimensionando la finestra dell'app o modificando l'orientamento del dispositivo.

Questo è il controllo giusto?

Le finestre di dialogo e i riquadri a comparsa assicurano che gli utenti siano a conoscenza di informazioni importanti, ma interrompono anche l'esperienza utente. Poiché i dialoghi sono modali (bloccanti), interrompono gli utenti, impedendo loro di eseguire qualsiasi altra operazione fino a quando non interagiscono con il dialogo. I riquadri a comparsa offrono un'esperienza meno fastidiosa, ma la visualizzazione di troppi riquadri a comparsa può distrarre.

Dopo aver determinato che si vuole usare una finestra di dialogo o un riquadro a comparsa, è necessario scegliere quale utilizzare.

Dato che i dialoghi bloccano le interazioni mentre i riquadri a comparsa no, le finestre di dialogo devono essere riservate per situazioni in cui si vuole che l'utente metta da parte tutto per concentrarsi su un'informazione specifica, o rispondere a una domanda. I menu a comparsa, d'altra parte, possono essere usati quando si vuole richiamare l'attenzione su qualcosa, ma va bene se l'utente sceglie di ignorarlo.

Usare una finestra di dialogo per...

• Esprimere informazioni importanti che l'utente deve leggere e confermare prima di procedere. Gli esempi includono:
  • Quando la sicurezza dell'utente potrebbe essere compromessa
  • Quando l'utente sta per modificare definitivamente un asset prezioso
  • Quando l'utente sta per eliminare un asset prezioso
  • Per confermare un acquisto in-app
• Messaggi di errore che si applicano al contesto generale dell'app, ad esempio un errore di connettività.
• Domande, quando l'app deve porre all'utente una domanda di blocco, ad esempio quando l'app non può scegliere per conto dell'utente. Una domanda di blocco non può essere ignorata o posticipata e deve offrire all'utente scelte ben definite.

Usa un riquadro a comparsa per...

• Raccolta di informazioni aggiuntive necessarie prima del completamento di un'azione.
• Visualizzazione di informazioni rilevanti solo per parte del tempo. Ad esempio, in un'app galleria fotografica, quando l'utente fa clic su un'anteprima dell'immagine, è possibile usare una sovrapposizione per visualizzare una versione ingrandita dell'immagine.
• Visualizzazione di altre informazioni, ad esempio dettagli o descrizioni più lunghe di un elemento nella pagina.

Modi per evitare l'utilizzo di finestre di dialogo e riquadri a comparsa

Considera l'importanza delle informazioni che vuoi condividere: sono abbastanza importanti da giustificare l'interruzione dell'utente? Considerare anche la frequenza con cui devono essere visualizzate le informazioni; se viene visualizzata una finestra di dialogo o una notifica ogni pochi minuti, potrebbe essere necessario allocare spazio per queste informazioni nell'interfaccia utente primaria. Ad esempio, in un client di chat, anziché visualizzare una notifica pop-up ogni volta che un amico accede, è possibile visualizzare un elenco di amici attualmente online ed evidenziare gli amici man mano che si connettono.

Le finestre di dialogo vengono spesso usate per confermare un'azione ,ad esempio l'eliminazione di un file, prima di eseguirla. Se si prevede che l'utente esegua spesso un'azione specifica, è consigliabile consentire all'utente di annullare l'azione in caso di errore, anziché forzare gli utenti a confermare l'azione ogni volta.

Esempi

• API importanti: classe ContentDialog, classe Flyout

• Se è installata l'app WinUI 3 Gallery , fai clic qui per aprire l'app e vedere ContentDialog o Riquadro a comparsa in azione. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Come creare un dialogo

Vedere l'articolo Dialoghi.

Come creare un riquadro a comparsa

Consulta l'articolo sul Riquadro a comparsa.