What is the best way to confirm something has been copied?

Question

I have a 'Copy' button that copies generated output to the system clipboard. What is the best way to confirm that it has been copied? I was thinking of those possibilities:

• A dialog "Copied."
• A dialog "Copied to clipboard."
• Change the text "Copy" on the button to "Copied!" for a second, and then change it back
• Do nothing, just let the user assume the button has done it's work (I don't think that's a good idea)

The user pastes an unformatted list of words in the left field and clicks the Format button. The application will correctly format the list and then shows the output in the right field. Then, the user can (and most certainly will) copy the output to the clipboard and paste it in another application.

Answer 1

Feedback is very important part of interaction, but it is also context dependent.

Copying something to clipboard is a step in some user task. Frequently next step (pasting) is done almost immediately. So user is in a task flow and some feedback could distract user or even break the flow. More general, is it needed a information or confirmation dialog "Button was clicked" for any button?

Suppose the flow was broken by some external force (phone ring, ...). The copying to clipboard is a resource-cheap operation. So user returning to task could easily do it again.

Also it is better to label button "Copy to clipboard" for more clearnes for user.

So, feedback is not necessary and even could be unwanted, if all points are true:

1. Operation is a part of immediate task flow
2. Operation is resource-cheap (very fast and easily could be repeated)
3. Operation is totally clear for user - meaning that whatever process/behavior they have engaged in, is familiar and common to them so that a confirmation message is not necessary and to provide one actually causes a workflow efficiency detriment (more clicks).

At the same time, you have no provided any context, so I could be not quite right. That is why I have generalized context and refer to operation instead of copying.

Answer 2

As said, feedback is really important. I summed up the different kinds of feedback here. In this case, you want to notify the user that the click she made had been preformed. The best feedback you can provide would be immediate and in close proximity to the location of the pointer at the time of the click, since the user's attention is certainly there. The simplest yet effective solution would be to change the label of the button, along with the regular animation of the button being pushed down (or just change color in response to the click).

A nice example is set by the Vimeo embedded player:

Bear in mind that in their implementation the button can only be clicked once. However, you might want to change the button to its original label when the users performs other actions that might change the information to be copied, or when enough idle time has elapsed.

Answer 3

I really like the way bitly does it by having the copied item float off like a ghost.

Answer 4

Popup notifications (a.k.a Toasts / Call-outs) are a great way to give instant feedback without blocking further user actions: http://developer.android.com/guide/topics/ui/notifiers/toasts.html

They should appear somewhat near the action (i.e. the button that was clicked) if your application's window is rather large, so it's not missed by the user. Slight in an out animations can draw the user's attention as long as they aren't disturbing or too long lasting.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Note the transparency of the toast, it allows the user to see through in case there's something important underneath it until it disappears automatically after a short moment (the user shouldn't be forced to click it away).

If the most common workflow in your tool is Clear > Paste > Format > Copy, consider to provide a single button to perform all these actions after another. Or at least put the buttons in a line and in that order. And reduce the amount of space between input and output text areas, you lose a lot of space there.

Answer 5

I would suggest to check if the clipboard contains the text that is inside the box, and if it is the same change the button to "copied". If the clipboard contains something else, just change it back to "copy".

Answer 6

Most copy buttons just "do their thing" with no particular feedback to the user. For example, try any of the Microsoft Office tools, or any of the Apple iWork suite for that matter.

The only time I see any feedback doing a "copy to clipboard" is when the work required is sufficient to be user perceptible.

If you do give any feedback, it needs to be minimal (simple) enough to not get in the way of the users workflow, so a dialog would be a bad idea.

Momentarily changing the caption for the button would be one way to do it.

Another would be to change the mouse cursor to a "wait" (hourglass or spinning circle or spinning globe or whatever's appropriate for your platform) for a split second, as a way to "show" that some processing occurred.