How To Create Scrolling And Loading Micro Animations
Jakob Nielsen
Jakob Nielsen is a Danish web usability consultant and a «Nielsen Norman group» founder. He holds a Ph.D. in human–computer interaction from the Technical University of Denmark in Copenhagen.
(Wikipedia)
(Wikipedia)
One of Jakob Nielsen's usability principles says: "The system should always keep users informed about what is going on."
One way to help your website fit this rule is to provide it with micro animation features. We've added two types of animation:
1. A page loading indicator of a customizable color saying: "Everything is fine, the page is loading."
2. A scroll indicator telling a user which part of the page they're currently viewing.
1. A page loading indicator of a customizable color saying: "Everything is fine, the page is loading."
2. A scroll indicator telling a user which part of the page they're currently viewing.
1
How to add a loading animation and indicator
Add a T228 block from the "Other" category to the top of the page.
This is what the page loading looks like without a loading animation:
The content loading will become smoother after adding that block:
Select the "Show a loading indicator" checkbox and choose a loading indicator background color in the Settings panel of the block.
This is what the page loading looks like after adding a loading indicator:
This indicator is not displayed in Safari. Safari has its own page loading indicator.
2
How to add a scroll animation
Add a T333 block from the "Other" category to the top of the page.
Specify the color and progress bar height in the Settings panel of the block.
Specify the color and progress bar height in the Settings panel of the block.
