Links - external and internal (content)

[sarawilcox]

What

Guidance on writing good external and internal links. (This GitHub issue is now rather dated. The current NHS.UK position is as follows.)

External links

One of the questions which crops up regularly is how to let users know you're taking them to an external website.

We haven’t seen any need for icons to identify external links. GOV removed their external link icon several years ago (GOV blog post). An image or icon won't tell people which site they're going to.

We recommend making it clear where a link will take people to in the link text. So usually that means that the link text should reflect the title of the page it’s taking people to and also include the name of the organisation.

People do this in different ways, for example:

• Read more about stomach cancer on Cancer Research UK
• Cancer Research UK: stomach cancer

(No need for the word website.)

Internal links

Follow the service manual accessibility guidance on Writing good links and form control names.

[sarawilcox]

Some websites do an icon but GDS removed theirs: https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/.

We already have some info in the service manual:

About writing good links in the content style guide: https://service-manual.nhs.uk/content/links

Also on the same page, about not opening new windows/tabs, with 2 exceptions.

About writing good links and form control names - in the accessibility guidance: https://service-manual.nhs.uk/accessibility/content#write-good-link-and-form-control-names

[sarawilcox]

Link text content in external links is being discussed at November 2019 Style Council meeting. Which bits should go in the link? How do we let people know they are going to an external website?

Some examples: “…volunteer at a local school, hospital or community group. Find out how to volunteer on the GOV.UK website”​​

“Your Mind Plan on the Every Mind Matters website sends personalised tips and advice to your email inbox.”

'Read about the risk factors for other types of eye cancer on the Cancer Research UK website.'​

​'Macmillan Cancer Support has more information about oropharyngeal cancer.'

[sarawilcox]

Example from the medicines team:

[sarawilcox]

Re title attributes:They can be used to supplement link text: https://www.w3.org/TR/WCAG20-TECHS/H33.html. Would we ever use them for additional info to clarify/further describe the link? W3C warns against using title attribute in this way because not all tech supports it, and says that anything a user must know before following the link (e.g. a warning) should be in the link text anyway. (If I read this correctly.)

[JackMatthams]

Discussed at the November content style council. We agreed that the title, or at least the topic, of the page you are visiting should be in the link text for external links. We also agreed that we don't always need the word "website", and that "at" or "on" are fine, e.g "on GOV.UK".

However, we agreed that more research is needed into a number of topics, including:

• whether the name of the organisation being linked to should be in the link text
• the accessibility and usability of title attributes
• whether to include action text in external link text
• different approaches to signposting the MHRA yellow card scheme (such as the medicines team linking to "UK safety scheme"), including how many people click on them

[sarawilcox]

We've also been asked for guidance on whether or not to include brackets in links. Looking at the W3C page on links, they don't include the bracket in the link. https://www.w3.org/TR/REC-html40/struct/links.html. It was previously our style to include the brackets. I wonder if there are any accessibility issues here? For example, in VoiceOver, if the brackets are outside the link, VoiceOver voices the bracket. If they're inside the link, it doesn't.

[sarawilcox]

There's some interesting stuff coming out of the NHS.UK information architecture work. @bencullimore, when you have more clarity on this, would you be able to make a recommendation please?

[bencullimore]

What

The NHS website links out to a number of partner organisations/charities/Government website who specialist, in-depth content and services - as it makes sense to link out to information from a specialist rather than duplicating content on our website.

Why

In user testing, a number of teams on the website have noted users clicking links to an external website and not realising its an external website (different from NHS.UK). This has resulted in:

• Users missing links to important/specific information/services on third-party sites (reluctance to click on inline - in-content links)
• Users clicking a link, navigating to external websites - not realising they're on a different website and have no way of getting back (to our website), becoming very disorientated.

Based on these observed problems, the Information architecture team have been testing and validating pattern that

• Is an obvious link (that's clickable)
• Prefixes the name of the organisation to the link text, separated by a colon and page title
• Has the main site URL beneath

Single external link:

Multiple external links:

(examples taken from https://www.nhs.uk/conditions/coronavirus-covid-19/)

User research

We specifically tested this pattern at our lab in London on the 11th February. We tested with 6 people, 5 of whom had different access needs.

Lab 4 analysis headline: Our external link text and styling is working (people know they’re external links.

• P3: Recognises other websites that would provide support - understands that it would take him somewhere else.
• P1: Understands an external link would take you to another website and then uses the native back functionality.
• P3: "I'm on an external website. I'd go back."
• P6: Understands the URL and says this is how he knows it is an external website (recognises the colour difference as an indicator that it isn’t the NHS).
• User 4: Understood that the Desmond link went to a specific programme.
• User 6: "The fact the colour is different and it says gov.uk tells me it's another site".

Following lab 4, we included the pattern in our prototypes and noted users who interacted with them

Lab 5 P3: Spotted Macmillan link and knew what it was - trusted external Macmillan for personal stories.

We've since employed our external linking strategy on our Coronavirus pages https://www.nhs.uk/conditions/coronavirus-covid-19/ and from the looks of our analytics, there's a good spread of users getting through the hub pages to various content pages. This could indicate that the external links aren't distracting users from finding information on our website. But we're also seeing clicks to external links, especially on the top - level 1 hub page. This could suggest that users who require a specific piece of information on an external website - are able to find it.

[sarawilcox]

There is also an issue about wording links that open in new page. I'm closing that ticket and copying the comments from it into this ticket so that we have everything in one place.

Generally, guidance is to say "opens in a new window" in link text for a link that opens on a new page.

During work for the new NHS.UK survey banner, two issues were found with this:

• "(opens in a new window)" pushed the link in question onto 2 lines on small phones, making it harder to read and use.
• Talking about "windows" is outdated, as tabs are more commonly used.

We believe "(opens new page)" is a better option, as it is short and covers both tab and window browsing.

At the January 2020 Style Council meeting, we agreed to change the wording in the service manual to: "If links do go to a new page, tab or window, warn the user by saying: 'Link name (opens new page)' "

This proposed revision is shorter, meaning it will not push the link over to 2 lines on phones. It also covers both tab and window browsing. We agreed that it would be good to test this with users but were happy with the change for now.

However, since the meeting, some colleagues in other professions have questioned this and suggested that we keep the standard wording “Opens in a new window”. It’s been suggested that we try to arrange some testing of "page", “tabs” and “windows”. So we've put implementing this as a content style issue on hold.

Also at the February Style Council meeting, someone questioned whether we should says "Include all of this in the link text" as we do in the service manual currently.

https://service-manual.nhs.uk/content/links

[sarawilcox]

There is now some guidance on links in the NHS.UK 2i process documentation as follows. We need to make sure that what's in the content style guide and the 2i processes are aligned.

• make sure link text matches the H1 of the page it’s linking to as closely as possible

• check links do not redirect (compare the link URL with the URL of the page where the link ends up) – this often happens with links to diarrhoea content

• make sure external links include the name of the website or organisation in the link text – for example, [Read more about stomach cancer on Cancer Research UK]() or [Cancer Research UK: stomach cancer]()

• make sure any acronyms in brackets are inside the link text – for example, [irritable bowel syndrome (IBS)]()

• check links within brackets do not include the brackets in the link text – for example, ([dysphagia]())

• check that internal links use relative URLs...

[SiRose]

I was on the lab that @bencullimore mentions and our ideas worked well for external links grouped together as inset text at the end of a section. That location allows for clarity on the external organisation's name and the root domain.

Inline links can have a trickier context though, as they have to flow within a sentence. It would be great if we could consider how best to present external links in them, especially when the inclusion could be long.

Some bulleted inline links only contain 1 word, so it's tricky to add too much to the link text. The list would look inconsistent and unwieldy if the other links were internal and hence needed nothing added to them. It could distract users' focus.

We know too that users trust the NHS, but we also know that for some people that means they don’t realise they’ve left the NHS website and some that do realise can struggle to return to it. 'External website' in link text lacks direct meaning, this is why 'saying what you mean' led to the inset text hypothesis tested above,

But how to convey 'external website' meaningfully in an inline link can be tricky. For example, the 'Treatments not recommended' section at the end of https://www.nhs.uk/conditions/back-pain/treatment/ contains a bulleted list including 3 links. The first link 'traction' goes to content on the website of the NHS South Tees Hospitals NHS Foundation Trust. That's a lot to fit into link text.

'Traction (external link)' works, as would 'Traction (opens new page)', but they're not as transparent as the inset text example, with its overt inclusion of the organisation's full name and root domain, both of which duly tested to be blatant signposting.

Do we have ideas for how best to be equally direct and meaningful to benefit users when offering short inline links?

[sarawilcox]

Thanks @SiRose. I wonder if Alistair Duggin would have any suggestions for this? Alternatively, I wonder if anyone on the GOV.UK Slack can advise? Would you be interested in checking it out? If not, let me know and I'll follow it up or see if anyone else can.

[Laurenlukasiewicz]

Observations from interviews on June 3rd and 4th (6 interviews)

Tested two pages of Covid-19 vaccine information. One page included this section

Participant 4 made the following comments

• [This is] almost gibberish – why do you need to put GOV.UK first

• I would rather see the page title. Get rid of GOV.UK or put it at the end – doesn’t make for smooth reading

• capitals taking my eye away from what you’re trying to read. Actually something I’d like to see – more detail, side effects

All of the participants exhibited skim reading of pages and looking to headers, bullet points, recognised names of vaccines etc to guide them to sections of relevance to them.

We are potentially going to do more testing on these links, which could include moving the GOV links to a new section (rather than More information), so we will look to see if we get similar comments, regardless of the move.

[sarawilcox]

For info, GOV.UK's guidance on links. (It doesn't include examples of external links.)

[sarawilcox]

An example:

This reads like the adults are on GOV.UK. Does it work to include a dash? E.g. Disability Living Allowance (DLA) for adults - on GOV.UK.

Plus a few notes from a conversation @SiRose and I had.

• We need some leeway in phrases depending on the context. In some contexts "on X" makes sense but other contexts feel like they need "on X's website". (For example, when users don't recognise that X is a website.)
• The IA team has tested showing external links separately from copy, at the end of a section. This allows content designers to be free of sentence context and flow, to state a website or organisation first, then the link text to best match the target H1, plus the root domain. It's much woollier on inline links within sentences, as those concepts can seem restrictive. (The service manual team has also had some success with bottom of page links.)

[Emma37]

Hello, while looking at implementing some external links in an NHS project, I noticed that the service manual suggests the wording "opens in a new window" while GOV.UK suggests the wording "opens in a new tab" as this is more consistent with modern browser behaviour. I wondered if the NHS service manual and GOV.UK should be aligned.

The service manual also may benefit from mentioning the use of target="_blank" and rel="noreferrer noopener" for increased security, as on the GOV.UK site.

Thanks!

References: NHS service manual: https://service-manual.nhs.uk/content/links GOV.UK: https://design-system.service.gov.uk/styles/typography/#external-links

[sarawilcox]

A small team of content designers have been drafting some guidance on the basis of above comments and desk research. Initial draft guidance in Google doc.

We shared the draft guidance with colleagues at December 2021 Content Style Council meeting. No agreement yet. More work needed.

Main headings in draft guidance taken to Style Council:

1. Only add links that support your user’s journey (Action: I'm going to look at analytics in more detail to make sure that cutting back links won't affect a lot of users' journeys.)
2. Put links where they are most helpful (Action: need more evidence)
3. Make link text specific and meaningful (Lots of comments about "Find out about" and "Find out more about" and whether or not to include this in link text.)
4. Include anything the user needs to know before clicking the link (Needs more research and testing, e.g. how to present external links.)
5. Do not add a full-stop to stand-alone links

More detail in notes from December Style Council meeting.

[sarawilcox]

Noted in Publishing Platform user research with users with access/cognitive diversity needs.

Also "a lot of links which can be overwhelming with users seeing lots of random letters and numbers in the long hyperlink". Here is one users' response to a lot of links.

[sarawilcox]

Some UR findings about email links (Publishing Platform):

Email address could be bolder or on a separate line / was looking for a link” P1​

“I would copy and paste it but it would be easier to just click on a link” P2​

Observed that they wouldn’t copy it all but missed the ‘N’ out or included the full stop ​so the email didn't work.

"Email is difficult to read, dots and commas, no blue link to see, need copy and paste into an email” P3​

[sarawilcox]

We've had a request to make our link text examples more inclusive by using "Find out more", rather than "Read more" or "See". For next Style Council meeting.