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:
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:
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:
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.
Comments
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!
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.
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.
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.
I agree too with Andy and Matthew!, I’ve seen that before. Good work 😉
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!
I’m sure I’d cringe at the code if I looked at it now, but I built a degradable related
SELECT
s from anOPTGROUP
-organizedSELECT
a few years back and then wrote about it for Digital Web.@Aaron Gustafson: Thanks for the link! I’ll be sure to take a look at the write-up.
[…] Something I continue to run into time after time is the classic case of recursive selects. I will despise this implementation until the end of time. I can understand that it may be a way to de-clutter the UI a bit, but at a […]