Copy button

[sarawilcox]

##What

A component for use to copy pieces of text, links or codes, for example to share links.

See GOV.UK copy button GitHub issue.

##Why

[Please give examples of user needs.]

[sarawilcox]

Copied over from "Give users feedback that an action has been successful" issue.

From @vanessapereira-nhs

While working on the Blood Pressure tool, the team came across a feature to allow the user to copy a link to the tool to be able to share it with another person.

According to the usability heuristic no. 1, we know that the design should always keep users informed about what is going on. So we need a way to show the user that the link was successfully copied. Essentially, we want to give the user feedback when he clicks on the “Copy link to share” action.

We've looked at previous designs from NHS and noticed that there is a solution that shows the feedback message right after the copy action. By talking to the team that designed that solution we now know that:

The team understood from various rounds of testing, that there was a need for this kind of component.
The ‘Copy’ wording worked well on tests, was simple and succinct and people knew what to do.
This "Copied to clipboard" feature is being added to the NHS App’s Design debt backlog.
Note: on the Blood Pressure tool this will need more testing once the tool is developed, so that we can test the feature properly, having in mind accessibility.

Designs from the NHS app homepage (that were tested), once the user clicked on the NHS number:
Copied NHS example

Design for the Blood Pressure tool, once the user clicked on the link above:
Copied BP design

[richkelly13]

The NHS website Multimedia team did a discovery around the use of a copy-link in a video player. This is our user research report:
Copy-Link UR Findings_Jan2022.pptx