Monday, January 27, 2020

website design - How do I add the ability to cancel editing without a button?


We currently have an interface pattern that consists of a list of rows; clicking on one row activates "edit mode", where the lables turn into text-boxes, afterwards you can either save or cancel.


hover state


Hovering over an item indicates that you can click it (the cursor is actually a pointing hand)


enter image description here


After clicking on one or more items, you go into "edit mode"


If possible, I'd like to get rid of both "edit" and "save" entirely. You can start editing by clicking on a row, but what is the best way to cancel editing without any controls?



There are now four buttons in two places, only one of which looks different from the rest.



  • These buttons aren't always where you left them

  • Clicking 'save' twice by accident could delete your record (though there is a delay)

  • Users have to be able to edit these in bulk, so closing items when another one is opened isn't an option (also: there should be a way to get the whole page to look like you've just opened it)

  • While the interface can be controlled with keyboard shortcuts, a tablet user needs to be able to control the site just as well.


So to summarise:


I'm planning to get rid of the "edit" button. Is there a nice way of also getting rid of the "cancel" button?





After getting a bunch of great answers, this is what the view looks like:


enter image description here


(the second item has just been edited)



Answer



The standard keyboard command for cancellation is ESC. You should be able to map it with JavaScript to act the same way on your page. However, a) not all users know about it and b) your case calls for compatibility with touch-screen devices that don't have it.


As has been answered on another question, an explicit Edit button isn't always needed as long as it's clear how to enable the editing mode. However, an explicit Cancel is a must and an explicit Save is desirable (users need to be told that saving is automatic). These are especially important when modifying domain settings.


I think you should keep everything as it is except for 3 things: 1) make Save green & see if yellowish works for Cancel, 2) increase the delay in switching from Save to Delete, and 3) add a deletion confirmation (if there's none).


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...