Listboxes and dropdown lists are neat UI tools that enable users to select options. They have been used across websites and designs for many years, and they are one of the easiest ways to facilitate online navigation. Listboxes show the options right away and support multi-selection. On the other hand, dropdown lists require a click-to-see chance and usually only support single-selection. In this blog, we’ll be exploring the debate between listboxes and dropdown lists, and we will try to help you understand which option is suitable for you.

Dropdown Lists

In its most basic form, a dropdown list consists of four main parties: a container box, a downward-pointing arrow button, a list of items, and an identifying label. Undoubtedly, you will have come across dropdown lists while browsing a variety of websites. Users can click on the downward-facing arrow button, which will reveal a list of items. Users can then select just one option from this list. It is a simple mechanic that has nevertheless become a staple of many websites, especially those requiring information inputs, filling out forms, and item selection. As with listboxes, users can scroll depending on how many items are revealed when the options have been clicked on and expanded. With a dropdown list, the selected option continues to be visible in a container box while the other list items are hidden until you click on the down-arrow. Following on from this functionality, when a user selects an item or clicks outside of the section, the dropdown list will close.

Listboxes

A listbox contains only three main parts: a container box, a list of items, and a label. Users must click on the items within the container box to select one or many items from the list. Most listboxes have a scroll functionality, but this will depend on how many items are contained within the list and the available, viewable area. Occasionally, listboxes will include checkboxes. This checkbox tool clearly shows that a user can access a multi-select functionality. If there is further complexity, listboxes can also be designed to resize and expand, and users will be able to reorder the list of items. In general, there are four main types of listboxes that can be distinguished by how they allow selection:

• Single-select list boxes - Users must select only one item from a list of options.
• Multiselect list boxes - Users can select or deselect one or multiple items. They can do so by holding down the Command, Shift, or Control key while clicking on these items.
• Multiselect listboxes with checkboxes - This listbox has checkboxes to emphasize the multi-select functionality.
• Dual, multi-select listboxes - With this listbox, users can see available options in one listbox on the left and their selected items in another listbox on the right. Then users can add and remove items with a simple touch of a button.

The Advantages and Disadvantages of Dropdown Lists

Dropdown lists are one of the most common UI tools, more so than listboxes, because they take up a small amount of screen space but can still contain a number of options. Advantages

• They are the familiar option. Don’t underestimate the value of habit and familiarity when thinking about digital UX.
• Allows you to set defaults and prioritize certain options over others. With a dropdown list, you can downplay alternatives and ensure users can select the best option.

Disadvantages

• They can slow users. Sometimes it’s easy to type the information rather than select an option, e.g., birthdates or card expiration dates.
• They can be overstuffed with options, and this can make scrolling arduous or annoying.
• They are sometimes easily overlooked because they are compact and discreet.

The Advantages and Disadvantages of Listboxes

Advantages

• Minimal interaction - Listboxes don’t require clicking to reveal options; everything is available, and users only need to scroll to see more.
• Overview and simple reordering, multi-select, and dual listboxes enable users to control how they want items to be ordered and displayed.
• Item visibility - With listboxes, you can choose multiple options at once very quickly.

Disadvantages

• Unfamiliarity - Some users may not instinctively know how listboxes work. For example, they may not know how to choose multiple options if checkboxes aren’t included.
• Screen space - Listboxes often take up more space than dropdown lists.

Using Listboxes and Dropdown Lists in Your Designs

Hopefully, you now know more about listboxes and dropdown lists and how the two UI tools can help to improve simplicity and overall UX across your website. When including a listbox or dropdown list on your site, you must always display the options in a logical order. This may mean grouping related items, highlighting specific items, or organizing options in alphabetical order. Whether you should use listboxes or dropdown lists will depend on your personal preference and the objectives of your digital design. Ultimately, both kinds of lists are useful digital UI tools to help you improve your UX.   

To learn more about listboxes and dropdown lists and how you can use them to improve your digital designs, get in touch with our UX experts.