Balsamiq

Toggle navigation

Dropdown Menu (Combo Box) Guidelines

The dropdown menu, or combo box, is an input field that allows users to select an option from a list. It can be found in most places, including forms, settings pages, and even formatting controls.

Applies to:
ComboBox

Styles

There are many different styles of dropdowns (combo boxes), but here are a few of the most common.

Basic style (closed)

A basic closed dropdown is just a simple box without any embellishments.

Basic style with an icon (closed)

A basic dropdown style with an icon helps give the user an idea of what they are supposed to select. The addition of the icon also makes the input field more attractive.


Text

Labels, placeholders, and hint text indicate to the user how they are supposed to complete a field. Additionally, the options themselves should suggest to the user what they are agreeing to.

Label

The label on a dropdown should be similar to that of a text field, which is to say that it should only be a word or 2 in length. The longer the label is, the longer it will take the user to complete the form.

Placeholder text

The placeholder text is what appears in the dropdown before the user selects an option. This text will usually prompt the user to make a selection.

Hint text

You will very seldomly see hint text in a dropdown component because, unlike a text field, there is no wrong answer. That being said, you may want to let the user know more about how their selection will affect the outcome.

Options

When writing the text for options, try to limit each item to one or 2 words. When you have more than that, the dropdowns become clunky and difficult to read.

Options with hierarchy

In some longer lists, you will want to group specific options. For example, countries may be grouped by continent, food by type, or wine by variety.


States

States are the different appearances that dropdowns take to let the user know what they can do or what the system is doing.

Closed

The closed state is what the dropdown will look like before the user has interacted with it.

Focused and closed

If the user hovers over a dropdown or tabs to it, the dropdown should alter its appearance to let the user know that it is clickable.

Normal (open)

The normal or open state is what the dropdown looks like when you click or tap on it.

Focused (open)

The focus on the open state indicates that the user is interacting with it.

Disabled and closed

If you disable an input field, users won’t be able to interact with it, but they will be able to see it. You may use this if your business rules require it, but that probably won’t be very often.

Selection state

The selection state is when the user has selected one of the options in the dropdown menu. You should be able to see the selected option when the menu is closed and when it's open.

Feedback

Feedback lets the user know if they have correctly filled out the form.

Incomplete field

With free text input, a user can make a typo or a mistake. However, since the options in a dropdown are predetermined, the most common type of fail feedback is the “incomplete” type, which the user will only receive if they click the 'submit' button before they have finished filling out the form.

Feedback in a quiz

There is another type of fail feedback associated with dropdowns in online learning or quizzes. This type of feedback lets the user or learner know if they got the question right or wrong.

You should always consider having some type of written feedback if the user gets the question wrong so that they can learn from their mistake.


Best practices

Here are a few of the best practices when it comes to incorporating dropdowns into your wireframes.

Height of the dropdown

When creating a dropdown, you will want to specify how many items are in the list and how many the user can see at any given time. If the height of the dropdown is too much, it can overwhelm and confuse the user. Only showing a few of the options at a time makes it less overwhelming.

Adding a scrollbar is a straightforward way of showing the users how long your list is. If they can’t see the scrollbar, they may assume that the only options are the ones they can see. If they can see the scrollbar, they can judge how many options are in the dropdown and how far down the list they are.

Radio buttons, like dropdowns, are single selectors, meaning that you can only select one option from a list at a time. So, when should you use one over the other?

When you should use dropdowns:

  • If you have more than 6 options.
  • If you need to save space in your interface.
  • If you need to group options.

When you should use radio buttons:

  • If there are fewer than 6 options.
  • If the options are longer than a few words, and especially if they are sentences.
  • If the user needs to be able to see all options at the same time.

While restrictive controls are intended to make our user's lives easier, there are situations where they can actually make them more difficult. In some instances it’s a lot easier for the user to type the answer than to search in a long dropdown.

For example, most people know when they were born, and it’s much easier to type their date of birth than it is to find it in 3 different dropdowns.

When you should use dropdowns:

  • If the user doesn’t know the options available to them.

When you should use text fields:

  • If the user already knows the answer without having to look at a list of options. For example, when they need to enter their birth date.
  • If the option is to select a number, it’s easier for them to write it out.

Search field

In situations where you need to have a fixed list with many options and the user knows the answer without seeing the options, you should use a search field with a dropdown. This lets the user quickly find what they are looking for without scrolling through the whole list. An example of this would be a list of countries.

Allow for options not in your selection

Sometimes, the option the user is looking for isn’t available to them in the current selection. If they created the other options already (e.g., categories, folders, tags, etc.), then they should be able to create a new one from this list too.


Variations

There are many different variations of dropdowns. Using more specific styles will make it easier for the user to know what to select.

DIY Symbols

You can make your own Symbols in Balsamiq using a few simple shapes and techniques.

Search box: A search field allows the user to search for something in the list without scrolling through it. To make this symbol, just add a search icon and change the placeholder text.

Multi-select: A multi-select dropdown allows you to choose more than one option, similar to checkboxes. To indicate which options are selected, use a rectangle to highlight them.

Options with hierarchy: This dropdown works like any other, except the list is grouped into a hierarchy. This is especially important when dealing with a long list of options.

Basic with an “add new” option: This is especially useful for users who want to add an extra option to the dropdown list.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.