Design Principles for Better Software – #1: Dropdown Width

If you think about civil engineering, it has been around for thousands of years. Even today, engineers draw inspiration from the marvelous engineering principles of Rome or Egypt. The software industry, however, is different. Without thousands of years of legacy and guidance, we often move fast and break things—but the lack of basic principles can lead to even greater chaos.

I frequently notice small but impactful improvements we can make in the software we use. This series of articles focuses on how software makers can create better software and, by extension, better companies. Today’s topic is dropdown menus.

In his book Don’t Make Me Think, Steve Krug says:

“As a user, I should never have to devote a millisecond of thought to whether things are clickable or not.”

When it comes to dropdowns, this principle extends to how options are presented to the user. If a dropdown contains predetermined choices, make sure it is wide enough to display all options without trimming, as shown in the figure below.

Principle

The ideal width should be determined by the length of the longest item in your dropdown. This ensures that all items are fully visible without truncation.

Whenever possible, ensure the dropdown is wide enough for all options to show in full (without trimming). Trimming forces users to guess or interpret incomplete options, increasing cognitive load and the likelihood of errors.

Additional Tips

• Sort values logically: For example, sort countries alphabetically in a dropdown list.
• Minimum Usable Width: If your content is longer, and full width is not available, limit the dropdown to 15-20 characters.
• Prioritize frequently used options: Place common choices, like “USA,” at the top of the list.
• Follow sequences where applicable: Arrange options in logical workflows, like ticket resolution steps.
• Use colors and icons: These improve readability and help users distinguish options quickly.
• Include a search function for long lists: When there are many options or visually similar items, a search bar is invaluable.

Here’s an example of a complex yet beautifully designed dropdown from Google Chrome.

Take a closer look at the dropdowns in your software—you’ll likely find opportunities for improvement.