Stop Using Listboxes for Multiselecting Items

What component would you use when users need to select multiple items in limited screen space? Many designers would choose listboxes, but this is a common mistake. Listboxes are terrible for making and viewing multiple selections. They also don’t conserve as much space as you’d think.

The first issue is that the viewport of a list box has such a small height that users can only view a few items at a time. They have to scroll and scroll to see the rest. If the item list is quite long, this can get laborious.

Another downside to listboxes is that selections are hard to recognize at a glance. Due to the small viewport, some selections aren’t visible unless users scroll through the list. This lack of visibility frustrates users when they need reassurance on the selected items.

Not only is making selections difficult but deselecting items is also hard to do. Again, you have to scroll through the list and hunt down each item you want to deselect.

As you can see, there’s a common pattern here that’s causing these user experience issues. The small viewport and excessive scrolling just doesn’t cut it.

What if there was a component that could extend the viewport, minimize the scrolling, and conserve screen space? The good news is that there is. A chip menu solves all the issues that listboxes can’t.

Subscribe to read the full article…

Learn how chip menus work and the benefits of using them by subscribing to the UX Movement newsletter. For just $9/mo, you’ll get unlimited access to our entire archive of premium articles.

Subscribe + Read

Book

Affiliate