Alert
Breve messaggio di testo con uno stile grafico distintivo, utile per avvisare gli utenti di un evento o di un'azione che richiede la loro attenzione
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente Alert permette di creare messaggi di avviso per gli utenti. Questi messaggi sono utili per comunicare informazioni importanti o per avvisare gli utenti di situazioni che richiedono la loro attenzione, senza interrompere il flusso di navigazione.
Il componente Alert è usato per messaggi immediati e temporanei, come:
- errori o problemi tecnici;
- eventi importanti che richiedono attenzione, come una scadenza imminente o un imprevisto;
- conferme di completamento.
Come usarlo
- Personalizza il componente Alert per riflettere il tipo di messaggio di avviso.
- Aggiungi un pulsante di chiusura per consentire all'utente di chiudere l'avviso.
Attenzione a
- Non usarlo per avvisi e situazioni non importanti, potresti distrarre gli utenti e causare confusione.
Buone pratiche sui contenuti
- Assicurati che il testo del messaggio sia chiaro e conciso.
- Se il messaggio indica un errore, fornisci all’utente indicazioni chiare su come risolverlo.
- Usa collegamenti ipertestuali per rimandare a pagine di approfondimento, se rilevante.
Alternative a questo componente
- Callout, permette di evidenziare delle informazioni testuali in pagina.
- Modal, avvisa l’utente di azioni necessarie da compiere.
- Notifications, avvisi a comparsa temporanei in sovraimpressione sulla schermata.
AccessibilitĂ
In stesura
Stato del componente
In stesura
Anatomia
Immagine in via di definizione
- Contenitore dell’Alert
- Barra indicatrice della tipologia di Alert: una barra che cambia colore in base alla tipologia di avviso
- Icona: elemento grafico che cambia in base alla tipologia di avviso
- Testo dell’Alert: il messaggio dell’avviso, che può contenere collegamenti ipertestuali
- Pulsante di chiusura
Comportamento
Un alert può apparire:
- prima di tutti i contenuti di interfaccia dopo l’header per i messaggi di status generali, come le conferme di salvataggio o invio;
- in un componente o una sezione delimitata, come i messaggi di errore nelle sezioni di un form;
- sopra al contenuto in pagina (on top) quando usata come notifica.
In base al tipo di avviso, la barra indicatrice può essere:
- blu (info), per i messaggi informativi;
- verde (success), per i messaggi di conferma;
- marrone (warning), per gli avvertimenti;
- rossa (danger), per gli errori critici.
Interazione
In stesura
Specifiche di design
In stesura
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici