What should the “save” button be called when editing inline?

Question

In our application, users can click "rename" to perform inline editing of the name of the current document. When they're done editing the name, they click a button to save the change.

I'm trying to find the best verb in which to name this button. I can't use "Save" since it'd collide with the actual document's "Save" button just below (I think it'd cause too much confusion). In my current mock-up, I've called the button "rename" as well. One user I showed this to said it was confusing.

Is it confusing to use the same verb as both the trigger for the edit and the save for the edit? Is there a smarter alternative?

Answer 1

I agree with your user that your current solution is a bit confusing. I see a couple of issues here:

• The button label 'Rename' is used twice, but with different meanings. The first time it is clicked, the action is 'Rename the page, i.e. enter the edit mode to change the page title'. The second time the meaning is different: 'Confirm changes and complete the action of renaming the page'. So at least one of the labels needs to be changed.

• The 'Rename' link/button (and cancel X) are not as closely connected to the object they belong to as possible. It wouldn't surprise me if people in your example click 'Save' instead of rename after editing, since that's the button that's right below the edit box. You can improve the visual grouping here by straightforward use of the Gestalt principles. Use whitespace, color, respond to mouse hovers, etc, so that the connection between the items becomes clearer. (Take a look at the edit options in Google docs forms for example)

• There's no need to shy away from general terms such as Apply/Confirm/OK/Done when their meaning is clear from the context.

• Do you really need the explicit confirmation step? Another option you could consider is to skip this step completely, and apply the changes whenever the user leaves the field (mouse click outside, or hard return). In that case however, make sure that you provide an adequate undo option to roll back any unintended changes. This is something you'd definitely need to test though, becasuse whether this will work or not really depends on the context, the rate of error and the associated risks. On a similar note, you might want to reconsider your cancel button (the X) if it's often clicked accidentally.

So all in all: first question if you really need the confirmation step. Increase the visual contrast between the viewing and edit mode, so that the user has a better sense of what's happening. Visually connect the elements to the object they work on, and increase the (visual and mental) distance with the other available actions. Don't use the same label twice with different meanings, and change the label for the confirmation step to Apply/Done or a similar label.

Answer 2

Nice question. I would try "Done" or maybe "OK", depending on the type of language you use there.

Answer 3

Maybe you don't need a verb. To go along with the gray "X" icon next to the edit box, maybe you could have a green checkmark to confirm the change.

The checkmark icon (particularly next to an "X") would communicate confirmation well even without color or to colorblind users.

Answer 4

Accept/Apply/Confirm more definitively embody the implicit action to suggest completion of the single page item versus the entire page/screen of editable items.

While generic verbs or terms can certainly work, I'd shy away from those that more strongly suggest completion of a whole (i.e. Done/Save/Submit/Update), especially given the proximity to the items below.

A visual supporter would also help distinguish the action, such as a check mark or thumbs up.

Answer 5

Update or Update FileName would be nice. Even just Done as already suggested should be fine.