I’ve been reading about HTML 5 and the new JavaScript API’s for it just recently. I liked the new video stuff so thought I’d have a go at doing something with it. So as a bit of an experiment I have created a pretty simple video tagging app.

It allows you to click in the video to tag an area of the screen at a particular playback time. You can then click the list of tags to go see where they are in the video.

As I said, it’s just an experiment and at the moment only works in chrome, firefox and opera. It would probably also work in safari apart from I didn’t have that video encoded in H.264. Go have a play!

Recently Steve came up with an idea for cool delete confirmation messages. So it started off with him saying “wouldn’t it be cool if when you deleted something one of those old batman comic actions displayed on the screen!” in his excited idea voice and his Scottish accent (a strange mixture I know).

So Steve went a away and did some CSS3 magic to get a really nice animation working that showed these messages in the web browser just like they used to on the old batman tv shows. Whilst this was looking good the problem he found was that really the animation needed a few stages  - set the starting position, animate out then animate back in. After each stage of animation the next had to start and it needed to be seamless. Using CSS3 Steve was able to create each animation but to get them to work he needed to hook them up to actions that relied on the user to initiate.

So Steve handed his work over to me and asked me to see what JavaScript I could use to get his animations all working seamlessly. I added in some JavaScript which waited for each animation stage to finish before starting the next animation.

It turns out that by using CSS3 we could achieve these animations in a few lines that would normally take a huge amount of code if written entirely in JavaScript. Then by using JavaScript as the controller we could manipulate the CSS3 to work when we wanted it to.

So to view this happy combination of CSS3 and JavaScript have a go with our demo – batman style delete confirmations. Be warned that because of it’s reliance on CSS3 transforms you will need to view this demo in Chrome, Safari or Opera. At the time of writing this blog, only Firefox’s current Beta release supports the CSS3 transforms and IE is….. well, IE.

There is so much talk right now about getting the web sites we build to work at speed. They must load quickly and react to user interaction quickly because running at lightning speed is the goal. Well I’m going to say that it’s not that black and white and that speed is often the wrong approach when it comes to a good user experience.

Think about if you were on an express train, one of those trains that runs straight through many of the stations without stopping. Imagine that as it ran through a station you caught a look at someone standing on the platform that looked like someone you knew. The problem is that the train was going so fast that you couldn’t get enough of a look at the person to tell if it was who you thought it was. You’re now left wondering, wanting to go back to have another look and all together frustrated.

Obviously the speed and responsiveness of a web site is important, but not always. A good example would be an input box that allows the user to input their name which has a save button next to it. The save button uses AJAX to post the users name back to the server behind the scenes. When the user presses the save button a little moving icon shows to inform the user that the save is taking place. Once the save is finished, a message appears to state it’s success. Often, the save works so quickly that the little moving icon that was meant to inform the user of the save shows and hides at the blink of an eye. The problem here is that the user is confused with something that flashed onto the page, what was it? Was it a message? So did my name save or was the thing that flashed up something important?

So all I’m saying here is that if you’re going to give feedback to your users allow them time to receive and understand that feedback before you take it away. It only takes half a second of delayed time, that can easily be done in JavaScript, to allow your users the benefit of that feedback that you took the time to put in place anyway.

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 <img src='http://tomcoote.co.uk/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> ',
                    seconds: 12
                },
                {
                    elementID: 'loading',
                    msg: 'Sorry, something must have broken. I understand your frustration <a href="#">tell us</a> 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.