Selects, JavaScript, and Usability: Please help.

Published 6 years 6 months ago on October 1, 2007 — 3 min read

By no means to I consider myself to be a usability professional. On the other hand, I do have an interest in the subject and try to read as much as possible from the true professionals in the field. That doesn’t go to say that I’m not allowed to have an opinion on certain things I run into every day on the Web. Everyone using the Web is more than entitled to their opinion regarding what is usable and what just doesn’t seem right.

There has been an implementation driving me nuts for years. More often than not, it comes hand in hand with a certain type of download, but the implementation I’m speaking of can be summed up with the following image:

Image of two selects used to choose a product based on a list of categories in an attempt to download a driver from the Logitech website

Anyone who has been a Windows user at any point is probably familiar with this example; driver download interface. This particular screenshot is from the Logitech Driver Downloads as of the time of this writing, but the faults in the example sprawl the Internet; general confusion and JavaScript dependency. The same issue can be seen on the Okidata Driver Downloads page as well:

Image of two selects used to choose a product based on a list of categories in an attempt to download a driver from the Okidata website

Both implementations are completely destroyed when using a browser without JavaScript capabilities. The Logitech page appears the same, but the selects aren’t populated properly, and the Okidata page not only ceases to function, it renders completely different as well:

Image of poor JavaScript implementation on the Okidata driver downloads page

The lack of graceful degradation is bothersome enough for me personally, but what’s more is that I get annoyed by both of these examples when they’re working as intended. In my opinion, attaching a JavaScript function to a select is just plain wrong (save validation of some sort, perhaps). I use the Internet every single day, and it still surprises me when I see a page location changing just because I chose an option from a drop-down.

A bit of a side note and rant; using a select for site navigation is just plain wrong. Providing a ‘Go’ button next to the select used for site navigation, but instead redirecting instantly after the option is chosen is even worse. I understand that many implementations which act in such a way do so on the principle of progressive enhancement, but if you’re truly trying to progressively enhance, why not remove the button after adding the functionality? I can answer that in saying you would be back at square one using a select for page navigation, which is annoying.

The most important part: alternatives

One of my favorite parts of being annoyed with something like this, is trying to think about how I could have tried to do things better. I also like to read the thoughts of others regarding what they would have done, as well as checking out examples of superior implementation. When it comes to driver downloads, I would simply rather see a search field allowing you to search for your product if you feel so inclined, as well as a simple anchor structure which allows me to find the page on which my driver download is available. Something I can bookmark for later because I know with Windows, I’ll need to find the page again in a few months when I reformat.

More importantly, have you seen any impressive implementations of driver download pages? Does the issue I’ve described bother you? How would you rather see things implemented? Please, take a minute and leave your thoughts.

There's a conversation brewing

  1. Hey, this is something I’ve just done for a site, where they wanted such functionality. Here’s an example of a double-select with the JavaScript I’m using, hopefully it can be useful to someone!

  2. The download method used in your examples doesn’t over bother me, although there is no excuse for it not working with javascript disabled.
    To make it accessible without js. I’d hide the second select box, and add a (GO) button to take you to a page of results for the product family you choose.

    This kind of multi select box method is very useful for reducing large amounts of data a visitor gets to see, or limiting choices to predefined paths.

  3. My favorite way to do this is to use the method described here:
    http://www.wait-till-i.com/index.php?p=411

    It only works for 2 levels of options but there’s also a nested list solution for unlimited levels.

  4. I agree with Andy, Chris Heilmann’s method is the best choice available at the moment. Even with quite a large number of options, it’s reasonably usable without JS.

  5. I agree too with Andy and Matthew!, I’ve seen that before. Good work ;)

  6. Thanks to everyone pointing out some resources I hadn’t come across before! There are obviously people frustrated with this very issue and put some serious thought into a proper alternative. I apologize for the delay in my response, but I’m really excited to see what opinions and resources have been posted!

  7. I’m sure I’d cringe at the code if I looked at it now, but I built a degradable related SELECTs from an OPTGROUP-organized SELECT a few years back and then wrote about it for Digital Web.

  8. @Aaron Gustafson: Thanks for the link! I’ll be sure to take a look at the write-up.

By all means, contribute

Leave a comment

Powered by Fusion

This article is so meta

Published October 1st, 2007

Random article

css.php