Animazioni e microinterazioni: SVG, Lottie e APNG

Categoria:

Progetta

Tempo di lettura stimato: 1 min • Pubblicato il 16 febbraio 2026

Un’animazione ben progettata migliora la comprensione dei flussi e delle transizioni perché fornisce feedback visivi immediati. Se gestita male, riduce le prestazioni, crea barriere all'accessibilità e distrazione visiva.

Illustrazioni e animazioni funzionali

Le illustrazioni possono essere animate, ma solo se funzionali e leggere.
L’animazione deve aggiungere chiarezza, feedback o ingaggio senza appesantire la UI o distrarre l’utente.

Buone pratiche

  • Non usare troppe animazioni.
    Usa le animazioni in momenti specifici come onboarding, schermate di caricamento o conferme.
  • Evita loop infiniti.
    Preferisci animazioni con durata finita o attivate da un’azione specifica dell’utente.
  • Cura l’accessibilità.
    Prevedi sempre la possibilità di mettere in pausa, disattivare le animazioni.
    Sostituiscile con un fallback statico in ambienti non compatibili.

Cosa fare
Cosa evitare
Cosa fare

Animazione da 800B, SVG ottimizzato, caricamento rapido anche su reti lente.

Cosa evitare

GIF da 1.5MB a 15fps in loop su tutti i device, con impatto negativo su performance e batteria.

Linee guida correlate

Introduzione all'uso delle illustrazioni

Quando usare le illustrazioni

Tipologie di illustrazione per UI

Stile illustrativo: coerenza e tono

Allineamento con il Tono di Voce

Illustrazioni in modalità scura e accessibilità
Esprimi la tua opinione