If javascript affects your UI, load it ASAP

May 13, 2009

The javascript focus() method is often used to place a user’s cursor in the username field of a login form on page load. Twitter uses this technique. After everything is loaded, a blinking cursor appears in the username field and you can begin typing your login credentials. Viewing Twitter’s source code, you can see the jQuery snippet below that shifts the focus. It’s at the very bottom of the page and is loaded after several javascript libraries (why the hell do they use three separate javascript libraries?).

  jQuery(function($) {
    $('#username').focus();
  });

It is advisable to place a script just before the closing tag </body> tag unless the script affects the user’s experience on load. The javascript focus() method affects ux. When I visit twitter from a shotty connection (like when my housemates are all bittorrenting at the same time), focus is shifted to the username field after I have already typed in my username and I’m halfway through the password field. I have to re-click the password field to finish what I started. It’s annoying. Load the script in the <head> or directly after the corresponding element. Or just don’t shift focus.

Seriously, though, why does Twitter use jQuery and Scriptaculous? Old code? Or maybe they’re just really indecisive and like to keep their options open.

**Edit: ** They have since redesigned the homepage and now only use jQuery.