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.

  • 2
    your article says "content placeholder"; what's wrong with that name? I'm not sure there's an "official name" for this – Luciano Aug 10 '17 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 Aug 10 '17 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' Aug 11 '17 at 10:21
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.

  • 2
    interesting, I wonder what the origin of the term "Greeking" is... – Digital Lightcraft Aug 10 '17 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 Aug 10 '17 at 12:41
  • Glad I could help, yes origins of "greeking" are unknown to me, I bet it's interesting. – mayersdesign Aug 10 '17 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 Aug 10 '17 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.

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

-1

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

  • 4
    How does this add to the existing answers? It looks like Coderer already mentioned the term "skeleton" – Zach Saucier Aug 10 '17 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 Aug 11 '17 at 8:23
-4

They're called skeleton screens.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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