Notifications

Quando usarlo

Usa il componente notification, in italiano notifica, per aggiornare l'utente su modifiche o aggiornamenti minori all'interno dell'applicazione. Questi messaggi temporanei appaiono in sovrimpressione e tendono a scomparire dopo pochi secondi, quindi potrebbero non essere sempre notati o letti attentamente.

Alternative a questo componente

• Alert: per mostrare all'utente messaggi di avviso importanti che restano nel corpo della pagina senza scomparire automaticamente.

Come usarlo

• Cambia lo stile della notifica in base all'obiettivo del messaggio, usando le diverse varianti disponibili.
• Decidi dove mostrare la notifica sull'interfaccia, variando l'esperienza tra dispositivi mobile e laptop/desktop.
• Usa un'icona per nascondere la notifica se vuoi che non scompaia automaticamente.
• Se la notifica richiede delle azioni, usa il componente button.

Attenzione a

• Mantenere un’esperienza coerente su dispositivi differenti.
• Dare un tempo sufficiente all'utente di leggerne il contenuto, o meglio permettere all'utente di chiudere manualmente le notifiche più importanti.
• Verificare l'accessibilità dell'implementazione, in particolare per quanto riguarda l'uso di riferimenti come aria-live per comunicare ai lettori di schermo l'apparizione della notifica e i suoi contenuti.
• Stratificare (stack) e non sovrapporre una sull'altra più notifiche nella viewport: se sono possibili troppe notifiche ravvicinate nel contesto della tua applicazione, metti in discussione la loro utilità.

Buone pratiche sui contenuti

• Il titolo della notifica deve essere chiaro e conciso.
• Includi una descrizione con informazioni aggiuntive solo quando queste sono importanti e non possono essere riassunte nel titolo della notifica.

Accessibilità

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

Stato del componente

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