Page types - Start page

Use this pattern to help users start a service.

<nav class="hs2-breadcrumb" aria-label="Breadcrumb">
  <div class="hs2-width-container">
    <ol class="hs2-breadcrumb__list">
      <li class="hs2-breadcrumb__item"><a class="hs2-breadcrumb__link" href="#">Home</a></li>
      <li class="hs2-breadcrumb__item"><a class="hs2-breadcrumb__link" href="#">Section</a></li>
      <li class="hs2-breadcrumb__item"><a class="hs2-breadcrumb__link" href="#">Subsection</a></li>
    </ol>
    <p class="hs2-breadcrumb__back"><a class="hs2-breadcrumb__backlink" href="#">Back to Subsection</a></p>
  </div>
</nav>

<div class="hs2-width-container">
  <main class="hs2-main-wrapper" id="maincontent" role="main">
    <div class="hs2-grid-row">
      <div class="hs2-grid-column-two-thirds">

        <h1>Service name goes here</h1>
        <p>Use this service to do something.</p>
        <p>You can use this service if you:</p>
        <ul>
          <li>live in England</li>
          <li>need to get a thing</li>
          <li>need to change a thing</li>
        </ul>

        <h2>Before you start</h2>

        <p>We'll ask you for: ...</p>

        <p>

          <button class="hs2-button hs2-button--start" type="submit">
            Start
          </button>

        </p>

        <p>By using this service you are agreeing to our <a href="#">terms of use</a> and <a href="#">privacy policy</a>.</p>

      </div>
    </div>

  </main>
</div>

{% from 'breadcrumb/macro.njk' import breadcrumb %}
{% from 'button/macro.njk' import button %}

{% block outerContent %}
  {{ breadcrumb({
    items: [
      {
        href: "#",
        text: "Home"
      },
      {
        href: "#",
        text: "Section"
      }
    ],
    href: "#",
    text: "Subsection"
  }) }}
{% endblock %}

{% block content %}
  <div class="hs2-grid-row">
    <div class="hs2-grid-column-two-thirds">

      <h1>Service name goes here</h1>
      <p>Use this service to do something.</p>
      <p>You can use this service if you:</p>
      <ul>
        <li>live in England</li>
        <li>need to get a thing</li>
        <li>need to change a thing</li>
      </ul>

      <h2>Before you start</h2>

      <p>We'll ask you for: ...</p>

      {% from 'button/macro.njk' import button %}

<p>{{ button({
  "text": "Start",
  "classes": "hs2-button--start"
}) }}</p>

      <p>By using this service you are agreeing to our <a href="#">terms of use</a> and <a href="#">privacy policy</a>.</p>

    </div>
  </div>
{% endblock %}

When to use a start page

At the start of a service which involves the user inputting information in order to get something. For example, at the start of an application form.

How to use a start page

Start pages include 4 main elements. These are:

1. the service name: this helps people understand what your service does and whether they need to use it – read more about naming your service on GOV.UK
2. a list of things most users need to know: for example, what your service is, what will happen, what users will get or how much it'll cost
3. the "Start now" call-to-action button
4. a list of other ways to access the service: for example, phone or text relay

Keep your start page focused on helping users get started and successfully complete the service.

A good start page:

• lets users know they're in the right place
• sets expectations: users know what to expect before clicking anything, including whether they're eligible and what the outcome will be
• helps users succeed by telling them what information they must give or documents they need to have
• gives users options if the service is not for them, because it's connected to a wider topic
• is easy to find and ranks highly in search engines, because it uses the language of its users

Read more about designing how content and transactions work together, on GOV.UK.

Put your start page in the right place

Consider where your transaction sits in a wider topic, service or website. Do not disconnect it from its wider context. Place it in a broader information architecture with elements such as the main navigation, internal search and breadcrumbs. This helps users:

• feel confident they're on the right start page
• know if the service is for them and that they're eligible
• avoid dead ends, if they're in the wrong place, and find what they need through surrounding navigation elements

Keep important information above the button

Many users do not look at information below the start button.

If information applies to everyone and they need it to complete the service, put it above the button.

Sometimes it's necessary to put information that only some users need below the button to stop the page getting too long for the majority of users.

Set a helpful URL

Set up a URL that embeds your start page in the wider service, topic or website. Use a verb that reflects the name of the task or service.

If you need to, create a short vanity URL to promote the service in letters or other offline activities which direct people to the service start page.

Make it easy to update your start page

Some start pages need to be updated regularly, sometimes at short notice.

If possible, put your start page in a content management system (CMS) so it's easy for a number of people to amend. It can be difficult to manage if you have it in a separate application and rely on a developer to make changes.

Check your start page includes the correct links

Many websites (including the HS2 website) have policy and contact information links in the footer that relate to the website as a whole. These may not be the right links for your service.

If your start page sits in a wider website, but your service is on an external domain, make sure users can access service-specific policy and contact information, for example by placing links to them within the start page.

What not to include on a start page

Avoid telling people all about the service on the start page. Too much information will distract them.

If you can, check eligibility as part of the service to avoid overloading the start page with criteria.

Do not use an action link on a start page instead of a button.

Accessibility

It's particularly important to keep your start page brief for users with access needs. Consider:

• how a screen reader will read out the content
• how much time it takes for the user to get to the main call to action
• how much information they have to process

Lots of people miss information below the start button, especially:

• people who zoom in or magnify content on the page
• people with screen readers who navigate the page by headings and interactive elements (such as buttons)

Research

This pattern is based on the start page in the GOV.UK Design System, which has been tested over a number of years in a wide range of contexts.

Start now button

We follow the GOV.UK start page pattern and word the start button "Start now".