AJAX Anti-Example

US Airways has a AJAXy interface for their homepage, but don't follow their example.  Try, for example, searching for the status of flight 8022 (from Philidelphia, PA to Portland, OR) today.  That happens to be the flight my sister and her family are on at this very moment.

You might try entering the flight number (knowing that the flight number uniquely identifies the flight).  Or you might try entering the departing city (hoping to get a list of candidate flights).  Neither works.  You have to enter both.

Once get both pieces of info in, submit the form.  You might try pressing enter, like I did.  After all, you had to type the info in, so your hand is already on the keyboard.  Denied.  You have to either use the mouse to click the Retrieve button, or tab through to it and press enter.

Ok, so now we get results.  Oh, it hasn't left yet, even though it's a couple minutes past the departure time.  Come back in 15 minutes and hit refresh.  Blank form – no results.  What?  Type in the info again and click on the Search button and see that the flight has now left, 13 minutes late.

A little digging and it seems that they don't use any forms or page parameters.  When you "submit" the form, it gathers data from the form fields, sends it to the server with JS Remoting (which sets some session variables), and then does a location='...' to the destination page where the session variables are read and cleared, and the page rendered.

If you're building AJAXy UIs make a note that you're still operating in an HTTP/HTML environment, so follow the rules.  Use forms for forms.  Use page parameters for generating dynamic pages.  Consider common use cases (like refreshing your flight status page) and their implications to your application.  Don't require superfluous data.  And one last nit-picky thing: don't leave half of your homepage blank specifically for rendering error messages in.

A couple things that they did do a good job on: the autocompletion dropdown for departure airport and tabindexing all their form fields.  But in general, very low marks for usability. 

One response to “AJAX Anti-Example”

  1. Matt Rix

    If you think that's bad, you should see the autocompletion on my city's transit planning website: http://www4.mississauga.ca/ClicknRide/

    For example, try entering an address with a street name that starts with 'B'. It'll load *every single street* in the whole city that starts with B as an autocomplete option… Which would actually be kind-of cool, except it takes it 10+ seconds to actually pull the data.