4 ms·

> gray boxes simulating text This is one of the worst UI trends in the last decade. Mock content gives devs permission to ship slow APIs, and they can even loo

by cmckn 5y ago

> gray boxes simulating text This is one of the worst UI trends in the last decade. Mock content gives devs permission to ship slow APIs, and they can even look janky when your API is too fast. It feels like watching a half hour of trailers before the movie starts.

Raed667 5y ago
You want to know why they exist? Because of Google Core Web Vitals metrics! CLS (Cumulative Layout Shift) can go to zero if you place proper skeletons. I still prefer it to content jumping around when the API response is done.
- deleted 5y ago
  [deleted]
- Zababa 5y ago
  This is a really good solution to a problem that shouldn't even exist.
  - phist_mcgee 5y ago
    Slow APIs? Good luck eradicating those
- noisem4ker 5y ago
  Well, they definitely don't solve the problem for the user, as the grey boxes inevitably aren't the same shape as the content that eventually appears, and the jumping around is still there. Text fields are often variable length and can reflow. Buttons are also frequently dynamic, and all sorts of widgets may not just line up. Sometimes, incomprehensive design changes cause further disalignment between the skeleton and the actual content. It's sad and funny that the YouTube app seems to have just recently jumped on this bandwagon (either that, or the situation worsened so much that I started noticing how bad it is).
  - Raed667 5y ago
    I agree with you that snapping some skeletons on a UI and calling it a day won't help the user This is why I sneaked this part in: > if you place proper skeletons I had to work on this recently and unless you take the design constraints seriously you will eventually end up in the situation you described.
tshaddox 5y ago
And I can't even count the number of web sites (from companies with plenty of engineering budget!) that render the gray placeholder UI, but when the real data comes in, it doesn't even remotely line up with the placeholder UI (which is the whole point). I totally get how it happens: the placeholder UI and real data UI isn't sharing code, and just relies on dumb luck that the next person who changes the real data UI also changes the placeholder UI to match it.

by cmckn 5y ago

Raed667 5y ago

You want to know why they exist? Because of Google Core Web Vitals metrics! CLS (Cumulative Layout Shift) can go to zero if you place proper skeletons. I still prefer it to content jumping around when the API response is done.

deleted 5y ago
[deleted]
Zababa 5y ago
This is a really good solution to a problem that shouldn't even exist.
- phist_mcgee 5y ago
  Slow APIs? Good luck eradicating those
noisem4ker 5y ago
Well, they definitely don't solve the problem for the user, as the grey boxes inevitably aren't the same shape as the content that eventually appears, and the jumping around is still there. Text fields are often variable length and can reflow. Buttons are also frequently dynamic, and all sorts of widgets may not just line up. Sometimes, incomprehensive design changes cause further disalignment between the skeleton and the actual content. It's sad and funny that the YouTube app seems to have just recently jumped on this bandwagon (either that, or the situation worsened so much that I started noticing how bad it is).
- Raed667 5y ago
  I agree with you that snapping some skeletons on a UI and calling it a day won't help the user This is why I sneaked this part in: > if you place proper skeletons I had to work on this recently and unless you take the design constraints seriously you will eventually end up in the situation you described.

tshaddox 5y ago

And I can't even count the number of web sites (from companies with plenty of engineering budget!) that render the gray placeholder UI, but when the real data comes in, it doesn't even remotely line up with the placeholder UI (which is the whole point). I totally get how it happens: the placeholder UI and real data UI isn't sharing code, and just relies on dumb luck that the next person who changes the real data UI also changes the placeholder UI to match it.