By Gerd Waloszek
There's a Beatles song called "The long and winding road." This time, I will discuss a design problem that reminds me of this song, namely the "long, long dropdown list." Most of us will probably have come across this phenomenon, particularly on the Web it is very common. Let's call it the VLDDL (very long dropdown list) to give it a name. Typically, VLDDLs appear in address data: For example, you want to order something in an online store and have to provide the country where you live using a VLDDL.
I found two variants of the VLDDL:
After a short Web search, I could no longer find an example of the first type, although I found them often in the past (but see my addendum below). Maybe, this species is already extinct. Trying not to browse too far around, I found at least an example of the second type:
Figure 1: Scrollable, very long dropdown list on the contact page of a Website (page shortened)
At Amazon's Website, the dropdown list for selecting the country is very similar to the one above but they provide at least a default country, the United States. This most probable alternative makes life easier for a substantial fraction of the visitors:
Figure 2: Scrollable, very long dropdown list on the Amazon Website with default value
You can use keyboard navigation to get closer to the desired item but, at least on Windows computers, you only can type the first letter. I also doubt that a lot of users know about this feature. Even fewer people may know that you need not even open a dropdown list. If the box has the focus, you can move within the list using the up and down arrow keys. As an example, for choosing Germany the best strategy is to press "G" and then three times the down arrow key.
What are my suggestions to this problem? Actually, I hope that you will send us some nice solutions. Therefore, I present only a few rash thoughts for your inspiration:
As an example, here is a design proposal for a hierarchical dropdown list. I shortened the second-level list in order to avoid entering all African states. The second-level list should not be scrollable because that would be cumbersome to do with the mouse.
Figure 2: Design proposal for a hierarchical dropdown list
Probably, a good design solution may need more mouse clicks than a single, very long dropdown list does and also less "fiddling" with the mouse. Thus, the stage is set, and we are eagerly awaiting your design proposals!
Finally, I found an example for a – nearly – endless dropdown listbox. Interestingly, its behavior dependens on the browser (or computer platform). Where did I find it? I found it on the Website of a company with some reputation, namely Macromedia, the creators of the famous Web tool Dreamweaver. When I wanted to preorder a copy of Macromedia Contribute 3 (to be out in September 2004) on my Macintosh using the Safari browser and select the country, I encountered the following screen:
Figure 3: Dropdown listbox stretching vertically over the whole screen (Macromedia Website, Safari browser on Mac OS X)
Interestingly, when repeating the ordering process with the Internet Explorer on a Windows XP computer, I got the following result:
Figure 4: The same screen on a Windows computer
Actually, one might ask, which is the better solution – the list behind is of the same length...
PS: For those who took a closer look: Yes, Germany is missing on the list. Germans cannot order from the U.S. Website but have to use the German site, instead.
Nearly three years after the publication of the article, I encountered the following screen on the Apple Macintosh:
Figure 3a: Dropdown listbox stretching vertically over the whole screen (Safari browser on Mac OS X; slightly modified)
Once again, I checked the same screen using the Internet Explorer on a Windows XP computer:
Figure 4a: The same screen on a Windows computer (slightly modified)
Scrolling such a long dropdown listbox isn't much fun, either...
Originally Published: 08/12/2004 - Last Revision: 02/01/2009
made by on a mac!