Single Loader Icon vs Multiple Loader Icons

Question

Consider a page with multiple sections , the content of each section is loaded async via ajax once the user has reached the page. Current implementation demands that a loader icon , such as a spinner , be shown in each individual section till the ajax calls return with response. As each section may complete load at different times.

Question is - is it a good user exp to have such multiple loaders for each section , or is it a good user exp to just have a single loader shown in an opaque overlay until all the async calls are complete and the sections have been painted ?

More info,

• The sections are placed one below the other.
• Each section is independent of the other and can be acted upon once the sections are painted.

Answer 1

You should show a spinner icon for each section as it loads. The main reason for saying this is that you have said users can begin to interact with a section once it has finished loading. Allowing this will create a sense of faster loading for the page, which reduces user stress.

Since each section likely refreshes after an interaction by the user, having multiple spinners is a good idea because it provides the user with the most accurate feedback for what is going on. Feedback is one of the most important aspects for interfaces: http://www.nngroup.com/articles/ten-usability-heuristics/.