Modale vs. Popover
Un modal blocca la pagina finché il compito non è finito. Un popover resta accanto al suo pulsante e lascia che la pagina continui a funzionare.
Usa un modale per un'attività che deve terminare prima. Usa un popover per dettagli extra o una piccola azione.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Finestra Modale
Un dialog modale è una finestra focalizzata. Blocca lo schermo attuale finché qualcuno non la chiude o la finisce.
Per la cancellazione dell'account, il focus della tastiera rimane all'interno della finestra di dialogo. Se la persona annulla, il focus ritorna sul pulsante che l'ha aperta.
- Usalo quando
- Usalo per una scelta breve o un piccolo compito che richiede piena attenzione.
- Non usarlo quando
- Non aprire mai un dialogo sopra un altro o usarne uno per informazioni normali o a basso rischio.
- Nome usato nel codice
<dialog> / role="dialog" aria-modal="true"
Popover
Un popover è un piccolo pannello attaccato al controllo che lo ha aperto. Può contenere contenuti strutturati e azioni senza bloccare la pagina.
popover attribute / PopoverSeleziona un avatar per aprire un piccolo profilo. Mostra il ruolo della persona, i dettagli di contatto e un'azione Segui.
- Usalo quando
- Usalo quando il contenuto appartiene accanto al suo trigger e le persone possono continuare a usare la pagina.
- Non usarlo quando
- Non usarlo mai per un suggerimento breve che contiene solo un'etichetta. Usa invece un tooltip.
- Nome usato nel codice
popover attribute / Popover
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| Finestra ModaleModal Dialog | Usalo per una scelta breve o un piccolo compito che richiede piena attenzione. | Non aprire mai un dialogo sopra un altro o usarne uno per informazioni normali o a basso rischio. | <dialog> / role="dialog" aria-modal="true" |
| PopoverPopover | Usalo quando il contenuto appartiene accanto al suo trigger e le persone possono continuare a usare la pagina. | Non usarlo mai per un suggerimento breve che contiene solo un'etichetta. Usa invece un tooltip. | popover attribute / Popover |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Finestra Modale (Modal Dialog), Popover (Popover) per il nostro reale flusso utente. Usa questa regola: Un modal blocca la pagina finché il compito non è finito. Un popover resta accanto al suo pulsante e lascia che la pagina continui a funzionare. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.