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.

iOS

When to Use

  • For lists and tables without an edit mode, use swipe-to-delete.
  • For lists and tables with an edit mode, use the delete button.
  • For detailed views of items that are deleted less frequently (examples: employee, customer):
    • If there is an edit mode, use the delete text button at the bottom of the edit mode, which helps de-clutter the call-to-actions in detail view.
    • If there is not an edit mode, use the delete text button in an action sheet.
  • For detailed views of items where delete is frequently used, place a trash icon in the toolbar (example: note).

Appearance & Behavior

Swipe-to-delete

For lists and tables without an edit mode, Harmony uses iOS 7’s default swipe-to-delete behavior with a custom color (#e33d43). Swiping from right to left reveals the delete button. Swiping the row from left to right cancels the delete action, while tapping the delete button removes the row.

Delete-copy_03

Example of deleting a row using swipe-to-delete

Delete Button

For lists and tables with an edit mode, Harmony uses iOS 7’s default Delete Button Control and Delete Button with a custom color (#e33d43). In edit mode, the Delete Button Control is aligned to the left of each row. Tapping the Delete Button Control reveals the Delete Button. Swiping the row from left to right cancels the delete action, while tapping the Delete Button removes the row.

Delete-copy_06

Example of deleting a row in a table’s edit mode

Trash Icon Button

The toolbar Trash Icon is 24px x 24px (remember that retina is 2x!) and uses Harmony’s primary action color: #365ebf.

Delete_13

Delete Text Button

The Delete Text Button is red (#e33d43) and is usually at the bottom of an edit mode. Wherever possible, customize the title of Delete Button by including the name of the item being deleted. For example, use ‘Delete Customer’ instead of ‘Delete’.

Delete-copy_25

Example of a delete text button in editing context

Delete Text Button in an Action Sheet

An Action Sheet appears when the user taps an icon button from the toolbar. The Delete Text Button in Action Sheet is red (#e33d43). Wherever possible, customize the title of the Delete Button by including the item’s name. For example, use ‘Delete Invoice’ instead of ‘Delete’) to provide more clarity. To help users avoid deleting an item by mistake, place the delete button on the top of the action sheet.

Delete-copy_18

Example of iPhone and iPad action sheets

Android

When to Use

  • For lists and tables without an edit mode, use the trash icon button in contextual action bar triggered by long press gesture.
  • For lists and tables with an edit mode, use the remove icon (e.g. remove an item in an invoice’s edit mode).
  • For detailed views of items that are deleted less frequently (examples: employee, customer):
    • If there is an edit mode in a dialog, use the delete action button at the bottom of it.
    • If there is not an edit mode, use delete text button in action overflow.
  • For detailed views of items where delete is frequently used, place a trash icon in the action bar.

Appearance & Behavior

Trash Icon Button in Contextual Action Bar

After the user long pressing on a row, the row is highlighted with the Contextual Action Bar appeared. Tapping the Trash Icon in the Contextual Action Bar deletes the highlighted row.

Android_delete-copy_13

Example of long-pressing on a row to reveal the delete button in contextual action bar

Remove Icon

The Remove Icon is placed to the right of a row or a form field. The Remove Icon uses Harmony primary action color (#365ebf). Tapping the Remove Icon usually only removes the row from the current form. If the data in the deleted row exists elsewhere, the user should still be able to access it.

Android_delete-copy_17

Example of remove icons in an invoice’s edit mode

Delete Action Button in a Dialogue

In a Dialog to edit an item, the Delete Action Button should be placed between the dismiss button and the confirm button.

dialogue

Delete Text Button in an Action Overflow

If appropriate, customize the title of the Delete Text Button to communicate clearly about what is being deleted (e.g. use ‘Remove Invoice’ instead of ‘Remove’).

Android_delete_09

Trash action button

The Trash Icon is 24dp x 24dp and uses white (#ffffff).

Android_delete_06
  • Created by
  • Last modified June 19, 2014 by
© Intuit 2016 | Terms of use