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.
You can also come back to these later and jump to learning about UI Design Patterns next.
Designing buttons may seem obvious, but they are surprisingly complex and there are a few tricky things to look out for.
Text input fields allow keyboard input from the user. They as not as simple as they seem.
The control with many names! A dropdown menu gives you a list of items to select from. It is versatile and familiar.
Radio button and checkbox controls each allow users to select items from a list. Despite that, they have different uses and guidelines.
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 can be a smart way to break up content into sections, but their use is a double-edged sword.
Breadcrumbs are a compact way to show a site or application hierarchy. They are unobtrusive and not distracting.
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 allow users to navigate using categories and sub-categories. They are persistent and unchanging across the app.
Accordions are stacked containers with nested items that expand and collapse when clicked or tapped.
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 are a common form of contextual help that leverage the 'details on demand' UX pattern.
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, also called table views, tables, and data grids use columns and rows to display related information in a grid.
Icons are everywhere, both in software and outside of it. The power of an image helps users identify things quickly and accurately.