: What's the name of the web design pattern of showing the shape of content while actual content is loading? It's pretty common for Single Page Application (SPA) sites to load and display the
It's pretty common for Single Page Application (SPA) sites to load and display the site layout before loading its content. Lately, I've noticed that instead of just showing a wait-spinner or "Loading..." message, a lot of theses sites show the template / layout that the content will populate, with the text and images filled in with flat geometric shapes.
It seems like a good pattern because it's less jarring than having one small line of wait-text replaced by a big dump of messages or whatever.
I'd like to read up on the pattern, maybe find a library for doing it more easily on my site, but I have no idea what to call it, and I'm having trouble even describing it succinctly enough to search the web effectively. The closest example I could find was this old article which doesn't give the practice a specific name.
"Placeholder" is the first thing I could think of, but of course <input> tags now have an actual placeholdler attribute and lots of people ask about filler text or other content (Lorem Ipsum, Kitten Ipsum, and the like) so the results tend to be unhelpful. I'm hoping that the industry has agreed upon a unique, descriptive name for this practice and I just haven't found it yet.
More posts by @Heady304
5 Comments
Sorted by latest first Latest Oldest Best
Some of your developer friends might refer to it as Facebook's shimmer effect, since Facebook popularized the content placeholder technique with a slight shimmering effect, and open-sourced their code.
The point of the shimmer effect is to indicate that the actual content is still loading, so that users don't think the page is stuck and refresh.
When I've used this pattern we called it a skeleton page. Super useful for big pages that are generating dynamic content.
The magic word seems to be greeking (thanks!), but that helped me find the term "Skeleton Screen", which looks like it refers to the very specific practice of laying out mock content to get the general shape of the application. I guess the theory is that it can reduce anxiety about load times.
The first thing that occurred to me was that the suggestion of type being shown in your example is certainly referred to as greeking.
Searching “greeking used in loading screens” led me to multiple articles about this UX technique, and specifically this one which refers to the concept as a Content Placeholder.
As good a term as any I think.
So specifically here you have greeking and image Placeholders and together the whole thing can be referred to as a Content Placeholder.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.