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.

Web

When to Use

  • Use an edit button to edit an entire item (example: edit customer information)
  • Use a linked table row to edit an entire table row when the primary action is editing (example: editing fields for a transaction)
  • Use an edit icon to edit a part of an item. This works best when the user often needs to quickly edit a small section, but rarely needs to edit the whole item. (example: only edit company contact information without activating the entire form )

Appearance & Behavior

Edit Button

  • The edit button is a secondary button that opens a trowser or a 565px drawer.
    • A trowser works best for a complex form, especially one with multiple steps.
    • A drawer works best to keep the user in context with what they were doing.
  • A save button closes the trowser or drawer and returns the user to the page they were on with fresh, updated content. Remember: don’t make the user scroll back to their place! Keep them where they were.

Linked Table Row

  • On hover, the background of the row changes color (see Tables).
  • Clicking or tapping anywhere in the row opens a form to edit all its information (unless the user clicks or taps a button or link, of course). There are a few ways to display the form…
      • Inline form. The user stays in context of the table, and cells become editable. Clicking or tapping outside of the row should save the information to the table. This is the quickest way to edit, but only works well with a few fields.
      • If you’re getting really complex, you could open the form in a trowser.

EXAMPLE OF EDITING A ROW INLINE WITHIN A TROWSER: DEFAULT / HOVER / ACTIVE / UPDATED

Edit Icon

  • The edit icon should align to the right of the section being edited.
  • Remember to use a hover state! Once clicked or tapped, a form should open. Again, this can go a few ways:
      • If it’s a simple task, an inline form is great for speedy, in-context edits.
      • If your layout isn’t conducive to an inline approach, try using a popover.

  • Again, saving the edits closes the form and displays the updated content. I know you know this.

Example of inline Editing a part of the company info: Default / Hover / Editing

  • Created by and
  • Last modified April 30, 2015 by Dexx Dorris
© Intuit 2016 | Terms of use