Comment créer des micro-animations de défilement et de chargement
Jacob Nielsen
Jakob Nielsen est un consultant danois en ergonomie web et fondateur du « Nielsen Norman group ». Il est titulaire d’un doctorat en interaction homme-machine de l’Université technique du Danemark à Copenhague.
(Wikipédia)
(Wikipédia)
L’un des principes d’utilisabilité de Jakob Nielsen dit : « Le système doit toujours tenir les utilisateurs informés de ce qui se passe. »
Une façon d’aider votre site Web à respecter cette règle est de lui fournir des fonctionnalités 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 quelle partie de la page il consulte actuellement.
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 quelle partie de la page il consulte actuellement.
1
Comment ajouter une animation et un indicateur de chargement
Ajoutez un bloc T228 de la catégorie « Autre » en haut de la page.
Voici à quoi ressemble le chargement de la page sans animation de chargement :
Le chargement du contenu deviendra plus fluide après l'ajout de ce bloc :
Cochez la case « Afficher un indicateur de chargement » et choisissez une 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 a son propre indicateur de chargement de page.
2
Comment ajouter une animation de défilement
Ajoutez un bloc T333 de la catégorie « Autre » au 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.
