Add, change and delete, or create, read, update and delete (CRUD) are arguably the most basic data operations we can perform. The surprising thing about that is that every time I write code to do it, the result is a mess.
The follwing diagram describes the effects of interacting with just two pages - a list page (screenshots 2 to 7, which are different views of the same page), and a details page on which individual list items can be created or updated (screenshot 1). Interactions are numbered in orange, and described below.
|Multi-state list - I want a list that transparently supports soft deletes. The list should let the user know which of the three view states he or she is in - all items, only active items, or only deleted items. It should also dispay the number of items in the list.|
|Changing view state - Changing the view state should be easy (read fast). I tried a pop-up with options at first, but that took too much tapping so it needs to be a context menu. The other thing I tried and dismissed was a Filter button on the app bar. That was a bit weird to use, because you'd have to move your finger from the app bar to the pop-up at the top of the page, which seemed like a lot of effort./td>|
|Keeping what works - Tapping an item in the list should display the item./td>|
|Hardware buttons - As for 3, tapping the hardware Back button to return to the list is expected behaviour.|
|Being consistent - The contacts app has a button on the app bar that lets you select multiple items. Users know how that works, so my list should mimic that. Tapping the Select button should add checkboxes next to each list item, as shown in screenshot 6.|
|Tapping the margin to select an item - Simialr to 5 above, when you tap the margin to the left of a list item, the list should automatically enter the select mode, and select the item that the user tapped next to./td>|
|Visual queues - Deleted items should be visibly different to active items. I tried using images like I do on desktop applications (see image below), but that made the list look stupid and garish - like it was built by a n00b, so the list should just gray deleted items out.|
|Contextual function - Soft delete implies being able to undo a delete by restoring an item. This should only happen when the list is in select mode. Also, it doesn't make sense to show a Restore button in the app bar when active items can be selected, so the restore function should only be available when the view state is Deleted items. The Delete button can be shown in any view state, because if an active item is chosen it's soft-deleted. When a deleted item is chosen, it's purged.|
Doing this for a desktop app is a lot easier. Here's an example from Interact:
All content copyright © Michael Wittenburg 1995 to 2020. All rights reserved.
Merch (t-shirts designed by my twin)