What are the methods using which we can engage the user on website or mobile app page where some backend API take more time to provide the output.
0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.
Communication & Transparency
Transparency and keeping the user informed is also key. The worst thing is having the user waiting on a screen with no feedback, thinking the system broke and drop-off (if an alternatives to your product exists) or get frustrated / flood your customer service lines (if your product is the only alternative). More about feedback.
Humans expect instant feedback from the system because the physical world works that way. Therefore it is common to use some sort of animation to give a sense of progress and "something is going on". Loading wheels, loading bars, animates logos, etc are common. Relevant quote:
After improving the animations through feedback, the loading screen with no animation was rated as the slowest in the second set of usability tests. This was despite the fact that it had the fastest loading time in both sets of usability tests.
Some of these simply animate in a loop, others tie the animation itself to the system's progress while showing what exactly is being loaded. However, on a side note, animation should be used for a purpose and not for the sake of animation (it becomes annoying).
Logo Launch Screen
- An opportunity to showcase brand and marketing.
- Marketing may be perceived as intentionally obstructing the user. More so when other familiar apps load fast.
Lazy Loading / Skeleton Screen
Load the structure of the screen with placeholders, similar to a stylized wireframe, and show content as it becomes available.
Gives an illusion of fast loading, since the structure of the screen is loaded instantly.
Loading parts of the screen first allows users to focus on them and keep them busy.