Patterns

Content design patterns, including making content stand out, external linking, starting an online form, downloading a document and more.

Contents

Links

Links should not open in a new window. This is disorientating for the user. 

If, by exception, a new window is required. The user needs to be told for example:

  • XYZ website (link opens in a new window)

Internal links – links in content 

You can add links anywhere in body text, but not in:  

  • titles
  • summaries
  • subheadings 

Links help people scan content. Do not: 

  • overload the user with too many
  • link to the same tool or webpage throughout your page 

If you have more than 1 link on a page to the same place, use similar link text – these do not need to be identical but should convey the same meaning. 

If your link leads to information rather than starting a task, use the text about that information as the link.  

Example – inline:  

  • Council Taxpayers may get a discount and exemption.

Example – more info:  

  • For more information go to Council Tax discounts and exemptions.

If your link takes the user to a page where they can start a task, start your link with a verb.  

Example:  

  • You can challenge your Council Tax band if you think your home is in the wrong valuation band.

This pattern is for linking to more than 1 internal page in a bulleted list. 

Use it to: 

  • highlight a number of links on the page that are the main calls to action
  • link the user to multiple pages for further information 

Example: 

Other fees may apply: 

  • premises licence
  • gambling licence
  • pavement licence 

Related content – internal links 

Related content/links can only be placed on a service page and they appear at the top, on the right.  

Generally, use them for useful links that are not essential to the main task or user journey.  

Find out more about links in the GDS design system

External links are links to pages that are not hosted on the Woking Borough Council website. 

You should use external links when it: 

  • provides the main source of information
  • is where the user needs to complete a task 

Writing external link text 

Avoid using ‘see’, ‘read’ or ‘view’ in link text.  

Link to a specific page, not the website’s homepage. 

You must make it clear users are leaving woking.gov.uk if you’re using inline links. 

You do not need to use the word ‘website’ or ‘webpages’. 

Examples: 

  • ‘Search for courses and training on Careers Surrey.’
  • ‘Before starting any building work check if you require permission – Planning Portal.’
  • ‘To check if you’re eligible use the benefits calculator – GOV.UK.’
  • ‘For more information go to business rates relief – GOV.UK.’
  • ‘To find a postcode use the Royal Mail’s postcode checker.’ 

Find out more about action links in the NHS design system

Use this pattern to make a key action on a page stand out. Do not use to start a process, use a ‘Start now’ button instead. 

Do not add a full stop to the priority action link. 

Try not to use too action links on the same page, as this lessons their impact and makes individual links stand out less.  

Examples:  

Examples:  

Search the conservation area map 

Go to taxi licensing fees and charges 

Lists with links which takes the user to the same information source, for example, GOV.UK. 

If links go the same page or set of pages, you can use: 

Example 

For guidance on Council Tax visit GOV.UK. You can find information on:  

  • what it is
  • who needs to pay
  • discounts and exemptions 

If there are multiple links directing to GOV.UK, you can use: 

Example 

Visit GOV.UK for information about: 

  • [topic link]
  • [topic link]
  • [topic link] 

Lists with links which takes the user to different information sources. 

Example – bulleted list 

For free and confidential advice about debt and money issues, visit: 

  • Debt Advice Foundation
  • Money Advice Service 

Example – non bulleted list 

???? 

Read more on external link icons – GOV.UK 

There is no need to use an external link icon. This style has been removed from the CMS. 

Your inline text should tell the user where the links takes them. 

Link to the homepage of the named website. 

Example 

External links in landing page navigation 

Linking direct to external websites from the navigation should not be a common action.  

If it’s a necessary action: 

  • make the link text task oriented and front load the sentence with an action – also same as ‘External links in related content’
  • use the summary to list where the user is being directed and to provide more detail and follow approved pattern for ‘summaries’  

To link to an external link on a landing page, create a new ‘external page’ content type. Then you can search for this link on the landing pages to insert it into the page 

Example 

Link title: ‘Challenge your Council Tax band’ 

Link summary: ‘Go to GOV.UK if there’s been a change that affects the property or you think your band is wrong.’ 

Related content – external links 

This should not be the normal approach. Only do when linking to external content is essential.  

Example