Where did combo box/drop-down lists come from?

Question

Where did the design of combo box or drop-down lists come from?

Radio buttons can be used similarly, and also have a real-world analogy without computers (those fill-circle-with-HB-pencil papers). A combo box is far more abstract, I mean, there doesn't seem to be a real-world analogy of them. I believe you can't make a combo box out of paper, can you?

In fact, without combo boxes, we can still live with radio buttons (taking up a little bit more space):

^{download bmml source – Wireframes created with Balsamiq Mockups}

So, who invented combo box and how he/she come up with the idea? Is there a real-world analogy that I missed?

Answer 1

Radio buttons actually have a very different physical analogy than the paper one you mention:

That's also why they are called radio button.

I don't know who invented the combo box or how he came up with the idea. I don't think that anyone here will be able to state with confidence how the inventor came up with the idea. I do think your statement that with only a little more space we can do without is incorrect.

You are right that the basic idea is the same: select one item from a list of options. However, the solutions scale very differently.

Consider what happens with a longer list:

• The combo box can show a longer list without the control taking up more space when not interacting with the list. The list of radio buttons would require a lot of scrolling in that case.
• The combo box allows to use the keyboard for quick navigation, the scrollable list of radio buttons does not.
• The combo box always shows the currently selected item, your alternative does not.
• The combo box has the same form factor as a line edit. That makes it easier to fit into a UI that doesn't look cluttered. Using controls with many different forms and shapes results in visual clutter, and that hurts usability.
• Using a group of radio buttons results in more visual weight. That might be a good thing if it is a very important item, but a bad thing if it is a distraction from the main function of the UI.

So, all in all, I think the combo box is an improvement for many situations over your alternative solution.

Answer 2

Dropdown lists came out of good design, just like radio buttons :). It's not about importing an analogy from the physical world, it's about providing a solution to a design problem. There was a need to let people choose out of a list of options, without having the list take up all your real estate. One solution would be to put the list inside a modal window, but that has many drawbacks. So someone came up with the idea to make the list collapsible - sort of a dedicated temporary extension of the available real estate, or a temporary layer if you will. The combo is just an enhancement of the dropdown, an elaboration of the same idea.

And if we tried hard enough, we could find an analogy to the drop-down list as well. A rolodex or a filing cabinet or any other place where you store stuff and access it on demand instead of having all the stuff in front of you all the time. Basically any kind of storage container.

BTW, same for the radio button itself. I doubt that someone said "let's make a UI analogy of the buttons on the radio / the fill-the-circle forms". It's much more likely that someone said "we need to let users choose out of a small set of options, where only one answer is possible and it needs to be extremely clear what the current answer is and how you select it". From there it's just good design.

Answer 3

Menus have been an integral part of a GUI, right from it's inception. The Xerox Star was the first GUI system with the WIMP (Windows, Icon, Menus and Pointer) metaphor. Later Mac was the first one to gain commercial success with it's Mac OS 1.1 in 1984.

The earliest example of the interaction of scrolling a list/rolling out a list is the parchment paper scroll.

Based on this, I feel inclined to say that rather than seeking the origin of the combo box/drop-down menu, you should be looking at the origin of the menu itself.

The earliest form of menus can be traced to restaurant menus, and prior to that can be traced back to the Chinese Song dynasty in the early 1000s A.D. due to the abundance of paper. http://www.helium.com/items/2086987-origin-and-history-of-the-menu

I will post back if I find any proof of my hypothesis of the (restaurant) menu to (GUI) menu.

Answer 4

The first combo boxes I saw were a mix of pop-up menus paired with an EDITABLE text field (a combination of the two, hence 'combo'). In that context, they make much more sense. Here's a classic popup button:

Whereas popup buttons were a menu that showed only the selected choice from the (un-editable) pop-up menu, combo boxes consisted of an editable text field plus a little "pop-arrow" button to its right:

You could type arbitrary text into the field, or you could choose one of the predefined choices (they were hence very popular for font size menus, where they were a few common, typically used sizes (9, 10, 12, 14, 18, 24, 36) but really any arbitrary value was valid and made sense.

Since the Mac's menus were originally triggered by clicking and holding the mouse button, then releasing over the item you wanted to choose (the intention was to provide access to a command with 'one click', according to Raskin, IIRC), they had no scroll bar. Instead, tall menus had arrows at the top and/or bottom (instead of a menu item) where more items were cut off, and if you moused over those, it would scroll slowly down, exposing more items.

By the time Windows introduced combo boxes, however, their menus had the now prevalent click-to-open-click-again-to-choose menu item selection behaviour. Thus, placing a scroll bar into a menu made perfect sense.

I guess the realization that Mac-style popup buttons were really just an archaic variant of a non-editable combo box eventually led to many UIs using combo boxes for popups as well. Or maybe the other platforms already had lists with checkbox-like multiple selection, so it was more obvious to implement them as pop-up lists and thus make it clear which menu was an option menu and which one contained actions.

On the Mac, menu items for commands and options looked the same, they were simply named differently (an adjective or a verb phrase), and option menu items drew a checkmark in their left margin when they were activated.