Come creare micro animazioni a scorrimento e caricamento
Jacob Nielsen
Jakob Nielsen è un consulente danese di web usability e fondatore del «Nielsen Norman group». Ha conseguito un dottorato di ricerca in interazione uomo-computer presso l'Università tecnica della Danimarca a Copenaghen.
(Wikipedia)
(Wikipedia)
Uno dei principi di usabilità di Jakob Nielsen dice: "Il sistema dovrebbe sempre tenere gli utenti informati su ciò che sta accadendo".
Un modo per aiutare il tuo sito web a soddisfare questa regola è fornirgli funzionalità di micro animazione. Abbiamo aggiunto due tipi di animazione:
1. Un indicatore di caricamento della pagina di un colore personalizzabile che dice: "Tutto va bene, la pagina si sta caricando".
2. Un indicatore di scorrimento che indica a un utente quale parte della pagina sta visualizzando.
1. Un indicatore di caricamento della pagina di un colore personalizzabile che dice: "Tutto va bene, la pagina si sta caricando".
2. Un indicatore di scorrimento che indica a un utente quale parte della pagina sta visualizzando.
1
Come aggiungere un'animazione e un indicatore di caricamento
Aggiungi un blocco T228 dalla categoria "Altro" all'inizio della pagina.
Ecco come appare il caricamento della pagina senza un'animazione di caricamento:
Il caricamento del contenuto diventerà più fluido dopo aver aggiunto quel blocco:
Seleziona la casella di controllo "Mostra un indicatore di caricamento" e scegli un colore di sfondo dell'indicatore di caricamento nel pannello Impostazioni del blocco.
Ecco come appare il caricamento della pagina dopo aver aggiunto un indicatore di caricamento:
Questo indicatore non viene visualizzato in Safari. Safari ha il proprio indicatore di caricamento della pagina.
2
Come aggiungere un'animazione di scorrimento
Aggiungi un blocco T333 dalla categoria "Altro" all'inizio della pagina.
Specificate il colore e l'altezza della barra di avanzamento nel pannello Impostazioni del blocco.
Specificate il colore e l'altezza della barra di avanzamento nel pannello Impostazioni del blocco.
