I need to decide between using a skeleton screen or a loading animation for the contents of a modal.
The modal itself contains an image, title, paragraph, couple of CTAs and a carousel at the bottom that updates the content (like a gallery view).
We were thinking of going ahead with skeleton screens but I recently came across the below NNG article
How do you decide between the two? Spinners are typically best used on a single module, like a video or a card which is on a dashboard. Skeleton screens (with the exception of frame-display ones) are better when the full screen is loading because the wireframe gives users a sense of what the page will look like and, thus, minimizes cognitive load.
Below are the things that confuse me.
- While it states the above, I could find no reasoning or rationale behind why spinners are typically used for single modules.
- The words used in this article is "Skeleton screens (with the exception of frame-display ones) are better when the full screen is loading". By full screen, would a modal be in scope here.
At the start of the article it also mentions
This specific type of progress indicator is used exclusively for full-page loads.
So not sure if "full screen" and "Full page" are being used interchangeably here.
So far I've read the below questions
Regarding accessibility, one of the answers include the below, which is a quote from Success Criterion 2.2.2
Moving, blinking, scrolling
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;
I can only speculate that the NNG recommendation might have something to do with this. The skeleton loading animation would be "parallel" to other content in case of a card.
Having said this, it still does not address the case of modals where all the other content is now behind the overlay.
I'm leaning towards skeleton screens as the modal is perceived and consumed independent of the rest of the page and it also is quite content heavy. However, wish to know more around the NNG recommendations and any studies / articles around it that I might be missing.