Comment créer des micro-animations de défilement et de chargement
Jakob Nielsen
Jakob Nielsen est un consultant danois en ergonomie des sites web et l'un des fondateurs du groupe Nielsen Norman. Il est titulaire d'un doctorat en interaction homme-machine de l'Université technique du Danemark à Copenhague.
(Wikipedia)
(Wikipedia)
L'un des principes d'utilisation de Jakob Nielsen stipule que "le système doit toujours tenir les utilisateurs informés de ce qui se passe".
L'un des moyens d'aider votre site web à respecter cette règle est de le doter de fonctions de micro-animation. Nous avons ajouté deux types d'animation :
1. Un indicateur de chargement de page d'une couleur personnalisable disant : "Tout va bien, la page se charge".
2. Un indicateur de défilement indiquant à l'utilisateur la partie de la page qu'il est en train de visualiser.
1. Un indicateur de chargement de page d'une couleur personnalisable disant : "Tout va bien, la page se charge".
2. Un indicateur de défilement indiquant à l'utilisateur la partie de la page qu'il est en train de visualiser.
1
Comment ajouter une animation et un indicateur de chargement
Ajouter un bloc T228 de la catégorie "Autres" en haut de la page.
Voici à quoi ressemble le chargement de la page sans animation de chargement :
Le chargement du contenu sera plus fluide après l'ajout de ce bloc :
Cochez la case "Afficher un indicateur de chargement" et choisissez la couleur d'arrière-plan de l'indicateur de chargement dans le panneau Paramètres du bloc.
Voici à quoi ressemble le chargement de la page après l'ajout d'un indicateur de chargement :
Cet indicateur n'est pas affiché dans Safari. Safari dispose de son propre indicateur de chargement de page.
2
Comment ajouter une animation de défilement
Ajoutez un bloc T333 de la catégorie "Autres" en haut de la page.
Spécifiez la couleur et la hauteur de la barre de progression dans le panneau Paramètres du bloc.
Spécifiez la couleur et la hauteur de la barre de progression dans le panneau Paramètres du bloc.
