Intro to UI Controls

User interface (UI) controls are the building blocks of any software interface. Using them intelligently can guide users through your product as you intend, by making it feel familiar and learnable even if they have never used it before.

Becoming familiar with them as a user interface designer is essential for a good user experience. Many new designers get stuck trying to decide whether to use a checkbox or a radio button on a form, for example, or how many navigation tabs on a screen is too many. That's what this section is all about.

Fortunately, best practices and guidelines for user interface controls are well established, through years (often decades) of research and practice.

In the next few articles we'll introduce the most common user interface control types, describe when and how to use them, and show examples and variations that will make you feel comfortable choosing and using them in your own designs.

UI controls are like the ingredients in a recipe. Learn their unique flavors and characteristics and you can improvise, customize, and substitute to meet your needs (or those of your specific users). Get to know them well enough and you can start creating your own recipes (design patterns) from scratch.

Some of the most common controls are listed below. Roughly speaking, they can be grouped as follows:

those that accept input, such as the controls you'd find on a form
navigation controls, which allow users to move around in your app or site
display controls, which communicate information to the user.

To learn about how and when to use all the control types included with Balsamiq, see our UI Control Guidelines.

Common input controls

Input controls allow users to enter information via keyboard or mouse/touch.

Buttons

Buttons are common elements of every interface and are used to execute an action. It must be apparent what that action will be, to avoid any mistakes or confusion. Read our Button guidelines.

Text Input

Text input fields allow keyboard input from the user. They are frequently used with other types of input controls in a form, but can be used on their own. Read our Text Input guidelines.

A Dropdown menu (or Combo Box, Pull Down menu, Picker) gives you a list of items to select from. It’s a common element in forms, setting pages, and quizzes. Read our Dropdown Menu guidelines.

Radio Buttons

Radio buttons allow users to select items from a list when only a single selection is valid. It’s the perfect control when there are less than about 6 options. Read our Radio Button guidelines.

Checkboxes

Checkboxes allow users to select items from a list when multiple selections are valid. This is the right UI control for letting them also choose to select nothing. Read our Checkbox guidelines.

Navigation controls allow users to move around within or across a site or application.

Links

Links are a very versatile control. You can use them for your primary navigation, for navigating through a page, to bring users to a more detailed page, and more. Read our Link guidelines.

Breadcrumbs

Breadcrumbs are a chain of links used on websites with hierarchical navigation. They allow users to orientate themselves as they move throughout the platform. Read our Breadcrumb guidelines.

Tabs

Tabs are a form of navigation that allows users to move between different subsections of a page. You can use them to group information and as category filter. Read our Tab guidelines.

Tree Panes

Tree Panes are a great option when there are multiple levels of navigation or many navigation categories. They should sit on the left of the screen and show nesting. Read our Tree Pane guidelines.

Menus

Menus allow users to navigate using categories and sub-categories. They are persistent and unchanging across the app. Read our Menu guidelines.

Accordions

You can use accordions for 2 primary uses: to show and hide information, and to navigate. Read our Accordion guidelines.

Common display controls

Display controls present information on the screen to the user.

Text

Text refers not only to the written content on the page but the headings, messages, and labels that provide clarity and organization. Read our Text guidelines.

Lists

Lists are a great way to present ordered information in a way that is familiar and easy to read. Read our List guidelines.

Data Grids

Data grids, also called table views or tables, use columns and rows to display related information in a grid. Read our Data Grid guidelines.

Tooltips

Tooltips are a common form of contextual help that leverage the "details on demand" UX pattern. Read our Tooltip guidelines.

Alerts

Any UI control that captures the user’s attention can be thought of as an alert. Read our Alert guidelines.

Icons

Icons are everywhere, both in software and outside of it. The power of an image helps users identify things quickly and accurately. Read our Icon guidelines.

By Leon Barnard
Got questions or feedback? Email support@balsamiq.com.