Non-blocking UI's with interface previews

http://www.callumhart.com/blog/non-blocking-uis-with-interface-previews

by callum_hart • 11 years ago

170 53 11 years ago

adambratt2• 11 years ago

I'm actually surprised I haven't seen this done more around the web.

It does take more work to actually have to build everything twice (first placeholder, than actual filled content) but just using some CSS classes and any decent framework like Angular would make this pretty easy to do.

spacecadet3• 11 years ago

What do you mean? It's everywhere, but like the author said, 'in a perfect world', really, most of the time you don't notice it.

'we' use angular on our project and it does this by 'default'.

i.e. the HTML/CSS always loads right away while the dynamic content is loading in the placeholders, which in turn are the elements themselves that will be used.

This article seems dated, 2000? I haven't worked on an AJAX app since that time, at least one with pinwheels and white pages...

dhbanes• 11 years ago

You haven't worked on an AJAX app since 2000?

adambratt2• 11 years ago

I meant using the content placeholders like Facebook does.

pgl• 11 years ago

Personally I find the Facebook placeholders quite distracting. You still have to wait around for something to load, and scrolling down to see something that has loaded means you just have to remember scroll back up again if you want to see what was going to be there.

TuringTest• 11 years ago

I prefer that over the alternative, which is to start reading some post and having the rest of the loading content push what I'm reading below the fold.

beowulfey• 11 years ago

What about if instead of pushing the content down, you get pushed down with the content? If I'm remembering right, Twitter does something akin to that (at least on mobile)

oneeyedpigeon• 11 years ago

I'm beginning to think that this effect is deployed purposefully - witness the ad banner that doesn't display until the split millisecond before you click on the link that it pushes out of the way. Then again [1].

[1] https://en.wikipedia.org/wiki/Hanlon%27s_razor

delluminatus• 11 years ago

Meteor -- the JS framework -- uses something much like this, which they call "latency compensation". It's a core part of their ideology. Data is prefetched or given default values that give the user at least something to look at until the actual data is fetched with AJAX.

Beyond just using spinners, Meteor will populate the fields with client-side cached data that might be a little old, and then when it receives a response from the server it updates the client-side DB with the new data and refreshes the view. If the data hasn't changed at all, the process can be completely transparent -- just an instantaneous UI update.

Because the Meteor framework encompasses both the client and server side, this can be "abstracted away" from the app developer. The abstraction isn't perfect of course but it makes it much easier to implement these kinds of ultra-responsive Web UIs.

svachalek• 11 years ago

I think this is my favorite feature of Meteor (which I've only used so far as playing around a bit). It's on everything, automatically, painlessly.

philfreo• 11 years ago

Pinterest does something really clever related to this - not so much for data placeholder but for images. They have precomputed the dominant color for each image and show that color while the image loads.

http://littlebigdetails.com/post/56782380031/pinterest-befor...

koyote• 11 years ago

I believe Google images does the same.

Not sure who was first though.

michaelchisari• 11 years ago

I just checked, and it doesn't look like they do.

elsurudo2• 11 years ago

That's a really nice detail. I guess it's like the old "progressive" JPEGs from the dialup days, but the lowest level of them (1 pixel).

archagon• 11 years ago

Oooh, that's a nice site. Gotta add it to my daily reading!

gingerlime• 11 years ago

Trello does the same

callum_hart2• 11 years ago

Thats well cool! Never noticed that before

showsover• 11 years ago

The email subscription of that site is broken though. Using my own emailaddress is not allowed: > This email address looks fake or invalid. Please enter a real email address

jonathantm• 11 years ago

"Front-end Fanatic"

With that font? Have you actually tried to read that something with that font?

My poor eyes! hashtagSadFace

windsurfer• 11 years ago

Is something wrong with your system? This is what I see: http://i.imgur.com/9yWsXIx.png

joeschmoe• 11 years ago

The contrast between the font and the background is low for the body text (65% alpha black text on solid white background), which makes it harder to read for people with poor vision.

wodenokoto• 11 years ago

I am of the opposite conviction of the author. I hate it when content is the last part to be loaded.

nilliams5• 11 years ago

You'd prefer to see nothing (or nothing but a spinner) until everything is available to be shown?

JoeAltmaier3• 11 years ago

You can't really win with web apps. A native app that painted either way would be called 'broken' and not pass QA. Yet we swallow things like this without blinking.

ANTSANTS• 11 years ago

Yes. Asynchronous image loading and rendering is already built into the browser, and the rest of the content shouldn't take long to load to begin with. Fancy dynamic Javascript frameworks that break up what should have been a single response into 20 different responses, asynchronously firing dozens of superfluous repaints as the data trickles in, cause far worse performance, latency, and usability problems than rendering a single chunk of HTML ever did.

_lce0• 11 years ago

I hate when "fonts" are lazy loaded

.. whenever the fonts are loaded, the whole page changes, and I cannot longer keep a sane reference of what I was reading

elsurudo2• 11 years ago

I'm a fan of this approach – another good example (although a bit more subtle that Facebook) is Trello.

callum_hart2• 11 years ago

Cool I'll make sure I check out Trello!

WhitneyLand2• 11 years ago

Don't see how this is different from ajax conceptually. It is mentioned that a single page application framework is required. While an SPA framework is preferred, everything seems pretty doable with JQuery, just not as nicely prescribed.

The item individualized custom placeholders I haven't seen as a standard pattern, but I'm not sure it's worth the effort.

leetNightshade• 11 years ago

I'm not sure you understand the point of this post? We're not talking about AJAX or an alternative to it. This has to do with page layout and design in conjunction with delayed asset loading, whether it's slow loading or AJAX.

I personally think placeholders/known sizes are a must in web design. It really annoys me when I'm reading something and it gets pushed down due to slow loading images, etc.

WhitneyLand2• 11 years ago

Yes, I understand this is a design issue not technical but AJAX is commonly associated with this, maybe I should have been more precise.

Still, what is new here that is not found in many mainstream designs for years?

ceejayoz• 11 years ago

Don't see how this is different from ajax conceptually.

This is essentially a more user-friendly version of the common spinning .gif people use when they're making something load via AJAX.

zawaideh• 11 years ago

We do this in Sandglaz. On page load the skeleton of the app is there without content, and once data is ready we render the rest.

Klasiaster• 11 years ago

yay, css spinners utilizing the full cpu time. anyway: it's worth to mention that specially for developing countries and other areas with bad link, this is an improvement and even construction of a website should acknowledge that things are slower than at your development setup.

zerovox• 11 years ago

Interesting to contrast this to what OS X(certainly Mavericks, maybe others) does. If you restart and opt to re-open previously open windows, they will open with screenshots of their previous states - only when you click on one will it dim the window and admit to you that it's not loaded yet. Personally, I find this a little irritating, giving the illusion that it's ready when it isn't. I find facebooks approach a little better, it doesn't pretend to be usable, but guides your eyes to the right part of the screen.

beefsack• 11 years ago

Regarding the apostrophe in the title, you generally don't put apostrophes when pluralising acronyms.

ashmud• 11 years ago

It's a valid style. Although, it was already falling out of vogue by the time I was out of primary school. This was also around the time that many were changing over to a single space after periods and colons.

PaulHoule• 11 years ago

Apps like this often look broken when they are loading (you see something like "0 results") and often don't give clear indication that this is normative, so often you don't know if this is yet another FUBAR app or if the server is slow or if you should just leave the US and move to a country which is not so dead-set against investing in broadband.

STRML• 11 years ago

You can get a long way there with a server-rendered app, either via something like airbnb-style Rendr, PhantomJS (which has now hit 2.0), or React. Cache heavily if possible and you can get a really responsive render. It doesn't help of course for infinite scroll-style interactions, but nothing beats preloaded, static HTML! The difference, especially on slow mobile connections, is night and day.

rlaanemets• 11 years ago

This technique goes well with two-way binding libraries (Knockout, Angular etc). You give data fields default values as DOM is constructed and replace them with the real values after the actual data comes in. However, DOM reflow/layouting issues remain if some portions of data are conditionally displayed. Then some elements (placeholders) are hidden/removed after loading the actual data and that still causes the UI to jump around.

Non-blocking UI's with interface previews

Related Stories