What is the best way to indicate edit-in-place functionality on a list view in a responsive web application? This is an in-browser application designed for mobile (not a native mobile app), so cross-platform compatibility should be kept in mind.
The page current looks like this (header and navigation not shown):
Apart from viewing the list of employees, the primary actions to be taken from this screen are calling and texting. The Edit action isn't a primary action so given the amount of screen real-estate, I think that showing the pencils is too cluttered.
Unfortunately there's no hover option for mobile. Here are some examples in the wild:
- On Android, editing a contact requires you to navigate to the contact view first then tapping the edit button on the action bar. This makes sense as there are many contact details.
- For the Alarm Clock application on Android, long-pressing on the alarm will bring up a modal menu with Edit Alarm and Delete Alarm. The Edit alarm button takes you to a new screen, again logical because there's numerous fields. There's also a mass-delete option that brings up checkboxes beside all of the alarms you wish to delete.
- On iOS, I believe editing is done by tapping on the item which brings you to a new screen, while deleting is done either by left-swiping and tapping the minus icon, or on the edit screen by tapping the red Delete button (I don't have an iOS device handy at the moment to check)
Since there are such few fields (first name, last name, title, phone, and a checkbox indicating whether the phone has texting), transitioning to a new view or opening a modal seems overkill. The edit functionality expands the item (row) to a form with Update, Delete, and Cancel buttons. I've thought about several options:
- Tap on the list item to expand the item as described above. I'm not sure about the affordance of this option.
- Keep the edit buttons
- Use a vertical ellipses to the right of the Call button that opens a flyout menu with two options: Edit and Delete.
So what do you guys think?