Come creare microanimazioni di scorrimento e caricamento

Jakob Nielsen
Jakob Nielsen è un consulente danese di usabilità del web e fondatore del "Nielsen Norman group". Ha conseguito un dottorato di ricerca in interazione uomo-computer presso l'Università Tecnica di Danimarca a Copenaghen.

(Wikipedia)
Uno dei principi di usabilità di Jakob Nielsen dice: "Il sistema deve sempre tenere gli utenti informati su ciò che sta accadendo".
Un modo per aiutare il vostro sito web a rispettare questa regola è quello di dotarlo di micro-animazioni. Abbiamo aggiunto due tipi di animazione:
1. Un indicatore di caricamento della pagina di colore personalizzabile che dice: "Tutto bene, la pagina si sta caricando".
2. Un indicatore di scorrimento che indica all'utente quale parte della pagina sta visualizzando.
1
Come aggiungere un'animazione di caricamento e un indicatore
Aggiungere un blocco T228 dalla categoria "Altro" all'inizio della pagina.
Block library: "Page loading animation" block (T228) in the list of blocks.
Ecco come appare il caricamento della pagina senza l'animazione di caricamento:
Il caricamento del contenuto diventerà più fluido dopo l'aggiunta di questo blocco:
Selezionare la casella di controllo "Mostra un indicatore di caricamento" e scegliere il colore di sfondo dell'indicatore di caricamento nel pannello Impostazioni del blocco.
Block Settings panel: the "LOADING INDICATOR BACKGROUND COLOR" field and color picker, with the color chosen from the page heading.
Ecco come appare il caricamento della pagina dopo l'aggiunta di un indicatore di caricamento:
Questo indicatore non viene visualizzato in Safari. Safari ha un proprio indicatore di caricamento della pagina.
2
Come aggiungere un'animazione di scorrimento
Aggiungere un blocco T333 dalla categoria "Altro" all'inizio della pagina.
Specificare il colore e l'altezza della barra di avanzamento nel pannello Impostazioni del blocco.
Block Library: "T333 Page reading progress bar" block in the "Other" category.
Realizzato su
Tilda