Listbox vs Combobox

After looking at the current eyesore in kcontrols style chooser I decided to share some thoughts on how and why to do certain UI things. The old chooser had a listbox to select a style from, while the new one uses a combo box. While someone may have thought this was cool, its a big UI mistake. Here is why:

The listbox and combo box do basicly the same things, but they both have advantages and disadvantages that dictate how and when they should be used. The listbox is awesome for multiple selections and quick access for shorter lists (eg all or most of the items are visable, or most recent/popular item is in focus). While combo boxes are nicer for large long lists, and single selections. The gray areas happen when you have a widget that can scale and you have little to no control over the area. KControl is a great example of this. Due to the design we cause the main view to be resized in a manner that is rarely what the UI designer had in mind. Because of this widget choice is key.

Note the following examples both do the same thing, but we use a combo box in one and listbox in the other. Now the biggest nono in UI design is hideing information/choices from the user. The harder they have to work to get what they want the worse your desing is.
Now in a normal view we can see that the listbox shows all available options right off the bat, while the combo box hides these options from view. This forces the user to have an extra click, and maby scroll to get what they want. While the listbox, worst case involves a virtical scroll. Also note the fact that there is a ton of empty space on the widget. Remember kids empty space in a GUI is wasted. Padding is one thing, but large chunks of empty space just to make sure your UI will scale is not cool. Here the listbox is an obvious choice. Next we have this example of these same widgets in a more cramped space.
Now as you can see the combo box takes up significantly less space than the listbox, since the scroll bar is much harder to manipulate in a small view the combo box has a slight advantage. As the size of the widget gets to the point where only one item can be shown a combo box becomes more useful. Note though when dealing with smaller combox boxes that when you have a signifitant number of items you should be nice and not scoll off the bottom of the window. This can be quite annoying for users and looks dirty.

Now back to how this all relates to my gripes with KControl. Well kcontrol has a minimum size height wise because of the sidebar. Because of this you will aways had padding virticaly. This means that things like combo boxes really dont have an advantage for a main selection widget. Also combo boxes hide options from users, so it can make operations less clear. So while the combo box is nice for space, it is not known for speed. So when developing your UI please be aware of this and design accordingly....


I also noticed the use of a combo box and I absolutely hate it. I see no reason for it, especially since it makes it very hard to quickly see which styles are currently installed.

By KDE User at Sun, 08/10/2003 - 21:20

I noticed that the window decoration chooser changed to use a combobox. At the same time, the configuratin options for the active style was moved to the same page in the kcm module, so maybe it was done to gain some screen estate? However, I found the old gui much better, but that might just be a habit - I am not sure ;)
A similar change happened to the widget style module, again i find the overview of the configuration got worse...

By KDE User at Sun, 08/10/2003 - 23:52

yes, lists are quicker to use than comboboxes in much the same way radio buttons are quicker to use than comboboxes. they also have many of the same drawbacks, except that they can be scrolled. this makes listboxes better than radios for long lists, obviously, but can also be rather useless when space is constrained.

look at the size of the rest of the style diaog, or the window decorations dialog with an appropriate style picked, and it becomes pretty quickly apparent that the dialogs are just two large to have a long (read: useful) list at lower resolutions.

add to this that these aren't things you are changing every five minutes, that a combobox reduces visual noise (less visual options) and extends the use by "just" one click (both for viewing and selection) and it's sometimes a fine compromise.

but i suppose that's what you're getting at, really: pick the right widget using some reasoning. i'd also add that bucking the status-quo and changing anything that hasn't changed in N years is going to result in people bitching at you, good decision or not. i can attest to that.

well, we'll see what geiseri's new style list widget looks like though: it could be a winner... so far it looks promising, so we all need to stay tuned, i guess =)

By Aaron J. Seigo at Mon, 08/11/2003 - 01:42

So this is the start... It seems fast to load, but now for the act of selection.

By Ian Reinhart Geiser at Mon, 08/11/2003 - 02:04

I think Apple did a fine and consequential conclusion to your thoughts by making the use of either a Listbox or a Combobox depend on the available space instead being fixed by design beforehand. Such a flexible feature would be nice to have in the already flexible KDE, especially since kcmodules are not restricted to kcontrol either but can also be started as stand alone dialog windows.

By Na at Mon, 08/11/2003 - 20:43