Balsamiq

Toggle navigation

UI Control Guidelines

A collection of detailed guidelines about User Interface (UI) controls, the building blocks of any software interface. Buttons, links, accordions, menus, and more! By UX expert Tess Gadd.

Button Guidelines

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.

By Tess Gadd

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 Tess Gadd

Dropdown Menu (Combo Box) 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.

By Tess Gadd

Radio Button Guidelines

Radio button controls allow users to select items from a list when only a single selection is valid. Find out when you should use them and some best practices.

By Tess Gadd

Checkbox Guidelines

Checkbox controls allow users to select items from a list when multiple selections are valid. Read more for tips, best practices, and different use cases.

By Tess Gadd

On/Off Switch Guidelines

On/off switches are great for settings areas, but you should avoid using them in forms. Read on for more information about toggle switches and best practices.

By Tess Gadd

Numeric Stepper Guidelines

A numeric stepper is a UI control that works well for clicking through numbers with a small value. For anything higher than 10 you should use a different control.

By Tess Gadd

Slider Guidelines

With a slider you can graphically see you selection relative to the minimum and maximum options. For a tiny control, there are a lot of best practices to know!

By Tess Gadd

Link Guidelines

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!

By Tess Gadd

Breadcrumb 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.

By Tess Gadd

Tab 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.

By Tess Gadd

Accordion Guidelines

You can use accordions for 2 primary uses: to show and hide information, and to navigate. Remember to only put non-critical information inside this type of control.

By Tess Gadd

Tree Pane 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.

By Tess Gadd

App Bar Guidelines

An app bar helps users navigate through a website or an app on smaller devices. It could have the form of a hamburger menu, a dropdown menu, or a kebab menu.

By Tess Gadd

Menu Bar and Menu Guidelines

Menus contain links and buttons that help you navigate to different pages and features. Choosing what goes in the menu can be critical for your users' experience.

By Tess Gadd

List Guidelines

Lists contain rows of text, which allow for easy scanning. You can use them for static display, to preview a content, or to help users with navigation.

By Tess Gadd

Text Guidelines

Text guides users along their desired journey on your website or app through input labels, page titles, body copy, feedback messages, and more.

By Tess Gadd

Scrollbar Guidelines

Scrollbars are used when there is more content than can fit on a screen or in a container. The most common types are used for long web pages and maps.

By Tess Gadd

Rule Guidelines

Rules are an aesthetic tool used to divide areas and content. You can use them to separate sections on a page or item in a list, or to create visual contrast.

By Tess Gadd

Splitter Guidelines

Splitters are a practical solution for screens without enough space. They allow users to arrange their workspace and focus on their current task.

By Tess Gadd

iOS Control Guidelines

When designing for mobile, you need to consider the operating system. iOS for iPhone and iPad has its own style when it comes to user interface controls.

By Tess Gadd

Annotation Guidelines

Annotations are critical to convey information that is not visible in your wireframes. They should explain how things work, the user journey, and edge cases.

By Tess Gadd

Alert Dialogs

Progress Bars

Charts

Cover Flows

Special Pickers

Devices and Browsers

Icons

Audio and Video Players

Images

Maps

Cameras

Formatting Text

Geometric Shapes

Tooltips and Popovers

Tables (Data Grids)

Site Maps

Popups, Modals, and Lightboxes

Field Sets