There are 30-35 items in a list and it is expected to grow further. What could be the best way to put it on the page? Dropdown list is the first control that comes to mind, but it could easily become a pain as the list grows.
What could be the best usability control to present such kind of long list?
35 is not a long list as long as you sort it alphabetically when you put it in the list, so the user can type the first few characters and get close to the choice they want. Because of that feature, even a couple hundred entries doesn't seem like too much to select from.
Ron
Another option is a multi-layered tree, if you can think of a way to partition the list: for example, 35 items might be 7 groups of 5 items each.
If the list becomes too long, make a button that opens a fully searchable and sortable list of values.
I think I would try to stay away from the dropdown list, not because of the number of items, but because of what happens when an item is selected: it's not very common that selecting an item in a dropdown list will immediately execute a command (from a user perspective). I would instead look into using one a control that is commonly used for representing commands.
The first thing that comes to my mind is to use a button together with a pop-up menu. Clicking the button would display the menu directly under the button. Then, you can also make use of the cascading possibilities of the menu to group the items into logical groups. You will also present the items in a way that makes makes the user think "command" rather than "selection".
Two lists, one of which is the category, and which changes the other list to the items for that category?
Create a grid of check/radio boxes. Then you can take advantage of horizontal space. Sorting options alphabetically will assist greatly as well.
It's actually a really hard call and without knowing the product, or the technical literacy of the people who are going to use the product is impossible to give solid answers for (have you tested ideas with users (or even proxy users)?).
One thing you could do is break down the information into related segments:
Description
list element one
list element two
Description
list element three
list element four
The only downside to this is that you'll probably need to handle what will happen if someone chooses one of the descriptive elements.
If you do go with a drop-down list with a large number of items, I would suggest avoiding the practice of imposing an arbitrarily small "maximum number of items shown at a time" on the expanded list (and including a vertical scrollbar on the expanded drop-down for access to the remaining items), unless you have a good reason for doing so.
I've been annoyed more than once at some application that showed me a drop-down list with a moderately large number of items (say, 20 or 30), but limited the number of items shown to a small number (say, 8). I have plenty of screen real estate available in the application window as a whole, and even more space available on my entire screen; so why force me to scroll the list to see all of the available choices, when the list could simply be drawn large enough to show all of the items at the same time?
if you have a really huge number of items - the box could be populated via ajax based on the search made to a typed word(s) - like google search does it and many others. perhaps there is a canned javascript solution in some popular library for this that anyone could add to this answer?
30 items is not much at all. Take country selection with ~150 countries dropdown box is used almost everywhere (however that list never changes... that may be part of the consideration)
as for using alphabetically sorted list - a hint placed right next to the box might make it more usable - that visitors can type some characters to quickly navigate through the list - as Ron suggested.
I'm using VB 2005 (ASP.NET) and I want to display all 38 items in a DropDownList.
Currently the list is stopped at 30 items and I have a scroll bar for the remaining 8 items, which is very annoying!
Is there a way to achieve this?
LB
check out www.roomtoread.org One of the most functional menu designs I've ever seen. No dropdowns.