4

I want to design a skeleton screen but I am conflicted on how it should be implemented. On the screen I want to use a skeleton for, there can be any number of rows from 2-5. All rows under the "devices" is dependent on the user. Currently, without the skeleton screen, the space below "devices is empty until the page finishes loading, and then there's 1-4 rows of devices depending on the user. If I use the minimum and add 2 rows in the skeleton screen but the user has 4 rows, it may be confusing. The same goes vice versa.

These are the possible finished pages after loading: enter image description here

So how many grey boxes should a skeleton screen have?

enter image description here

Improve this question

2 Answers 2

Reset to default
4

Use only one row. Skeleton screens provide users a mental model that anticipates what users will see on a more or less similar way to what they will actually see, just not necessarily the same.

If you see the image below, you'll see that the skeleton placeholders aren't exactly the same. However, they're similar enough to convey what the final result will be:

enter image description here

Another example from this paper on skeleton screens

enter image description here enter image description here

Remember that, while it's possible to replicate the structure exactly as it will be, it's not necessary, as long as you provide the general structure overview, it will be enough for the user to understand and anticipate what the screen will look like.

EDIT: I'll add this as an anecdote; please don't take it as research that applies to all cases.

Two years ago, we helped build the new interface for a big newspaper. We used skeleton screens, but then research showed something: speed was so fast that the skeleton screens showed as FOUC (Flash of Unexpected Content). However, since we obviously couldn't know whether the connection would be fast or not, we needed the skeleton screens. So, the solution was to artificially delay the load to avoid FOUC. Therefore, we had to worsen the experience to avoid an unexpected event that would result in (perhaps) an even worse experience.

Again, do not take this as something that applies to all cases, just providing some food for thought.

Improve this answer
1
  • The FOUC issue is something I never thought of and I will definitely take that into consideration! Currently, our load times are fairly long, but I havn't really tested with an account that only has, 1 device, for example. The load time for that account would probably be almost instant, so I'll have to delay for those edge cases.
    – Gene Lee
    Jul 31 at 18:38
2

One way could be to use your default page size. This is the default amount of items pulled for each page.

Even if the items returned are less than the page size, users won't notice the difference.

Another idea could be to just show two or three by default, again users won't tell the difference.

Improve this answer
6
  • 1
    So my main concern was a mismatch, where there are 3 skeleton loading screens but then theres only 2 when loaded. If you don't think this is an issue, I think showing 3 rows to cover the entire page would work. I can't think of any examples, however, that use this method. Most skeleton screens I see have infinite scrolling and therefore don't have this issue. Are there any examples of skeleton screens not matching what is loaded?
    – Gene Lee
    Jul 31 at 17:10
  • @GeneLee a mismatch is fine, users won't get subpar experience. But you'd shoot yourself in the foot if you tried to guess how many items are coming over from server
    – Kitanga Nday
    Jul 31 at 17:16
  • @GeneLee as for your second point, you can't see it on YouTube or Facebook because they have so much content they almost get this info. Try searching for a rare word on social media and see how the site behaves.
    – Kitanga Nday
    Jul 31 at 17:17
  • As a programmer I'm telling you, trying to match what's coming will be a waste of your Dev time and server money
    – Kitanga Nday
    Jul 31 at 17:18
  • 1
    @GeneLee ah I see, so you a UX engineer then. Perfect. Tips hat. No problem man, happy to be of some assistance
    – Kitanga Nday
    Jul 31 at 18:21

Your Answer

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

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