Loading Feedback

A few weeks back now I got the chance to go to the future of web design conference which I am thankfull to my employer for. The speakers at this conference where fantastic and the topics were extremely interesting.

Whilst there I listened to a talk by Aral Balkan which was nothing short of amazing. Aral talked about the art of emotional web design. His presentation was so interesting and refreshing, it inspired me.

I class myself as a developer but a developer who is an avid fan of design. Something that I liked a lot in Aral’s talk was his complaints about loading bars on the web. The message was that these loading bars only offer the user the correct feedback if the actual loading happens on time with out any problems. If something takes a bit longer or something breaks entirely then the user is left with incorrect feedback resulting in frustration which effects their user experience…. and their day!

The solution to the dreaded loading bar or icon, as Aral went on to present, is to offer the user feedback that shows emotion and sympathy. Instead of an infinitely long animated loading bar the idea is to talk to the user about what is happening whilst they wait. When things are taking too long, let them know that something has probably gone wrong.

So to get to the point of this post, I had done a little thinking and realised that it’s things like this that often but wrongly get discarded from projects for what ever reason/excuse. In my opinion it’s these touches that turn a decent product into a great product. That said, I set about creating a nice and easy JavaScript function which I will start using for my client work and personal projects immediately.

function loadingFeedback(data) {
    var timeouts = [];

    for (var i = 0; i < data.length; i++) {
        timeouts[i] = window.setTimeout(function(details) {
            return function() {
                document.getElementById(details.elementID).innerHTML = details.msg;
            };
        }(data[i]), data[i].seconds * 1000);
    }

    return timeouts;
}

So the idea is that some ace designer has given us developers a load of different loading messages to show to the user whilst something on a web site is loading. Usually we'd complain and moan that we now had to get these messages to show and it would be really hard... blah blah blah. However with this bit of code it becomes extremely easy. You just call it when something needs to start loading and pass to it an array of messages to show. The following is an example of calling this function.

function loadStuff() {
    var loadData = [
               {
                    elementID: 'loading',
                    msg: 'Loading...',
                    seconds: 0
                },
                {
                    elementID: 'loading',
                    msg: 'Still loading, won\'t be long now.',
                    seconds: 3
                },
                {
                    elementID: 'loading',
                    msg: 'Arrrghhhh! This is taking ages',
                    seconds: 7
                },
                {
                    elementID: 'loading',
                    msg: 'This isn\'t good  ',
                    seconds: 12
                },
                {
                    elementID: 'loading',
                    msg: 'Sorry, something must have broken. I understand your frustration tell us about it.',
                    seconds: 18
                }
        ];

        loadingFeedback(loadData);
}

I think it's pretty self explanatory, it places the message into the element on the page with elementID when the seconds for that message have passed. The messages I've put in that example are not brilliant but they could also contain HTML instead of words which would probably be more likely. The loadingFeedback function also returns an array of timeout objects so that if you need to cancel the loading messages you can simply loop through them and call window.cancelTimeout on each.

So I hope this has made things a little easier for some others. I'd really love to see the dreaded loading bar become a rarity instead of a common sight on the web and in other apps.

This entry was posted on June 4, 2010 at June 4, 2010 and is filed under JavaScript, UI. You can follow any responses to this entry through the RSS 2.0 feed.