Balsamiq

Toggle navigation

UI Control Guidelines


There's no need to reinvent the wheel when choosing and using UI controls. Best practices and guidelines are well established, through many years of research and practice.

These pages describe when and how to use the most common user interface control types, and show examples and variations that will help you master them.

Input Controls

Buttons

Designing buttons may seem obvious, but they are surprisingly complex and there are a few tricky things to look out for.

Text Input

Text input fields allow keyboard input from the user. They as not as simple as they seem.

Dropdown Menu (Combo Box)

The control with many names! A dropdown menu gives you a list of items to select from. It is versatile and familiar.

Radio Buttons and Checkboxes

Radio button and checkbox controls each allow users to select items from a list. Despite that, they have different uses and guidelines.


Navigation Controls

Links

Hyperlinks continue to be central to navigation on the web, such that not adhering to best practices can break the usability of your site or app.

Tabs

Tabs can be a smart way to break up content into sections, but their use is a double-edged sword.

Breadcrumbs

Breadcrumbs are a compact way to show a site or application hierarchy. They are unobtrusive and not distracting.

Vertical Navigation

Vertical (a.k.a. "Sidebar") navigation is a way of showing a persistent site or application structure along one side of the product.

Menu Bars

Menu bars allow users to navigate using categories and sub-categories. They are persistent and unchanging across the app.

Accordions

Accordions are stacked containers with nested items that expand and collapse when clicked or tapped.


Output Controls

Validation

Validation is often used as a light-weight alternative to alerts. It is a great way to present feedback or guidance with limited interruption.

Tooltips

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

Alerts

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

Data tables

Data tables, also called table views, tables, and data grids use columns and rows to display related information in a grid.

Icons

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