Skip to main content
Design resources
Back

Research banner

The research banner invites users to sign up to take part in user research.

When to use

Use this pattern to encourage users to join our research panel.

When not to use

Do not use this pattern in the middle of a user journey as it may interrupt the user.

How it works

You need HMRC Frontend to use this pattern — find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

Show the research banner directly under either the:

The <h2> should say ‘Help make GOV.UK better’.

The link text should say ‘Sign up to take part in research (opens in new tab)’.

To identify where new users are coming from, you must email user.experience@hmrc.gov.uk to get a unique sign up link. In your email, include:

  • the tax.service.gov.uk pages the banner will be displayed on
  • how long the banner will be displayed

Linear journeys, for example forms

Only show the banner at the end of the journey. Do not include a close button.

Open this example in a new tab: Research-banner Display in English Display in Welsh 
              <div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
  <div class="hmrc-user-research-banner__container govuk-width-container">
    <div class="hmrc-user-research-banner__text">
      <h2 class="govuk-heading-s hmrc-user-research-banner__title">
        Help make GOV.UK better
      </h2>
      <a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
        Sign up to take part in research (opens in new tab)
      </a>
    </div>
  </div>
</div>
            
                <div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
  <div class="hmrc-user-research-banner__container govuk-width-container">
    <div class="hmrc-user-research-banner__text">
      <h2 class="govuk-heading-s hmrc-user-research-banner__title">
        Helpwch i wella GOV.UK
      </h2>
      <a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
        Cofrestrwch i gymryd rhan mewn ymchwil (yn agor tab newydd)
      </a>
    </div>
  </div>
</div>
              
                {%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}

{{
  hmrcUserResearchBanner({
    url: "https://www.gov.uk/government/organisations/hm-revenue-customs",
    hideCloseButton: true
  })
}}
              
                  {%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}

{{
  hmrcUserResearchBanner({
    url: "https://www.gov.uk/government/organisations/hm-revenue-customs",
    language: "cy",
    hideCloseButton: true
  })
}}

Non-linear journeys, for example dashboards

Include a close button that says ‘Hide message’.

Open this example in a new tab: Research-banner Display in English Display in Welsh 
              <div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
  <div class="hmrc-user-research-banner__container govuk-width-container">
    <div class="hmrc-user-research-banner__text">
      <h2 class="govuk-heading-s hmrc-user-research-banner__title">
        Help make GOV.UK better
      </h2>
      <a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
        Sign up to take part in research (opens in new tab)
      </a>
    </div>
    <button class="govuk-button govuk-button--secondary hmrc-user-research-banner__close">
      <span aria-hidden="true">Hide message</span>
      <span class="govuk-visually-hidden">Hide message. I do not want to take part in research</span>
    </button>
  </div>
</div>
            
                <div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
  <div class="hmrc-user-research-banner__container govuk-width-container">
    <div class="hmrc-user-research-banner__text">
      <h2 class="govuk-heading-s hmrc-user-research-banner__title">
        Helpwch i wella GOV.UK
      </h2>
      <a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
        Cofrestrwch i gymryd rhan mewn ymchwil (yn agor tab newydd)
      </a>
    </div>
    <button class="govuk-button govuk-button--secondary hmrc-user-research-banner__close">
      <span aria-hidden="true">Cuddio’r neges</span>
      <span class="govuk-visually-hidden">Cuddio’r neges. Dydw i ddim eisiau cymryd rhan mewn ymchwil</span>
    </button>
  </div>
</div>
              
                {%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}

{{
  hmrcUserResearchBanner({
    url: "https://www.gov.uk/government/organisations/hm-revenue-customs"
  })
}}
              
                  {%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}

{{
  hmrcUserResearchBanner({
    url: "https://www.gov.uk/government/organisations/hm-revenue-customs",
    language: "cy"
  })
}}

Research

We need more research. If you have used the research banner, get in touch to share your research findings.

Discuss the research banner on GitHub