The Long, Long Dropdown List...

By Gerd Waloszek

To overview of UI Design Issues

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:

Scrollable very long dropdown list on the "Contact SAP" page of the SAP Website

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:

Scrollable, very long dropdown list on the Amazon Website with default value

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!

Addendum

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:

Dropdown listbox streching vertically over the whole 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:

The same list on the Internet Explorer and Windows

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.

Addendum Two

Nearly three years after the publication of the article, I encountered the following screen on the Apple Macintosh:

Dropdown listbox streching vertically over the whole screen

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:

The same list on the Internet Explorer and Windows

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

An den Anfang   Home

Gerd Waloszek
gerd (at) waloszek (dot) de

Imprint

made by walodesign on a mac!