Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

inline-rename

share|improve this question
6  
"Apply" could be a viable option. "Apply Change" is also possible but I'm no fan of long labels on buttons. I would not use only "Save" because, as you say yourself, it will probably be confusing. –  Hoshts Aug 10 '12 at 18:55
    
A common pattern for inline editing of short fields is to highlight the field text with a different color whilst editing is active. Pressing enter or changing focus accepts the edit, without having a button. –  Chris Aug 13 '12 at 7:12
add comment

5 Answers

up vote 7 down vote accepted

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.

share|improve this answer
    
I'm going to accept your answer as it gave more details and ideas regarding the grouping/coloring of the controls. –  TheCloudlessSky Aug 14 '12 at 11:34
add comment

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

share|improve this answer
    
+1, 'Done' and 'OK' are the typical patterns for this. –  Jimmy Breck-McKye Aug 10 '12 at 21:19
    
Thanks. I've always felt that "OK" or "Done" are too generic. Thoughts? –  TheCloudlessSky Aug 10 '12 at 21:23
1  
As it comes down to a user activates the title change and have the focus there, the change of "Rename" to "Done", "OK" or "Apply" will be very visible to them. "Done" and "OK" might be generic but they are still very known words to most people. –  Hoshts Aug 10 '12 at 22:24
1  
They are generic because they work well for a lot of cases. This is one of those cases where they work well :) –  Vitaly Mijiritsky Aug 11 '12 at 5:21
add comment

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.

share|improve this answer
    
I like this idea. But I do not like switching from a word ("Rename") to two icons. In that case I, personally, would prefer to have an icon for "Rename" as well. Problem here is that finding an icon that is clear enough and makes a mental link to the "Rename" might be hard to come up with. –  Hoshts Aug 10 '12 at 22:28
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.