Modal

Finestra di interazione a comparsa in sovrapposizione sul contenuto principale per focalizzare l'attenzione su un'azione specifica o un messaggio importante

Componenti

Metadati e link per approfondire

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Il componente modal, in italiano modale, è utile per focalizzare l'attenzione dell'utente su informazioni cruciali o richiedere un'azione precisa, rimanendo nella pagina attuale.

È il caso di conferme di azioni, form di accesso o registrazione, approfondimento di uno specifico contenuto.

Tuttavia, un uso eccessivo delle modali interrompe il normale flusso di navigazione, quindi è raccomandato usarle con moderazione.

Alternative a questo componente

  • Tooltip e popover: per spiegare una funzione specifica o fornire informazioni aggiuntive, sono meno invasive di una finestra modale e si possono attivare in diversi modi.

Come usarlo

  • Includi pulsanti di azione chiari, come "Accetta" o "Annulla", per facilitare una decisione.
  • Posiziona l’azione primaria nella parte inferiore destra della modale.
  • Dai la possibilità di chiudere la modale in qualunque momento, ad esempio con la classica icona “X” in alto a destra.

Attenzione a

  • Non utilizzare la modale per visualizzare grandi quantità di informazioni.
  • Non utilizzare le modali per form complessi o processi con step multipli.
  • Usare un tag <h2> per il titolo della modale in quanto i suoi contenuti sono separati dalla struttura della pagina.
  • Usare la semantica <button> per l'eventuale pulsante che ne attiva l'apertura, essendo un'azione in pagina.
  • Validare l'interazione da tastiera e con lettori di schermo, in particolar modo rispetto all'ordine degli elementi e a possibili trappole del focus.

Buone pratiche sui contenuti

  • Usa un titolo semplice che sintetizza lo scopo della modale e l'azione richiesta.
  • Inserisci ulteriori informazioni su cosa fare e perché tramite una breve descrizione.
  • Fai in modo che ci sia accordo fra il verbo che usi per la CTA dell'azione primaria e il verbo che usi nel titolo della modale.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Da verificare

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Da verificare

Struttura titolazioni, etichette e testi alternativi

Navigabile

Da verificare

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Da verificare

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

Anatomia

Gli elementi che formano la finestra modale

Il componente modal è composto da:

  1. sfondo, colore obbligatoriamente bianco con ombreggiatura per risaltare la finestra sulla pagina sottostante;
  2. titolo, rappresenta l'azione richiesta;
  3. icona a sinistra (opzionale), accompagna il titolo e viene utilizzata per messaggi di avviso importanti;
  4. descrizione, deve essere chiara, concisa e indicare all'utente cosa deve fare;
  5. link di approfondimento (opzionale), può includere un collegamento a altre pagine o siti per ulteriori informazioni sull'argomento prima di procedere con l'azione principale;
  6. pulsante primario, rappresenta l'azione principale richiesta;
  7. pulsante di annullamento, permette all'utente di interrompere il processo e tornare alla pagina precedent;.
  8. icona di chiusura, fornisce un'ulteriore opzione per l'utente di interrompere l'azione richiesta.

Comportamento

  • Quando viene attivata, la modale appare al centro dello schermo, sovrapposta alla pagina sottostante.
  • La pagina viene oscurata per mettere in evidenza la modale.
  • L'utente può interagire con i pulsanti o link presenti nella finestra (ad esempio, chiudendola o eseguendo un'azione) per poter tornare al contenuto di provenienza.
  • Se l'utente sceglie di chiudere la modale, questa scompare e l'utente può tornare a interagire con il contenuto sottostante.
  • Se l'utente completa l'azione richiesta, la modale scompare una volta terminato il processo.
  • Le modali possono essere chiuse in diversi modi: tramite l'icona "X" in alto a destra, tramite un pulsante di annullamento o chiusura, o semplicemente cliccando al di fuori della modale.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Specifiche di design della finestra modale su dispositivo mobile Specifiche di design della finestra modale su dispositivo desktop

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici