Design & UX
By Wyatt Barnett

Autopostback + Checkboxen=Dumb

By Wyatt Barnett

So. I am currently considering upgrading my cell phone, and my provider is Cellular One (err Bell Atlantic . . . err . . . Cingular . . . err . . . AT&T . . . err Cingular . . . err . . .AT&T). Conveniently, Cingular’s website allows one to search for phones and devices. It even has this cute little checkbox search interface:

Cinglar's Check Box Based Search

Note the lack of a button to fire off the filtering process. And why is it missing, you ask? Well, because you don’t need a button when you setup your checkboxen to post back your form! This sounds like a neat idea, and probably worked great on the developer’s local machine, and possibly even in the lab running on an isolated network. And I bet it worked lickety split for the dev team’s demo to senior management.


In any case, whatever the devs where thinking, this trick fails miserably in production. When running over the public internet, especially on this not particularly fast laptop on a spotty wireless signal, it breaks expected behavior of checkboxen. This expected behavior is that checking and unchecking does not cause a page action. The actual behavior is quite different, especially when one tries to check multiple boxes in rapid succession.

For example, I am looking for a slider or a bar phone. So I check slider. This starts the postback process. But, because of the nature of HTTP communications from this particular bit of earth, it takes half a second for the page to begin to refresh. In that time period I have also checked the ‘bar’ box. Unfortunately, I am just receiving the page I requested when I checked the ‘slider’ box. So, I get a page filtered for ‘slider’ phones and my ‘bar’ choice was apparently ignored due to postback effects.

Now, this example is a minor annoyance. But there are some important lessons to be learned here:

  1. Don’t make controls trigger behavior that is outside of norms—checking a box should not directly trigger any action.
  2. Testing your public user interface in multiple browsers is a no-brainer. But remember to check it using some older machines and probably more importantly over slow and/or unresponsive connections.

Notes and Disclaimers:

  1. Yes, I am aware that Cingular’s site is apparently a Java application. But the back-end here is immaterial—the whole point is UI behavior.
  2. Somehow I cannot find a phone that fits my requirements. I need a non-flipping phone with Bluetooth, a camera, 3g capabilities that is either a nokia or charges off USB that is not a Motorolla. Somehow the combination of those features cannot be found as of yet. If you have a lead on such a phone, do let me know.
  • Phone companies seem to make the worst UIs for their websites. I was with Telstra, Optus and Vodafone (and now back to Optus) – this is in Australia – and they’re all shocking. Vodafone’s site section for “My accounts” presents you with a menu of what you can do here, but none of the menu item is clickable. Instead, you’ll have to click on the group item on the left menu then navigate your way down. The site is also shockingly slow and nearly unusable on a slow connection (I was struggling enough on cable)and incidentally is written in JSP. Hmm… ;)

    As for your b., check out the Sony Erikson K800i, which is what I’m using. It has the features that you want.

  • Oren

    Check out the Nokia n73.

  • wwb_99

    Thanks for the phone suggestions guys. I have considered the Erikson, but I am working on getting over the wannabe walkman angles.

    And too bad they pretty much quit shipping cool Nokias to the us. The only ones offered here are low, low end models for use as prepaid phones.

  • Anonymous

    > probably more importantly over slow and/or unresponsive
    > connections.

    sorry for taking off topic, but you’ve just hit a point that is a concern, as you point out;

    does anyone know of a way to retard the connection speed during local development? i mean… to cause a slow down, etc without actually the need to modify existing script that is :)

    if there were, then we would have a better indication of what effect(s) this would have on our ui design.

    dr livingston, as always

  • pspace

    Since the form is Javascript dependent anyway, this could have been an effective use of some Ajax magic to speed thing up a little.

    Plus I don’t think it helps that Cingular’s web site is really slow, its probably doing alot of cumbersome processing behind the scenes, which isn’t necessarily anything to do with JSP.

  • pspace

    Since the form is Javascript dependent anyway, this could have been an effective use of some Ajax magic to speed thing up a little.

    Plus I don’t think it helps that Cingular’s web site is really slow. Its probably doing alot of cumbersome processing behind the scenes, which isn’t necessarily anything to do with JSP.

  • Dr Livingston,

    There are proxy scripts that you can run on your development machine that can be used to simulate slow and noisy connections. I think one of which is part of the Apache project or at least in their Incubator sections.

    If only I could remember the name of it. I think Harry pointed out one a while ago on one of his blog entries here at Sitepoint.

  • Ok, managed to hunt it down. Check this talk out that Harry gave (AJAX@localhost), there are links in it to the proxy and the switcher extention for Firefox. Not sure if it will work for normal page requests…

    Latency demo with commentary

    AJAX Proxy

    Switch Proxy extension for Firefox

    Near as I can figure, Harry wrote the proxy himself. Can always ask him about it directly if you need more info on it.

  • I often see requests for modem emulation scripts.

    Well, the *best* way to test dialup is to use dialup.

    Modems are cheap and so are dialup accounts.

    This message is being written on dialup.

    Now, on the subject of the form, it’s a horror show when “designers” feel the need to add some whizbang feature in some homage to being cool. Worse yet, they probably got a promotion out of it :(

    They could have actually improved things by putting the checkboxes in 3 columns to make better use of the screen real estate.

    Vendors get away with this because they have a captive market. Once a telephone company, always a telephone company.

  • Re: testing on slow connections.

    Check out the dot-point starting with “Regularly use your site from a realistic net connection.” here:
    Optimizing Page Load Time –
    (sorry, there’s no ID/anchor to link to near the dot point)

  • wwb_99

    Very good question Dr. Livingston

    The work I do is typically on sites targeted at higher-end business users, so we really don’t worry about modems anymore. But still, viewing a site at LAN speed or (or just on localhost) is 10 to 1000 times faster than most internet connections.

    I have a few ways to test:

    1) For broadband speed tests, I usually fire up the VPN out to my house, remote desktop into my home computer, fire up a VPN back to the office and then browse over that connection. The VPN maxes out in the 1 megabit range, so it provides a pretty clear picture of how things will work over a typical broadband connection.

    2) For narrowband speed tests, I just use my blackberry as a tethered modem. It is a very laggy 56k connection so it brings out the worst dial-up has to offer.

  • Anonymous

    Checkbox or checkboxes. Not checkboxen. Thanks.

  • AndyMillne

    My network router has an option to limit bandwidth which I regularly use. It does not however allow me to test latency and other issues surrounding dialup connections, for this I use a regular landline modem on quite possibly the longest internal phone extension setup known to man.

Get the latest in Design, once a week, for free.