4.11 Buttons & Controls
Buttons and controls, in the context of this design playbook, are key interactive elements that are custom-styled to match the look & feel of a USAF application. There are many other types of controls (radio buttons, inline scrolls, dropdown menus, etc.), but these most frequently adopt the style of the browser itself, and are thus excluded. Additional styled elements (like navigation and breadcrumbs) can be found within the Component Library of this playbook.
Buttons are a key component of interaction design, and are often the primary call-to-action at the page and component level. They usually “commit” the action of a user – submitting a form or piece of data, opening / closing a page element, or navigating to a new content section. Buttons should adhere to the following best practices:
Buttons often come in primary and secondary styles, both of which follow call-to-action color rules but are treated differently to communicate priority and emphasis. In this case, a primary button style might be used to submit a form, while a secondary button style might be used to cancel the form submission.
As interactive elements, buttons often have multiple states to communicate to the user the status of the button. Commonly these states are active, hover (on desktop) / clicked, and disabled. The disabled button state is particularly useful for compelling the user to provide all mandatory data before they can proceed; once all form fields have been completed, the button changes to an active – thus clickable – state.
Styling custom buttons should follow your application’s design guidelines, and the rules of contrast, legibility, and color mentioned elsewhere in this playbook. The basic button states follow a complementary logic:
As a key site interaction, users often want validation that their button-click has performed the intended operation. In some cases, loading the subsequent page will be an adequate response to clicking “Learn More.” In others – such as when submitting a form – additional validation may be required. In these cases, consider confirmation and error message styles that are unique and explicit.
These feedback elements are a perfect example of the interrelatedness of UX and visual design.
Tabs are a common interactive element – especially within data tables – and communicate lateral movement between content of like categories. They are useful in navigation, and also in comparing similar content types on separate layouts.
Similar to buttons and navigation elements, tabs often have states to communicate their status.