Checkbox radio button drop down list
9
Listboxes vs. Dropdown ListsSummary:Listboxes and dropdowns are compact UI controls that allow users to select options. Listboxes expose options right away and support multi-selection while dropdowns require a click to see options and support only single-selection. By Anna Kaley
on 2020-04-12 April 12, 2020 Topics: Application Design,Interaction Design,Web Usability,controls
Many UI controls allow users to select options; they includecheckboxes, radio buttons,toggle switches,steppers, listboxes, anddropdowns. In this article, Ill define listboxes and dropdown lists, discuss when to use each element, and cases where either will suffice. ListboxesIn their simplest form, a listbox contains three main parts: acontainer box, alist of items, and a label. Users can click on the items enclosed in the container box to select one or many from the list. A listbox may scroll, depending on how many items it contains and the viewable area. Sometimes, listboxes include checkboxes to clearly imply that multiselect functionality is available. More complex listboxes allow users to resize the container box, reorder the list of items, and make selections by moving items from one listbox to another. There are 4 variations of listboxes that can be classified according to selection type. Each of these listboxes can be scrollable or not.
Dropdown ListsIn their simplest form, dropdown lists contain four main parts: a container box, a downward-facing arrow button, a list of items, and a label. Users can click on the down-arrow to display a list of mutually-exclusive items from which they can select only one. Like listboxes, dropdowns may scroll depending on how many items they contain when expanded. With dropdown lists, the selected option or default value remains visible in the container box, while the other list items appear only after clicking on the down-arrow. Selecting an item or clicking outside of the dropdown list will close it. Listboxes and Dropdown Lists in UseListboxes and dropdown lists make a form compact especially when many options are available, and presenting those options as a list of standalone radio buttons or checkboxes would take up an unnecessary amount of screen space. Using a listbox or a dropdown list can also reduce errors by constraining the options to those in the list and ensuring that users enter data in the proper format. Listboxes and dropdown lists are used for selection in both native applications and websites. They arent intended to execute commands or trigger the display of modal windows, dialog boxes, or dynamic controls. On ecommerce sites, listboxes are often used to house filters that cascade down the left side of a category page, while a dropdown list may house the values by which a user can sort the products. For scrollable listboxes and dropdown lists, its important to consider their size as it relates to the Steering Law. The Steering Law predicts how long it will take a user to move a cursor or a finger through a bounded area known as a tunnel. The steering time depends on the length and the width of the tunnel, where shorter, wider tunnels are faster and easier for users to navigate through than longer, narrower tunnels. Thereby, limiting the number of items contained in scrollable listboxes and dropdowns, and ensuring theyre designed to be as wide and as short as possible will help users review and navigate with speed and ease. When dropdown lists grow too long and narrow, the user is more likely to accidentally move their cursor outside of the bounded area, which will close the dropdown and force them to start the selection process all over again. Listbox Advantages and DisadvantagesThough relatively seldom used, listboxes carry advantages beyond supporting single selection, multiselection, and housing many options without taking up excessive screen space. Other advantages of listboxes include:
Here are some disadvantages of listboxes:
Dropdown-List Advantages and DisadvantagesDropdown lists are used more frequently than listboxes; they take up less screen space but can hold just as many items as listboxes. Other advantages of dropdown lists include:
A disadvantage of dropdown lists are that they require a click to reveal the options inside. Other disadvantages of dropdown lists include:
Choosing Between a Listbox and a Dropdown ListCompared to using standalone checkboxes or radio buttons, its better to use a listbox or dropdown list when there are 5 or more items from which users can choose. Additional factors such as the amount of screen space available, whether the user can select one or many items, and if theres a need to downplay or encourage changes all need to be considered when deciding between a listbox, a dropdown list, or another selection control. Use the criteria in the table below to help you decide which element to use or when either will suffice.
ConclusionWhen including a listbox or dropdown list in your design, always display the options in a logical order. That may mean grouping related items together, placing the most commonly selected item first, or organizing the options in alphabetical order. Always place numbers and dates in sequential order. For more on choosing the right selection mechanisms in forms, websites, and applications, explore our full-day courses at the UX Conference, Application Design for Web and Desktop and Web Page UX Design.
About the Author Anna Kaley is a User Experience Specialist with Nielsen Norman Group. Prior to joining NN/g, Anna worked for more than 10 years in user experience architecture and digital strategy. She conducted complex user research, service, and experience design for healthcare, agriculture, finance, tourism, retail, and engineering clients. Subscribe to our Alertbox E-Mail Newsletter: The latest articles about interface usability, website design, and UX research from the Nielsen Norman Group. Subscribe Learn MoreArticles
UX Conference Training Courses
Research Reports
1-Hour Talks
|