{"id":107,"date":"2014-06-27T17:41:05","date_gmt":"2014-06-27T22:41:05","guid":{"rendered":"http:\/\/www.aminutestime.com\/jobblog\/?p=107"},"modified":"2014-07-11T07:15:35","modified_gmt":"2014-07-11T12:15:35","slug":"loading-screen-design-considerations","status":"publish","type":"post","link":"https:\/\/www.aminutestime.com\/jobblog\/2014\/06\/27\/loading-screen-design-considerations\/","title":{"rendered":"Loading Screen: Design Considerations"},"content":{"rendered":"\n

Note: This post discusses “A New Dawn”<\/a>, my WordPress theme. More detail on the theme implementation is available here<\/a>.<\/em><\/p>\n

The loading screen feature is a handy fix to a troublesome presentation issue – the way that browsers gradually render visual elements in real-time on the screen as they read them in from the source HTML.<\/p>\n

Problem To Solve<\/div>\n

This browser feature makes a lot of sense in slow loading conditions, for example allowing you to navigate away from an intermediate page without having to twiddle your thumbs while the whole thing downloads at a snail’s pace. But under regular conditions, it means that pages display in a piecemeal fashion, flashing their ugly under-bellies to the user before finally settling upon their final, meticulously-designed appearances. To a programmer’s brain, this violates encapsulation! And it obviously presents a problem from an experience perspective, but what can you do? The browser’s rendering engine is outside of our control as web developers.<\/p>\n

Problems To Avoid<\/div>\n

The loading screen presents one solution to this problem. It isn’t perfect, but it at least allows a visually-controlled transition between web pages, even in slow-loading conditions. This ability, however, comes at a cost. For one thing, it may be jarring to a user to have a new screen that they aren’t expecting thrown in their faces, even if only for a short time. Also you lose the benefits the browser was designed to provide in the first place eg. the ability to short-circuit the loading of an un-needed page that was discussed earlier. If the page is taking a ridiculously long time to load, your user may be sitting staring at a blank screen for a small eternity. The user may be next to powerless to improve their experience in the face of a slow connection, but even worse than being powerless is feeling<\/em> powerless, and the loading screen may contribute to that feeling.<\/p>\n

Moreover, as with any software feature you need to think about the user’s experience if it malfunctions. In the best case, if the loading screen is dismissed before the page finishes rendering, you now have two<\/em> annoying transition artifacts instead of one: flashing page elements AND a flashing temporary screen. And in the worst-case, if the loading screen does not get dismissed as planned, your whole website is fatally broken! That’s a serious risk to incur for a little polish in your presentation layer.<\/p>\n

Putting It All Together<\/div>\n

So the consideration of all these issues gives rise to the following requirements of the loading screen:<\/p>\n

    \n
  1. There must be a way to manually dismiss the loading screen if the page is taking a long time to load, or if the automatic dismissal mechanism fails.<\/li>\n
  2. The screen must be displayed as close as possible to the start of the page-rendering by the browser.<\/li>\n
  3. The screen must be removed as soon as the important page elements have been rendered, but not before.<\/li>\n
  4. The loading screen display logic should be more<\/em> likely (or at least, as<\/em> likely) to fail than the logic controlling the availability of the dismissal capability.<\/li>\n<\/ol>\n

    And so, as is often the case, turning over a feature which seems at face-value to be about as straightforward as a stone reveals some not-quite-so-simple requirements lying underneath.<\/p>\n

    More on how these were addressed in the Loading Screen module in a later post!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Note: This post discusses “A New Dawn”, my WordPress theme. More detail on the theme implementation is available here. The loading screen feature is a handy fix to a troublesome presentation issue – the way that browsers gradually render visual elements in real-time on the screen as they read them in from the source HTML. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,14],"tags":[9,11,10,5,4],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-a-new-dawn-wordpress-theme","category-design-details","tag-design","tag-detail","tag-loading-screen","tag-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":10,"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/posts\/107\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aminutestime.com\/jobblog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}