LISTBOXES VS. DROPDOWNS IN YOUR UI

LISTBOXES VS. DROPDOWNS IN YOUR UI

Listboxes and dropdowns are compact user interface controls that allow us to select options.

Listbox anatomy

1. Instructions

2. Container box

3. Selection action

4. List item

Listbox variations

Static single-select listbox

Static multi-select listbox

Scrollable single-select listbox

Scrollable multi-select listbox

Listbox Pros and Cons

Pros

List items are always visible

Low interaction cost

Easy single column view

Cons

Takes up more screen space

Overwhelming list of items

Dropdown anatomy

1. Instructions

2. Empty selection box

3. Dropdown arrow

4. Container box

5. List item

6. Selector

Dropdown variations

Closed dropdown (default state)

Static dropdown

Scrollable dropdown

Dropdown Pros and Cons

pros

More familiar component

More scalable

Ability to give people a

default option

Cons

Items are hidden behind click

Slows people down

It's easy to miss

Listboxes and dropdowns are powerful form elements that have very different use cases.

It's important to understand the pros and cons of each in order to design better user experiences.