Member-only story
The default way
Since copying is an essential command, there is a default way to do it. Let’s look at the typical user flow:
- User hovers over text and positions the cursor at the beginning (or the end) of the string
- User clicks and drags the mouse until the string is highlighted
- User opens the context menu with a right- or control-click
- User clicks “Copy” (can also be accomplished with a keyboard shortcut)
Unfortunately, this is not the most user-friendly approach. Although it comes for free, it brings along a few little annoyances:
- First, it can take several seconds to properly position the cursor.
- Second, once the user starts highlighting the string, they may realize that they didn’t position the cursor properly in the first place.
- And third, even after they successfully highlight the string, they may accidentally click away and lose the highlight.
The good news is that we can help the user to avoid these annoyances by creating an easier way to copy. While we can’t always predict which bits of text the user will want to select, these examples could be a safe bet:
- Email addresses
- Translations
- Passwords
- Commands
- Discount codes
With that being said, let’s look at…
The improved way
A better way to approach this problem is to allow user copy text without highlighting it. We can achieve this by adding a copy-on-click button next to the text, as seen in the following examples from Bitbucket and Google Translate:
Bitbucket
