Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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):

mockup

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?

share|improve this question

4 Answers 4

up vote 8 down vote accepted

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

old fashioned radio

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.

share|improve this answer
    
I actually own a radio that has radio buttons like the ones we see in computer GUIs. They're round, with a button in the middle that's also round. If you press one, it locks down, and all others pop up. The bigger, surrounding part is actually a rotating knob with which you can set the station that this particular button is tuned to. So they're not necessarily square like in your picture, they really look like that. –  uliwitness Mar 27 '13 at 23:15
    
@uliwitness: If you could share a link to a picture, I'd gladly use it as a better example of a physical radio button than the one I managed to dig off the internet. –  André Mar 28 '13 at 8:17
1  
Here's a link to a photo I just took: alpha.app.net/uliwitness/post/4921823/photo/1 –  uliwitness Apr 20 '13 at 22:25
    
@uliwitness: thanks! Updates the post. –  André May 6 '13 at 7:20

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.

share|improve this answer
    
Your analogy for a drop-down list started me thinking of harmonica-folding now, like the plastic thingies in wallets annoying parents in movies use to show all their kids' photos ;-) –  uliwitness Jun 19 '13 at 16:16

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.

enter image description here

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

enter image description here

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.

share|improve this answer
    
I think Raskin's The Humane Interface has the restaurant menu as the source of the GUI menu, but I can't find my copy right now. –  uliwitness Mar 27 '13 at 23:11
    
Oh, nice! Can't wait to see that! –  rk. Mar 27 '13 at 23:55
    
Most of the basic interactions of a modern GUI were in the Xerox Star. Which was groundbreaking as (as implemented on the Lisa and then the Mac) they replaced MS DOS's blank screen with a flashing cursor... –  PhillipW Oct 21 '13 at 14:02

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:

A classic Mac popup button, from HyperCard

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:

Windows combo box in Word toolbar Mac combo box in Word toolbar

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.