12

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.

Example from Slack

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.

Improve this question
4
  • 2
    your article says "content placeholder"; what's wrong with that name? I'm not sure there's an "official name" for this
    – Luciano
    Commented Aug 10, 2017 at 8:53
  • I do see a few mentions (usually calling out Facebook by name) using that specific string. The best lead is this library but I don't think it'd fit well with the Angular declarative / reactive model. I'll keep digging, thanks.
    – Coderer
    Commented Aug 10, 2017 at 9:19
  • 1
    @Luciano The problem is that "content placeholder" could also easily be Lorem Ipsum and similar stuff. This is also useful in graphic design, so the term is ambiguous.
    – yo'
    Commented Aug 11, 2017 at 10:21
  • related: graphicdesign.stackexchange.com/questions/70003/…
    – Vincent
    Commented Aug 24, 2017 at 8:54

5 Answers 5

Reset to default
18

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.

Improve this answer
4
  • 2
    interesting, I wonder what the origin of the term "Greeking" is...
    – Digital Lightcraft
    Commented Aug 10, 2017 at 12:29
  • 1
    @DigitalLightcraft Might have soomething to do with the expression 'it's all Greek to me'. For more info, feel free to post a question on English.SE :P
    – Vincent
    Commented Aug 10, 2017 at 12:41
  • Glad I could help, yes origins of "greeking" are unknown to me, I bet it's interesting.
    – mayersdesign
    Commented Aug 10, 2017 at 14:37
  • 2
    Interesting bit about the origin being related to lorem ipsum: "The use of greeking (also called dummy text) allows page designers to place text on a page without the actual content acting as a distraction. The history of greeking is unclear, but it was first used in the middle of the 20th century. The text was based on the words of Cicero, a Roman leader whose writings are admired. The language he spoke and wrote was Latin rather than Greek, so the naming of this dummy text is misleading." source
    – Jamie Bull
    Commented Aug 10, 2017 at 15:10
4

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.

Improve this answer
2

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.

enter image description here

Improve this answer
-1

When I've used this pattern we called it a skeleton page. Super useful for big pages that are generating dynamic content.

Improve this answer
2
  • 4
    How does this add to the existing answers? It looks like Coderer already mentioned the term "skeleton"
    – Zach Saucier
    Commented Aug 10, 2017 at 20:57
  • Welcome to Graphic Design! If you have sufficient reputation, you may upvote the answer you think it's correct. Alternatively, "star" the question as a favorite and you will be notified of any new answers.
    – Luciano
    Commented Aug 11, 2017 at 8:23
-4

They're called skeleton screens.

Improve this answer
1
  • Hi NIck, welcome to GD.SE. Please don't double-post information that has already been mentioned in other answers. Thanks!
    – Vincent
    Commented Aug 11, 2017 at 7:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.