Balsamiq

Toggle navigation

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.

Below is the list of UI controls that we'll be learning about. 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; and output controls, which communicate information to the user.

Button Guidelines

A button is used to execute an action. Designing buttons may seem obvious, but they are surprisingly complex and there are a few tricky things to look out for.

By Leon Barnard

Text Input 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.

By Leon Barnard

Dropdown Menu (Combo Box) Guidelines

A dropdown menu gives you a list of items to select from. Whether you call it a Dropdown menu, Combo Box, Pull Down menu, or Picker, you use them every day.

By Leon Barnard

Radio Button and Checkbox Guidelines

Radio button and checkbox controls each allow users to select items from a list, but with different uses: when only a single selection is valid, or zero to more.

By Leon Barnard

Link Guidelines

Links are the original way of navigating pages on the web and are so common that not adhering to best practices can break the usability of your site or app.

By Leon Barnard

Tab Guidelines

Tabs can be a smart way to break up content into sections, but their use is a double-edged sword because they bury other content, making users guess where it is.

By Leon Barnard

Breadcrumb Guidelines

Breadcrumbs are a compact, unobtrusive way to show navigation hierarchy. They show users where they are and provide an easy way to navigate up multiple levels.

By Leon Barnard

Vertical Navigation Guidelines

Vertical (a.k.a. ‘Sidebar') navigation is a way of showing a site or app structure along one side of them. Very common on the web, almost standard on mobile.

By Leon Barnard

Menu Bar Guidelines

Menu bars allow users to navigate using categories and sub-categories. They are persistent, unchanging across the app, and used exclusively for primary navigation.

By Leon Barnard

Accordion Guidelines

Accordions are stacked containers with nested items that expand and collapse when clicked or tapped. They can be used either for navigation or for content.

By Leon Barnard

Validation Guidelines

Validation is a great way to present feedback or guidance with limited interruption. It provides in-context error messages and suggests ideas for improvement.

By Leon Barnard

Tooltip Guidelines

Tooltips are a common form of contextual help and supplementary information. They should not be treated as a primary means of helping users understand the system.

By Leon Barnard

Alert Guidelines

Any UI control that captures the user’s attention can be thought of as an alert. They should be used wisely and sparingly so they are not overwhelming.

By Leon Barnard

Data Table Guidelines

Data tables use columns and rows to display related information in a grid. They are best used for numerical data and lists of objects of the same type.

By Leon Barnard

Icon Guidelines

With icons, the power of an image helps users identify things quickly and accurately. Useful for internationalization and for concepts hard to describe in words.

By Leon Barnard

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