Sometimes we have to ask our users to enter data, though we try our hardest not to (remember to leverage what we already have!) Form elements and controls help us capture data entered, and enable our users to manager their data. It’s really important use use controls consistently to manage user’s expectations of how the app works. On mobile devices, we use native controls as much as possible.
Buttons perform actions. We have multiple types of buttons including basic, menu, combo, and combo link. The hierarchy of importance is emphasized and delineated by using primary and secondary buttons.
On mobile devices, users can use the Create Icon to create transactions and other important actions. It is available on every screen except transaction modals.
- On a tablet, it opens a menu with multiple selections.
- On a phone, it is contextual to the current screen.
The Date Picker allows the user to make a single date selection using a calendar view. It is invoked on
:focus of a Text Field.
A Drawer is a panel that slides in and out from the right. It’s used to help users complete a task faster and in context, such as to add charges or attachments to a transaction or to complete a quick sub-task.
Users can either delete an item permanently (example: delete a transaction, or delete a customer) or remove a line-item from another item (e.g. remove a note from a transaction). When deleting an item permanently, use a critical alert to confirm the action, in case the deletion was a mistake.
Sometimes our users need a way to change or update content they’ve added. The Quickbooks ecosystem provides a wide range of tools, so the edit states in our apps solve for a wide range of use cases. Some examples might be: changing the quantity in the point-of-sale system, editing employee contact information, or changing their business address.
Popovers come in a few flavors: form popovers and date pickers, and appear to “pop over” the main content on the screen to allow for secondary task completion.
Progressive Disclosure is used to hide unnecessary information and reveal it when it becomes relevant. This makes the screen less cluttered so the user can accomplish complex tasks through smaller, intuitive steps.
There are two ways to select things… single-select, and multi-select.
- Single-select allows users to select one item only from a set of mutually exclusive ones. Typically, one option is defined as the default selection.
- Multi-select allows users to select as many items as needed.
Selecting is reserved for choosing an option. If you’re looking to perform an action, you’ll need a button.
Type-ahead is a behavior where the application suggests relevant terms as the user types in an input field. It can help the user quickly fill out a field that has a large number of potential options.