Re-thinking Add-Change-Delete

1/17/2014

Add, change and delete, or create, read, update and delete (CRUD) is arguably the most basic data operation I do on my PC or phone. The surprising thing about that is that every time I write code to do it, the result is a dog's breakfast.

Over Christmas I started working on an update to Offroad GPS because, from a usability perspective, it's an absolute swamp donkey. Offroad GPS has been in the app store unchanged for 3 years, so an update overdue. And it's my chance to re-think add/change/delete. Here's what I set out to do:

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.

Waypoint add change delete flow

Notes

1 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.
2 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.
3 Keeping what works - Tapping an item in the list should display the item.
4 Hardware buttons - As for 3, tapping the hardware Back button to return to the list is expected behaviour.
5 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.
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.
7 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.
8 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:

Desktop add/change/delete example

 


Home | Blog | Photos | Contact | About

Wittenburg.co.uk and all content copyright 1995-2018 by Michael Wittenburg, unless otherwise stated.
All content on this site is licensed under the Creative Commons license, unless otherwise stated.

Wittenburg.co.uk uses a single session cookie because it's required by the tech underlying the site (Microsoft ASP.NET). The cookie stores no information and seves no functional purpose.