Forms & Controls

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

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.

Create

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.

  1. On a tablet, it opens a menu with multiple selections.
  2. On a phone, it is contextual to the current screen.
  • Created by
  • Last modified December 5, 2014 by Marni

Date Picker

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.

Drawers

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.

Delete

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.

  • Created by
  • Last modified June 19, 2014 by

Edit

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.

  • Created by and
  • Last modified April 30, 2015 by Dexx Dorris

Forms

Forms can contain Text Fields, Text Areas, Select DropdownsRadio ButtonsCheckboxes, File Uploads, Date Pickers, and other methods of input.

Popovers

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

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.

Selecting

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.

See the Pen Selecting by Harmony Design (@harmonydesign) on CodePen.

  • Created by and
  • Last modified August 30, 2016 by Marni

Type Ahead

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.

  • Created by
  • Last modified October 29, 2014 by Haidan
© Intuit 2016 | Terms of use