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 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 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 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 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.
Common navigation controls
Navigation controls allow users to move around within or across a site or application.
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 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 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 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 allow users to navigate using categories and sub-categories. They are persistent and unchanging across the app. Read our Menu guidelines.
Common display controls
Display controls present information on the screen to the user.
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.
Data grids, also called table views or tables, use columns and rows to display related information in a grid. Data Grid guidelines coming soon.
Tooltips are a common form of contextual help that leverage the "details on demand" UX pattern. Tooltip guidelines coming soon.
Any UI control that captures the user’s attention can be thought of as an alert. Alert guidelines coming soon.
Icons are everywhere, both in software and outside of it. The power of an image helps users identify things quickly and accurately. Icon guidelines coming soon.