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. and 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. and 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....