How to: copy to clipboard on web
As I'll write many code guides and articles containing code snippets on this progressive web app, it's essential to have the following tasks covered that user's will require:
- great readability of the code
- simple and clear action to copy the encapsulated code
That's the bottom line that's required for useful code examples. But can I improve upon it?
Improving engagement
To level up my app's copy-to-clipboard functionality, I thought about how to make the click on the copy-button more fun, as a delightful user experience (UX) has the nice side effect of driving engagement up.
I came up with the following: what if the app "answers" in a chat-like way whenever the user copies to the clipboard? The experience would be instantly more personal. Using an arrogant and snarky language, the provided messages also have a unique character to them.
Let's take a look at the final result:
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
As you can see, the hierarchy is as such from top to bottom:
- Mimicking of a native window with window controls
- content
- actions (as of writing, only the copy-to-clipboard)
The implementation
Whenever the user copies the code to the clipboard, a random selection from a predefined array of text snippets gets displayed for short amount of time. The random pick is generated for each code example. To reduce complexity, the text isn't guaranteed to be unique in the scope of the article. Yet b/c there are quite a lot of strings to pick from, collisions have a low probability.
And that's about it! I hope you like this little UX enhancement for copy-to-clipboard actions, maybe it inspired you for UX changes in you own app as well!
- Tom
