Tuesday, May 2, 2017

terminology - 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 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 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.



Answer



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...