It’s good to know which features the users use, how often, in what order etc. Do you need to advertise some functionality more? Maybe you need to prepare better documentation so that they even know how or why to use some things?

If you have outgoing links, you may want to know where your users are going? The ugly way of doing this would be to use some sort of redirect URLs and monitor those. But I don’t like that way. If I use mootools anyway I can track outgoing links more elegantly. And redirects certainly can’t handle ajax stuff.

1
2
3
4
5
6
7
8
9
10
11
12

function clicktrack(id) {
    var elements = $(id).getElements('a');
    elements.each(function(item, index) {
        $(item).addEvent(
            'click', function() {
                new Image().src = '/usability/?click='
                + $(item).getParent().id + "&" + $(item).id;
            }
        );
    });
}
clicktrack('mode');

Add a HTML that looks somewhat like this to get an idea what buttons your users are clicking.

1
2
3
4
5

<div>
   <a id="1" href="#">option 1</a>
   <a id="2" href="#">option 2</a>
   <a id="3" href="#">option 3</a>
</div>

Of course, in an ideal world, you’d want to offer non-JavaScript links too. Tracking outgoing links is even simpler, i’ll leave it as an exercise for the reader

So inside the domready event I simply did:

1
2
3
4
5
6
7
8
9
10
11
12

function inputify(elem) {
    elem.focus();
    elem.addEvents({
        'keydown': function(event) {
            if (event.key === 'backspace' && !elem.value) {
                history.back();
            }
        }
    });
}
 
inputify( $('SomeInputfieldById') );

Great, reusable, everthing works fine. Ok, so let’s incorporate my ideas from my HTML forms and onclick/onfocus post (basically, select on click instead of focus and pre-fill the input field):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function inputify(elem) {
    var startvalue = elem.value;
    elem.select();
    elem.addEvents({
        'keydown': function(event) {
            if (event.key === 'backspace' && elem.value === startvalue) {
                history.back();
            }
        },
        'click': function() {
            elem.select();
        }
    });
}
 
inputify( $('SomeInputfieldById') );

Great works fine. Remember pre-filled value and only go back in history when the user hasn’t changed it. Done.

Wait… oh, noes! The backspace button is supposed to delete the input. Now, most users will unwillingly trigger the history back function. That’s as broken as it gets… Well, in theory I could focus the input field instead of selecting it, and use something like caretPos, and only go back in history if it’s at the start… But that’s not what I had in mind (well not sure what I was thinking anyway…)

So I consider this technique unusable for the time being for my own sites. The only times I focus some input field onload is for search functions anyway. There, I’d rather annoy a few users and improve the overall usability of the site. Like Harmen said in his post, don’t use onload input focus just because you can

Whenever you list things, IE scripting breaks if you add a comma behind the last element. It’s probably incorrect to add a comma and the examples at docs.mootools.net are all correct. But it surprised me nonetheless as IE lets terribly broken HTML pass and other browsers are more forgiving. Anyway, fixing sloppy code is always a good thing.

This won’t work in the Internet Explorer I tested:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.addEvent('domready', function() {
    var elements = $('sidebar').getElements('a');
    elements.each(function(item, index) {
        var elem = $(item);
        elem.addEvents({
            'mouseenter': function() {
                elem.setStyle('background-color', '#ccf');
            },
            'mouseleave': function() {
                var myFx = new Fx.Tween(elem, {
                    duration: 250,
                    link: 'ignore',
                    transition: 'sine:out',
                });
                myFx.start('background-color', '#ccf', '#eef');
            },
        });
    });
});

(Errors on lines 13 and 16)

This will work:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.addEvent('domready', function() {
    var elements = $('sidebar').getElements('a');
    elements.each(function(item, index) {
        var elem = $(item);
        elem.addEvents({
            'mouseenter': function() {
                elem.setStyle('background-color', '#ccf');
            },
            'mouseleave': function() {
                var myFx = new Fx.Tween(elem, {
                    duration: 250,
                    link: 'ignore',
                    transition: 'sine:out'
                });
                myFx.start('background-color', '#ccf', '#eef');
            }
        });
    });
});

Some day I may read through the JavaScript specs and find out if this behaviour is to be expected. Another resource I haven’t gone through yet is this excellent post at the mootools blog.

If you’re interested in debugging JavaScript for IE you should read this How to debug JavaScript in IE as well.